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
class CANBackend:
def __init__(self):
def __init__(self, eds_file=None):
self.connected = False
def connect(self, node_id: int, eds_path: str) -> bool:

36
static/monitor.html
View File

@ -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;
}
</style>
</head>
<body>
<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>
<div class="plot-container">
<div id="flow-plot" class="large-plot"></div>
@ -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
};
</script>
</body>
</html>