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

Adds record button

Browse Source
This commit is contained in:
Etienne Chassaing 2025-07-15 14:11:14 +02:00
parent fe05d62736
commit 83ebe2f212
2 changed files with 122 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
MockCAN.py
View File

@ -15,7 +15,6 @@ class CANBackend:
def shutdown(self): def shutdown(self):
self.connected = False self.connected = False
def read_current_state(self,pu_number: int): def read_current_state(self,pu_number: int):
# Placeholder for reading mode command # Placeholder for reading mode command
return PUs_states[pu_number-1]["PU_MODE"] return PUs_states[pu_number-1]["PU_MODE"]

110
static/monitor.html
View File

@ -34,6 +34,16 @@
font-size: 16px; font-size: 16px;
padding: 5px 10px; padding: 5px 10px;
} }
#recordButton {
background-color: #ff4444;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin: 10px;
}
</style> </style>
</head> </head>
<body> <body>
@ -44,7 +54,7 @@
<option value="2">PU 2</option> <option value="2">PU 2</option>
<option value="3">PU 3</option> <option value="3">PU 3</option>
</select> </select>
<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>
<div id="pressure-plot" class="large-plot"></div> <div id="pressure-plot" class="large-plot"></div>
@ -55,8 +65,82 @@
<div id="mv07-plot" class="small-plot"></div> <div id="mv07-plot" class="small-plot"></div>
<div id="mv08-plot" class="small-plot"></div> <div id="mv08-plot" class="small-plot"></div>
</div> </div>
<script> <script>
let isRecording = false;
let recordedData = [];
let recordingInterval;
let csvFileName = '';
async function toggleRecording() {
const recordButton = document.getElementById('recordButton');
if (!isRecording) {
isRecording = true;
recordButton.style.backgroundColor = '#ff0000';
recordButton.textContent = 'Stop Recording';
recordedData = [];
csvFileName = `monitoring_data_${new Date().toISOString().replace(/[:.]/g, '-')}.csv`;
startRecording();
} else {
isRecording = false;
recordButton.style.backgroundColor = '#ff4444';
recordButton.textContent = 'Record';
stopRecording();
}
}
function startRecording() {
recordingInterval = setInterval(async () => {
const response = await fetch(`/monitor?pu_number=${document.getElementById('puSelector').value}`);
if (!response.ok) {
console.error(`HTTP error! status: ${response.status}`);
return;
}
const pu = await response.json();
recordedData.push({
timestamp: new Date().toISOString(),
Qperm: pu.Qperm,
Qdilute: pu.Qdilute,
Qdrain: pu.Qdrain,
Qrecirc: pu.Qrecirc,
Pro: pu.Pro,
Pdilute: pu.Pdilute,
Prentate: pu.Prentate,
MV02: pu.MV02,
MV03: pu.MV03,
MV04: pu.MV04,
MV05: pu.MV05,
MV06: pu.MV06,
MV07: pu.MV07,
MV08: pu.MV08
});
}, 100);
}
async function stopRecording() {
clearInterval(recordingInterval);
if (recordedData.length > 0) {
const csvContent = "data:text/csv;charset=utf-8," +
"Timestamp,Qperm,Qdilute,Qdrain,Qrecirc,Pro,Pdilute,Prentate,MV02,MV03,MV04,MV05,MV06,MV07,MV08\n" +
recordedData.map(row =>
`${row.timestamp},${row.Qperm},${row.Qdilute},${row.Qdrain},${row.Qrecirc},${row.Pro},${row.Pdilute},${row.Prentate},${row.MV02},${row.MV03},${row.MV04},${row.MV05},${row.MV06},${row.MV07},${row.MV08}`
).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", csvFileName);
document.body.appendChild(link);
link.click();
}
}
window.onbeforeunload = function() {
if (isRecording) {
stopRecording();
}
};
// Existing plot initialization and update functions
const maxPoints = 100; const maxPoints = 100;
const time = () => new Date(); const time = () => new Date();
let selectedPU = 1; let selectedPU = 1;
@ -75,19 +159,17 @@
try { try {
const response = await fetch(`/monitor?pu_number=${selectedPU}`); const response = await fetch(`/monitor?pu_number=${selectedPU}`);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const pu = await response.json(); // <- Directly using it const pu = await response.json();
const t = time(); const t = time();
Plotly.extendTraces('flow-plot', { Plotly.extendTraces('flow-plot', {
x: [[t], [t], [t], [t]], x: [[t], [t], [t], [t]],
y: [[pu.Qperm], [pu.Qdilute], [pu.Qdrain], [pu.Qrecirc]] y: [[pu.Qperm], [pu.Qdilute], [pu.Qdrain], [pu.Qrecirc]]
}, [0, 1, 2, 3], maxPoints); }, [0, 1, 2, 3], maxPoints);
Plotly.extendTraces('pressure-plot', { Plotly.extendTraces('pressure-plot', {
x: [[t], [t], [t]], x: [[t], [t], [t]],
y: [[pu.Pro], [pu.Pdilute], [pu.Prentate]] y: [[pu.Pro], [pu.Pdilute], [pu.Prentate]]
}, [0, 1, 2], maxPoints); }, [0, 1, 2], maxPoints);
// TURN OFF FOR NOW //
// Plotly.extendTraces('mv02-plot', { x: [[t]], y: [[pu.MV02]] }, [0]); // Plotly.extendTraces('mv02-plot', { x: [[t]], y: [[pu.MV02]] }, [0]);
// Plotly.extendTraces('mv03-plot', { x: [[t]], y: [[pu.MV03]] }, [0]); // Plotly.extendTraces('mv03-plot', { x: [[t]], y: [[pu.MV03]] }, [0]);
// Plotly.extendTraces('mv04-05-plot', { // Plotly.extendTraces('mv04-05-plot', {
@ -106,16 +188,13 @@
plotIds.forEach(id => { plotIds.forEach(id => {
Plotly.relayout(id, { 'xaxis.range': range }); Plotly.relayout(id, { 'xaxis.range': range });
}); });
} catch (error) { } catch (error) {
console.error("Error updating plots:", error); console.error("Error updating plots:", error);
} }
} }
function initPlots() { function initPlots() {
const time0 = [time()]; const time0 = [time()];
Plotly.newPlot('flow-plot', [ Plotly.newPlot('flow-plot', [
{ x: time0, y: [0], name: 'Qperm', mode: 'lines', line: { color: 'blue' } }, { x: time0, y: [0], name: 'Qperm', mode: 'lines', line: { color: 'blue' } },
{ x: time0, y: [0], name: 'Qdilute', mode: 'lines', line: { color: 'green' } }, { x: time0, y: [0], name: 'Qdilute', mode: 'lines', line: { color: 'green' } },
@ -126,7 +205,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' } },
@ -136,49 +214,41 @@
xaxis: { title: 'Time', type: 'date' }, xaxis: { title: 'Time', type: 'date' },
yaxis: { title: 'Pressure (bar)', range: [0, 15] } yaxis: { title: 'Pressure (bar)', range: [0, 15] }
}); });
//
// Plotly.newPlot('mv02-plot', [{ // Plotly.newPlot('mv02-plot', [{
// x: time0, y: [0], name: 'MV02', mode: 'lines' // x: time0, y: [0], name: 'MV02', mode: 'lines'
// }], { // }], {
// title: 'MV02 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } // title: 'MV02 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
// }); // });
//
// Plotly.newPlot('mv03-plot', [{ // Plotly.newPlot('mv03-plot', [{
// x: time0, y: [0], name: 'MV03', mode: 'lines' // x: time0, y: [0], name: 'MV03', mode: 'lines'
// }], { // }], {
// title: 'MV03 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } // title: 'MV03 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
// }); // });
//
// Plotly.newPlot('mv04-05-plot', [ // Plotly.newPlot('mv04-05-plot', [
// { x: time0, y: [0], name: 'MV04', mode: 'lines' }, // { x: time0, y: [0], name: 'MV04', mode: 'lines' },
// { x: time0, y: [0], name: 'MV05', mode: 'lines' } // { x: time0, y: [0], name: 'MV05', mode: 'lines' }
// ], { // ], {
// title: 'MV04 + MV05 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } // title: 'MV04 + MV05 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
// }); // });
//
// Plotly.newPlot('mv06-plot', [{ // Plotly.newPlot('mv06-plot', [{
// x: time0, y: [0], name: 'MV06', mode: 'lines' // x: time0, y: [0], name: 'MV06', mode: 'lines'
// }], { // }], {
// title: 'MV06 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } // title: 'MV06 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
// }); // });
//
// Plotly.newPlot('mv07-plot', [{ // Plotly.newPlot('mv07-plot', [{
// x: time0, y: [0], name: 'MV07', mode: 'lines' // x: time0, y: [0], name: 'MV07', mode: 'lines'
// }], { // }], {
// title: 'MV07 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } // title: 'MV07 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
// }); // });
//
// Plotly.newPlot('mv08-plot', [{ // Plotly.newPlot('mv08-plot', [{
// x: time0, y: [0], name: 'MV08', mode: 'lines' // x: time0, y: [0], name: 'MV08', mode: 'lines'
// }], { // }], {
// title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } // title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
// }); // });
setInterval(updatePlots, 1000);
setInterval(updatePlots, 250);
} }
window.onload = initPlots; window.onload = initPlots;
</script> </script>
</body> </body>
</html> </html>