From 4f74e92c4572685dae89bdd097633cf8f357c0a0 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. -- 2.45.2 From 276551064ff6bc0a0b2475142839c04712ec493e 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; + } +}

-- 2.45.2 From 314dd72aa60dc15c82aac696d61e022b8224aa4d 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..."); } -- 2.45.2 From e4fa961ef0d6d4471bdb2bf1cf3ad4f5f34d7886 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 }} +
+
-- 2.45.2