succbone/succd/index.html

@@ -52,15 +52,42 @@ td > span {
     height: 10em;
 }
 
+.graph-container {
+    background-color: #e8e8e8;
+    text-align: center;
+}
+
 .main-grid {
-    margin: 2em;
+    margin-top: 2em;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 160em;
     clear: both;
 
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(50em, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(54em, 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>
@@ -95,13 +122,13 @@ td > span {
 
     <table>
         <tr>
-            <th rowspan="2">Pirani Gauge</th>
+            <th>Pirani Pressure</th>
-            <th>Voltage</th>
+            <td class="has-hidden">
-            <td id="volts">{{ .Pirani.Volts }}</td>
+                <div id="mbar">{{ .Pirani.Mbar }}</div>
-        </tr>
+                <div class="hidden-text" style="color: #606060;">
-        <tr>
+                    <span>Voltage: </span><span id="volts">{{ .Pirani.Volts }}</span>
-            <th>Pressure</th>
+                </div>
-            <td id="mbar">{{ .Pirani.Mbar }}</td>
+            </td>
         </tr>
     </table>
 
@@ -136,9 +163,9 @@ td > span {
         </tr>
     </table>
 
-    <p>
+    <div class="graph-container">
         <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
-    </p>
+    </div>
 </div>
 
 <p style="font-style: italic; font-size: 12px; margin-top: 5em;">
@@ -170,7 +197,7 @@ let historicalDraw = (w, h) => {
     // coordinate calculation.
 
     canvas.clearRect(0, 0, w, h);
-    canvas.fillStyle = "#f0f0f0";
+    canvas.fillStyle = "#e8e8e8";
     canvas.fillRect(0, 0, w, h);
 
     // Margins of the main graph window.
@@ -297,6 +324,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);
 
@@ -318,7 +353,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);
@@ -326,47 +361,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);
@@ -374,7 +409,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...");
             }