aniketSaha/NorthStar-HMI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Addes status on monitor

Browse Source
This commit is contained in:
Etienne Chassaing 2025-07-15 17:36:57 +02:00
parent 21d24e1176
commit 2ef402eef0
2 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
MockCAN.py
View File

@ -4,7 +4,7 @@ PUs_states = [{"PU_MODE": "OFF","ploop_setpoint":0.0},{"PU_MODE": "OFF","ploop_s
# Placeholder for CAN backend # Placeholder for CAN backend
class CANBackend: class CANBackend:
def __init__(self): def __init__(self, eds_file=None):
self.connected = False self.connected = False
def connect(self, node_id: int, eds_path: str) -> bool: def connect(self, node_id: int, eds_path: str) -> bool:

36
static/monitor.html
View File

@ -38,10 +38,21 @@
border-radius: 5px; border-radius: 5px;
margin: 10px; margin: 10px;
} }
.status-container {
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
margin: 10px auto;
text-align: center;
font-size: 18px;
}
</style> </style>
</head> </head>
<body> <body>
<h1 id="pageTitle">Live Monitoring Dashboard</h1> <h1 id="pageTitle">Live Monitoring Dashboard</h1>
<div class="status-container">
<p>Current Status: <span id="currentStatus">Loading...</span></p>
</div>
<button id="recordButton" onclick="toggleRecording()">Record</button> <button id="recordButton" onclick="toggleRecording()">Record</button>
<div class="plot-container"> <div class="plot-container">
<div id="flow-plot" class="large-plot"></div> <div id="flow-plot" class="large-plot"></div>
@ -147,20 +158,16 @@
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const allData = await response.json(); const allData = await response.json();
const puData = allData[`PU_${puNumber}`]; const puData = allData[`PU_${puNumber}`];
// Convert timestamp string to Date object // Convert timestamp string to Date object
const timestamp = new Date(puData.timestamp); const timestamp = new Date(puData.timestamp);
Plotly.extendTraces('flow-plot', { Plotly.extendTraces('flow-plot', {
x: [[timestamp], [timestamp], [timestamp], [timestamp]], x: [[timestamp], [timestamp], [timestamp], [timestamp]],
y: [[puData.Qperm], [puData.Qdilute], [puData.Qdrain], [puData.Qrecirc]] y: [[puData.Qperm], [puData.Qdilute], [puData.Qdrain], [puData.Qrecirc]]
}, [0, 1, 2, 3], maxPoints); }, [0, 1, 2, 3], maxPoints);
Plotly.extendTraces('pressure-plot', { Plotly.extendTraces('pressure-plot', {
x: [[timestamp], [timestamp], [timestamp]], x: [[timestamp], [timestamp], [timestamp]],
y: [[puData.Pro], [puData.Pdilute], [puData.Prentate]] y: [[puData.Pro], [puData.Pdilute], [puData.Prentate]]
}, [0, 1, 2], maxPoints); }, [0, 1, 2], maxPoints);
const range = getLastMinuteRange(); const range = getLastMinuteRange();
const plotIds = ['flow-plot', 'pressure-plot']; const plotIds = ['flow-plot', 'pressure-plot'];
plotIds.forEach(id => { 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() { function initPlots() {
const time0 = [new Date()]; // Use current time for initialization const time0 = [new Date()]; // Use current time for initialization
Plotly.newPlot('flow-plot', [ Plotly.newPlot('flow-plot', [
@ -183,7 +203,6 @@
xaxis: { title: 'Time', type: 'date' }, xaxis: { title: 'Time', type: 'date' },
yaxis: { title: 'Flow (L/h)', range: [0, 2000] } yaxis: { title: 'Flow (L/h)', range: [0, 2000] }
}); });
Plotly.newPlot('pressure-plot', [ Plotly.newPlot('pressure-plot', [
{ x: time0, y: [0], name: 'Pro', mode: 'lines', line: { color: 'purple' } }, { x: time0, y: [0], name: 'Pro', mode: 'lines', line: { color: 'purple' } },
{ x: time0, y: [0], name: 'Pdilute', mode: 'lines', line: { color: 'teal' } }, { x: time0, y: [0], name: 'Pdilute', mode: 'lines', line: { color: 'teal' } },
@ -193,11 +212,14 @@
xaxis: { title: 'Time', type: 'date' }, xaxis: { title: 'Time', type: 'date' },
yaxis: { title: 'Pressure (bar)', range: [0, 15] } yaxis: { title: 'Pressure (bar)', range: [0, 15] }
}); });
setInterval(updatePlots, 500); setInterval(updatePlots, 500);
} }
window.onload = initPlots; window.onload = function() {
initPlots();
fetchPUStatus();
setInterval(fetchPUStatus, 500); // Update status every 5 seconds
};
</script> </script>
</body> </body>
</html> </html>