From 1e21222705dc9bcf3a159b149096e6bd96d745da Mon Sep 17 00:00:00 2001
From: Rahix <rahix@rahix.de>
Date: Sat, 5 Oct 2024 01:45:56 +0200
Subject: [PATCH] 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...");
             }