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

Merge branch 'main' of https://git.nehemis.fr/aniketSaha/NorthStar-HMI

Browse Source
This commit is contained in:
aniketSaha 2025-07-16 09:26:02 +02:00
commit ab01ac41bc
1 changed files with 47 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
static/monitor.html
View File

@ -55,8 +55,10 @@
</div> </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-1" class="large-plot"></div>
<div id="pressure-plot" class="large-plot"></div> <div id="pressure-plot-1" class="large-plot"></div>
<div id="flow-plot-2" class="large-plot"></div>
<div id="pressure-plot-2" class="large-plot"></div>
<div id="mv02-plot" class="small-plot"></div> <div id="mv02-plot" class="small-plot"></div>
<div id="mv03-plot" class="small-plot"></div> <div id="mv03-plot" class="small-plot"></div>
<div id="mv04-05-plot" class="small-plot"></div> <div id="mv04-05-plot" class="small-plot"></div>
@ -158,19 +160,27 @@
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
const timestamp = new Date(puData.timestamp); const timestamp = new Date(puData.timestamp);
Plotly.extendTraces('flow-plot', { Plotly.extendTraces('flow-plot-1', {
x: [[timestamp], [timestamp], [timestamp], [timestamp]], x: [[timestamp], [timestamp]],
y: [[puData.Qperm], [puData.Qdilute], [puData.Qdrain], [puData.Qrecirc]] y: [[puData.Qperm], [puData.Qdilute]]
}, [0, 1, 2, 3], maxPoints); }, [0, 1], maxPoints);
Plotly.extendTraces('pressure-plot', { Plotly.extendTraces('flow-plot-2', {
x: [[timestamp], [timestamp], [timestamp]], x: [[timestamp], [timestamp]],
y: [[puData.Pro], [puData.Pdilute], [puData.Prentate]] y: [[puData.Qdrain], [puData.Qrecirc]]
}, [0, 1, 2], maxPoints); }, [0, 1], maxPoints);
Plotly.extendTraces('pressure-plot-1', {
x: [[timestamp], [timestamp]],
y: [[puData.Pro], [puData.Prentate]]
}, [0, 1], maxPoints);
Plotly.extendTraces('pressure-plot-2', {
x: [[timestamp]],
y: [[puData.Pdilute]]
}, [0], maxPoints);
Plotly.extendTraces('mv02-plot', { x: [[timestamp]], y: [[puData.MV02]] }, [0], maxPoints); Plotly.extendTraces('mv02-plot', { x: [[timestamp]], y: [[puData.MV02]] }, [0], maxPoints);
Plotly.extendTraces('mv03-plot', { x: [[timestamp]], y: [[puData.MV03]] }, [0], maxPoints); Plotly.extendTraces('mv03-plot', { x: [[timestamp]], y: [[puData.MV03]] }, [0], maxPoints);
@ -183,7 +193,7 @@
Plotly.extendTraces('mv08-plot', { x: [[timestamp]], y: [[puData.MV08]] }, [0], maxPoints); Plotly.extendTraces('mv08-plot', { x: [[timestamp]], y: [[puData.MV08]] }, [0], maxPoints);
const range = getLastMinuteRange(); const range = getLastMinuteRange();
const plotIds = ['flow-plot', 'pressure-plot', 'mv02-plot', 'mv03-plot', 'mv04-05-plot', 'mv06-plot', 'mv07-plot', 'mv08-plot']; const plotIds = ['flow-plot-1', 'flow-plot-2', 'pressure-plot-1', 'pressure-plot-2', 'mv02-plot', 'mv03-plot', 'mv04-05-plot', 'mv06-plot', 'mv07-plot', 'mv08-plot'];
plotIds.forEach(id => { plotIds.forEach(id => {
Plotly.relayout(id, { 'xaxis.range': range }); Plotly.relayout(id, { 'xaxis.range': range });
}); });
@ -206,27 +216,41 @@
} }
function initPlots() { function initPlots() {
const time0 = [new Date()]; // Use current time for initialization const time0 = [new Date()];
Plotly.newPlot('flow-plot', [ Plotly.newPlot('flow-plot-1', [
{ 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' } }
], {
title: 'Qperm and Qdilute Flow Rates Over Time',
xaxis: { title: 'Time', type: 'date' },
yaxis: { title: 'Flow (L/h)' }
});
Plotly.newPlot('flow-plot-2', [
{ x: time0, y: [0], name: 'Qdrain', mode: 'lines', line: { color: 'red' } }, { x: time0, y: [0], name: 'Qdrain', mode: 'lines', line: { color: 'red' } },
{ x: time0, y: [0], name: 'Qrecirc', mode: 'lines', line: { color: 'orange' } } { x: time0, y: [0], name: 'Qrecirc', mode: 'lines', line: { color: 'orange' } }
], { ], {
title: 'Flow Rates Over Time', title: 'Qdrain and Qrecirc Flow Rates Over Time',
xaxis: { title: 'Time', type: 'date' }, xaxis: { title: 'Time', type: 'date' },
yaxis: { title: 'Flow (L/h)', range: [0, 2000] } yaxis: { title: 'Flow (L/h)' }
}); });
Plotly.newPlot('pressure-plot', [ Plotly.newPlot('pressure-plot-1', [
{ 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: 'Prentate', mode: 'lines', line: { color: 'gray' } } { x: time0, y: [0], name: 'Prentate', mode: 'lines', line: { color: 'gray' } }
], { ], {
title: 'Pressure Over Time', title: 'Pro and Prentate Pressure Over Time',
xaxis: { title: 'Time', type: 'date' }, xaxis: { title: 'Time', type: 'date' },
yaxis: { title: 'Pressure (bar)', range: [0, 15] } yaxis: { title: 'Pressure (bar)' }
});
Plotly.newPlot('pressure-plot-2', [
{ x: time0, y: [0], name: 'Pdilute', mode: 'lines', line: { color: 'teal' } }
], {
title: 'Pdilute Pressure Over Time',
xaxis: { title: 'Time', type: 'date' },
yaxis: { title: 'Pressure (bar)' }
}); });
Plotly.newPlot('mv02-plot', [{ Plotly.newPlot('mv02-plot', [{
@ -266,7 +290,7 @@
title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
}); });
setInterval(updatePlots, 500); setInterval(updatePlots, 100);
} }
window.onload = function() { window.onload = function() {