Implement customizable decimation rate, window size, and update rate

This commit is contained in:
Kelvin Ly 2023-05-16 12:21:49 -04:00
parent e5e4289342
commit ea2bc8b96b
1 changed files with 84 additions and 10 deletions

View File

@ -143,17 +143,22 @@ async function updateCharts() {
volts = volts.slice(slice_idx)
time = time.slice(slice_idx)
const temp_d = temp.filter((_, idx) => (idx % decimation_rate) == 0)
const humd_d = humd.filter((_, idx) => (idx % decimation_rate) == 0)
const volts_d = volts.filter((_, idx) => (idx % decimation_rate) == 0)
const time_d = time.filter((_, idx) => (idx % decimation_rate) == 0)
chart.load({
columns: [
["time"].concat(time),
["temp"].concat(temp),
["humidity"].concat(humd),
["time"].concat(time_d),
["temp"].concat(temp_d),
["humidity"].concat(humd_d),
]
})
chart2.load({
columns: [
["time"].concat(time),
["voltage"].concat(volts),
["time"].concat(time_d),
["voltage"].concat(volts_d),
]
})
status("charts updated")
@ -206,7 +211,10 @@ async function testAdminMode() {
const msg = JSON.stringify({
auth: "password",
data: {
manual_mode: true
set_params: {
name: "target_lower",
value: 0.87
}
}
})
await fetch("/api/admin", {
@ -227,23 +235,89 @@ window.onload = () => {
document.getElementById('autoupdate').addEventListener('click', (e) => {
autoupdate = document.getElementById('autoupdate').checked
})
document.getElementsByName('decim').forEach((elem) => {
elem.addEventListener('click', (e) => {
if (elem.checked) {
decimation_rate = parseInt(elem.value)
}
})
})
document.getElementsByName('update').forEach((elem) => {
elem.addEventListener('click', (e) => {
if (elem.checked) {
chart_update_millis = parseInt(elem.value)
}
})
})
document.getElementsByName('duration').forEach((elem) => {
elem.addEventListener('click', (e) => {
const old_millis = max_interval_millis
if (elem.checked) {
max_interval_millis = parseInt(elem.value)*1000*60
if (max_interval_millis != old_millis) {
// reset the chart data to force a reload on the next update
cur_time_millis = 0
time = []
temp = []
humd = []
volts = []
}
}
})
})
/*
document.getElementById('test-admin').addEventListener('click', (e) => {
testAdminMode()
})
*/
}
</script>
</head>
<body>
<div id="device-status"></div>
<form>
<input type=checkbox id=autoupdate checked>Autoupdate</input>
<input type=button id=update value="Update"></input>
<span id="device-status"></span>
<span id=status></span>
</form>
<div id="humidity-temp"></div>
<div id="volts"></div>
<div>
<form>
<input type=checkbox id=autoupdate checked>Autoupdate</input>
<input type=button id=update value="Update"></input>
<fieldset>
<legend>Data decimation rate</legend>
<input type=radio name=decim value="1" checked>1x</input>
<input type=radio name=decim value="2">2x</input>
<input type=radio name=decim value="4">4x</input>
<input type=radio name=decim value="10">10x</input>
<input type=radio name=decim value="20">20x</input>
</fieldset>
<fieldset>
<legend>History length</legend>
<input type=radio name=duration value="5" checked>5 minutes</input>
<input type=radio name=duration value="15">15 minutes</input>
<input type=radio name=duration value="60">1 hour</input>
<input type=radio name=duration value="1440">1 day</input>
<input type=radio name=duration value="10080">1 week</input>
</fieldset>
<fieldset>
<legend>Update rate</legend>
<input type=radio name=update value="100">0.1 second</input>
<input type=radio name=update value="1000">1 second</input>
<input type=radio name=update value="2000" checked>2 seconds</input>
<input type=radio name=update value="5000">5 seconds</input>
<input type=radio name=update value="10000">10 seconds</input>
<input type=radio name=update value="20000">20 seconds</input>
</fieldset>
<!--
<input type=button id=test-admin value="Test admin mode"></input>
-->
<!-- TODO add decimation and window size options -->
<span id=status></span>
</form>
</div>
</body>