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.
succd: Hint at invalid process values
2024-10-05 19:46:14 +02:00 · 2024-10-05 19:46:14 +02:00 · 2024-10-05 17:37:10 +00:00 · 2024-10-05 17:37:10 +00:00 · 2024-10-05 17:37:10 +00:00 · 2024-10-05 17:37:10 +00:00
4 changed files with 78 additions and 27 deletions
--- 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)
--- a/modules/ph00524/ph00524-2-back.jpg
+++ b/modules/ph00524/ph00524-2-back.jpg
--- a/succbone/succd/index.html
+++ b/succbone/succd/index.html
@ -52,15 +52,42 @@ 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;
 }
+
+.has-hidden .hidden-text {
+    display: none;
+}
+
+.has-hidden:hover .hidden-text {
+    display: block;
+
+@media only screen and (max-width: 700px) {
+    body {
+        font-size: 6px;
+    }
+    table {
+        font-size: 20px;
+    }
+    th {
+        font-size: 15px;
+    }
+}
 </style>

 <div class="logo"><img src="/favicon.png" /></div>
@ -95,13 +122,13 @@ td > span {

    <table>
        <tr>
-            <th rowspan="2">Pirani Gauge</th>
-            <th>Voltage</th>
-            <td id="volts">{{ .Pirani.Volts }}</td>
-        </tr>
-        <tr>
-            <th>Pressure</th>
-            <td id="mbar">{{ .Pirani.Mbar }}</td>
+            <th>Pirani Pressure</th>
+            <td class="has-hidden">
+                <div id="mbar">{{ .Pirani.Mbar }}</div>
+                <div class="hidden-text" style="color: #606060;">
+                    <span>Voltage: </span><span id="volts">{{ .Pirani.Volts }}</span>
+                </div>
+            </td>
        </tr>
    </table>

@ -136,9 +163,9 @@ td > span {
        </tr>
    </table>

-    <p>
+    <div class="graph-container">
        <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
-    </p>
+    </div>
 </div>

 <p style="font-style: italic; font-size: 12px; margin-top: 5em;">
@ -170,7 +197,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.
@ -297,6 +324,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);

@ -318,7 +353,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);
@ -326,47 +361,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);
@ -374,7 +409,16 @@ window.addEventListener("load", (_) => {
        });
        socket.addEventListener("close", (event) => {
            status.innerHTML = "Offline";
-            status.style = "background-color: #f06060;";
+            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...");
            }
--- 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)
 )
Author	SHA1	Message	Date
Rahix	bd40c4f8df	succd: Update rough vacuum hysteresis once more All checks were successful / test (pull_request) Successful in 9s Details / test (push) Successful in 10s Details We see fluctuation slightly above 4e-2 mbar so let's increase the hysteresis value a bit more.	2024-10-05 19:46:14 +02:00
Rahix	d5c42a4899	succd: Hint at invalid process values When the succbone connection breaks, add hints to the UI that values may no longer be correct.	2024-10-05 19:46:14 +02:00
Rahix	637f8748a8	succd: Only show voltage on hover All checks were successful / test (push) Successful in 10s Details 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.	2024-10-05 17:37:10 +00:00
Rahix	1e21222705	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	2024-10-05 17:37:10 +00:00
Rahix	7a56b0fe70	succd: Fix mobile layout Use smaller font sizes for mobile devices so the full interface fits on a single screen (mostly).	2024-10-05 17:37:10 +00:00
Rahix	f4339e54ef	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.	2024-10-05 17:37:10 +00:00
Rahix	f2c0d67eed	ph00524: Add image of the back PCB side All checks were successful / test (pull_request) Successful in 10s Details / test (push) Successful in 10s Details For documentation purposes.	2024-10-05 03:11:29 +02:00