Succbone HMI Updates #10
|
@ -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...");
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue