Quantum/bin/well.js

var gWASM = null; // WASM -> global object
var Animate = 0;
var canvas  = document.getElementById('canvas');
var context = canvas.getContext('2d');
var bgImage = new Image();
window.onload = async function() {
  const memory = new WebAssembly.Memory({ initial: 128 });
  if  (!memory) {
    console.log ('!!! WebAssembly not supported');  return;
  }
  const importObject = {
    env: { memory },
    imports: {            // importované funkce do wasm
      PrintOut : (ptr, len) => {
        const view = new Uint8Array (memory.buffer, ptr, len);
        const utf8decoder = new TextDecoder();
        console.log (utf8decoder.decode(view));
      },
      memoryGrow :  (len) => {
        console.log ('Growing the memory by ' + len.toString() + '. 64K blocks');
        importObject.env.memory.grow (len);
      },
    },
  };
  const response = await fetch('./well.wasm');
  const bytes    = await response.arrayBuffer();
  const module   = await WebAssembly.instantiate(bytes, importObject);
  gWASM = {
    asm : module.instance.exports,
    mem : memory,
  };
  gWASM.asm.Init(memory.buffer.byteLength);
  
  window.addEventListener('resize', resizeCanvas, false);
  resizeCanvas();
  ClearWeights();
  
  const id = document.getElementById ('speed');
  id.value = 1;
}
function SetSpeed () {
  const id = document.getElementById ('speed');
  gWASM.asm.setSpeed (parseInt (id.value));
  document.getElementById ('showspeed').innerHTML = 'Rychlost : ' + id.value;
}
function StartStop () {
  Animate = gWASM.asm.gEnabled ();
  const id = document.getElementById ('animate');
  if (Animate) id.innerHTML = 'Stop';
  else         id.innerHTML = 'Vývoj';
}
function SetWeight (n) {
  const sid = 'Weight' + n;
  const val = document.getElementById (sid).value;
  const m = n + 1;
  const out = m.toString() + ' : ' + val.toString() + '%';
  document.getElementById('weightText').innerHTML = out;
  gWASM.asm.setWeight (n, parseInt (val));
  drawPass ();
}
function ClearWeights () {
  for (i=0; i<10; i++) {
    const sid = 'Weight' + i;
    document.getElementById (sid).value = 0;
    document.getElementById('weightText').innerHTML = 'vynulováno';
    gWASM.asm.setWeight (i,0);
  }
  gWASM.asm.Reset();
  drawPass();
}
function resizeCanvas() {
  const width   = canvas.clientWidth;
  const height  = canvas.clientHeight;
  canvas.width  = width;
  canvas.height = height;
  gWASM.asm.graph (width, height);
  drawStuff ();
  window.setTimeout (ReplotPass, 50);
}
function drawStuff() {  
  context.clearRect(0, 0, canvas.widht, canvas.height);
  delete bgImage;
  bgImage = backup (gWASM.asm.bg_data());
  context.drawImage (bgImage, 0, 0);
  const fgImage = backup (gWASM.asm.fg_data());
  context.drawImage (fgImage, 0, 0);
}
function drawPass() {
  const fgImage = backup (gWASM.asm.fg_data());
  context.clearRect(0, 0, canvas.widht, canvas.height);
  context.drawImage (bgImage, 0, 0);
  context.drawImage (fgImage, 0, 0);
}
function ReplotPass () {
  if (Animate) {
    // console.log ('Pass');
    const fgImage = backup (gWASM.asm.gStep());
    context.clearRect(0, 0, canvas.widht, canvas.height);
    context.drawImage (bgImage, 0, 0);
    context.drawImage (fgImage, 0, 0);
  }
  window.setTimeout (ReplotPass, 20);
}
function backup (m_Data) {
  const buffer = gWASM.mem.buffer;
  const memarr = new Uint32Array (buffer, m_Data, 2);
  const canvas = document.getElementById('canvas');
  const width  = canvas.width;
  const height = canvas.height;
  const tmpcvs = new OffscreenCanvas(width, height);
  const tmpctx = tmpcvs.getContext('2d');
  const bytes  = new ImageData (new Uint8ClampedArray (buffer, memarr[0], memarr[1]), width, height);
  tmpctx.putImageData (bytes, 0, 0);
  return tmpcvs; // vrati obrazek
}