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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sixel test</title>
</head>
<body>
<button onclick="setImage('wiki')">wiki</button>
<button onclick="setImage('biplane_clean.six')">biplane</button>
<button onclick="setImage('boticelli_clean.six')">boticelli</button>
<button onclick="setImage('cat2_clean.six')">cat2</button>
<button onclick="setImage('chess_clean.six')">chess</button>
<button onclick="setImage('demo05_clean.six')">demo05</button>
<button onclick="setImage('gnuplot_clean.six')">gnuplot</button>
<button onclick="setImage('leonardo_clean.six')">leonardo</button>
<button onclick="setImage('michael_clean.six')">michael</button>
<button onclick="setImage('oriole_clean.six')">oriole</button>
<button onclick="setImage('oriole2_clean.six')">oriole2</button>
<button onclick="setImage('rose16_clean.six')">rose16</button>
<button onclick="setImage('sampsa1_clean.sixel')">sampsa</button>
<button onclick="setImage('sampsa_reencoded_clean.six')">sampsa reencoded</button>
<button onclick="setImage('screen_clean.six')">screen</button>
<button onclick="setImage('sem_clean.six')">sem</button>
<button onclick="setImage('space_clean.six')">space</button>
<button onclick="setImage('testhlong_clean.six')">testhlong</button>
<button onclick="setImage('time_clean.six')">time</button>
<button onclick="setImage('trontank_clean.six')">trontank</button>
<button onclick="setImage('zx81_clean.six')">zx81</button>
<button onclick="setImage('test1_clean.sixel')">test1</button>
<button onclick="setImage('test2_clean.sixel')">test2</button>
<br><br>
<label><input type="checkbox" name="slow" id="slow" value="value"> Simulate slow chunks</label>
<br>
<label><input type="checkbox" name="m1" id="m1" value="value"> Force M1 Mode (truncate: false)</label>
<br>
<label><input type="color" name="fillColor" id="fillColor" value="#000000"> background color</label>
<br><br>
<span id="stats"></span>
<br>
<span id="decodetime"></span>
<br><br>
<canvas id="output_wasm" style="border: 1px solid black"></canvas>
<script src="/dist/full.umd.js"></script>
<script>
let drawHandle = null;
let decoder = null;
sixel.DecoderAsync().then(dec => decoder = dec);
function drawImageWasm() {
if (!decoder.height || !decoder.width) {
return;
}
const canvas = document.getElementById('output_wasm');
const ctx = canvas.getContext('2d');
// resize canvas to show full image
canvas.width = decoder.width;
canvas.height = decoder.height;
const target = new ImageData(decoder.width, decoder.height);
new Uint32Array(target.data.buffer).set(decoder.data32);
ctx.putImageData(target, 0, 0);
}
function hexColorToRGB(color) {
const value = parseInt(color.slice(1), 16);
return [
(value >> 16) & 0xFF,
(value >> 8) & 0xFF,
value & 0xFF,
255
]
}
async function setImage(s) {
clearInterval(drawHandle);
// initialize decoder
decoder.init(
// fillColor - BG color
sixel.toRGBA8888(...hexColorToRGB(document.getElementById('fillColor').value)),
// palette (null: dont change, undefined: pull default)
undefined,
// paletteLimit - max usable palette slots
256,
// truncate - whether to cut at raster dimensions (false - always M1 mode, true - maybe M2)
!document.getElementById('m1').checked
);
// read in
if (s === 'wiki') {
decoder.decodeString('#0;2;0;0;0#1;2;100;100;0#2;2;0;100;0#1~~@@vv@@~~@@~~~~@@vv@@~~@@~~~~@@vv@@~~@@~~$#2??}}GG}}??}}????}}GG}}??}}????}}GG}}??}}??$-#1!42A');
} else {
const response = await fetch('/testfiles/' + s);
const bytes = new Uint8Array(await response.arrayBuffer());
if (document.getElementById('slow').checked) {
// inspect slow transmission image construction
// (dont copy this, its just a wild hack w'o proper async state handling)
document.getElementById('decodetime').innerText = '';
let localHandle = drawHandle = setInterval(() => drawImageWasm(), 100);
let i = 0;
const endTens = bytes.length - (bytes.length % 10);
while (i < endTens) {
if (drawHandle !== localHandle) return;
decoder.decode(bytes, i, i + 10);
document.getElementById('stats').innerText = 'width: ' + decoder.width + '\nheight: ' + decoder.height;
await new Promise(resolve => setTimeout(resolve, 1));
i += 10;
}
if (bytes.length % 10) {
decoder.decode(bytes, endTens, bytes.length);
}
clearInterval(drawHandle);
} else {
const start = Date.now();
decoder.decode(bytes);
document.getElementById('decodetime').innerText = 'decoding time: ' + (Date.now() - start) + 'ms';
}
}
document.getElementById('stats').innerText = 'width: ' + decoder.width + '\nheight: ' + decoder.height;
drawImageWasm();
}
</script>
</body>
</html>
|
