diff --git a/main.py b/main.py index daa9ac1..5842366 100644 --- a/main.py +++ b/main.py @@ -55,6 +55,8 @@ def format_data(data): "MV02_sp": data.get("MV02_sp", 0.0), "MV03": data.get("MV03", 0.0), "MV03_sp": data.get("MV03_sp", 0.0), + "MV04": data.get("MV05", 0.0), + "MV04_sp": data.get("MV05_sp", 0.0), "MV05": data.get("MV05", 0.0), "MV05_sp": data.get("MV05_sp", 0.0), "MV06": data.get("MV06", 0.0), diff --git a/static/monitor.html b/static/monitor.html index 8afd558..6fd5653 100644 --- a/static/monitor.html +++ b/static/monitor.html @@ -55,8 +55,10 @@
-
-
+
+
+
+
@@ -158,19 +160,27 @@ 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('flow-plot-1', { + x: [[timestamp], [timestamp]], + y: [[puData.Qperm], [puData.Qdilute]] + }, [0, 1], maxPoints); - Plotly.extendTraces('pressure-plot', { - x: [[timestamp], [timestamp], [timestamp]], - y: [[puData.Pro], [puData.Pdilute], [puData.Prentate]] - }, [0, 1, 2], maxPoints); + Plotly.extendTraces('flow-plot-2', { + x: [[timestamp], [timestamp]], + y: [[puData.Qdrain], [puData.Qrecirc]] + }, [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('mv03-plot', { x: [[timestamp]], y: [[puData.MV03]] }, [0], maxPoints); @@ -183,7 +193,7 @@ Plotly.extendTraces('mv08-plot', { x: [[timestamp]], y: [[puData.MV08]] }, [0], maxPoints); 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 => { Plotly.relayout(id, { 'xaxis.range': range }); }); @@ -206,27 +216,41 @@ } 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: '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: 'Qrecirc', mode: 'lines', line: { color: 'orange' } } ], { - title: 'Flow Rates Over Time', + title: 'Qdrain and Qrecirc Flow Rates Over Time', 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: 'Pdilute', mode: 'lines', line: { color: 'teal' } }, { 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' }, - 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', [{ @@ -266,7 +290,7 @@ title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } }); - setInterval(updatePlots, 500); + setInterval(updatePlots, 100); } window.onload = function() {