From 2ef402eef077e4fef156e92ec2881db208028d46 Mon Sep 17 00:00:00 2001 From: Etienne Chassaing <60154720+cetiennec@users.noreply.github.com> Date: Tue, 15 Jul 2025 17:36:57 +0200 Subject: [PATCH] Addes status on monitor --- MockCAN.py | 2 +- static/monitor.html | 36 +++++++++++++++++++++++++++++------- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/MockCAN.py b/MockCAN.py index 8011dc0..d67874d 100644 --- a/MockCAN.py +++ b/MockCAN.py @@ -4,7 +4,7 @@ PUs_states = [{"PU_MODE": "OFF","ploop_setpoint":0.0},{"PU_MODE": "OFF","ploop_s # Placeholder for CAN backend class CANBackend: - def __init__(self): + def __init__(self, eds_file=None): self.connected = False def connect(self, node_id: int, eds_path: str) -> bool: diff --git a/static/monitor.html b/static/monitor.html index d447431..af7bbf8 100644 --- a/static/monitor.html +++ b/static/monitor.html @@ -38,10 +38,21 @@ border-radius: 5px; margin: 10px; } + .status-container { + background-color: #f0f0f0; + padding: 10px; + border-radius: 5px; + margin: 10px auto; + text-align: center; + font-size: 18px; + }

Live Monitoring Dashboard

+
+

Current Status: Loading...

+
@@ -147,20 +158,16 @@ if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const allData = await response.json(); const puData = allData[`PU_${puNumber}`]; - // Convert timestamp string to Date object const timestamp = new Date(puData.timestamp); - Plotly.extendTraces('flow-plot', { x: [[timestamp], [timestamp], [timestamp], [timestamp]], y: [[puData.Qperm], [puData.Qdilute], [puData.Qdrain], [puData.Qrecirc]] }, [0, 1, 2, 3], maxPoints); - Plotly.extendTraces('pressure-plot', { x: [[timestamp], [timestamp], [timestamp]], y: [[puData.Pro], [puData.Pdilute], [puData.Prentate]] }, [0, 1, 2], maxPoints); - const range = getLastMinuteRange(); const plotIds = ['flow-plot', 'pressure-plot']; plotIds.forEach(id => { @@ -171,6 +178,19 @@ } } + async function fetchPUStatus() { + try { + const response = await fetch("/api/pu_status"); + if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); + const data = await response.json(); + const status = data[`PU${puNumber}`] || "Unknown"; + document.getElementById("currentStatus").textContent = status; + } catch (error) { + console.error("Error fetching PU status:", error); + document.getElementById("currentStatus").textContent = "Error fetching status"; + } + } + function initPlots() { const time0 = [new Date()]; // Use current time for initialization Plotly.newPlot('flow-plot', [ @@ -183,7 +203,6 @@ xaxis: { title: 'Time', type: 'date' }, yaxis: { title: 'Flow (L/h)', range: [0, 2000] } }); - Plotly.newPlot('pressure-plot', [ { x: time0, y: [0], name: 'Pro', mode: 'lines', line: { color: 'purple' } }, { x: time0, y: [0], name: 'Pdilute', mode: 'lines', line: { color: 'teal' } }, @@ -193,11 +212,14 @@ xaxis: { title: 'Time', type: 'date' }, yaxis: { title: 'Pressure (bar)', range: [0, 15] } }); - setInterval(updatePlots, 500); } - window.onload = initPlots; + window.onload = function() { + initPlots(); + fetchPUStatus(); + setInterval(fetchPUStatus, 500); // Update status every 5 seconds + };