forked from AliceO2Group/DebugGUI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
webapp.html
48 lines (47 loc) · 8.77 KB
/
webapp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<head>
<style>
body {
margin: 0;
padding: 0;
background: grey;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="texture"></canvas>
<script>
let data = {"vtx":[[6,25,4027518735,0.12793,0.000488281],[93,25,4027518735,0.12793,0.000488281],[93,58,4027518735,0.12793,0.000488281],[6,58,4027518735,0.12793,0.000488281],[6,6,4286204457,0.12793,0.000488281],[93,6,4286204457,0.12793,0.000488281],[93,25,4286204457,0.12793,0.000488281],[6,25,4286204457,0.12793,0.000488281],[78,25,2265253125,0.12793,0.000488281],[93,25,2265253125,0.12793,0.000488281],[93,58,2265253125,0.12793,0.000488281],[78,58,2265253125,0.12793,0.000488281],[81.5,31.5658,4283387727,0.12793,0.000488281],[80.5,31.4342,5197647,0.12793,0.000488281],[81.9172,30.0088,4283387727,0.12793,0.000488281],[81.0206,29.4912,5197647,0.12793,0.000488281],[83.0088,28.9172,4283387727,0.12793,0.000488281],[82.4912,28.0206,5197647,0.12793,0.000488281],[84.5658,28.5,4283387727,0.12793,0.000488281],[84.4342,27.5,5197647,0.12793,0.000488281],[86.4342,28.5,4283387727,0.12793,0.000488281],[86.5658,27.5,5197647,0.12793,0.000488281],[87.9912,28.9172,4283387727,0.12793,0.000488281],[88.5088,28.0206,5197647,0.12793,0.000488281],[89.0828,30.0088,4283387727,0.12793,0.000488281],[89.9794,29.4912,5197647,0.12793,0.000488281],[89.5,31.5658,4283387727,0.12793,0.000488281],[90.5,31.4342,5197647,0.12793,0.000488281],[89.5,43.8037,4283387727,0.12793,0.000488281],[90.5,43.9354,5197647,0.12793,0.000488281],[89.0828,45.3607,4283387727,0.12793,0.000488281],[89.9794,45.8784,5197647,0.12793,0.000488281],[87.9912,46.4524,4283387727,0.12793,0.000488281],[88.5088,47.3489,5197647,0.12793,0.000488281],[86.4342,46.8696,4283387727,0.12793,0.000488281],[86.5658,47.8696,5197647,0.12793,0.000488281],[84.5658,46.8696,4283387727,0.12793,0.000488281],[84.4342,47.8696,5197647,0.12793,0.000488281],[83.0088,46.4524,4283387727,0.12793,0.000488281],[82.4912,47.3489,5197647,0.12793,0.000488281],[81.9172,45.3607,4283387727,0.12793,0.000488281],[81.0206,45.8784,5197647,0.12793,0.000488281],[81.5,43.8037,4283387727,0.12793,0.000488281],[80.5,43.9354,5197647,0.12793,0.000488281],[79.3536,56.8536,872060482,0.12793,0.000488281],[78.6464,57.1464,16422466,0.12793,0.000488281],[91.8536,44.3536,872060482,0.12793,0.000488281],[92.1464,43.6464,16422466,0.12793,0.000488281],[91.5,56.5,872060482,0.12793,0.000488281],[92.5,57.5,16422466,0.12793,0.000488281],[5,5,2155900526,0.0605469,0.00146484],[8,8,2155900526,0.0664062,0.00146484],[94,5,2155900526,0.0605469,0.00146484],[91,8,2155900526,0.0664062,0.00146484],[94,59,2155900526,0.0605469,0.00146484],[91,56,2155900526,0.0664062,0.00146484],[5,59,2155900526,0.0605469,0.00146484],[8,56,2155900526,0.0664062,0.00146484],[17.5,18.9,4294967295,0.12793,0.000488281],[17.5,19.9,16777215,0.12793,0.000488281],[13.4298,11.85,4294967295,0.12793,0.000488281],[12.5638,11.35,16777215,0.12793,0.000488281],[21.5702,11.85,4294967295,0.12793,0.000488281],[22.4362,11.35,16777215,0.12793,0.000488281],[27.6667,8,4294967295,0.744141,0.268555],[39.6667,8,4294967295,0.814453,0.268555],[39.6667,20,4294967295,0.814453,0.280273],[27.6667,20,4294967295,0.744141,0.280273],[39,12,4294967295,0.927734,0.0214844],[46,12,4294967295,0.941406,0.0214844],[46,20,4294967295,0.941406,0.0292969],[39,20,4294967295,0.927734,0.0292969],[47,14,4294967295,0.615234,0.03125],[52,14,4294967295,0.625,0.03125],[52,20,4294967295,0.625,0.0371094],[47,20,4294967295,0.615234,0.0371094],[54,14,4294967295,0.662109,0.03125],[59,14,4294967295,0.671875,0.03125],[59,20,4294967295,0.671875,0.0371094],[54,20,4294967295,0.662109,0.0371094],[62,12,4294967295,0.876953,0.0302734],[66,12,4294967295,0.884766,0.0302734],[66,20,4294967295,0.884766,0.0380859],[62,20,4294967295,0.876953,0.0380859],[15,36,4294967295,0.224609,0.0273438],[21,36,4294967295,0.236328,0.0273438],[21,44,4294967295,0.236328,0.0351562],[15,44,4294967295,0.224609,0.0351562],[22,38,4294967295,0.638672,0.03125],[27,38,4294967295,0.648438,0.03125],[27,44,4294967295,0.648438,0.0371094],[22,44,4294967295,0.638672,0.0371094],[28,38,4294967295,0.945312,0.0302734],[35,38,4294967295,0.958984,0.0302734],[35,44,4294967295,0.958984,0.0361328],[28,44,4294967295,0.945312,0.0361328],[36,38,4294967295,0.615234,0.03125],[41,38,4294967295,0.625,0.03125],[41,44,4294967295,0.625,0.0371094],[36,44,4294967295,0.615234,0.0371094],[51,36,4294967295,0.876953,0.0302734],[55,36,4294967295,0.884766,0.0302734],[55,44,4294967295,0.884766,0.0380859],[51,44,4294967295,0.876953,0.0380859],[57,38,4294967295,0.615234,0.03125],[62,38,4294967295,0.625,0.03125],[62,44,4294967295,0.625,0.0371094],[57,44,4294967295,0.615234,0.0371094],[64,38,4294967295,0.697266,0.03125],[69,38,4294967295,0.707031,0.03125],[69,44,4294967295,0.707031,0.0371094],[64,44,4294967295,0.697266,0.0371094],[72,36,4294967295,0.876953,0.0302734],[76,36,4294967295,0.884766,0.0302734],[76,44,4294967295,0.884766,0.0380859],[72,44,4294967295,0.876953,0.0380859],[15,53,4294967295,0.197266,0.0273438],[21,53,4294967295,0.208984,0.0273438],[21,61,4294967295,0.208984,0.0351562],[15,61,4294967295,0.197266,0.0351562],[23,53,4294967295,0.876953,0.0302734],[27,53,4294967295,0.884766,0.0302734],[27,61,4294967295,0.884766,0.0380859],[23,61,4294967295,0.876953,0.0380859],[29,52,4294967295,0.875,0.0117188],[34,52,4294967295,0.884766,0.0117188],[34,61,4294967295,0.884766,0.0205078],[29,61,4294967295,0.875,0.0205078],[36,55,4294967295,0.615234,0.03125],[41,55,4294967295,0.625,0.03125],[41,61,4294967295,0.625,0.0371094],[36,61,4294967295,0.615234,0.0371094],[43,55,4294967295,0.650391,0.03125],[48,55,4294967295,0.660156,0.03125],[48,61,4294967295,0.660156,0.0371094],[43,61,4294967295,0.650391,0.0371094],[58,53,4294967295,0.876953,0.0302734],[62,53,4294967295,0.884766,0.0302734],[62,61,4294967295,0.884766,0.0380859],[58,61,4294967295,0.876953,0.0380859],[64,55,4294967295,0.615234,0.03125],[69,55,4294967295,0.625,0.03125],[69,61,4294967295,0.625,0.0371094],[64,61,4294967295,0.615234,0.0371094],[71,55,4294967295,0.697266,0.03125],[76,55,4294967295,0.707031,0.03125],[76,61,4294967295,0.707031,0.0371094],[71,61,4294967295,0.697266,0.0371094],],"idx":[0,1,2,0,2,3,4,5,6,4,6,7,8,9,10,8,10,11,12,14,16,12,16,18,12,18,20,12,20,22,12,22,24,12,24,26,12,26,28,12,28,30,12,30,32,12,32,34,12,34,36,12,36,38,12,38,40,12,40,42,12,42,43,43,13,12,14,12,13,13,15,14,16,14,15,15,17,16,18,16,17,17,19,18,20,18,19,19,21,20,22,20,21,21,23,22,24,22,23,23,25,24,26,24,25,25,27,26,28,26,27,27,29,28,30,28,29,29,31,30,32,30,31,31,33,32,34,32,33,33,35,34,36,34,35,35,37,36,38,36,37,37,39,38,40,38,39,39,41,40,42,40,41,41,43,42,44,46,48,44,48,49,49,45,44,46,44,45,45,47,46,48,46,47,47,49,48,52,50,51,53,51,52,54,52,53,55,53,54,56,54,55,57,55,56,50,56,57,51,57,50,58,60,62,58,62,63,63,59,58,60,58,59,59,61,60,62,60,61,61,63,62,64,65,66,64,66,67,68,69,70,68,70,71,72,73,74,72,74,75,76,77,78,76,78,79,80,81,82,80,82,83,84,85,86,84,86,87,88,89,90,88,90,91,92,93,94,92,94,95,96,97,98,96,98,99,100,101,102,100,102,103,104,105,106,104,106,107,108,109,110,108,110,111,112,113,114,112,114,115,116,117,118,116,118,119,120,121,122,120,122,123,124,125,126,124,126,127,128,129,130,128,130,131,132,133,134,132,134,135,136,137,138,136,138,139,140,141,142,140,142,143,144,145,146,144,146,147,],"cmd":[252,96,]};
let canvas = document.getElementById("canvas");
canvas.height = canvas.width = 1500;
canvas.width = 1700;
let ctx = canvas.getContext('2d');
ctx.scale(15,15);
ctx.lineWidth = 0.1;
let curr_vertex = 0;
for (let c = 0; c < data.cmd.length; ++c) {
for (let v = curr_vertex; v < curr_vertex + data.cmd[c]; v+=3) {
let raw_color = data.vtx[data.idx[v+2]][2];
ctx.beginPath();
ctx.fillStyle = 'rgb(' + (raw_color & 255) + ',' + (raw_color>>8 & 255) + ',' + (raw_color>>16 & 255) + ',' + (raw_color>>24 & 255)/255 + ')';
console.log('rgba(' + (raw_color & 255) + ',' + (raw_color>>8 & 255) + ',' + (raw_color>>16 & 255) + ',' + (raw_color>>24 & 255)/255 + ')');
ctx.moveTo(data.vtx[data.idx[v]][0], data.vtx[data.idx[v]][1]);
ctx.lineTo(data.vtx[data.idx[v+1]][0], data.vtx[data.idx[v+1]][1]);
ctx.lineTo(data.vtx[data.idx[v+2]][0], data.vtx[data.idx[v+2]][1]);
//ctx.lineTo(data.vtx[data.idx[v]][0], data.vtx[data.idx[v]][1]);
ctx.fill();
}
curr_vertex += data.cmd[c];
}
let texture = document.getElementById("texture");
texture.width = data.tex.w;
texture.height = data.tex.h;
let tctx = texture.getContext('2d');
for (let i = 0; i < data.tex.h; ++i) {
for (let j = 0; j < data.tex.w; ++j) {
tctx.fillStyle = 'rgba(255,255,255,' + data.tex.p[i*data.tex.w+j]/255 + ')';
tctx.fillRect(j, i, 1, 1);
}
}
</script>
</body>