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.
succd: Optimize color usage for HP HMI
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
1 changed files with 61 additions and 26 deletions
--- 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,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...");
            }
Author	SHA1	Message	Date
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