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

FInally done gauge
Some checks failed
Test compiling project / test (push) Failing after 1m25s
Details

Browse Source
This commit is contained in:
Tobias Maier
2024-11-03 20:33:58 +01:00
parent db567eeaa5
commit 2b48b0ea2e
2 changed files with 117 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
data/logic.js
View File

@@ -1,126 +1,97 @@
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.bus_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) => {
// URL of your API
const apiUrl = '/telemetry';
function fetchData() {
// Fetching data from the API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('uptime').textContent = roundToTwo(data.uptime_seconds)+ ' s' || 'N/A';
document.getElementById('heap').textContent = roundToTwo(data.heap_percent)+ ' %' || '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) => {
// URL of your API
const apiUrl = '/water_data';
function fetchData() {
// Fetching data from the API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('level').textContent = roundToTwo(data.water_height)+ ' cm' || 'N/A';
document.getElementById('liters').textContent = roundToTwo(data.liters)+ ' l' || 'N/A';
document.getElementById('percentage').textContent = roundToTwo(data.percentage)+ ' %' || '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) { function roundToTwo(num) {
return Math.round(num*100)/100; return Math.round(num*100)/100;
} }
window.addEventListener('load', function () { function fetchElectricData() {
const apiUrl = '/sensor_data';
// Fetching data from the API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('voltage').textContent = data.bus_voltage ? (roundToTwo(data.bus_voltage) + ' V') : 'XXX';
document.getElementById('current').textContent = data.current ? (roundToTwo(data.current) + ' mA') : 'XXX';
})
.catch(error => {
console.error("There was an error fetching data from the API", error);
});
}
function fetchTelemetryData() {
const apiUrl = '/telemetry';
// Fetching data from the API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('uptime').textContent = data.uptime_seconds ? (roundToTwo(data.uptime_seconds) + ' s') : 'XXX';
document.getElementById('heap').textContent = data.heap_percent ? (roundToTwo(data.heap_percent) + ' %%') : 'XXX';
})
.catch(error => {
console.error("There was an error fetching data from the API", error);
});
}
function fetchWaterData(gauge) {
const apiUrl = '/water_data';
console.log("FD");
// Fetching data from the API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
document.getElementById('level').textContent = roundToTwo(data.water_height)+ ' cm' || 'N/A';
document.getElementById('liters').textContent = roundToTwo(data.liters)+ ' l' || 'N/A';
document.getElementById('percentage').textContent = roundToTwo(data.percentage)+ ' %%' || 'N/A';
gauge.value = data.liters;
})
.catch(error => {
console.error("There was an error fetching data from the API", error);
});
}
function fetchConnectionData() {
const apiUrl = '/network_info';
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);
});
}
window.addEventListener('DOMContentLoaded', (event) => {
var water_volume = %water_volume%;
console.log(water_volume);
console.log(water_volume/10);
var gauge = new RadialGauge({ var gauge = new RadialGauge({
renderTo: 'main_gauge', renderTo: 'main_gauge',
width: 300, // width: 300,
height: 300, // height: 300,
units: "l", units: "l",
minValue: 0, minValue: 0,
maxValue: 220, maxValue: water_volume,
majorTicks: [ majorTicks: generateValueList(water_volume),
"0",
"20",
"40",
"60",
"80",
"100",
"120",
"140",
"160",
"180",
"200",
"220"
],
minorTicks: 2, minorTicks: 2,
strokeTicks: true, strokeTicks: true,
highlights: [ highlights: [
{ {
"from": 160, "from": water_volume/10,
"to": 220, "to": (water_volume/10)*2,
"color": "rgba(200, 50, 50, .75)" "color": "rgba(255, 255, 0, .75)"
},
{
"from": 0,
"to": water_volume/10,
"color": "rgba(255, 0, 50, .75)"
} }
], ],
colorPlate: "#fff", colorPlate: "#fff",
@@ -133,8 +104,39 @@ window.addEventListener('load', function () {
needleCircleInner: false, needleCircleInner: false,
animationDuration: 1500, animationDuration: 1500,
animationRule: "linear" animationRule: "linear"
}).draw(); }).draw();
}) // URL of your API
fetchWaterData(gauge);
fetchTelemetryData();
fetchElectricData();
fetchConnectionData();
setInterval(function(){fetchWaterData(gauge);}, 5000);
setInterval(fetchTelemetryData, 5000);
setInterval(fetchElectricData, 5000);
setInterval(fetchConnectionData, 5000);
});
// document.body.appendChild(gauge.options.renderTo);
function generateValueList(maxValue) {
let interval = 10;
let numberOfValues = Math.floor(maxValue / interval) + 1;
while (numberOfValues > 10) {
interval += 10;
numberOfValues = Math.floor(maxValue / interval) + 1;
}
const valueList = [];
for (let i = 0; i < numberOfValues; i++) {
valueList.push(i * interval);
}
valueList[numberOfValues - 1] = maxValue;
return valueList;
}

2
src/main.cpp
View File

@@ -224,7 +224,7 @@ void setup()
server.on("/export", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SPIFFS, "/data_export.html", "text/html", false); }); server.on("/export", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SPIFFS, "/data_export.html", "text/html", false); });
server.on("/logic.js", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SPIFFS, "/logic.js", "application/javascript", false); }); server.on("/logic.js", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(SPIFFS, "/logic.js", "application/javascript", false, processor); });
server.on("/update_wifi_credentials", HTTP_POST, [](AsyncWebServerRequest* request) { server.on("/update_wifi_credentials", HTTP_POST, [](AsyncWebServerRequest* request) {
int params = request->params(); int params = request->params();