Skip to content

Commit

Permalink
cleanup browser example
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerch
jerch committed Aug 31, 2021
1 parent 4f3eba3 commit 3606df5
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 174 deletions.
168 changes: 18 additions & 150 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,112 +35,32 @@
<br><br>
<label><input type="checkbox" name="slow" id="slow" value="value"> Simulate slow chunks</label>
<br>
<label><input type="color" name="fillColor" id="fillColor" value="#000000" onchange="redraw()"> background color</label>
<br>
<label><input type="number" name="dx" id="dx" value="0" onchange="redraw()"> dx</label>
<br>
<label><input type="number" name="dy" id="dy" value="0" onchange="redraw()"> dy</label>
<br>
<label><input type="number" name="sx" id="sx" value="0" onchange="redraw()"> sx</label>
<br>
<label><input type="number" name="sy" id="sy" value="0" onchange="redraw()"> sy</label>
<br>
<label><input type="number" name="swidth" id="swidth" value="0" onchange="redraw()"> swidth</label>
<br>
<label><input type="number" name="sheight" id="sheight" value="0" onchange="redraw()"> sheight</label>
<label><input type="color" name="fillColor" id="fillColor" value="#000000"> background color</label>
<br><br>
<span id="stats"></span>
<br><br>
Default decoder:<br>
<canvas id="output" style="border: 1px solid black"></canvas>
<br><br>
L2 decoder (wasm):<br>
<canvas id="output_wasm" style="border: 1px solid black"></canvas>
<br><br>
Reencoded with img2sixel:<br>
<canvas id="output2" style="border: 1px solid black"></canvas>
<script src="/dist/bundle.js"></script>

<script id="sampsa" type="application/json"></script>
<script src="/dist/full.umd.js"></script>
<script>

let drawHandle = null;
let imgS = null;
let imgWasm = null;
let wasmDecoder = null;
sixel.DecoderAsync().then(dec => wasmDecoder = dec);
let decoder = null;
sixel.DecoderAsync().then(dec => decoder = dec);

function drawImageWasm() {
const data = wasmDecoder.data32;
const width = wasmDecoder.width;
const height = wasmDecoder.height;
if (!height || !width) {
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 = width;
canvas.height = height;
const target = new ImageData(width, height);
new Uint32Array(target.data.buffer).set(data);
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);
}

/**
* example how to get the img data
*/
function drawImage(img) {
if (!img.height || !img.width) {
return;
}
const canvas = document.getElementById('output');
const ctx = canvas.getContext('2d');
// resize canvas to show full image
canvas.width = img.width;
canvas.height = img.height;
// grab imagedata
// const target = ctx.getImageData(0, 0, img.width, img.height);
const target = new ImageData(img.width, img.height);
img.toPixelData(
// target metrics
target.data, img.width, img.height,
// dx, dy
parseInt(document.getElementById('dx').value), parseInt(document.getElementById('dy').value),
// sx, sy,
parseInt(document.getElementById('sx').value), parseInt(document.getElementById('sy').value),
// width, height
parseInt(document.getElementById('swidth').value), parseInt(document.getElementById('sheight').value),
// fill color
sixel.toRGBA8888(...hexColorToRGB(document.getElementById('fillColor').value)));
ctx.putImageData(target, 0, 0);

// test encoding by re-encoding the output above
//const reEncoded = sixel.image2sixel(target.data, img.width, img.height);
//const dim = new sixel.DimensionDecoder().decodeString(reEncoded.slice(7, -2));
//if (sixel.canUseWasm(dim.width, dim.height, 4096)) {
// wasmDecoder.init(dim.width, dim.height, 0)
// wasmDecoder.decodeString(reEncoded.slice(7, -2));
// const canvas2 = document.getElementById('output2');
// canvas2.width = dim.width;
// canvas2.height = dim.height;
// const ctx2 = canvas2.getContext('2d');
// const target2 = ctx.getImageData(0, 0, dim.width, dim.height);
// new Uint32Array(target2.data.buffer).set(wasmDecoder.data32);
// ctx2.putImageData(target2, 0, 0);
//} else {
// const six2 = new sixel.SixelDecoder();
// six2.decodeString(reEncoded.slice(7, -2)); // strip off enclosing escape sequence
// const canvas2 = document.getElementById('output2');
// canvas2.width = six2.width;
// canvas2.height = six2.height;
// const ctx2 = canvas2.getContext('2d');
// const target2 = ctx.getImageData(0, 0, six2.width, six2.height);
// six2.toPixelData(target2.data, six2.width, six2.height);
// ctx2.putImageData(target2, 0, 0);
//}
}

function hexColorToRGB(color) {
const value = parseInt(color.slice(1), 16);
return [
Expand All @@ -151,92 +71,40 @@
]
}

function redraw() {
if (imgS) drawImage(imgS);
}

async function setImage(s) {
clearInterval(drawHandle);

// create image
const img = new sixel.SixelDecoder();
wasmDecoder.init(sixel.toRGBA8888(...hexColorToRGB(document.getElementById('fillColor').value)));
imgS = img;
// initialize decoder
decoder.init(sixel.toRGBA8888(...hexColorToRGB(document.getElementById('fillColor').value)));

// read in
let start;
if (s === 'wiki') {
start = new Date();
img.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!14!14!14A');
wasmDecoder.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');
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());
//decodeWasm(bytes);
start = new Date();
if (document.getElementById('slow').checked) {
let localHandle = drawHandle = setInterval(() => {
drawImage(img);
drawImageWasm();
}, 100);
let localHandle = drawHandle = setInterval(() => drawImageWasm(), 100);
let i = 0;
const endTens = bytes.length - (bytes.length % 10);
while (i < endTens) {
if (drawHandle !== localHandle) return;
img.decode(bytes, i, i + 10);
wasmDecoder.decode(bytes, i, i + 10);
document.getElementById('stats').innerText = 'width: ' + img.width + '\nheight: ' + img.height;
document.getElementById('swidth').value = img.width;
document.getElementById('sheight').value = img.height;
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) {
img.decode(bytes, endTens, bytes.length);
wasmDecoder.decode(bytes, endTens, bytes.length);
//decodeWasm(bytes.subarray(endTens, endTens + bytes.length));
decoder.decode(bytes, endTens, bytes.length);
}
clearInterval(drawHandle);
} else {
img.decode(bytes);
//decodeWasm(bytes);
wasmDecoder.decode(bytes);

//import('/dist/decode.es6.js').then(m => m.sixelDecodeAsync(bytes)).then(r => {
////sixel_new.sixelDecodeAsync(bytes).then(r => {
// console.log(r);
// const data = r.data32;
// const width = r.width;
// const height = r.height;
// if (!height || !width) {
// return;
// }
// const canvas = document.getElementById('output_wasm');
// const ctx = canvas.getContext('2d');
// // resize canvas to show full image
// canvas.width = width;
// canvas.height = height;
// const target = new ImageData(width, height);
// new Uint32Array(target.data.buffer).set(data);
// ctx.putImageData(target, 0, 0);
//});
decoder.decode(bytes);
}
}
document.getElementById('stats').innerText = 'width: ' + img.width + '\nheight: ' + img.height;
document.getElementById('swidth').value = img.width;
document.getElementById('sheight').value = img.height;


console.log('read & conversion time', (new Date()) - start);

// output
start = new Date();
drawImage(img);
document.getElementById('stats').innerText = 'width: ' + decoder.width + '\nheight: ' + decoder.height;
drawImageWasm();
console.log('output to canvas time', (new Date()) - start);
}


</script>
</body>
</html>
29 changes: 5 additions & 24 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,5 @@
const path = require('path');


// FIXME: to be removed when done with decode|encode|full bundle
const test_bundle = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
library: ['sixel']
}
};

const full_esm = {
entry: `./lib-esm/index.js`,
devtool: 'source-map',
Expand Down Expand Up @@ -161,4 +138,8 @@ const encode_umd = {
mode: 'production'
};

module.exports = [test_bundle, full_esm, full_umd, decode_esm, decode_umd, encode_esm, encode_umd];
module.exports = [
full_esm, full_umd,
decode_esm, decode_umd,
encode_esm, encode_umd
];

0 comments on commit 3606df5

Please sign in to comment.