huskee/therminator
huskee/therminator
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix interval selection

Browse source
This commit is contained in:
huskee 2023-12-19 22:45:27 +02:00
parent efd4c76997
commit f90f45b401
3 changed files with 66 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
data/index.html
View file

@ -9,38 +9,61 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<h1>/* therminator */</h1> <h1>/* therminator */</h1>
<p>last sensor update: <span id="time"></span></p> <p>last sensor update: <span id="time"></span></p>
<p>chart update interval (ms): <select id="chartUpd" onchange="location.reload()"> <div id="du">
<option>200</option> <p>current data update interval (ms): <span id="updInt"></span></p>
<option selected>500</option> <p>
<option>1000</option> set data update interval (ms):
</select></p> <select
<p>data update interval (ms): <select id="upd" onload="getUpdateInterval()" onchange="setUpdateInterval()"> id="upd"
<option>10</option> onchange="setUpdateInterval();"
<option>20</option> onfocus="this.selectedIndex = -1;"
<option>50</option> >
<option>100</option> <option>10</option>
<option>200</option> <option>20</option>
<option selected>500</option> <option>50</option>
<option>1000</option> <option>100</option>
</select></p> <option>200</option>
<option selected>500</option>
<option>1000</option>
</select>
</p>
</div>
<div id="cu">
<p>current chart update interval (ms): <span id="cupdInt"></span></p>
<p>
set chart update interval (ms):
<select
id="chartUpd"
onchange="location.reload()"
onfocus="this.selectedIndex = -1;"
>
<option>200</option>
<option selected>500</option>
<option>1000</option>
</select>
</p>
</div>
<br />
<button id="startRec" onclick="startRecording()">Start recording</button> <button id="startRec" onclick="startRecording()">Start recording</button>
<button id="stopRec" onclick="stopRecording()">Stop recording</button> <button id="stopRec" onclick="stopRecording()">Stop recording</button>
<table> <table>
<tr> <tr>
<td class="chart-container"> <td class="chart-container">
<h2>Channel A:</h2> <h2>Channel A:</h2>
<label for="labelA">label: </label><input type="text" value="tempA" id="labelA"> <label for="labelA">label: </label
<div id="error-tempA"></div> ><input type="text" value="tempA" id="labelA" />
<canvas id="chartA"></canvas> <div id="error-tempA"></div>
</td> <canvas id="chartA"></canvas>
<td class="chart-container"> </td>
<h2>Channel B:</h2> <td class="chart-container">
<label for="labelB">label: </label><input type="text" value="tempB" id="labelB"> <h2>Channel B:</h2>
<div id="error-tempB"></div> <label for="labelB">label: </label
<canvas id="chartB"></canvas> ><input type="text" value="tempB" id="labelB" />
</td> <div id="error-tempB"></div>
</tr> <canvas id="chartB"></canvas>
</table> </td>
</tr>
</table>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

11
data/script.js
View file

@ -1,3 +1,4 @@
const canvasA = document.getElementById("chartA"); const canvasA = document.getElementById("chartA");
const canvasB = document.getElementById("chartB"); const canvasB = document.getElementById("chartB");
const chartUpdateInt = document.getElementById("chartUpd").value; const chartUpdateInt = document.getElementById("chartUpd").value;
@ -82,6 +83,14 @@ const options = {
}, },
}; };
fetch("/int")
.then((res) => res.text())
.then((textResponse) => {
document.getElementById("updInt").innerText = textResponse;
});
document.getElementById("cupdInt").innerText = chartUpdateInt;
const chartA = new Chart(canvasA, { const chartA = new Chart(canvasA, {
type: "line", type: "line",
data: { data: {
@ -253,7 +262,7 @@ function startRecording() {
filename = "therminator-" + filedate + ".csv"; filename = "therminator-" + filedate + ".csv";
labelA = document.getElementById("labelA").value; labelA = document.getElementById("labelA").value;
labelB = document.getElementById("labelB").value; labelB = document.getElementById("labelB").value;
csvData = ["time,\"" + labelA + "\",\"" + labelB + "\""] csvData = ['time,"' + labelA + '","' + labelB + '"'];
record = 1; record = 1;
document.getElementById("startRec").disabled = true; document.getElementById("startRec").disabled = true;
document.getElementById("stopRec").disabled = false; document.getElementById("stopRec").disabled = false;

21
data/style.css
View file

@ -5,9 +5,10 @@ body {
font-family: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace;
padding: 1rem 2rem; padding: 1rem 2rem;
} }
#mv, #du,
#ui { #cu {
display: inline-block; display: inline-block;
padding-right: 3rem;
} }
#error-tempA, #error-tempA,
@ -21,19 +22,3 @@ body {
width: 40vw; width: 40vw;
padding: 1em; padding: 1em;
} }
#chart-small {
display: initial;
}
#chart-large {
display: none;
}
@media only screen and (min-width: 1480px) {
#chart-small {
display: none;
}
#chart-large {
display: initial;
}
}