Compare commits
No commits in common. "637f8748a8ebbd46e786dab937ba9fa49823512c" and "f2c0d67eed48889ec2e970a11577e4dc811bf285" have entirely different histories.
637f8748a8
...
f2c0d67eed
|
|
@ -52,42 +52,15 @@ td > span {
|
|||
height: 10em;
|
||||
}
|
||||
|
||||
.graph-container {
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-grid {
|
||||
margin-top: 2em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 160em;
|
||||
margin: 2em;
|
||||
clear: both;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(54em, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(50em, 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>
|
||||
|
|
@ -122,13 +95,13 @@ td > span {
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<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>
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
@ -163,9 +136,9 @@ td > span {
|
|||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="graph-container">
|
||||
<p>
|
||||
<canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p style="font-style: italic; font-size: 12px; margin-top: 5em;">
|
||||
|
|
@ -197,7 +170,7 @@ let historicalDraw = (w, h) => {
|
|||
// coordinate calculation.
|
||||
|
||||
canvas.clearRect(0, 0, w, h);
|
||||
canvas.fillStyle = "#e8e8e8";
|
||||
canvas.fillStyle = "#f0f0f0";
|
||||
canvas.fillRect(0, 0, w, h);
|
||||
|
||||
// Margins of the main graph window.
|
||||
|
|
@ -324,14 +297,6 @@ 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);
|
||||
|
||||
|
|
@ -353,7 +318,7 @@ window.addEventListener("load", (_) => {
|
|||
connected = true;
|
||||
console.log("Socket connected!");
|
||||
status.innerHTML = "Online";
|
||||
status.style = colors.default;
|
||||
status.style = "background-color: #60f060;";
|
||||
});
|
||||
socket.addEventListener("message", (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
|
|
@ -361,47 +326,47 @@ window.addEventListener("load", (_) => {
|
|||
mbar.innerHTML = data.Pirani.Mbar;
|
||||
if (data.Safety.Failsafe) {
|
||||
failsafe.innerHTML = "ON";
|
||||
failsafe.style = colors.highlightFault;
|
||||
failsafe.style = "background-color: #f06060";
|
||||
} else {
|
||||
failsafe.innerHTML = "OFF";
|
||||
failsafe.style = colors.default;
|
||||
failsafe.style = "background-color: #60f060";
|
||||
}
|
||||
if (data.Safety.HighPressure) {
|
||||
highpressure.innerHTML = "ON";
|
||||
highpressure.style = colors.default;
|
||||
highpressure.style = "background-color: #f06060";
|
||||
} else {
|
||||
highpressure.innerHTML = "OFF";
|
||||
highpressure.style = colors.default;
|
||||
highpressure.style = "background-color: #60f060";
|
||||
}
|
||||
if (data.Pumps.RPOn) {
|
||||
rp.innerHTML = "ON";
|
||||
rp.style = colors.default;
|
||||
rp.style = "background-color: #60f060";
|
||||
} else {
|
||||
rp.innerHTML = "OFF";
|
||||
rp.style = colors.highlightNeutral;
|
||||
rp.style = "background-color: #f06060";
|
||||
}
|
||||
if (data.Pumps.DPOn) {
|
||||
dp.innerHTML = "ON";
|
||||
dp.style = colors.highlightCaution;
|
||||
dp.style = "background-color: #60f060";
|
||||
} else {
|
||||
dp.innerHTML = "OFF";
|
||||
dp.style = colors.default;
|
||||
dp.style = "background-color: #f06060";
|
||||
}
|
||||
|
||||
let t = [];
|
||||
if (data.Feedback.RoughReached) {
|
||||
trough.innerHTML = "OK";
|
||||
trough.style = colors.highlightGood;
|
||||
trough.style = "background-color: #60f060";
|
||||
} else {
|
||||
trough.innerHTML = "NOK";
|
||||
trough.style = colors.default;
|
||||
trough.style = "background-color: #f06060";
|
||||
}
|
||||
if (data.Feedback.HighReached) {
|
||||
thigh.innerHTML = "OK";
|
||||
thigh.style = colors.highlightGood;
|
||||
thigh.style = "background-color: #60f060";
|
||||
} else {
|
||||
thigh.innerHTML = "NOK";
|
||||
thigh.style = colors.default;
|
||||
thigh.style = "background-color: #f06060";
|
||||
}
|
||||
load.innerHTML = data.LoopLoad.toString() + "%";
|
||||
historicalPush(data.Pirani.MbarFloat);
|
||||
|
|
@ -409,7 +374,7 @@ window.addEventListener("load", (_) => {
|
|||
});
|
||||
socket.addEventListener("close", (event) => {
|
||||
status.innerHTML = "Offline";
|
||||
status.style = colors.highlightFault;
|
||||
status.style = "background-color: #f06060;";
|
||||
if (connected) {
|
||||
console.log("Socket dead, reconnecting...");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue