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