diff --git a/main.py b/main.py index 84f88a9..6b7e912 100644 --- a/main.py +++ b/main.py @@ -197,6 +197,7 @@ def get_pu_status(): "PU3": can_backend.read_current_state(3), } logging.info(f"[PU STATUS] {states}") + return JSONResponse(content=states) diff --git a/static/monitor.html b/static/monitor.html index af7bbf8..8afd558 100644 --- a/static/monitor.html +++ b/static/monitor.html @@ -22,8 +22,8 @@ height: 300px; } .small-plot { - width: 22%; - height: 200px; + width: 30%; + height: 250px; } h1 { text-align: center; @@ -158,18 +158,32 @@ 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); + + Plotly.extendTraces('mv02-plot', { x: [[timestamp]], y: [[puData.MV02]] }, [0], maxPoints); + Plotly.extendTraces('mv03-plot', { x: [[timestamp]], y: [[puData.MV03]] }, [0], maxPoints); + Plotly.extendTraces('mv04-05-plot', { + x: [[timestamp], [timestamp]], + y: [[puData.MV04], [puData.MV05]] + }, [0, 1], maxPoints); + Plotly.extendTraces('mv06-plot', { x: [[timestamp]], y: [[puData.MV06]] }, [0], maxPoints); + Plotly.extendTraces('mv07-plot', { x: [[timestamp]], y: [[puData.MV07]] }, [0], maxPoints); + Plotly.extendTraces('mv08-plot', { x: [[timestamp]], y: [[puData.MV08]] }, [0], maxPoints); + const range = getLastMinuteRange(); - const plotIds = ['flow-plot', 'pressure-plot']; + const plotIds = ['flow-plot', 'pressure-plot', 'mv02-plot', 'mv03-plot', 'mv04-05-plot', 'mv06-plot', 'mv07-plot', 'mv08-plot']; plotIds.forEach(id => { Plotly.relayout(id, { 'xaxis.range': range }); }); @@ -193,6 +207,7 @@ function initPlots() { const time0 = [new Date()]; // Use current time for initialization + Plotly.newPlot('flow-plot', [ { x: time0, y: [0], name: 'Qperm', mode: 'lines', line: { color: 'blue' } }, { x: time0, y: [0], name: 'Qdilute', mode: 'lines', line: { color: 'green' } }, @@ -203,6 +218,7 @@ 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' } }, @@ -212,13 +228,51 @@ xaxis: { title: 'Time', type: 'date' }, yaxis: { title: 'Pressure (bar)', range: [0, 15] } }); + + Plotly.newPlot('mv02-plot', [{ + x: time0, y: [0], name: 'MV02', mode: 'lines' + }], { + title: 'MV02 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } + }); + + Plotly.newPlot('mv03-plot', [{ + x: time0, y: [0], name: 'MV03', mode: 'lines' + }], { + title: 'MV03 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } + }); + + Plotly.newPlot('mv04-05-plot', [ + { x: time0, y: [0], name: 'MV04', mode: 'lines' }, + { x: time0, y: [0], name: 'MV05', mode: 'lines' } + ], { + title: 'MV04 + MV05 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } + }); + + Plotly.newPlot('mv06-plot', [{ + x: time0, y: [0], name: 'MV06', mode: 'lines' + }], { + title: 'MV06 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } + }); + + Plotly.newPlot('mv07-plot', [{ + x: time0, y: [0], name: 'MV07', mode: 'lines' + }], { + title: 'MV07 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } + }); + + Plotly.newPlot('mv08-plot', [{ + x: time0, y: [0], name: 'MV08', mode: 'lines' + }], { + title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' } + }); + setInterval(updatePlots, 500); } window.onload = function() { initPlots(); fetchPUStatus(); - setInterval(fetchPUStatus, 500); // Update status every 5 seconds + setInterval(fetchPUStatus, 5000); // Update status every 5 seconds };