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

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)
 
 

static/monitor.html

@@ -22,8 +22,8 @@
             height: 300px;
         }
         .small-plot {
-            width: 22%;
+            width: 30%;
-            height: 200px;
+            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
     };
 </script>
 </body>