140 lines
4.6 KiB
JavaScript
140 lines
4.6 KiB
JavaScript
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 () {
|
|
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);
|