Thats maybe not strange
but i cant figure out what is wrong.Is there someone who knows html and see the where the errors are?
Code: Select all
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Device Energy Display</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
background-color: #000;
color: white;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 90%;
max-width: 800px;
}
.total-power {
font-size: 50px;
font-weight: bold;
text-shadow: 0 0 10px #0ff;
margin-bottom: 20px;
}
.device-list {
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.device {
font-size: 24px;
margin: 5px 0;
padding: 10px;
background: rgba(255,255,255,0.1);
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.bar {
width: 50%;
height: 10px;
background: #222;
border-radius: 5px;
overflow: hidden;
}
.bar-fill {
height: 100%;
transition: width 0.5s ease-in-out, background 0.5s ease-in-out;
}
canvas {
margin-top: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="total-power" id="totalPower">Totaal: 0 W</div>
<div class="device-list" id="deviceList"></div>
<canvas id="energyChart"></canvas>
</div>
<script>
const devices = [
{ name: "Wasmachine", idx: 101, color: "#ff0" },
{ name: "Koelkast", idx: 102, color: "#0ff" },
{ name: "TV", idx: 103, color: "#f00" },
{ name: "Computer", idx: 104, color: "#f0f" }
];
let historicalData = {};
let labels = [];
function fetchEnergyData() {
let totalPower = 0;
let deviceListHtml = "";
const fetchPromises = devices.map(device =>
fetch(`http://192.168.2.130:9091/json.htm?type=devices&rid=${device.idx}`)
.then(response => response.json())
.then(data => {
if (data.result && data.result.length > 0) {
let power = parseFloat(data.result[0].Usage.replace(" W", ""));
totalPower += power;
// Historische data opslaan
if (!historicalData[device.name]) {
historicalData[device.name] = [];
}
if (historicalData[device.name].length >= 24) {
historicalData[device.name].shift();
}
historicalData[device.name].push(power);
// HTML-lijst bijwerken
deviceListHtml += `
<div class="device">
<span>${device.name}: ${power} W</span>
<div class="bar"><div class="bar-fill" style="width: ${Math.min((power / 3000) * 100, 100)}%; background: ${device.color};"></div></div>
</div>
`;
}
})
);
Promise.all(fetchPromises).then(() => {
document.getElementById("totalPower").innerText = `Totaal: ${totalPower} W`;
document.getElementById("deviceList").innerHTML = deviceListHtml;
// Historische labels bijwerken
if (labels.length >= 24) {
labels.shift();
}
labels.push(new Date().toLocaleTimeString());
updateChart();
}).catch(error => console.error("Fout bij ophalen van gegevens:", error));
}
// Chart.js setup
const ctx = document.getElementById("energyChart").getContext("2d");
const energyChart = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: devices.map(device => ({
label: device.name,
data: [],
borderColor: device.color,
backgroundColor: `${device.color}33`,
borderWidth: 2,
pointRadius: 3,
tension: 0.3
}))
},
options: {
scales: {
y: { beginAtZero: true, max: 3000 }
},
plugins: {
legend: { display: true }
}
}
});
function updateChart() {
energyChart.data.labels = labels;
energyChart.data.datasets.forEach(dataset => {
dataset.data = historicalData[dataset.label] || [];
});
energyChart.update();
}
// Update elke 5 seconden
fetchEnergyData();
setInterval(fetchEnergyData, 5000);
</script>
</body>
</html>Thanks
Regards
