RISC-V/V203/usb/scope/bin/index.js

const TriggerSrc  = document.getElementById ('trigger_src');
const TriggerMode = document.getElementById ('trigger_mode');
const TriggerEdge = document.getElementById ('trigger_edge');

const MarkerTime  = document.getElementById ('time');
const MarkerVolt  = document.getElementById ('volt');

const TimeBase    = document.getElementById ('time_base');
const MoveElem    = document.getElementById ('move');
const StartBut    = document.getElementById ('Start');
const ConnectBut  = document.getElementById ('Connect');
const Connected   = document.getElementById ('Connected');
const Canvas      = document.getElementById ('canvas');

const REF_Y = 3.3;
const MAX_Y = 4096.0;
const MAX_X = 1024.0;

var   gMZ = { m11 : 1.0, m12 : 0.0, m21 : 0.0, m22 : 1.0, ox : 0.0, oy : 0.0 };
var   gTC = { x : 100.0, y : 2048.0 };
const gTB = new Array ();
const gCA = new Array ();
const gCB = new Array ();
var   gItemToMove = 0, gIndex = 512;
/************************************************************************/
var websocket = null;
var wsUri     = null;
var connected = false;

function js_get_id () {
  var host;
  const locate = window.location;
  if (locate.protocol == 'file:') host = 'ws://unknown';
  else if (locate.port) host = 'ws://' + locate.hostname + ':' + (parseInt(locate.port, 10) + 0) + '/ws';
  else host = 'ws://' + locate.hostname + '/ws';
  console.log ('host is: ' + host);
  return host;
}
function initWebSocket() {
  try {
    if (typeof MozWebSocket == 'function')          WebSocket = MozWebSocket;
    if ( websocket && websocket.readyState == 1 )   websocket.close();
    websocket = new WebSocket( wsUri );
    websocket.onopen = function (evt) {
      ConnectBut.value = 'Disconnect';
      Connected.innerHTML = 'CONNECTED';
      connected = true;
    };
    websocket.onclose = function (evt) {
      ConnectBut.value = 'Connect';
      Connected.innerHTML = 'DISCONNECTED';
      connected = false;
    };
    websocket.onmessage = function (evt) {
      const obj = JSON.parse (evt.data);
      if (Object.hasOwn (obj, 'channel')) {
        RefreshSettings (obj);
        return;
      }
      DrawTrig ();
      DrawPolyLine (0, obj.a, '#FF0000');
      DrawPolyLine (1, obj.b, '#00FF00');
    };
    websocket.onerror = function (evt) {
      console.log ('ERROR: ' + evt.data);
    };
  } catch (exception) {
      console.log ('EXCEPT: ' + exception);
  }
}
/************************************************************************/
function RefreshSettings (obj) {
  console.log (obj);
  document.getElementById('trigger_src' ).value = obj.channel;
  document.getElementById('trigger_mode').value = obj.mode;
  document.getElementById('trigger_edge').value = obj.rising;
  document.getElementById('time_base'   ).value = obj.tim;
  gTC.x = obj.offset; gTC.y = obj.value;
  DrawTrig ();
};
function ReloadMatrix (sz) {
  const xz = sz.x / MAX_X;
  const yz = sz.y / MAX_Y;
  gMZ.m11 = xz; gMZ.m22 = -yz; gMZ.oy = sz.y;
};
function TrPt (x, y) { // matice je diagonalni
  const rx = (x * gMZ.m11 + gMZ.ox);
  const ry = (y * gMZ.m22 + gMZ.oy);
  return { x : rx, y : ry };
};
function InPt (x, y) { // matice je diagonalni
  const rx = Math.round ((x - gMZ.ox) / gMZ.m11);
  const ry = Math.round ((y - gMZ.oy) / gMZ.m22);
  return { x : rx, y : ry };
};
function SendEvent (evt) {
  console.log (evt);
  if (!connected) return;
  const reply = JSON.stringify(evt);
  websocket.send (reply);
}
function DrawTrig () {
  var ctx = Canvas.getContext('2d');
  ctx.clearRect(0, 0, Canvas.width, Canvas.height);
  ctx.lineWidth = 2.0;
  ctx.strokeStyle = 'blue';
  ctx.beginPath();
  var b,e;
  b = TrPt  (24,   gTC.y);
  e = TrPt  (1000, gTC.y);
  ctx.moveTo(b.x, b.y);
  ctx.lineTo(e.x, e.y);
  ctx.stroke();
  ctx.beginPath();
  b = TrPt  (gTC.x, 96);
  e = TrPt  (gTC.x, 4000);
  ctx.moveTo(b.x, b.y);
  ctx.lineTo(e.x, e.y);
  ctx.stroke();
};
function DrawPolyLine (ch, data, col) {
  var out = ch === 0 ? gCA : gCB;
  if (data.length === 1) {
    out [gIndex] = data [0];
    if (ch === 1) {
      gIndex += 1;
      gIndex  = gIndex % 1024;
    }
  } else {
    const max = data.length < 1024 ? data.length : 1024;
    for (let n=0; n<max; n++) {
      out [n] = data [n];
    }
  }
  var ctx = Canvas.getContext('2d');
  ctx.lineWidth = 2.0;
  ctx.strokeStyle = col;
  ctx.beginPath();
  ctx.moveTo  (gTB[0], out[0] * gMZ.m22 + gMZ.oy);
  for (let n=1; n<1024; n++) {
    ctx.lineTo(gTB[n], out[n] * gMZ.m22 + gMZ.oy);
  }
  ctx.stroke();
};
Canvas.addEventListener ('click', function(event) {
  const p = { x : event.clientX, y : event.clientY };
  const q = InPt (p.x, p.y);
  switch (gItemToMove) {
    case 0: gTC.y = q.y; SendEvent ({ type : "trg_val", value: q.y }); break;
    case 1: gTC.x = q.x; SendEvent ({ type : "trg_ofs", value: q.x }); break;
    default: return;
  };
  DrawTrig ();
});
/************************************************************************/
TriggerSrc.onchange = (event) => {
  const e = { type : "trg_src", value : parseInt(event.target.value, 10) };
  SendEvent (e);
};
TriggerMode.onchange = (event) => {
  const e = { type : "trg_mod", value : parseInt(event.target.value, 10) };
  SendEvent (e);
  const res = event.target.value;
  if (e.value === 2) {
    StartBut.disabled = false;
  } else {
    StartBut.disabled = true;
  }
};
TriggerEdge.onchange = (event) => {
  const e = { type : "trg_edg", value : parseInt(event.target.value, 10) };
  SendEvent (e);
};
TimeBase.onchange = (event) => {
  const e = { type : "tim_bas", value : parseInt(event.target.value, 10) };
  SendEvent (e);
};
MoveElem.onchange = (event) => {
  const e = { type : "mov_ele", value : parseInt(event.target.value, 10) };
  gItemToMove = e.value;
  console.log(e);
};
MarkerTime.onclick = (event) => {
  console.log ('time_mark');
};
MarkerVolt.onclick = (event) => {
  console.log ('volt_mark');
};
window.onload = (event) => {
  const dim = { x : Canvas.clientWidth, y : Canvas.clientHeight };
  Canvas.width = dim.x; Canvas.height = dim.y;
  ReloadMatrix (dim);
  for (let n=0; n<MAX_X; n++) {
    gTB.push (n * gMZ.m11 + gMZ.ox);
    gCA.push (2000);
    gCB.push (1000);
  }
  wsUri = js_get_id ();
};
function Connect () {
  if (connected) {
    websocket.close();
  } else {
    initWebSocket ();
  }
  /*
  DrawTrig ();
  const d1 = [10,20,30,40,50];
  const d2 = [3000];
  DrawPolyLine (0, d1, '#FF0000');
  DrawPolyLine (1, d2, '#00FF00');
  */
};
function Start () {
  SendEvent ({ type : 'start', value : 1 });
};