diff options
| author | s-ol <s+removethis@s-ol.nu> | 2024-03-13 09:50:55 +0000 |
|---|---|---|
| committer | s-ol <s+removethis@s-ol.nu> | 2024-03-13 09:50:55 +0000 |
| commit | 3b8ae78c47704e54a48f4a347f973f2fc74ea2a2 (patch) | |
| tree | ce954b2eaef7f20c60c0f3e803c25f2dd08af4ff | |
| parent | web: reduce and alignt plot margins (diff) | |
| download | t937-serial-3b8ae78c47704e54a48f4a347f973f2fc74ea2a2.tar.gz t937-serial-3b8ae78c47704e54a48f4a347f973f2fc74ea2a2.zip | |
web: split temp display
| -rw-r--r-- | web/index.html | 9 | ||||
| -rw-r--r-- | web/main.js | 9 | ||||
| -rw-r--r-- | web/style.css | 3 |
3 files changed, 16 insertions, 5 deletions
diff --git a/web/index.html b/web/index.html index d62d2b7..73717a7 100644 --- a/web/index.html +++ b/web/index.html @@ -6,7 +6,6 @@ </head> <body> <aside> - <label id="temps"></label> <section> <h1>device</h1> <div> @@ -14,6 +13,14 @@ <button id="connect">connect</button> </div> <div> + <label>chamber temp</label> + <label id="temps_chamber">-</label> + </div> + <div> + <label>controller temp</label> + <label id="temps_controller">-</label> + </div> + <div> <select id="profile" value=""> <option value="">none / manual</option> <option value="0">profile 1</option> diff --git a/web/main.js b/web/main.js index 4d72357..1b5cbda 100644 --- a/web/main.js +++ b/web/main.js @@ -31,7 +31,6 @@ let STATUS = null; // null | 'connecting' | 'idle' | 'manual' | 'running' let START_TIME = null; let END_TIME = null; let TIMEOUT; -let TEMPS = ''; const PLOTS = { temp1: plot.addPlot('temp1'), @@ -41,7 +40,7 @@ const PLOTS = { }; const elements = [ - 'temps', + 'temps_chamber', 'temps_controller', 'connect', 'status', 'profile', 'start', 'read', 'write', 'heat', 'heat_mode', 'cool', 'cool_mode', ]; @@ -56,13 +55,14 @@ const updateUI = () => { el.read.disabled = !ready; el.write.disabled = !ready; - el.temps.innerText = TEMPS; const end = END_TIME ?? Date.now(); const duration = START_TIME && Math.floor((end - START_TIME) / 1000); switch (STATUS) { case null: el.status.innerText = '(disconnected)'; + el.temps_chamber.innerText = '-'; + el.temps_controller.innerText = '-'; break; case 'connecting': @@ -136,7 +136,8 @@ const onMessage = async (msg) => { const temp1 = msg.get16(0); const temp2 = msg.get16(2); const temp3 = msg.get16(4); - TEMPS = `${temp1}°C - ${temp2}°C // ${temp3}°C`; + el.temps_chamber.innerText = `${temp1}°C / ${temp2}°C`; + el.temps_controller.innerText = `${temp3}°C`; if (!STATUS || STATUS === 'connecting') { STATUS = 'idle'; diff --git a/web/style.css b/web/style.css index c3e245e..8bd7380 100644 --- a/web/style.css +++ b/web/style.css @@ -40,6 +40,9 @@ aside button, aside label { min-width: 80px; } +aside div label + label { + text-align: right; +} .grow { flex-grow: 1; |