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

succd: Improve styling of temperature values

Browse source 
HMI design goes brrrr...
This commit is contained in:
Rahix 2024-11-10 01:38:32 +01:00
parent 2e6a3be100
commit c02d24414f
1 changed files with 40 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
succbone/succd/index.html
View file

@ -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>