fafo/jeol-t330a
11
0
Fork 0
Code Issues 5 Pull requests 2 Actions Packages Projects Releases Wiki Activity

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
Show stats 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");
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...");
}