From f4339e54effb63353f383646cfa52b784f539cbe Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 01:16:33 +0200 Subject: [PATCH 1/4] succd: Fix layout on large screens Make sure the grid cannot grow too large on big screens. Also slightly adjust the breakpoint to avoid some weird artifacts. --- succbone/succd/index.html | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/succbone/succd/index.html b/succbone/succd/index.html index 6be0c1d..2a9cfaa 100644 --- a/succbone/succd/index.html +++ b/succbone/succd/index.html @@ -52,12 +52,20 @@ td > span { height: 10em; } +.graph-container { + background-color: #e8e8e8; + text-align: center; +} + .main-grid { - margin: 2em; + margin-top: 2em; + margin-left: auto; + margin-right: auto; + max-width: 160em; clear: both; display: grid; - grid-template-columns: repeat(auto-fit, minmax(50em, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(54em, 1fr)); column-gap: 2em; row-gap: 2em; } @@ -136,9 +144,9 @@ td > span { -

+

-

+

@@ -170,7 +178,7 @@ let historicalDraw = (w, h) => { // coordinate calculation. canvas.clearRect(0, 0, w, h); - canvas.fillStyle = "#f0f0f0"; + canvas.fillStyle = "#e8e8e8"; canvas.fillRect(0, 0, w, h); // Margins of the main graph window. From 7a56b0fe70acbb913f52c45d4bdaaf1b2b610cc0 Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 02:50:18 +0200 Subject: [PATCH 2/4] succd: Fix mobile layout Use smaller font sizes for mobile devices so the full interface fits on a single screen (mostly). --- succbone/succd/index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/succbone/succd/index.html b/succbone/succd/index.html index 2a9cfaa..90ad5e3 100644 --- a/succbone/succd/index.html +++ b/succbone/succd/index.html @@ -69,6 +69,18 @@ td > span { column-gap: 2em; row-gap: 2em; } + +@media only screen and (max-width: 700px) { + body { + font-size: 6px; + } + table { + font-size: 20px; + } + th { + font-size: 15px; + } +}

From 1e21222705dc9bcf3a159b149096e6bd96d745da Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 01:45:56 +0200 Subject: [PATCH 3/4] succd: Optimize color usage for HP HMI In the process automation world, there is a trend to move away from colorful user-interfaces, towards more "boring" colorschemes. The argument is about situational awareness - by only using colors to highlight abnormal situations, they become instantly recognizable to the operators. This design philosophy is outlined by the ISA-101 [1] under the name "High Performance HMI". While it covers much more than just colors, I think this is the most important part and the one that is most applicable for our usecase. So let's do a bit of HP HMI - reduce colors usage such that only important information is highlighted. [1]: https://www.isa.org/standards-and-publications/isa-standards/isa-standards-committees/isa101 --- succbone/succd/index.html | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/succbone/succd/index.html b/succbone/succd/index.html index 90ad5e3..6a0fda3 100644 --- a/succbone/succd/index.html +++ b/succbone/succd/index.html @@ -317,6 +317,14 @@ window.addEventListener("load", (_) => { let rpoff = document.querySelector("#rpoff"); canvas = document.querySelector("#graph").getContext("2d"); + let colors = { + default: "background-color: #e8e8e8", + highlightNeutral: "background-color: #8282ff", + highlightCaution: "background-color: #ff941a", + highlightFault: "background-color: #f06060", + highlightGood: "background-color: #60f060", + }; + // TODO(q3k): unhardcode this. historicalDraw(1024, 512); @@ -338,7 +346,7 @@ window.addEventListener("load", (_) => { connected = true; console.log("Socket connected!"); status.innerHTML = "Online"; - status.style = "background-color: #60f060;"; + status.style = colors.default; }); socket.addEventListener("message", (event) => { const data = JSON.parse(event.data); @@ -346,47 +354,47 @@ window.addEventListener("load", (_) => { mbar.innerHTML = data.Pirani.Mbar; if (data.Safety.Failsafe) { failsafe.innerHTML = "ON"; - failsafe.style = "background-color: #f06060"; + failsafe.style = colors.highlightFault; } else { failsafe.innerHTML = "OFF"; - failsafe.style = "background-color: #60f060"; + failsafe.style = colors.default; } if (data.Safety.HighPressure) { highpressure.innerHTML = "ON"; - highpressure.style = "background-color: #f06060"; + highpressure.style = colors.default; } else { highpressure.innerHTML = "OFF"; - highpressure.style = "background-color: #60f060"; + highpressure.style = colors.default; } if (data.Pumps.RPOn) { rp.innerHTML = "ON"; - rp.style = "background-color: #60f060"; + rp.style = colors.default; } else { rp.innerHTML = "OFF"; - rp.style = "background-color: #f06060"; + rp.style = colors.highlightNeutral; } if (data.Pumps.DPOn) { dp.innerHTML = "ON"; - dp.style = "background-color: #60f060"; + dp.style = colors.highlightCaution; } else { dp.innerHTML = "OFF"; - dp.style = "background-color: #f06060"; + dp.style = colors.default; } let t = []; if (data.Feedback.RoughReached) { trough.innerHTML = "OK"; - trough.style = "background-color: #60f060"; + trough.style = colors.highlightGood; } else { trough.innerHTML = "NOK"; - trough.style = "background-color: #f06060"; + trough.style = colors.default; } if (data.Feedback.HighReached) { thigh.innerHTML = "OK"; - thigh.style = "background-color: #60f060"; + thigh.style = colors.highlightGood; } else { thigh.innerHTML = "NOK"; - thigh.style = "background-color: #f06060"; + thigh.style = colors.default; } load.innerHTML = data.LoopLoad.toString() + "%"; historicalPush(data.Pirani.MbarFloat); @@ -394,7 +402,7 @@ window.addEventListener("load", (_) => { }); socket.addEventListener("close", (event) => { status.innerHTML = "Offline"; - status.style = "background-color: #f06060;"; + status.style = colors.highlightFault; if (connected) { console.log("Socket dead, reconnecting..."); } From 637f8748a8ebbd46e786dab937ba9fa49823512c Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 02:28:25 +0200 Subject: [PATCH 4/4] succd: Only show voltage on hover Another HP HMI thing: "Only show information that is immediately relevant". Let's hide the pirani voltage as it is mostly no longer interesting to the user. For situations where it is, it can be revealed by hovering over the pirani pressure value. --- succbone/succd/index.html | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/succbone/succd/index.html b/succbone/succd/index.html index 6a0fda3..8175625 100644 --- a/succbone/succd/index.html +++ b/succbone/succd/index.html @@ -70,6 +70,13 @@ td > span { row-gap: 2em; } +.has-hidden .hidden-text { + display: none; +} + +.has-hidden:hover .hidden-text { + display: block; + @media only screen and (max-width: 700px) { body { font-size: 6px; @@ -115,13 +122,13 @@ td > span { - - - - - - - + +
Pirani GaugeVoltage{{ .Pirani.Volts }}
Pressure{{ .Pirani.Mbar }}Pirani Pressure +
{{ .Pirani.Mbar }}
+
+ Voltage: {{ .Pirani.Volts }} +
+