From 1e3f47876c7708358ab7dc275f599215f44c6197 Mon Sep 17 00:00:00 2001
From: Etienne Chassaing <60154720+cetiennec@users.noreply.github.com>
Date: Tue, 8 Jul 2025 17:02:10 +0200
Subject: [PATCH] Adds a monitor page

---
 MockCAN.py          |  28 ++++++--
 main.py             |  80 +++++++++++++++++++--
 static/index.html   |  75 ++++++++++++++++---
 static/monitor.html | 170 ++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 337 insertions(+), 16 deletions(-)
 create mode 100644 static/monitor.html

diff --git a/MockCAN.py b/MockCAN.py
index fdc6a71..98f403c 100644
--- a/MockCAN.py
+++ b/MockCAN.py
@@ -28,8 +28,28 @@ class CANBackend:
         # Placeholder for sending mode command
         PUs_states[pu_number-1] = {"PU_MODE": state, "ploop_setpoint":ploop_setpoint}
 
-
     def get_latest_data(self):
-        # Placeholder for getting latest TPDO data
-        return {"FM2" : round(1000*np.random.random(),1),"PS1" : round(10*np.random.random(),2)}
-
+        # Simulate getting the latest data with random values
+        return {
+            "FM2": round(1000 * np.random.random(), 1),
+            "FM3": round(1000 * np.random.random(), 1),
+            "FM4": round(1000 * np.random.random(), 1),
+            "FM5": round(1000 * np.random.random(), 1),
+            "PS1": round(10 * np.random.random(), 2),
+            "PS2": round(10 * np.random.random(), 2),
+            "PS3": round(10 * np.random.random(), 2),
+            "PS4": round(10 * np.random.random(), 2),
+            "Cond": 1* np.random.random(),
+            "MV02": round(100 * np.random.random(), 2),
+            "MV02_sp": round(100 * np.random.random(), 2),
+            "MV03": round(100 * np.random.random(), 2),
+            "MV03_sp": round(100 * np.random.random(), 2),
+            "MV05": round(100 * np.random.random(), 2),
+            "MV05_sp": round(100 * np.random.random(), 2),
+            "MV06": round(100 * np.random.random(), 2),
+            "MV06_sp": round(100 * np.random.random(), 2),
+            "MV07": round(100 * np.random.random(), 2),
+            "MV07_sp": round(100 * np.random.random(), 2),
+            "MV08": round(100 * np.random.random(), 2),
+            "MV08_sp": round(100 * np.random.random(), 2),
+        }
\ No newline at end of file
diff --git a/main.py b/main.py
index 9d2d5dc..54e0bb1 100644
--- a/main.py
+++ b/main.py
@@ -41,15 +41,79 @@ def send_command(state: str, pu_number: int, ploop_setpoint: float = Query(...))
         return {"status": "success", "command": state.upper(), "pu": pu_number, "ploop_setpoint": ploop_setpoint}
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
+
 @app.get("/monitor")
 def get_monitor_data():
+    # TODO : agree on the structure
     data = can_backend.get_latest_data()
     print(f"[MONITOR] Latest SDO: {data}")
     return {
-        "Qperm": [data.get("FM2", 0.0), data.get("FM2", 0.0), 0.0],
-        "Pdilute": [data.get("PS1", 0.0), 0.0, 0.0],
-        "Conductivity": [0.0, 0.0, 0.0],
-        "Pro": [0.0, 0.0, 0.0],
+        "PU_1": {
+            "Qperm": data.get("FM2", 0.0),
+            "Qdilute": data.get("FM3", 0.0),
+            "Qdrain": data.get("FM4", 0.0),
+            "Qrecirc": data.get("FM5", 0.0),
+            "Pro": data.get("PS1", 0.0),
+            "Pdilute": data.get("PS2", 0.0),
+            "Prentate": data.get("PS3", 0.0),
+            "Conductivity": data.get("Cond", 0.0),
+            "MV02": data.get("MV02", 0.0),
+            "MV02_sp": data.get("MV02_sp", 0.0),
+            "MV03": data.get("MV03", 0.0),
+            "MV03_sp": data.get("MV03_sp", 0.0),
+            "MV05": data.get("MV05", 0.0),
+            "MV05_sp": data.get("MV05_sp", 0.0),
+            "MV06": data.get("MV06", 0.0),
+            "MV06_sp": data.get("MV06_sp", 0.0),
+            "MV07": data.get("MV07", 0.0),
+            "MV07_sp": data.get("MV07_sp", 0.0),
+            "MV08": data.get("MV08", 0.0),
+            "MV08_sp": data.get("MV08_sp", 0.0)
+        },
+        "PU_2": {
+            "Qperm": data.get("FM2", 0.0),
+            "Qdilute": data.get("FM3", 0.0),
+            "Qdrain": data.get("FM4", 0.0),
+            "Qrecirc": data.get("FM5", 0.0),
+            "Pro": data.get("PS1", 0.0),
+            "Pdilute": data.get("PS2", 0.0),
+            "Prentate": data.get("PS3", 0.0),
+            "Conductivity": data.get("Cond", 0.0),
+            "MV02": data.get("MV02", 0.0),
+            "MV02_sp": data.get("MV02_sp", 0.0),
+            "MV03": data.get("MV03", 0.0),
+            "MV03_sp": data.get("MV03_sp", 0.0),
+            "MV05": data.get("MV05", 0.0),
+            "MV05_sp": data.get("MV05_sp", 0.0),
+            "MV06": data.get("MV06", 0.0),
+            "MV06_sp": data.get("MV06_sp", 0.0),
+            "MV07": data.get("MV07", 0.0),
+            "MV07_sp": data.get("MV07_sp", 0.0),
+            "MV08": data.get("MV08", 0.0),
+            "MV08_sp": data.get("MV08_sp", 0.0)
+        },
+        "PU_3": {
+            "Qperm": data.get("FM2", 0.0),
+            "Qdilute": data.get("FM3", 0.0),
+            "Qdrain": data.get("FM4", 0.0),
+            "Qrecirc": data.get("FM5", 0.0),
+            "Pro": data.get("PS1", 0.0),
+            "Pdilute": data.get("PS2", 0.0),
+            "Prentate": data.get("PS3", 0.0),
+            "Conductivity": data.get("Cond", 0.0),
+            "MV02": data.get("MV02", 0.0),
+            "MV02_sp": data.get("MV02_sp", 0.0),
+            "MV03": data.get("MV03", 0.0),
+            "MV03_sp": data.get("MV03_sp", 0.0),
+            "MV05": data.get("MV05", 0.0),
+            "MV05_sp": data.get("MV05_sp", 0.0),
+            "MV06": data.get("MV06", 0.0),
+            "MV06_sp": data.get("MV06_sp", 0.0),
+            "MV07": data.get("MV07", 0.0),
+            "MV07_sp": data.get("MV07_sp", 0.0),
+            "MV08": data.get("MV08", 0.0),
+            "MV08_sp": data.get("MV08_sp", 0.0)
+        }
     }
 
 
@@ -64,6 +128,14 @@ async def read_root():
     with open("static/index.html", "r") as file:
         return HTMLResponse(content=file.read(), status_code=200)
 
+
+@app.get("/monitor-page", response_class=HTMLResponse)
+async def read_monitor_page():
+    """Serve monitor HTML page."""
+    with open("static/monitor.html", "r") as file:
+        return HTMLResponse(content=file.read(), status_code=200)
+
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(
diff --git a/static/index.html b/static/index.html
index d54c0df..75387ad 100644
--- a/static/index.html
+++ b/static/index.html
@@ -269,14 +269,38 @@
 }
 
 
-        async function updateMonitorData() {
-            const response = await fetch('/monitor');
-            const data = await response.json();
-            updateMonitorValues('Qperm', data.Qperm, 'L/h');
-            updateMonitorValues('Pdilute', data.Pdilute, 'bar');
-            updateMonitorValues('Conductivity', data.Conductivity, 'µS/cm');
-            updateMonitorValues('Pro', data.Pro, 'units');
-        }
+    async function updateMonitorData() {
+      const response = await fetch('/monitor');
+      const data = await response.json();  // data = { PU_1: {...}, PU_2: {...}, PU_3: {...} }
+
+      for (const [puId, puData] of Object.entries(data)) {
+        const container = document.getElementById(puId);
+        if (!container) continue;
+
+        container.innerHTML = `
+          <h3>${puId}</h3>
+          <div class="monitor-value">Q_perm<br>${puData.Qperm.toFixed(1)} L/h</div>
+          <div class="monitor-value">Q_dilute<br>${puData.Qdilute.toFixed(1)} L/h</div>
+          <div class="monitor-value">Q_drain<br>${puData.Qdrain.toFixed(1)} L/h</div>
+          <div class="monitor-value">Q_recirc<br>${puData.Qrecirc.toFixed(1)} L/h</div>
+
+          <div class="monitor-value">P_ro<br>${puData.Pro.toFixed(1)} bar</div>
+          <div class="monitor-value">P_dilute<br>${puData.Pdilute.toFixed(1)} bar</div>
+          <div class="monitor-value">P_rentate<br>${puData.Prentate.toFixed(1)} bar</div>
+
+          <div class="monitor-value">Conductivity<br>${puData.Conductivity.toFixed(1)} µS/cm</div>
+
+          <div class="monitor-value">MV02<br>${puData.MV02.toFixed(1)} % (sp: ${puData.MV02_sp.toFixed(1)})</div>
+          <div class="monitor-value">MV03<br>${puData.MV03.toFixed(1)} % (sp: ${puData.MV03_sp.toFixed(1)})</div>
+          <div class="monitor-value">MV05<br>${puData.MV05.toFixed(1)} % (sp: ${puData.MV05_sp.toFixed(1)})</div>
+          <div class="monitor-value">MV06<br>${puData.MV06.toFixed(1)} % (sp: ${puData.MV06_sp.toFixed(1)})</div>
+          <div class="monitor-value">MV07<br>${puData.MV07.toFixed(1)} % (sp: ${puData.MV07_sp.toFixed(1)})</div>
+          <div class="monitor-value">MV08<br>${puData.MV08.toFixed(1)} % (sp: ${puData.MV08_sp.toFixed(1)})</div>
+        `;
+      }
+    }
+
+
 
         function updateMonitorValues(id, values, unit) {
             const container = document.getElementById(id);
@@ -291,5 +315,40 @@
         // Update monitor data every second
         setInterval(updateMonitorData, 1000);
     </script>
+
+    <script>
+    async function fetchMonitorData() {
+        try {
+            const response = await fetch('/monitor');
+            const data = await response.json();
+
+            const keys = ["PU_1", "PU_2", "PU_3"];
+            const fields = {
+                "Qperm": "L/h",
+                "Pdilute": "bar",
+                "Conductivity": "µS/cm",
+                "Pro": "bar"
+            };
+
+            for (const field in fields) {
+                const container = document.getElementById(field);
+                if (!container) continue;
+
+                container.innerHTML = keys.map((pu, i) => {
+                    const value = data[pu][field] ?? 0.0;
+                    return `<div class="monitor-value">#${i + 1}<br>${value.toFixed(1)} ${fields[field]}</div>`;
+                }).join('');
+            }
+
+        } catch (error) {
+            console.error('Erreur lors de la récupération des données de /monitor :', error);
+        }
+    }
+
+    // Rafraîchir toutes les 3 secondes
+    setInterval(fetchMonitorData, 3000);
+    fetchMonitorData(); // Premier appel immédiat
+    </script>
+
 </body>
 </html>
diff --git a/static/monitor.html b/static/monitor.html
new file mode 100644
index 0000000..60b03ae
--- /dev/null
+++ b/static/monitor.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live Monitoring Dashboard</title>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+        }
+        .plot-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 20px;
+        }
+        .large-plot {
+            width: 45%;
+            height: 300px;
+        }
+        .small-plot {
+            width: 22%;
+            height: 200px;
+        }
+        h1 {
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <h1>Live Monitoring Dashboard</h1>
+    <div class="plot-container">
+        <div id="flow-plot" class="large-plot"></div>
+        <div id="pressure-plot" class="large-plot"></div>
+        <div id="mv02-plot" class="small-plot"></div>
+        <div id="mv03-plot" class="small-plot"></div>
+        <div id="mv04-05-plot" class="small-plot"></div>
+        <div id="mv06-plot" class="small-plot"></div>
+        <div id="mv07-plot" class="small-plot"></div>
+        <div id="mv08-plot" class="small-plot"></div>
+    </div>
+
+<script>
+    const maxPoints = 100; // Number of time points to keep
+    const time = () => new Date(); // Timestamp for x-axis
+
+    async function updatePlots() {
+        try {
+            const response = await fetch('/monitor');
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            const data = await response.json();
+
+            const pu = data["PU_1"];
+            const t = time();
+
+            // Extend traces for flow plot
+            Plotly.extendTraces('flow-plot', {
+                x: [[t], [t], [t], [t]],
+                y: [[pu.Qperm], [pu.Qdilute], [pu.Qdrain], [pu.Qrecirc]]
+            }, [0, 1, 2, 3], maxPoints);
+
+            // Extend traces for pressure plot
+            Plotly.extendTraces('pressure-plot', {
+                x: [[t], [t], [t]],
+                y: [[pu.Pro], [pu.Pdilute], [pu.Prentate]]
+            }, [0, 1, 2], maxPoints);
+
+            const mv = pu;  // assuming pu = data.PU_1
+
+            Plotly.extendTraces('mv02-plot', { x: [[t]], y: [[mv.MV02]] }, [0]);
+            Plotly.extendTraces('mv03-plot', { x: [[t]], y: [[mv.MV03]] }, [0]);
+            Plotly.extendTraces('mv04-05-plot', {
+                x: [[t], [t]],
+                y: [[mv.MV04], [mv.MV05]]
+            }, [0, 1]);
+            Plotly.extendTraces('mv06-plot', { x: [[t]], y: [[mv.MV06]] }, [0]);
+            Plotly.extendTraces('mv07-plot', { x: [[t]], y: [[mv.MV07]] }, [0]);
+            Plotly.extendTraces('mv08-plot', { x: [[t]], y: [[mv.MV08]] }, [0]);
+
+
+
+        } catch (error) {
+            console.error("Error updating plots:", error);
+        }
+    }
+
+    function initPlots() {
+        const time0 = [time()];
+
+        // Flow plot with multiple traces
+        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' } },
+            { 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',
+            xaxis: { title: 'Time', type: 'date' },
+            yaxis: { title: 'Flow (L/h)', range: [0, 2000] }
+        });
+
+        // Pressure plot
+        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' } },
+            { x: time0, y: [0], name: 'Prentate', mode: 'lines', line: { color: 'gray' } }
+        ], {
+            title: 'Pressure Over Time',
+            xaxis: { title: 'Time', type: 'date' },
+            yaxis: { title: 'Pressure (bar)', range: [0, 15] }
+        });
+        // MV02
+        Plotly.newPlot('mv02-plot', [{
+            x: [time()], y: [0], name: 'MV02', mode: 'lines'
+        }], {
+            title: 'MV02 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
+        });
+
+        // MV03
+        Plotly.newPlot('mv03-plot', [{
+            x: [time()], y: [0], name: 'MV03', mode: 'lines'
+        }], {
+            title: 'MV03 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
+        });
+
+        // MV04 + MV05
+        Plotly.newPlot('mv04-05-plot', [
+            { x: [time()], y: [0], name: 'MV04', mode: 'lines' },
+            { x: [time()], y: [0], name: 'MV05', mode: 'lines' }
+        ], {
+            title: 'MV04 + MV05 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
+        });
+
+        // MV06
+        Plotly.newPlot('mv06-plot', [{
+            x: [time()], y: [0], name: 'MV06', mode: 'lines'
+        }], {
+            title: 'MV06 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
+        });
+
+        // MV07
+        Plotly.newPlot('mv07-plot', [{
+            x: [time()], y: [0], name: 'MV07', mode: 'lines'
+        }], {
+            title: 'MV07 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
+        });
+
+        // MV08
+        Plotly.newPlot('mv08-plot', [{
+            x: [time()], y: [0], name: 'MV08', mode: 'lines'
+        }], {
+            title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
+        });
+
+        // Update every second
+        setInterval(updatePlots, 1000);
+    }
+
+    window.onload = initPlots;
+</script>
+
+
+        // Initialize plots when the page loads
+        window.onload = initPlots;
+    </script>
+</body>
+</html>