From cb0a22a314fd542467d3f1606aac475f582a0034 Mon Sep 17 00:00:00 2001
From: s-ol <s+removethis@s-ol.nu>
Date: Tue, 12 Mar 2024 18:53:36 +0100
Subject: web: basic styling for sidebar

---
 web/index.html |  8 ++++----
 web/main.js    |  8 ++++++--
 web/plot.js    |  3 +++
 web/style.css  | 36 ++++++++++++++++++++++++++++++++++--
 4 files changed, 47 insertions(+), 8 deletions(-)

(limited to 'web')

diff --git a/web/index.html b/web/index.html
index a9653a6..ee91e01 100644
--- a/web/index.html
+++ b/web/index.html
@@ -10,7 +10,7 @@
       <section>
         <h1>device</h1>
         <div>
-          <label id="status"></label>
+          <label id="status">(disconnected)</label>
           <button id="connect">connect</button>
         </div>
         <div>
@@ -25,11 +25,11 @@
             <option value="6">profile 7</option>
             <option value="7">profile 8</option>
           </select>
-          <button id="start">start</button>
+          <button id="start" disabled>start</button>
         </div>
         <div>
-          <button id="read">read</button>
-          <button id="write">write</button>
+          <button id="read" class="grow" disabled>read</button>
+          <button id="write" class="grow" disabled>write</button>
         </div>
       </section>
       <section>
diff --git a/web/main.js b/web/main.js
index fa4fd37..9209796 100644
--- a/web/main.js
+++ b/web/main.js
@@ -193,7 +193,9 @@ const pwms = [
 	[el.cool, el.cool_mode],
 ];
 for (const [slider, checkbox] of pwms) {
-	slider.onchange = async () => {
+	slider.onchange = async (e) => {
+  	if (!PORT) return;
+
 		checkbox.checked = +slider.value;
 		await send8(FUNC.C_PWM_HEAT, +el.heat.value, el.heat_mode.checked ? ARG.PWM_ON : ARG.PWM_OFF);
 		await send8(FUNC.C_PWM_COOL, +el.cool.value, el.cool_mode.checked ? ARG.PWM_ON : ARG.PWM_OFF);
@@ -204,7 +206,9 @@ for (const [slider, checkbox] of pwms) {
 			updateUI();
 		}
 	};
-	checkbox.onchange = async () => {
+	checkbox.onchange = async (e) => {
+  	if (!PORT) return;
+
 		if (checkbox.checked && +slider.value === 0) {
 			slider.value = 0x64;
 		}
diff --git a/web/plot.js b/web/plot.js
index 6f7e536..b5e023f 100644
--- a/web/plot.js
+++ b/web/plot.js
@@ -58,6 +58,9 @@ const onresize = () => {
 
   x.range([margin, width-2*margin]);
   y.range([height-2*margin, margin]);
+  xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
+  ya.transition().call(d3.axisLeft(y))
+  plot.transition().attr('d', line(POINTS));
 
   xa.attr('transform', `translate(0, ${height - 2*margin})`);
   ya.attr('transform', `translate(${margin}, 0)`);
diff --git a/web/style.css b/web/style.css
index 7838698..c3e245e 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,4 +1,5 @@
-html {
+html, body,
+h1, h2 {
   margin: 0;
   padding: 0;
 }
@@ -6,11 +7,42 @@ html {
 body {
   display: flex;
   min-height: 100vh;
-  margin: 0;
+
+  font-family: system-ui, sans-serif;
 }
 
 aside {
+  display: flex;
+  flex-direction: column;
   padding: 1em;
+  gap: 1em;
+
+  width: 300px;
+  overflow: hidden;
+  resize: horizontal;
+}
+aside section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+aside section > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
+}
+aside input[type=range],
+aside select {
+  max-width: unset;
+  flex-grow: 1;
+}
+aside button,
+aside label {
+  min-width: 80px;
+}
+
+.grow {
+  flex-grow: 1;
 }
 
 #plot {
-- 
cgit v1.2.3