tobimai/waterlevel-software
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added gauge, fixed shit
Some checks failed
Test compiling project / test (push) Failing after 1m30s
Details

Browse Source
This commit is contained in:
Tobias Maier
2024-10-24 22:54:54 +02:00
parent 57b1ce8db7
commit db567eeaa5
14 changed files with 413 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
data/gauge.js Normal file
View File

File diff suppressed because one or more lines are too long

51
data/logic.js
View File

@@ -82,10 +82,59 @@ window.addEventListener('DOMContentLoaded', (event) => {
});
}
fetchData(); // fetch immediately on page load
setInterval(fetchData, 5000); // fetch every 5 seconds
});
function roundToTwo(num) {
return Math.round(num*100)/100;
}
}
window.addEventListener('load', function () {
var gauge = new RadialGauge({
renderTo: 'main_gauge',
width: 300,
height: 300,
units: "l",
minValue: 0,
maxValue: 220,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100",
"120",
"140",
"160",
"180",
"200",
"220"
],
minorTicks: 2,
strokeTicks: true,
highlights: [
{
"from": 160,
"to": 220,
"color": "rgba(200, 50, 50, .75)"
}
],
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear"
}).draw();
})
// document.body.appendChild(gauge.options.renderTo);

16
data/settings.html
View File

@@ -25,22 +25,22 @@
<legend>Settings</legend>
<p>
<label for="range">Sensor Range in cm</label>
<input id="range" name="range" type="number" placeholder="200">
<input id="range" name="sensor_range" type="number" placeholder="200" value="%sensor_range%">
</p>
<p>
<label for="level_max">Water max height in cm</label>
<input id="level_max" name="level_max" type="number">
<input id="level_max" name="water_level_max" type="number" value="%water_level_min%">
</p>
<p>
<label for="level_min">Water min height in cm</label>
<input id="level_min" name="level_min" type="number">
<input id="level_min" name="water_level_min" type="number" value="%water_level_max%">
</p>
<p>
<label for="liters">Volume in liters</label>
<input id="liters" name="liters" type="number">
<input id="liters" name="water_volume" type="number" value="%water_volume%">
</p>
<p>
<button class="button primary" style="width: 100%;">Submit</button>
<button class="button primary" style="width: 100%%;">Submit</button>
</p>
</fieldset>
</form>
@@ -55,15 +55,15 @@
<p>
<label for="ssid">SSID</label>
<input id="ssid" name="ssid" type="text">
<input id="ssid" name="ssid" type="text" value="%sensor_range%">
</p>
<p>
<label for="wifi_password">Password</label>
<input id="wifi_password" name="wifi_password" type="password">
<input id="wifi_password" name="wifi_password" type="password" value="%sensor_range%">
</p>
<p>
<button class="button primary" style="width: 100%;">Submit</button>
<button class="button primary" style="width: 100%%;">Submit</button>
</p>
</fieldset>
</form>

11
data/status.html
View File

@@ -2,7 +2,10 @@
<head>
<link rel="stylesheet" href="/chota.css">
<script src="/gauge.js"></script>
<script src="/logic.js"></script>
</head>
<body>
@@ -70,13 +73,7 @@
<div class="col-12 col-6-lg">
<div class="outer-wrapper">
<div class="column-wrapper">
<div class="column"></div>
</div>
<div class="percentage">25%</div>
<div class="value">2500 / 10000</div>
</div>
<canvas data-type="radial-gauge" id="main_gauge"></canvas>
</div>