index.html

<!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>