123 lines
5.6 KiB
HTML
123 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Osciloskop</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 98%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.canvas {
|
|
width: 98vw;
|
|
height: 78vh;
|
|
background-color:black;
|
|
}
|
|
.frame1 {
|
|
width: 90%;
|
|
margin: auto;
|
|
background-color: #FFFFC0;
|
|
border: 10px solid #F0C0F0;
|
|
}
|
|
fieldset {
|
|
background-color: #C0FFC0;
|
|
height: 80%;
|
|
}
|
|
tr,td {
|
|
height: 100%;
|
|
}
|
|
.start {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" class="canvas"></canvas>
|
|
<div class="frame1">
|
|
<table><tr>
|
|
<td>
|
|
<div><input type="button" value="Connect" id="Connect" onclick="Connect();" /></div>
|
|
<div><p id="Connected">Disconnected</p></div>
|
|
</td>
|
|
<td><fieldset>
|
|
<legend>Trigger</legend>
|
|
<div><select id="trigger_src" name="trigger_src">
|
|
<option value="0">Channel A</option>
|
|
<option value="1">Channel B</option>
|
|
</select></div>
|
|
<div><select id="trigger_mode" name="trigger_mode">
|
|
<option value="0">Auto </option>
|
|
<option value="1">Normal</option>
|
|
<option value="2">Single</option>
|
|
</select></div>
|
|
<div><select id="trigger_edge" name="trigger_edge">
|
|
<option value="0">Rissing</option>
|
|
<option value="1">Falling</option>
|
|
</select></div>
|
|
</fieldset></td>
|
|
<td><fieldset>
|
|
<legend>Time Base</legend>
|
|
<div><select id="time_base" name="time_base">
|
|
<option value="0">2μs</option> <option value="1">5μs</option> <option value="2">10μs</option>
|
|
<option value="3">20μs</option> <option value="4">50μs</option> <option value="5">100μs</option>
|
|
<option value="6">200μs</option><option value="7">500μs</option><option value="8">1ms</option>
|
|
<option value="9">2ms</option> <option value="10">5ms</option> <option value="11">10ms</option>
|
|
<option value="12">20ms</option> <option value="13">50ms</option> <option value="14">100ms</option>
|
|
<option value="15">200ms</option><option value="16">500ms</option><option value="17">1s</option>
|
|
</select></div>
|
|
</fieldset></td>
|
|
<td><fieldset>
|
|
<legend>Markers</legend>
|
|
<div><input type="radio" id="time" name="markers" value="time" checked /><labelfor="time">Time</label></div>
|
|
<div><input type="radio" id="volt" name="markers" value="volt" /><labelfor="volt">Voltage</label></div>
|
|
</fieldset></td>
|
|
<td><fieldset>
|
|
<legend>Item to move</legend>
|
|
<div><select id="move" name="move">
|
|
<option value="0">Trigger value</option>
|
|
<option value="1">Trigger offset</option>
|
|
<option value="2">Marker A</option>
|
|
<option value="3">Marker B</option>
|
|
<option value="4">Time base zoom</option>
|
|
</select></div>
|
|
</fieldset></td>
|
|
<td><fieldset>
|
|
<legend>Channel A</legend>
|
|
<div><select id="setcha" name="setcha">
|
|
<option value="0">100mV</option><option value="1">200mV</option><option value="2">500mV</option>
|
|
<option value="3">1V</option><option value="4">2V</option><option value="5">5V</option>
|
|
<option value="6">10V</option><option value="7">20V</option><option value="8">50V</option>
|
|
</select></div>
|
|
</fieldset></td>
|
|
<td><fieldset>
|
|
<legend>Channel B</legend>
|
|
<div><select id="setchb" name="setchb">
|
|
<option value="0">100mV</option><option value="1">200mV</option><option value="2">500mV</option>
|
|
<option value="3">1V</option><option value="4">2V</option><option value="5">5V</option>
|
|
<option value="6">10V</option><option value="7">20V</option><option value="8">50V</option>
|
|
</select></div>
|
|
</fieldset></td>
|
|
<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>
|