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

stuff
All checks were successful
Test compiling project / test (push) Successful in 1m44s
Details

Browse Source
This commit is contained in:
Tobias Maier
2023-10-07 20:03:57 +02:00
parent f55ffea36c
commit 9c6f83d4f0
5 changed files with 377 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
data/logic.js
View File

@@ -0,0 +1,48 @@
window.addEventListener('DOMContentLoaded', (event) => {
// URL of your API
const apiUrl = '/sensor_data';
function fetchData() {
// Fetching data from the API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('voltage').textContent = roundToTwo(data.voltage)+ ' V' || 'N/A';
document.getElementById('current').textContent = roundToTwo(data.current)+ ' mA' || 'N/A';
})
.catch(error => {
console.error("There was an error fetching data from the API", error);
});
}
fetchData(); // fetch immediately on page load
setInterval(fetchData, 5000); // fetch every 5 seconds
});
window.addEventListener('DOMContentLoaded', (event) => {
const apiUrl = '/network_info';
function fetchData() {
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('wifi_ip').textContent = data.wifi.ip || 'N/A';
document.getElementById('wifi_rssi').textContent = data.wifi.rssi || 'N/A';
document.getElementById('wifi_link').textContent = data.wifi.link || 'N/A';
document.getElementById('wifi_ssid').textContent = data.wifi.ssid || 'N/A';
document.getElementById('eth_link').textContent = data.ethernet.link || 'N/A';
document.getElementById('eth_ip').textContent = data.ethernet.ip || 'N/A';
document.getElementById('eth_speed').textContent = data.ethernet.rssi || 'N/A';
})
.catch(error => {
console.error("There was an error fetching data from the API", error);
});
}
fetchData(); // fetch immediately on page load
setInterval(fetchData, 5000); // fetch every 5 seconds
});
function roundToTwo(num) {
return Math.round(num*100)/100;
}

14
data/settings.html
View File

@@ -1,14 +1,7 @@
<!DOCTYPE html>”
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="/chota.css">
<script>
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>
</head>
<body>
@@ -55,6 +48,11 @@
<form action="/update_wifi_credentials" method="post">
<fieldset id="form-settings">
<legend>WiFi Settings</legend>
<p>
<input type="checkbox" id="enable" name="enable" value="true">
<label for="enable"> Enable WiFi</label><br>
</p>
<p>
<label for="ssid">SSID</label>
<input id="ssid" name="ssid" type="text">

104
data/status.html
View File

@@ -2,8 +2,7 @@
<head>
<link rel="stylesheet" href="/chota.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="/logic.js"></script>
</head>
<body>
@@ -34,15 +33,32 @@
<tbody>
<tr>
<td>Voltage: </td>
<td>12.12V</td>
<td id="voltage">WAITING</td>
</tr>
<tr>
<td>Current: </td>
<td>10 mA</td>
<td id="current">WAITING</td>
</tr>
</tbody>
</table>
</div>
</div>
<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>
</div>
<div class="col-12 col-3-lg">
<!--ESP Infor card-->
<div class="card">
<header>
@@ -69,49 +85,57 @@
<!--WIFI card-->
<div class="card">
<header>
<h4>Connection Info</h4>
<h4>WiFi</h4>
</header>
<table class="tg">
<thead></thead>
<tbody>
<tr>
<td>Type: </td>
<td>WiFi</td>
<td>Link: </td>
<td id="wifi_link">XX</td>
</tr>
<tr>
<td>IP: </td>
<td>127.0.0.1</td>
<td>SSID: </td>
<td id="wifi_ssid">XX</td>
</tr>
<tr>
<td>RSSI: </td>
<td>good</td>
<td id="wifi_rssi">XX</td>
</tr>
<tr>
<td>IP: </td>
<td id="wifi_ip">127.0.0.1</td>
</tr>
</tbody>
</table>
</div>
<!--Ethernet card-->
<div class="card">
<header>
<h4>Ethernet</h4>
</header>
<table class="tg">
<thead></thead>
<tbody>
<tr>
<td>Link: </td>
<td id="eth_link">XX</td>
</tr>
<tr>
<td>Speed: </td>
<td id="eth_speed">XX</td>
</tr>
<tr>
<td>IP: </td>
<td id="eth_ip">xxx</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-7-lg">
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>
<div class="col-12 col-2-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>
</div>
</div>
</div>
</body>
<style>
@@ -155,24 +179,4 @@
.card {
margin-bottom: 10px;
}
</style>
<script>
var xValues = [1,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
backgroundColor: "rgba(0,0,0,1.0)",
borderColor: "rgba(0,0,0,0.1)",
data: yValues
}]
},
options:{}
});
</script>
</style>