succd: Add highlight colors for temperatures

Highlight out-of-range temperatures for the user.  The limits are
currently by intuition and should be reconsidered.

succbone/succd/index.html

@@ -9,19 +9,19 @@ body {
     padding: 2em;
 }
 table {
-    font-size: 40px;
+    font-size: 30px;
 }
 table.status td {
     width: 2em;
 }
 th, td {
     background-color: #e8e8e8;
-    padding: 0.4em;
+    padding: 0.3em;
 }
 th {
     font-weight: 100;
     text-align: right;
-    font-size: 30px;
+    font-size: 25px;
 }
 td {
     text-align: left;
@@ -34,7 +34,7 @@ h2 {
     font-weight: 100;
 }
 button {
-    height: 4.5em;
+    height: 3.3em;
     padding-left: 1.5em;
     padding-right: 1.5em;
 }
@@ -76,6 +76,7 @@ td > span {
 
 .has-hidden:hover .hidden-text {
     display: block;
+}
 
 @media only screen and (max-width: 700px) {
     body {
@@ -111,22 +112,6 @@ td > span {
             <th>DP</th>
             <td id="dp">{{ if .Pumps.DPOn }}ON{{ else }}OFF{{ end }}</td>
         </tr>
-        <tr>
-            <th>Temperatures</th>
-            <th>SEM</th>
-            <td id="temp-sem">{{ .Temperatures.SEM }}</td>
-            <th>DPBottom</th>
-            <td id="temp-dp-bottom">{{ .Temperatures.DPBottom }}</td>
-            <th>DPTop</th>
-            <td id="temp-dp-top">{{ .Temperatures.DPTop }}</td>
-            <th>DPInlet</th>
-            <td id="temp-dp-inlet">{{ .Temperatures.DPInlet }}</td>
-        </tr>
-        <tr>
-            <th>Humidity</th>
-            <th>SEM</th>
-            <td id="humidity-sem">{{ .Humidity.SEM }}</td>
-        </tr>
         <tr>
             <th>Safety</th>
             <th style="font-size: 0.7em;">Pirani<br />Failsafe</th>
@@ -136,19 +121,6 @@ td > span {
         </tr>
     </table>
 
-    <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>
-        </tr>
-    </table>
-
-
     <table>
         <tr>
             <th rowspan="3">Control</th>
@@ -179,6 +151,41 @@ td > span {
         </tr>
     </table>
 
+    <table>
+        <tr>
+            <th>Pirani Pressure</th>
+            <td colspan="2" 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>
+        </tr>
+        <tr>
+            <th rowspan="4">Temperatures</th>
+            <th>DP Bottom</th>
+            <td id="temp-dp-bottom">{{ .Temperatures.DPBottom }}</td>
+        </tr>
+        <tr>
+            <th>DP Top</th>
+            <td id="temp-dp-top">{{ .Temperatures.DPTop }}</td>
+        </tr>
+        <tr>
+            <th>DP Inlet</th>
+            <td id="temp-dp-inlet">{{ .Temperatures.DPInlet }}</td>
+        </tr>
+        <tr>
+            <th>SEM Environment</th>
+            <td id="temp-sem">{{ .Temperatures.SEM }}</td>
+        </tr>
+        <tr>
+            <th>Humidity</th>
+            <th>SEM Environment</th>
+            <td id="humidity-sem">{{ .Humidity.SEM }}</td>
+        </tr>
+    </table>
+
+
     <div class="graph-container">
         <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
     </div>
@@ -410,10 +417,28 @@ window.addEventListener("load", (_) => {
             }
 
             tempSEM.innerHTML = data.Temperatures.SEM + "&nbsp;°C";
-            tempDPBottom.innerHTML = data.Temperatures.DPBottom + "&nbsp;°C";
-            tempDPTop.innerHTML = data.Temperatures.DPTop + "&nbsp;°C";
-            tempDPInlet.innerHTML = data.Temperatures.DPInlet + "&nbsp;°C";
+            tempSEM.style = (data.Temperatures.SEM > 30) ?
+                colors.highlightCaution : colors.default;
             humiditySEM.innerHTML = data.Humidity.SEM + "&nbsp;%";
+            humiditySEM.style = (data.Humidity.SEM > 59) ?
+                colors.highlightCaution : colors.default;
+
+            tempDPTop.innerHTML = data.Temperatures.DPTop + "&nbsp;°C";
+            tempDPTop.style = (data.Temperatures.DPTop > 30) ?
+                colors.highlightCaution : colors.default;
+
+            tempDPInlet.innerHTML = data.Temperatures.DPInlet + "&nbsp;°C";
+            tempDPInlet.style = (data.Temperatures.DPInlet > 30) ?
+                colors.highlightCaution : colors.default;
+
+            tempDPBottom.innerHTML = data.Temperatures.DPBottom + "&nbsp;°C";
+            if (data.Temperatures.DPBottom > 200) {
+                tempDPBottom.style = colors.highlightFault;
+            } else if (data.Temperatures.DPBottom > 50) {
+                tempDPBottom.style = colors.highlightNeutral;
+            } else {
+                tempDPBottom.style = colors.default;
+            }
 
             let t = [];
             if (data.Feedback.RoughReached) {