fafo/jeol-t330a
15
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

succd: Optimize color usage for HP HMI

Browse source 
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
This commit is contained in:
Rahix 2024-10-05 01:45:56 +02:00
parent 276551064f
commit 314dd72aa6
1 changed files with 22 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

36
succbone/succd/index.html
View file

@ -317,6 +317,14 @@ window.addEventListener("load", (_) => {
let rpoff = document.querySelector("#rpoff"); let rpoff = document.querySelector("#rpoff");
canvas = document.querySelector("#graph").getContext("2d"); 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. // TODO(q3k): unhardcode this.
historicalDraw(1024, 512); historicalDraw(1024, 512);
@ -338,7 +346,7 @@ window.addEventListener("load", (_) => {
connected = true; connected = true;
console.log("Socket connected!"); console.log("Socket connected!");
status.innerHTML = "Online"; status.innerHTML = "Online";
status.style = "background-color: #60f060;"; status.style = colors.default;
}); });
socket.addEventListener("message", (event) => { socket.addEventListener("message", (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
@ -346,47 +354,47 @@ window.addEventListener("load", (_) => {
mbar.innerHTML = data.Pirani.Mbar; mbar.innerHTML = data.Pirani.Mbar;
if (data.Safety.Failsafe) { if (data.Safety.Failsafe) {
failsafe.innerHTML = "ON"; failsafe.innerHTML = "ON";
failsafe.style = "background-color: #f06060"; failsafe.style = colors.highlightFault;
} else { } else {
failsafe.innerHTML = "OFF"; failsafe.innerHTML = "OFF";
failsafe.style = "background-color: #60f060"; failsafe.style = colors.default;
} }
if (data.Safety.HighPressure) { if (data.Safety.HighPressure) {
highpressure.innerHTML = "ON"; highpressure.innerHTML = "ON";
highpressure.style = "background-color: #f06060"; highpressure.style = colors.default;
} else { } else {
highpressure.innerHTML = "OFF"; highpressure.innerHTML = "OFF";
highpressure.style = "background-color: #60f060"; highpressure.style = colors.default;
} }
if (data.Pumps.RPOn) { if (data.Pumps.RPOn) {
rp.innerHTML = "ON"; rp.innerHTML = "ON";
rp.style = "background-color: #60f060"; rp.style = colors.default;
} else { } else {
rp.innerHTML = "OFF"; rp.innerHTML = "OFF";
rp.style = "background-color: #f06060"; rp.style = colors.highlightNeutral;
} }
if (data.Pumps.DPOn) { if (data.Pumps.DPOn) {
dp.innerHTML = "ON"; dp.innerHTML = "ON";
dp.style = "background-color: #60f060"; dp.style = colors.highlightCaution;
} else { } else {
dp.innerHTML = "OFF"; dp.innerHTML = "OFF";
dp.style = "background-color: #f06060"; dp.style = colors.default;
} }
let t = []; let t = [];
if (data.Feedback.RoughReached) { if (data.Feedback.RoughReached) {
trough.innerHTML = "OK"; trough.innerHTML = "OK";
trough.style = "background-color: #60f060"; trough.style = colors.highlightGood;
} else { } else {
trough.innerHTML = "NOK"; trough.innerHTML = "NOK";
trough.style = "background-color: #f06060"; trough.style = colors.default;
} }
if (data.Feedback.HighReached) { if (data.Feedback.HighReached) {
thigh.innerHTML = "OK"; thigh.innerHTML = "OK";
thigh.style = "background-color: #60f060"; thigh.style = colors.highlightGood;
} else { } else {
thigh.innerHTML = "NOK"; thigh.innerHTML = "NOK";
thigh.style = "background-color: #f06060"; thigh.style = colors.default;
} }
load.innerHTML = data.LoopLoad.toString() + "%"; load.innerHTML = data.LoopLoad.toString() + "%";
historicalPush(data.Pirani.MbarFloat); historicalPush(data.Pirani.MbarFloat);
@ -394,7 +402,7 @@ window.addEventListener("load", (_) => {
}); });
socket.addEventListener("close", (event) => { socket.addEventListener("close", (event) => {
status.innerHTML = "Offline"; status.innerHTML = "Offline";
status.style = "background-color: #f06060;"; status.style = colors.highlightFault;
if (connected) { if (connected) {
console.log("Socket dead, reconnecting..."); console.log("Socket dead, reconnecting...");
} }