add markers, text
This commit is contained in:
Kizarm
parent
2a7cc229fa
commit
26ac333c82
2 changed files with 123 additions and 10 deletions
|
|
@ -88,6 +88,20 @@
|
|||
<td><input type="button" class="start" id="Start" value="Start" onclick="Start();" disabled></td>
|
||||
</tr></table>
|
||||
</div>
|
||||
<div class="frame1"><h2>Poznámky k realizaci.</h2>
|
||||
<p>V zásadě to lze udělat jako webovou aplikaci čistě v javascriptu. Musí se tomu pomoct WebSocket serverem,
|
||||
který zprostředkuje komunikaci se sériovým portem. Chrome sice asi má nějakou podporu sériového portu
|
||||
přímo v browseru, ale bůhví jak to funguje. Přes webové sokety lze data na obě strany honit jako JSON,
|
||||
je to celkem rychlé a snese to i dlouhé pakety. Přesto nestíhá zobrazovat v řádu ms, možná by stálo za to
|
||||
udělat to zobrazování ve smyčce událostí např. pomocí window.requestAnimationFrame(). Je ale možné,
|
||||
že problém je už v převodu těch dat z JSON do objektu.
|
||||
</p>Zobrazování probíhá tak, že pomocné objekty jako markery, text atd. se vykreslí do pomocného canvasu
|
||||
(obrázku), ten se pak vykreslí na obrazovku a přes něj se plácnou jen čáry kanálů. Snad je to tak rychlejší.
|
||||
Není doděláno zoomování časové základny, bylo by to složité a nepovažuji to za důležité. Stejně tak
|
||||
není korektní změna velikosti okna, ale stačí dát refresh.
|
||||
<p>
|
||||
</p>
|
||||
</div>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,22 @@ const ConnectBut = document.getElementById ('Connect');
|
|||
const Connected = document.getElementById ('Connected');
|
||||
const Canvas = document.getElementById ('canvas');
|
||||
var gBGCanvas = null;
|
||||
var gMark = {
|
||||
type : 'time',
|
||||
volt : { a : 0.5, b : 1.0 },
|
||||
time : { a : 100, b : 200 },
|
||||
};
|
||||
|
||||
const REF_Y = 3.3;
|
||||
const MAX_Y = 4096.0;
|
||||
const MAX_X = 1024.0;
|
||||
const gTimeStep = [
|
||||
2.0e-6, 5.0e-6, 10.0e-6,
|
||||
2.0e-5, 5.0e-5, 10.0e-5,
|
||||
2.0e-4, 5.0e-4, 10.0e-4,
|
||||
2.0e-3, 5.0e-3, 10.0e-3,
|
||||
2.0e-2, 5.0e-2, 10.0e-2,
|
||||
2.0e-1, 5.0e-1, 1.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 };
|
||||
|
|
@ -58,9 +70,9 @@ function initWebSocket() {
|
|||
RefreshSettings (obj);
|
||||
return;
|
||||
}
|
||||
DrawTrig ();
|
||||
DrawPolyLine (0, obj.a, '#00FF00');
|
||||
DrawPolyLine (1, obj.b, '#FF0000');
|
||||
PrepareChannel (0, obj.a);
|
||||
PrepareChannel (1, obj.b);
|
||||
DrawAll ();
|
||||
};
|
||||
websocket.onerror = function (evt) {
|
||||
console.log ('ERROR: ' + evt.data);
|
||||
|
|
@ -77,8 +89,8 @@ function RefreshSettings (obj) {
|
|||
document.getElementById('trigger_edge').value = obj.rising;
|
||||
document.getElementById('time_base' ).value = obj.tim;
|
||||
gTC.x = obj.offset; gTC.y = obj.value;
|
||||
DrawBG ();
|
||||
DrawTrig ();
|
||||
PrepareBG();
|
||||
DrawAll ();
|
||||
};
|
||||
function ReloadMatrix (sz) {
|
||||
const xz = sz.x / MAX_X;
|
||||
|
|
@ -101,7 +113,7 @@ function SendEvent (evt) {
|
|||
const reply = JSON.stringify(evt);
|
||||
websocket.send (reply);
|
||||
};
|
||||
function DrawBG () {
|
||||
function PrepareBG () {
|
||||
var ctx = gBGCanvas.getContext('2d');
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, gBGCanvas.width, gBGCanvas.height);
|
||||
|
|
@ -120,13 +132,80 @@ function DrawBG () {
|
|||
ctx.moveTo(b.x, b.y);
|
||||
ctx.lineTo(e.x, e.y);
|
||||
ctx.stroke();
|
||||
ctx.save();
|
||||
// dopsat grid, markers
|
||||
ctx.lineWidth = 1.0;
|
||||
ctx.strokeStyle = '#808080';
|
||||
ctx.setLineDash([4, 10]);
|
||||
const stepx = 100, stepm = MAX_Y / REF_Y, stepy = 0.5 * stepm;
|
||||
for (let x=stepx; x<MAX_X; x+=stepx) {
|
||||
ctx.beginPath();
|
||||
b = TrPt (x, 0);
|
||||
ctx.moveTo(b.x, b.y);
|
||||
e = TrPt (x, MAX_Y);
|
||||
ctx.lineTo(e.x, e.y);
|
||||
ctx.stroke();
|
||||
}
|
||||
for (let y=stepy; y<MAX_Y; y+=stepy) {
|
||||
ctx.beginPath();
|
||||
b = TrPt (0, y);
|
||||
ctx.moveTo(b.x, b.y);
|
||||
e = TrPt (MAX_X, y);
|
||||
ctx.lineTo(e.x, e.y);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.restore ();
|
||||
ctx.lineWidth = 2.0;
|
||||
ctx.strokeStyle = '#FFFF00';
|
||||
var ba, bb, ea, eb;
|
||||
if (gMark.type === 'time') {
|
||||
ba = TrPt (gMark.time.a, 0);
|
||||
ea = TrPt (gMark.time.a, MAX_Y - 256);
|
||||
bb = TrPt (gMark.time.b, 0);
|
||||
eb = TrPt (gMark.time.b, MAX_Y - 256);
|
||||
} else {
|
||||
ba = TrPt (0, gMark.volt.a * stepm);
|
||||
ea = TrPt (MAX_Y, gMark.volt.a * stepm);
|
||||
bb = TrPt (0, gMark.volt.b * stepm);
|
||||
eb = TrPt (MAX_Y, gMark.volt.b * stepm);
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(ba.x, ba.y);
|
||||
ctx.lineTo(ea.x, ea.y);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(bb.x, bb.y);
|
||||
ctx.lineTo(eb.x, eb.y);
|
||||
ctx.stroke();
|
||||
|
||||
var A,B,D;
|
||||
const timz = gTimeStep [parseInt (TimeBase.value, 10)];
|
||||
if (gMark.type === 'time') {
|
||||
const d = (gMark.time.b - gMark.time.a) * timz;
|
||||
const z = d === 0 ? 0 : 1.0 / d;
|
||||
A = (gMark.time.a * timz).toExponential(2) + 's';
|
||||
B = (gMark.time.b * timz).toExponential(2) + 's';
|
||||
D = d.toExponential(2) + 's, f='+ z.toExponential(2) + 'Hz';
|
||||
} else {
|
||||
A = gMark.volt.a.toFixed(2) + 'V';
|
||||
B = gMark.volt.b.toFixed(2) + 'V';
|
||||
D =(gMark.volt.b - gMark.volt.a).toFixed(2) + 'V';
|
||||
}
|
||||
const txt = '0.5V/d, Mark A:' + A + ', B:' + B + ', Δ:' + D;
|
||||
ctx.font = '16px Arial';
|
||||
ctx.fillStyle = '#00FFFF';
|
||||
ctx.fillText(txt,100,20);
|
||||
};
|
||||
function DrawTrig () {
|
||||
function DrawAll () {
|
||||
DrawBG ();
|
||||
DrawPolyLine (0, '#00FF00');
|
||||
DrawPolyLine (1, '#FF0000');
|
||||
}
|
||||
function DrawBG () {
|
||||
var context = Canvas.getContext('2d');
|
||||
context.drawImage (gBGCanvas, 0, 0);
|
||||
};
|
||||
function DrawPolyLine (ch, data, col) {
|
||||
function PrepareChannel (ch, data) {
|
||||
var out = ch === 0 ? gCA : gCB;
|
||||
if (data.length === 1) {
|
||||
out [gIndex] = data [0];
|
||||
|
|
@ -140,6 +219,9 @@ function DrawPolyLine (ch, data, col) {
|
|||
out [n] = data [n];
|
||||
}
|
||||
}
|
||||
}
|
||||
function DrawPolyLine (ch, col) {
|
||||
var out = ch === 0 ? gCA : gCB;
|
||||
var ctx = Canvas.getContext('2d');
|
||||
ctx.lineWidth = 2.0;
|
||||
ctx.strokeStyle = col;
|
||||
|
|
@ -150,16 +232,27 @@ function DrawPolyLine (ch, data, col) {
|
|||
}
|
||||
ctx.stroke();
|
||||
};
|
||||
function MoveMarker (n, p) {
|
||||
const q = InPt (p.x, p.y);
|
||||
const m = REF_Y / MAX_Y;
|
||||
if (gMark.type === 'time') {
|
||||
if (n === 0) { gMark.time.a = q.x; } else { gMark.time.b = q.x; }
|
||||
} else {
|
||||
if (n === 0) { gMark.volt.a = q.y * m; } else { gMark.volt.b = q.y * m; }
|
||||
}
|
||||
};
|
||||
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;
|
||||
case 2: MoveMarker (0, p); break;
|
||||
case 3: MoveMarker (1, p); break;
|
||||
default: return;
|
||||
};
|
||||
DrawBG ();
|
||||
DrawTrig ();
|
||||
PrepareBG ();
|
||||
DrawAll ();
|
||||
});
|
||||
/************************************************************************/
|
||||
TriggerSrc.onchange = (event) => {
|
||||
|
|
@ -191,9 +284,15 @@ MoveElem.onchange = (event) => {
|
|||
};
|
||||
MarkerTime.onclick = (event) => {
|
||||
console.log ('time_mark');
|
||||
gMark.type = 'time';
|
||||
PrepareBG ();
|
||||
DrawAll ();
|
||||
};
|
||||
MarkerVolt.onclick = (event) => {
|
||||
console.log ('volt_mark');
|
||||
gMark.type = 'volt';
|
||||
PrepareBG ();
|
||||
DrawAll ();
|
||||
};
|
||||
window.onload = (event) => {
|
||||
const dim = { x : Canvas.clientWidth, y : Canvas.clientHeight };
|
||||
|
|
|
|||
Loading…
Reference in a new issue