93 lines
3.3 KiB
HTML
93 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Live Valve Graph</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="text-align: center;">
|
|
<h3>Live Valve Graph - Node <span id="selectedNodeLabel">05</span></h3>
|
|
<label for="nodeSelector">Select Node:</label>
|
|
<select id="nodeSelector">
|
|
</select>
|
|
</div>
|
|
|
|
<canvas id="liveChart" width="1000" height="400"></canvas>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('liveChart').getContext('2d');
|
|
const nodeLabel = document.getElementById('selectedNodeLabel');
|
|
const nodeSelector = document.getElementById('nodeSelector');
|
|
|
|
let selectedNode = "5";
|
|
|
|
// Add node options 05 to 24
|
|
for (let i = 5; i <= 24; i++) {
|
|
const option = document.createElement("option");
|
|
option.value = i.toString();
|
|
option.text = `Node ${i.toString().padStart(2, "0")}`;
|
|
if (i === 5) option.selected = true;
|
|
nodeSelector.appendChild(option);
|
|
}
|
|
|
|
nodeSelector.addEventListener("change", () => {
|
|
selectedNode = nodeSelector.value;
|
|
nodeLabel.textContent = selectedNode.padStart(2, "0");
|
|
// Clear chart
|
|
chart.data.labels = [];
|
|
chart.data.datasets.forEach(ds => ds.data = []);
|
|
chart.update();
|
|
});
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [
|
|
{ label: 'Setpoint', borderColor: 'blue', data: [], fill: false },
|
|
{ label: 'Feedback', borderColor: 'green', data: [], fill: false },
|
|
{ label: 'Flow (L/h)', borderColor: 'orange', data: [], fill: false },
|
|
{ label: 'Pressure (bar)', borderColor: 'red', data: [], fill: false }
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
animation: false,
|
|
scales: {
|
|
x: { title: { display: true, text: 'Time' } },
|
|
y: { title: { display: true, text: 'Value' } }
|
|
}
|
|
}
|
|
});
|
|
|
|
function fetchLiveData() {
|
|
fetch("/data")
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const now = new Date().toLocaleTimeString();
|
|
|
|
const valve = data.valves?.[selectedNode] || {};
|
|
const flow = data.flow?.["0x01"] || 0;
|
|
const pressure = data.pressure?.["0x01"] || 0;
|
|
|
|
chart.data.labels.push(now);
|
|
chart.data.datasets[0].data.push(valve.setpoint || 0);
|
|
chart.data.datasets[1].data.push(valve.feedback || 0);
|
|
chart.data.datasets[2].data.push(flow);
|
|
chart.data.datasets[3].data.push(pressure);
|
|
|
|
if (chart.data.labels.length > 50) {
|
|
chart.data.labels.shift();
|
|
chart.data.datasets.forEach(ds => ds.data.shift());
|
|
}
|
|
|
|
chart.update();
|
|
});
|
|
}
|
|
|
|
setInterval(fetchLiveData, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|