This commit is contained in:
230
data/logic.js
230
data/logic.js
@@ -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) {
|
||||
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({
|
||||
renderTo: 'main_gauge',
|
||||
width: 300,
|
||||
height: 300,
|
||||
// width: 300,
|
||||
// height: 300,
|
||||
units: "l",
|
||||
minValue: 0,
|
||||
maxValue: 220,
|
||||
majorTicks: [
|
||||
"0",
|
||||
"20",
|
||||
"40",
|
||||
"60",
|
||||
"80",
|
||||
"100",
|
||||
"120",
|
||||
"140",
|
||||
"160",
|
||||
"180",
|
||||
"200",
|
||||
"220"
|
||||
],
|
||||
maxValue: water_volume,
|
||||
majorTicks: generateValueList(water_volume),
|
||||
minorTicks: 2,
|
||||
strokeTicks: true,
|
||||
highlights: [
|
||||
{
|
||||
"from": 160,
|
||||
"to": 220,
|
||||
"color": "rgba(200, 50, 50, .75)"
|
||||
"from": water_volume/10,
|
||||
"to": (water_volume/10)*2,
|
||||
"color": "rgba(255, 255, 0, .75)"
|
||||
},
|
||||
{
|
||||
"from": 0,
|
||||
"to": water_volume/10,
|
||||
"color": "rgba(255, 0, 50, .75)"
|
||||
}
|
||||
],
|
||||
colorPlate: "#fff",
|
||||
@@ -133,8 +104,39 @@ window.addEventListener('load', function () {
|
||||
needleCircleInner: false,
|
||||
animationDuration: 1500,
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -224,7 +224,7 @@ void setup()
|
||||
|
||||
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) {
|
||||
int params = request->params();
|
||||
|
||||
Reference in New Issue
Block a user