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>
<h1>/* therminator */</h1>
<p>last sensor update: <span id="time"></span></p>
<p>chart update interval (ms): <select id="chartUpd" onchange="location.reload()">
<option>200</option>
<option selected>500</option>
<option>1000</option>
</select></p>
<p>data update interval (ms): <select id="upd" onload="getUpdateInterval()" onchange="setUpdateInterval()">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
<option>200</option>
<option selected>500</option>
<option>1000</option>
</select></p>
<div id="du">
<p>current data update interval (ms): <span id="updInt"></span></p>
<p>
set data update interval (ms):
<select
id="upd"
onchange="setUpdateInterval();"
onfocus="this.selectedIndex = -1;"
>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
<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="stopRec" onclick="stopRecording()">Stop recording</button>
<table>
<tr>
<td class="chart-container">
<h2>Channel A:</h2>
<label for="labelA">label: </label><input type="text" value="tempA" id="labelA">
<div id="error-tempA"></div>
<canvas id="chartA"></canvas>
</td>
<td class="chart-container">
<h2>Channel B:</h2>
<label for="labelB">label: </label><input type="text" value="tempB" id="labelB">
<div id="error-tempB"></div>
<canvas id="chartB"></canvas>
</td>
</tr>
</table>
<table>
<tr>
<td class="chart-container">
<h2>Channel A:</h2>
<label for="labelA">label: </label
><input type="text" value="tempA" id="labelA" />
<div id="error-tempA"></div>
<canvas id="chartA"></canvas>
</td>
<td class="chart-container">
<h2>Channel B:</h2>
<label for="labelB">label: </label
><input type="text" value="tempB" id="labelB" />
<div id="error-tempB"></div>
<canvas id="chartB"></canvas>
</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>

11
data/script.js
View file

@ -1,3 +1,4 @@
const canvasA = document.getElementById("chartA");
const canvasB = document.getElementById("chartB");
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, {
type: "line",
data: {
@ -253,7 +262,7 @@ function startRecording() {
filename = "therminator-" + filedate + ".csv";
labelA = document.getElementById("labelA").value;
labelB = document.getElementById("labelB").value;
csvData = ["time,\"" + labelA + "\",\"" + labelB + "\""]
csvData = ['time,"' + labelA + '","' + labelB + '"'];
record = 1;
document.getElementById("startRec").disabled = true;
document.getElementById("stopRec").disabled = false;

21
data/style.css
View file

@ -5,9 +5,10 @@ body {
font-family: "IBM Plex Mono", monospace;
padding: 1rem 2rem;
}
#mv,
#ui {
#du,
#cu {
display: inline-block;
padding-right: 3rem;
}
#error-tempA,
@ -21,19 +22,3 @@ body {
width: 40vw;
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;
}
}