From 4f74e92c4572685dae89bdd097633cf8f357c0a0 Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 01:16:33 +0200 Subject: [PATCH 01/13] 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 276551064ff6bc0a0b2475142839c04712ec493e Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 02:50:18 +0200 Subject: [PATCH 02/13] 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 314dd72aa60dc15c82aac696d61e022b8224aa4d Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 01:45:56 +0200 Subject: [PATCH 03/13] 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 e4fa961ef0d6d4471bdb2bf1cf3ad4f5f34d7886 Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 02:28:25 +0200 Subject: [PATCH 04/13] 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 }} +
+
From f2c0d67eed48889ec2e970a11577e4dc811bf285 Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 03:11:29 +0200 Subject: [PATCH 05/13] ph00524: Add image of the back PCB side For documentation purposes. --- modules/ph00524/README.md | 4 ++++ modules/ph00524/ph00524-2-back.jpg | 3 +++ 2 files changed, 7 insertions(+) create mode 100644 modules/ph00524/ph00524-2-back.jpg diff --git a/modules/ph00524/README.md b/modules/ph00524/README.md index 6ed5f46..9654b42 100644 --- a/modules/ph00524/README.md +++ b/modules/ph00524/README.md @@ -11,4 +11,8 @@ So far, the connectors seem to match up with the ones shown in the SEM schematic There is also a Z80 based system + an EEPROM on the board. +## Front Side ![Image of PH00524-2](./ph00524-2.jpg) + +## Back Side +![Image of the back side of PH00524-2](./ph00524-2-back.jpg) diff --git a/modules/ph00524/ph00524-2-back.jpg b/modules/ph00524/ph00524-2-back.jpg new file mode 100644 index 0000000..5b9a5bb --- /dev/null +++ b/modules/ph00524/ph00524-2-back.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:846a6ba5e1c64bb081a73b34b4fc506d67582a883c39a3559a78f8f5f50592a1 +size 1526095 From f4339e54effb63353f383646cfa52b784f539cbe Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 01:16:33 +0200 Subject: [PATCH 06/13] 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 07/13] 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 08/13] 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 09/13] 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 }} +
+
From 7a3784d3de1dbee1a09b8c0b91ded21a50040f2f Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 19:43:54 +0200 Subject: [PATCH 10/13] succd: Hint at invalid process values When the succbone connection breaks, add hints to the UI that values may no longer be correct. --- succbone/succd/index.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/succbone/succd/index.html b/succbone/succd/index.html index 8175625..abd5695 100644 --- a/succbone/succd/index.html +++ b/succbone/succd/index.html @@ -410,6 +410,15 @@ window.addEventListener("load", (_) => { socket.addEventListener("close", (event) => { status.innerHTML = "Offline"; status.style = colors.highlightFault; + + // Indicate all process values as unknown + + [failsafe, highpressure, rp, dp, trough, thigh, volts, mbar].forEach((el) => { + if (!el.innerHTML.includes("??")) { + el.innerHTML += "??"; + } + }); + if (connected) { console.log("Socket dead, reconnecting..."); } From 995addbabcaf7179991551de5ea538d2fe73fc3f Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 19:44:55 +0200 Subject: [PATCH 11/13] succd: Update rough vacuum hysteresis once more We see fluctuation slightly above 4e-2 mbar so let's increase the hysteresis value a bit more. --- succbone/succd/main.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/succbone/succd/main.go b/succbone/succd/main.go index 4a39d11..64663a8 100644 --- a/succbone/succd/main.go +++ b/succbone/succd/main.go @@ -14,7 +14,7 @@ var ( flagFake bool flagListenHTTP string flagPressureThresholdRough = ScientificNotationValue(1e-1) - flagPressureThresholdRoughHysteresis = ScientificNotationValue(2e-2) + flagPressureThresholdRoughHysteresis = ScientificNotationValue(3e-2) flagPressureThresholdHigh = ScientificNotationValue(1e-4) flagPressureThresholdHighHysteresis = ScientificNotationValue(2e-5) ) From d5c42a4899cb4fd74881e952f469c7b27064dbf6 Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 19:43:54 +0200 Subject: [PATCH 12/13] succd: Hint at invalid process values When the succbone connection breaks, add hints to the UI that values may no longer be correct. --- succbone/succd/index.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/succbone/succd/index.html b/succbone/succd/index.html index 8175625..abd5695 100644 --- a/succbone/succd/index.html +++ b/succbone/succd/index.html @@ -410,6 +410,15 @@ window.addEventListener("load", (_) => { socket.addEventListener("close", (event) => { status.innerHTML = "Offline"; status.style = colors.highlightFault; + + // Indicate all process values as unknown + + [failsafe, highpressure, rp, dp, trough, thigh, volts, mbar].forEach((el) => { + if (!el.innerHTML.includes("??")) { + el.innerHTML += "??"; + } + }); + if (connected) { console.log("Socket dead, reconnecting..."); } From bd40c4f8df003de1dc1a967e69e208b6781b851f Mon Sep 17 00:00:00 2001 From: Rahix Date: Sat, 5 Oct 2024 19:44:55 +0200 Subject: [PATCH 13/13] succd: Update rough vacuum hysteresis once more We see fluctuation slightly above 4e-2 mbar so let's increase the hysteresis value a bit more. --- succbone/succd/main.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/succbone/succd/main.go b/succbone/succd/main.go index 4a39d11..64663a8 100644 --- a/succbone/succd/main.go +++ b/succbone/succd/main.go @@ -14,7 +14,7 @@ var ( flagFake bool flagListenHTTP string flagPressureThresholdRough = ScientificNotationValue(1e-1) - flagPressureThresholdRoughHysteresis = ScientificNotationValue(2e-2) + flagPressureThresholdRoughHysteresis = ScientificNotationValue(3e-2) flagPressureThresholdHigh = ScientificNotationValue(1e-4) flagPressureThresholdHighHysteresis = ScientificNotationValue(2e-5) )