Added docking board parameters on hmi backend

classCAN.py

@@ -133,8 +133,8 @@ class CANBackend:
                         })
                     
                     elif cob_id == 0x2AB and len(data) >= 7:
-                        self.latest_data[2].update({
-                            "PU2_STATE"            : data[0],
+                        self.latest_data[1].update({
+                            "PU1_STATE"            : data[0],
                             "Conductivity_Feed"    : int.from_bytes(data[1:3], 'little') / 100.0,
                             "Conductivity_Permeate": int.from_bytes(data[3:5], 'little') / 100.0,
                             "Conductivity_Product" : int.from_bytes(data[5:7], 'little') / 100.0,
@@ -172,6 +172,21 @@ class CANBackend:
                             "Pump_sp": int.from_bytes(data[6:8], 'little') / 100.0,
                         })
 
+                    elif cob_id == 0x2AC and len(data) >= 8:
+                        self.latest_data[2].update({
+                            "Qdrain_sp": int.from_bytes(data[4:6], 'little'),
+                            "TankLevel": int.from_bytes(data[6:8], 'little'),
+                        })
+
+                    elif cob_id == 0x2B3 and len(data) >= 8:
+                        self.latest_data[2].update({
+                            "Inlet_flow": int.from_bytes(data[0:2], 'little') / 100.0,
+                            "Outlet_flow": int.from_bytes(data[2:4], 'little') / 100.0,
+
+                            "Pressure_perm": int.from_bytes(data[4:6], 'little') / 1000.0,
+                            "Pressure_ro": int.from_bytes(data[6:8], 'little') / 1000.0,
+                        })
+
                     elif cob_id == 0x2B1 and len(data) >= 7:
                         data =  list(data) 
                         self.latest_data[2].update({
@@ -209,6 +224,8 @@ class CANBackend:
                             "Conductivity_Product" : int.from_bytes(data[5:7], 'little') / 100.0,
                         })
 
+                        print("Conductivity_Product",int.from_bytes(data[5:7], 'little') / 100.0)
+
                     # # ========== PU1 DRIFT CHECK ==========
                     # if cob_id in (0x2A6, 0x2A8):  # FM1 or MV03_sp updates for PU1
                     #     mv03_sp = self.latest_data[1].get("MV03_sp")

main.py

@@ -31,7 +31,9 @@ if platform.system() in ["Darwin"]:  # macOS or Windows
 else:
     from classCAN import CANBackend  # Your real backend
 
-    logging.basicConfig(level=logging.ERROR)
+    logging.basicConfig(level=logging.DEBUG)
+
+logging.getLogger("uvicorn.access").setLevel(logging.WARNING)
 
 app = FastAPI()
 app.add_middleware(SessionMiddleware, secret_key="your_super_secret_key")
@@ -79,9 +81,9 @@ def format_data(data):
         "Pro": np.round(data.get("PS2", 0.0), 2),
         "Pdilute": np.round(data.get("PS3", 0.0), 2),
         "Pretentate": np.round(data.get("PS1", 0.0), 2),
-        "Cfeed": np.round(data.get("Conductivity_Feed", 0.0), 3),
-        "Cperm": np.round(data.get("Conductivity_Permeate", 0.0), 3),
-        "Cdilute": np.round(data.get("Conductivity_Product", 0.0), 3),
+        "Cfeed": data.get("Conductivity_Feed", 0.0),
+        "Cperm": data.get("Conductivity_Permeate", 0.0),
+        "Cdilute": data.get("Conductivity_Product", 0.0),
         "MV02": np.round(data.get("MV02", 0.0), 1),
         "MV02_sp": np.round(data.get("MV02_sp", 0.0), 1),
         "MV03": np.round(data.get("MV03", 0.0), 1),
@@ -169,10 +171,10 @@ def monitor_page(request: Request):
 
 @app.post("/connect_toggle")
 def connect_toggle():
-    logging.info("Toggling CAN connection...")
-    print("CONNECTING")
+    logging.info(f"Toggling CAN connection, CAN is {can_backend.connected}")
     if can_backend.connected:
         can_backend.shutdown()
+        logging.info("Shutting down CAN connection...")
         return {"connected": False}
     else:
         success = can_backend.connect()
@@ -250,7 +252,6 @@ async def update_latest_data():
 
 @app.get("/monitor")
 async def get_monitor_data(pu_number: Optional[float] = Query(None)):
-    print(f"pu_number is {pu_number}")
     if pu_number is not None:
         return latest_data.get(f"PU_{pu_number}", {})
     else:
@@ -391,6 +392,7 @@ async def auto_test_pu3():
 
 # PATIENT SKID HELPERS
 async def update_latest_flow():
+    global active_PUs
     async with aiohttp.ClientSession() as session:
         while True:
             try:
@@ -399,6 +401,9 @@ async def update_latest_flow():
                     latest_flow = int(data["log"]["flow"])
                     logging.debug(f"Updated flow: {latest_flow}")
                     latest_data["PatientSkid"]["QSkid"] = latest_flow
+                    # for index in active_PUs :
+                    #     logging.debug("PU_"+str(index))
+                    #     latest_data["PU_"+str(index)]["QSkid"] = latest_flow # Adding the data to all actives PUs
 
             except Exception as e:
                 logging.error(f"Error fetching flow: {e}")

static/monitor.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <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>
@@ -11,23 +12,28 @@
       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: 30%;
       height: 250px;
     }
+
     h1 {
       text-align: center;
     }
+
     .status-container {
       background-color: #f0f0f0;
       padding: 10px;
@@ -38,6 +44,7 @@
     }
   </style>
 </head>
+
 <body>
   <h1 id="pageTitle">Live Monitoring Dashboard</h1>
   <div class="status-container">
@@ -50,20 +57,20 @@
     <div id="flow-plot-2" class="large-plot"></div>
     <div id="pressure-plot-2" class="large-plot"></div>
     <div id="conductivity-plot" class="large-plot"></div>
-    <div id="MV02_sp-plot" class="small-plot"></div>
-    <div id="MV03_sp-plot" class="small-plot"></div>
+    <div id="MV07-plot" class="small-plot"></div>
+    <div id="MV02-plot" class="small-plot"></div>
+    <div id="MV03-plot" class="small-plot"></div>
     <div id="MV04_sp-05-plot" class="small-plot"></div>
-    <div id="MV06_sp-plot" class="small-plot"></div>
-    <div id="MV07_sp-plot" class="small-plot"></div>
-    <div id="MV08_sp-plot" class="small-plot"></div>
+    <div id="MV06-plot" class="small-plot"></div>
+    <div id="MV08-plot" class="small-plot"></div>
   </div>
 
-<script>
+  <script>
     const urlParams = new URLSearchParams(window.location.search);
     const puNumber = urlParams.get('pu_number') || '1';
     document.getElementById('pageTitle').textContent = `Live Monitoring Dashboard - PU ${puNumber}`;
 
-  const maxPoints = 100;
+    const maxPoints = 50;
 
     async function updatePlots() {
       try {
@@ -99,13 +106,17 @@
           y: [[puData.Cfeed], [puData.Cperm], [puData.Cdilute]]
         }, [0, 1, 2], maxPoints);
 
+        Plotly.extendTraces('MV07-plot', {
+          x: [[t], [t]],
+          y: [[puData.MV07_sp], [puData.MV07]]
+        }, [0, 1], maxPoints);
 
-      Plotly.extendTraces('MV02_sp-plot', {
+        Plotly.extendTraces('MV02-plot', {
           x: [[t], [t]],
           y: [[puData.MV02_sp], [puData.MV02]]
         }, [0, 1], maxPoints);
 
-      Plotly.extendTraces('MV03_sp-plot', {
+        Plotly.extendTraces('MV03-plot', {
           x: [[t], [t]],
           y: [[puData.MV03_sp], [puData.MV03]]
         }, [0, 1], maxPoints);
@@ -115,17 +126,13 @@
           y: [[puData.MV04_sp], [puData.MV04], [puData.MV05_sp], [puData.MV05]]
         }, [0, 1, 2, 3], maxPoints);
 
-      Plotly.extendTraces('MV06_sp-plot', {
+        Plotly.extendTraces('MV06-plot', {
           x: [[t], [t]],
           y: [[puData.MV06_sp], [puData.MV06]]
         }, [0, 1], maxPoints);
 
-      Plotly.extendTraces('MV07_sp-plot', {
-        x: [[t], [t]],
-        y: [[puData.MV07_sp], [puData.MV07]]
-      }, [0, 1], maxPoints);
 
-      Plotly.extendTraces('MV08_sp-plot', {
+        Plotly.extendTraces('MV08-plot', {
           x: [[t], [t]],
           y: [[puData.MV08_sp], [puData.MV08]]
         }, [0, 1], maxPoints);
@@ -190,18 +197,18 @@
       });
 
 
-    Plotly.newPlot('MV02_sp-plot', [
+      Plotly.newPlot('MV02-plot', [
         { x: time0, y: [0], name: 'MV02_sp', mode: 'lines' },
         { x: time0, y: [0], name: 'MV02', mode: 'lines' }
       ], {
-      title: 'MV02: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+        title: 'MV02: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: {}
       });
 
-    Plotly.newPlot('MV03_sp-plot', [
+      Plotly.newPlot('MV03-plot', [
         { x: time0, y: [0], name: 'MV03_sp', mode: 'lines' },
         { x: time0, y: [0], name: 'MV03', mode: 'lines' }
       ], {
-      title: 'MV03: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+        title: 'MV03: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: {}
       });
 
       Plotly.newPlot('MV04_sp-05-plot', [
@@ -213,21 +220,21 @@
         title: 'MV04 & MV05: Setpoints and Actuals', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
       });
 
-    Plotly.newPlot('MV06_sp-plot', [
+      Plotly.newPlot('MV06-plot', [
         { x: time0, y: [0], name: 'MV06_sp', mode: 'lines' },
         { x: time0, y: [0], name: 'MV06', mode: 'lines' }
       ], {
-      title: 'MV06: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+        title: 'MV06: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: {}
       });
 
-    Plotly.newPlot('MV07_sp-plot', [
+      Plotly.newPlot('MV07-plot', [
         { x: time0, y: [0], name: 'MV07_sp', mode: 'lines' },
         { x: time0, y: [0], name: 'MV07', mode: 'lines' }
       ], {
-      title: 'MV07: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+        title: 'MV07: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: {}
       });
 
-    Plotly.newPlot('MV08_sp-plot', [
+      Plotly.newPlot('MV08-plot', [
         { x: time0, y: [0], name: 'MV08_sp', mode: 'lines' },
         { x: time0, y: [0], name: 'MV08', mode: 'lines' }
       ], {
@@ -237,11 +244,12 @@
       setInterval(updatePlots, 500);
     }
 
-  window.onload = function() {
+    window.onload = function () {
       initPlots();
       fetchPUStatus();
       setInterval(fetchPUStatus, 5000);
     };
-</script>
+  </script>
 </body>
+
 </html>

templates/control.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -17,6 +18,7 @@
             display: flex;
             flex-direction: column;
         }
+
         .header {
             background-color: #1e1e1e;
             padding: 10px 20px;
@@ -24,6 +26,7 @@
             justify-content: space-between;
             align-items: center;
         }
+
         .connect-button {
             background-color: #ff4444;
             color: white;
@@ -36,9 +39,11 @@
             align-items: center;
             gap: 10px;
         }
+
         .connected {
             background-color: #00C851;
         }
+
         .container {
             display: flex;
             flex: 1;
@@ -46,17 +51,21 @@
             overflow-x: hidden;
             box-sizing: border-box;
         }
-        .left-panel, .right-panel {
+
+        .left-panel,
+        .right-panel {
             flex: 1;
             padding: 20px;
             overflow-y: auto;
         }
+
         .left-panel {
             background-color: #1e1e1e;
             display: flex;
             flex-direction: column;
             gap: 10px;
         }
+
         .mode-block {
             background-color: #333;
             padding: 15px;
@@ -65,10 +74,12 @@
             flex-direction: column;
             gap: 10px;
         }
+
         .pu-buttons {
             display: flex;
             gap: 10px;
         }
+
         .mode-block button {
             background-color: #4285F4;
             color: white;
@@ -80,39 +91,49 @@
             transition: background-color 0.3s;
             flex: 1;
         }
+
         .mode-block button:hover {
             background-color: #3367d6;
         }
+
         .mode-block button.active {
             background-color: #00C851;
         }
+
         .mode-block button.in-progress {
             background-color: #ffcc00;
             color: #000;
         }
+
         .mode-block button.ready {
             background-color: #00C851;
             color: #fff;
         }
+
         .mode-block button.disabled {
             background-color: #777;
             cursor: not-allowed;
         }
+
         .in-progress {
             background-color: yellow !important;
             color: black !important;
         }
+
         .ready {
             background-color: orange !important;
             color: black !important;
         }
+
         .production {
             background-color: green !important;
             color: white !important;
         }
+
         .pu-status {
             margin-top: 20px;
         }
+
         .pu-item {
             background-color: #333;
             padding: 10px;
@@ -122,24 +143,28 @@
             justify-content: space-between;
             align-items: center;
         }
+
         .monitor-block {
             background-color: #333;
             padding: 15px;
             border-radius: 5px;
             margin-bottom: 15px;
         }
+
         .monitor-values {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 10px;
             margin-top: 10px;
         }
+
         .monitor-value {
             background-color: #444;
             padding: 10px;
             text-align: center;
             border-radius: 5px;
         }
+
         .slider-container {
             background-color: #1e1e1e;
             padding: 10px;
@@ -147,12 +172,14 @@
             color: #fff;
             width: 95%;
         }
+
         .slider-container label {
             font-size: 1.2rem;
             font-weight: bold;
             margin-bottom: 10px;
             display: block;
         }
+
         .slider-values {
             display: flex;
             justify-content: space-between;
@@ -161,10 +188,12 @@
             width: 100%;
             overflow: hidden;
         }
+
         .slider-values span#currentValue {
             font-weight: bold;
             color: #00bfff;
         }
+
         .slider {
             width: 100%;
             height: 8px;
@@ -174,13 +203,16 @@
             appearance: none;
             cursor: pointer;
         }
-        .slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
+
+        .slider::-webkit-slider-thumb,
+        .slider::-moz-range-thumb {
             height: 18px;
             width: 18px;
             background: #007bff;
             border-radius: 50%;
             cursor: pointer;
         }
+
         .monitor-link {
             color: white;
             background-color: #007bff;
@@ -189,14 +221,17 @@
             text-decoration: none;
             font-weight: bold;
         }
+
         .monitor-link:hover {
             background-color: #0056b3;
         }
+
         .monitor-pu-buttons {
             display: flex;
             gap: 10px;
             margin: 10px;
         }
+
         .monitor-pu-buttons a {
             color: white;
             background-color: #007bff;
@@ -205,14 +240,17 @@
             text-decoration: none;
             font-weight: bold;
         }
+
         .monitor-pu-buttons a:hover {
             background-color: #0056b3;
         }
+
         .button-group {
             margin-top: 10px;
             display: flex;
             justify-content: space-around;
         }
+
         .button-group button {
             padding: 8px 16px;
             font-size: 1rem;
@@ -222,13 +260,15 @@
             border: none;
             cursor: pointer;
         }
+
         .button-group button:hover {
             background-color: #005f6b;
         }
     </style>
 </head>
+
 <body>
-<div class="header">
+    <div class="header">
         <h1>Hydraulic Machine Control</h1>
         <div class="monitor-pu-buttons">
             <!-- New multi-monitor button -->
@@ -254,29 +294,38 @@
         <button id="connectButton" class="connect-button" onclick="toggleConnection()">
             <i class="fas fa-power-off"></i> Disconnect
         </button>
-</div>
+    </div>
 
-<div class="container">
+    <div class="container">
         <div class="left-panel">
             <div class="mode-block">
                 <div class="pu-buttons">
-                <button onclick="sendCommand('IDLE', 1, this)" data-action="IDLE" data-pu="1"><i class="fas fa-power-off"></i> IDLE PU 1</button>
-                <button onclick="sendCommand('IDLE', 2, this)" data-action="IDLE" data-pu="2"><i class="fas fa-power-off"></i> IDLE PU 2</button>
-                <button onclick="sendCommand('IDLE', 3, this)" data-action="IDLE" data-pu="3"><i class="fas fa-power-off"></i> IDLE PU 3</button>
+                    <button onclick="sendCommand('IDLE', 1, this)" data-action="IDLE" data-pu="1"><i
+                            class="fas fa-power-off"></i> IDLE PU 1</button>
+                    <button onclick="sendCommand('IDLE', 2, this)" data-action="IDLE" data-pu="2"><i
+                            class="fas fa-power-off"></i> IDLE PU 2</button>
+                    <button onclick="sendCommand('IDLE', 3, this)" data-action="IDLE" data-pu="3"><i
+                            class="fas fa-power-off"></i> IDLE PU 3</button>
                 </div>
             </div>
             <div class="mode-block">
                 <div class="pu-buttons">
-                <button onclick="sendCommand('PRE-PRODUCTION', 1, this)" data-action="PRE-PRODUCTION" data-pu="1"><i class="fas fa-play"></i> PRE-PROD PU 1</button>
-                <button onclick="sendCommand('PRE-PRODUCTION', 2, this)" data-action="PRE-PRODUCTION" data-pu="2"><i class="fas fa-play"></i> PRE-PROD PU 2</button>
-                <button onclick="sendCommand('PRE-PRODUCTION', 3, this)" data-action="PRE-PRODUCTION" data-pu="3"><i class="fas fa-play"></i> PRE-PROD PU 3</button>
+                    <button onclick="sendCommand('PRE-PRODUCTION', 1, this)" data-action="PRE-PRODUCTION" data-pu="1"><i
+                            class="fas fa-play"></i> PRE-PROD PU 1</button>
+                    <button onclick="sendCommand('PRE-PRODUCTION', 2, this)" data-action="PRE-PRODUCTION" data-pu="2"><i
+                            class="fas fa-play"></i> PRE-PROD PU 2</button>
+                    <button onclick="sendCommand('PRE-PRODUCTION', 3, this)" data-action="PRE-PRODUCTION" data-pu="3"><i
+                            class="fas fa-play"></i> PRE-PROD PU 3</button>
                 </div>
             </div>
             <div class="mode-block">
                 <div class="pu-buttons">
-                <button onclick="sendCommand('FIRST_START', 1, this)" data-action="FIRST_START" data-pu="1"><i class="fas fa-power-off"></i> FIRST START PU 1</button>
-                <button onclick="sendCommand('FIRST_START', 2, this)" data-action="FIRST_START" data-pu="2"><i class="fas fa-power-off"></i> FIRST START PU 2</button>
-                <button onclick="sendCommand('FIRST_START', 3, this)" data-action="FIRST_START" data-pu="3"><i class="fas fa-power-off"></i> FIRST START PU 3</button>
+                    <button onclick="sendCommand('FIRST_START', 1, this)" data-action="FIRST_START" data-pu="1"><i
+                            class="fas fa-power-off"></i> FIRST START PU 1</button>
+                    <button onclick="sendCommand('FIRST_START', 2, this)" data-action="FIRST_START" data-pu="2"><i
+                            class="fas fa-power-off"></i> FIRST START PU 2</button>
+                    <button onclick="sendCommand('FIRST_START', 3, this)" data-action="FIRST_START" data-pu="3"><i
+                            class="fas fa-power-off"></i> FIRST START PU 3</button>
                 </div>
             </div>
             <div class="slider-container">
@@ -286,10 +335,12 @@
                     <span id="currentValue">2.5</span>
                     <span id="maxValue">3.5</span>
                 </div>
-            <input type="range" min="0.5" max="3.5" step="0.1" value="2.5" id="ploopSetpoint" class="slider" oninput="updatePloopSetpoint(this.value)">
+                <input type="range" min="0.5" max="3.5" step="0.1" value="2.5" id="ploopSetpoint" class="slider"
+                    oninput="updatePloopSetpoint(this.value)">
             </div>
             <div class="mode-block">
-            <button onclick="sendCommand('ThermalLoopCleaning', 0, this)"><i class="fas fa-fire"></i> Thermal Loop Cleaning</button>
+                <button onclick="sendCommand('ThermalLoopCleaning', 0, this)"><i class="fas fa-fire"></i> Thermal Loop
+                    Cleaning</button>
             </div>
             <div class="pu-status">
                 <div class="pu-item"><span>PU 1: </span><span id="pu1-status">Offline</span></div>
@@ -336,8 +387,8 @@
                 </div>
             </div>
         </div>
-</div>
-<script>
+    </div>
+    <script>
         function updatePloopSetpoint(value) {
             document.getElementById('currentValue').textContent = value;
         }
@@ -387,7 +438,7 @@
         }
         async function sendCommand(state, puNumber, buttonEl) {
             const ploopSetpoint = document.getElementById('ploopSetpoint').value;
-        await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, {method: 'POST'});
+            await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, { method: 'POST' });
             document.querySelectorAll('button').forEach(btn => {
                 btn.classList.remove('in-progress', 'ready', 'production');
             });
@@ -499,17 +550,17 @@
             }
         }
 
-function updateMonitorValues(id, values, unit) {
-const container = document.getElementById(id);
-const valueElements = container.querySelectorAll('.monitor-value');
-valueElements.forEach((element, index) => {
-if (index < values.length) {
-element.innerHTML = `#${index + 1}<br>${values[index]} ${unit}`;
-}
-});
-}
-setInterval(updateMonitorData, 1000);
-async function fetchMonitorData() {
+        function updateMonitorValues(id, values, unit) {
+            const container = document.getElementById(id);
+            const valueElements = container.querySelectorAll('.monitor-value');
+            valueElements.forEach((element, index) => {
+                if (index < values.length) {
+                    element.innerHTML = `#${index + 1}<br>${values[index]} ${unit}`;
+                }
+            });
+        }
+        setInterval(updateMonitorData, 1000);
+        async function fetchMonitorData() {
             try {
                 const puLabels = ["PU_1", "PU_2", "PU_3"];
                 const fields = {
@@ -539,13 +590,14 @@ async function fetchMonitorData() {
             } catch (error) {
                 console.error('Error fetching monitor data:', error);
             }
-}
+        }
 
-getConnectionStatus();
-ssetInterval(getConnectionStatus, 1000);
+        setInterval(getConnectionStatus, 1000);
+        getConnectionStatus();
 
-setInterval(fetchMonitorData, 1000);
-fetchMonitorData();
-</script>
+        setInterval(fetchMonitorData, 1000);
+        fetchMonitorData();
+    </script>
 </body>
+
 </html>