From 83ebe2f212ffb35aa6261044221a8671c5ff117d Mon Sep 17 00:00:00 2001
From: Etienne Chassaing <60154720+cetiennec@users.noreply.github.com>
Date: Tue, 15 Jul 2025 14:11:14 +0200
Subject: [PATCH] Adds record button

---
 MockCAN.py          |   1 -
 static/monitor.html | 174 +++++++++++++++++++++++++++++++-------------
 2 files changed, 122 insertions(+), 53 deletions(-)
diff --git a/MockCAN.py b/MockCAN.py
index 9ab93cb..615d6c3 100644
--- a/MockCAN.py
+++ b/MockCAN.py
@@ -15,7 +15,6 @@ class CANBackend:
     def shutdown(self):
         self.connected = False
 
-
     def read_current_state(self,pu_number: int):
         # Placeholder for reading mode command
         return PUs_states[pu_number-1]["PU_MODE"]
diff --git a/static/monitor.html b/static/monitor.html
index 34ab5e7..48b763a 100644
--- a/static/monitor.html
+++ b/static/monitor.html
@@ -34,6 +34,16 @@
             font-size: 16px;
             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>
 </head>
 <body>
@@ -44,7 +54,7 @@
         <option value="2">PU 2</option>
         <option value="3">PU 3</option>
     </select>
-
+    <button id="recordButton" onclick="toggleRecording()">Record</button>
     <div class="plot-container">
         <div id="flow-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="mv08-plot" class="small-plot"></div>
     </div>
-
 <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 time = () => new Date();
     let selectedPU = 1;
@@ -71,51 +155,46 @@
         return [oneMinuteAgo, now];
     }
 
-   async function updatePlots() {
-    try {
-        const response = await fetch(`/monitor?pu_number=${selectedPU}`);
-        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-        const pu = await response.json();  // <- Directly using it
-        const t = time();
+    async function updatePlots() {
+        try {
+            const response = await fetch(`/monitor?pu_number=${selectedPU}`);
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            const pu = await response.json();
+            const t = time();
+            Plotly.extendTraces('flow-plot', {
+                x: [[t], [t], [t], [t]],
+                y: [[pu.Qperm], [pu.Qdilute], [pu.Qdrain], [pu.Qrecirc]]
+            }, [0, 1, 2, 3], maxPoints);
+            Plotly.extendTraces('pressure-plot', {
+                x: [[t], [t], [t]],
+                y: [[pu.Pro], [pu.Pdilute], [pu.Prentate]]
+            }, [0, 1, 2], maxPoints);
+            //
+            // Plotly.extendTraces('mv02-plot', { x: [[t]], y: [[pu.MV02]] }, [0]);
+            // Plotly.extendTraces('mv03-plot', { x: [[t]], y: [[pu.MV03]] }, [0]);
+            // Plotly.extendTraces('mv04-05-plot', {
+            //     x: [[t], [t]],
+            //     y: [[pu.MV04], [pu.MV05]]
+            // }, [0, 1]);
+            // Plotly.extendTraces('mv06-plot', { x: [[t]], y: [[pu.MV06]] }, [0]);
+            // Plotly.extendTraces('mv07-plot', { x: [[t]], y: [[pu.MV07]] }, [0]);
+            // Plotly.extendTraces('mv08-plot', { x: [[t]], y: [[pu.MV08]] }, [0]);
 
-        Plotly.extendTraces('flow-plot', {
-            x: [[t], [t], [t], [t]],
-            y: [[pu.Qperm], [pu.Qdilute], [pu.Qdrain], [pu.Qrecirc]]
-        }, [0, 1, 2, 3], maxPoints);
-
-        Plotly.extendTraces('pressure-plot', {
-            x: [[t], [t], [t]],
-            y: [[pu.Pro], [pu.Pdilute], [pu.Prentate]]
-        }, [0, 1, 2], maxPoints);
-        // TURN OFF FOR NOW
-        // Plotly.extendTraces('mv02-plot', { x: [[t]], y: [[pu.MV02]] }, [0]);
-        // Plotly.extendTraces('mv03-plot', { x: [[t]], y: [[pu.MV03]] }, [0]);
-        // Plotly.extendTraces('mv04-05-plot', {
-        //     x: [[t], [t]],
-        //     y: [[pu.MV04], [pu.MV05]]
-        // }, [0, 1]);
-        // Plotly.extendTraces('mv06-plot', { x: [[t]], y: [[pu.MV06]] }, [0]);
-        // Plotly.extendTraces('mv07-plot', { x: [[t]], y: [[pu.MV07]] }, [0]);
-        // Plotly.extendTraces('mv08-plot', { x: [[t]], y: [[pu.MV08]] }, [0]);
-
-        const range = getLastMinuteRange();
-        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 });
-        });
-
-    } catch (error) {
-        console.error("Error updating plots:", error);
+            const range = getLastMinuteRange();
+            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 });
+            });
+        } catch (error) {
+            console.error("Error updating plots:", error);
+        }
     }
-}
-
 
     function initPlots() {
         const time0 = [time()];
-
         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' } },
@@ -126,7 +205,6 @@
             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' } },
@@ -136,49 +214,41 @@
             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, 250);
+        setInterval(updatePlots, 1000);
     }
 
     window.onload = initPlots;
 </script>
-
 </body>
 </html>
