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,198 +57,199 @@
     <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>
-  const urlParams = new URLSearchParams(window.location.search);
-  const puNumber = urlParams.get('pu_number') || '1';
-  document.getElementById('pageTitle').textContent = `Live Monitoring Dashboard - PU ${puNumber}`;
+  <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 {
-      const response = await fetch('/monitor');
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-      const allData = await response.json();
-      const puData = allData[`PU_${puNumber}`];
-      const SkidData = allData[`PatientSkid`];
-      const t = new Date(puData.timestamp);
+    async function updatePlots() {
+      try {
+        const response = await fetch('/monitor');
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+        const allData = await response.json();
+        const puData = allData[`PU_${puNumber}`];
+        const SkidData = allData[`PatientSkid`];
+        const t = new Date(puData.timestamp);
 
-      Plotly.extendTraces('flow-plot-1', {
-        x: [[t], [t]],
-        y: [[puData.Qperm], [puData.Qdilute]]
-      }, [0, 1], maxPoints);
+        Plotly.extendTraces('flow-plot-1', {
+          x: [[t], [t]],
+          y: [[puData.Qperm], [puData.Qdilute]]
+        }, [0, 1], maxPoints);
 
-      Plotly.extendTraces('flow-plot-2', {
-        x: [[t], [t], [t], [t]],
-        y: [[puData.Qdrain], [puData.Qrecirc], [SkidData.QSkid], [puData.QdrainEDI]]
-      }, [0, 1, 2, 3], maxPoints);
+        Plotly.extendTraces('flow-plot-2', {
+          x: [[t], [t], [t], [t]],
+          y: [[puData.Qdrain], [puData.Qrecirc], [SkidData.QSkid], [puData.QdrainEDI]]
+        }, [0, 1, 2, 3], maxPoints);
 
-      Plotly.extendTraces('pressure-plot-1', {
-        x: [[t], [t]],
-        y: [[puData.Pro], [puData.Pretentate]]
-      }, [0, 1], maxPoints);
+        Plotly.extendTraces('pressure-plot-1', {
+          x: [[t], [t]],
+          y: [[puData.Pro], [puData.Pretentate]]
+        }, [0, 1], maxPoints);
 
-      Plotly.extendTraces('pressure-plot-2', {
-        x: [[t]],
-        y: [[puData.Pdilute]]
-      }, [0], maxPoints);
+        Plotly.extendTraces('pressure-plot-2', {
+          x: [[t]],
+          y: [[puData.Pdilute]]
+        }, [0], maxPoints);
 
-      Plotly.extendTraces('conductivity-plot', {
-        x: [[t], [t], [t]],
-        y: [[puData.Cfeed], [puData.Cperm], [puData.Cdilute]]
-      }, [0, 1, 2], maxPoints);
+        Plotly.extendTraces('conductivity-plot', {
+          x: [[t], [t], [t]],
+          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-plot', {
+          x: [[t], [t]],
+          y: [[puData.MV02_sp], [puData.MV02]]
+        }, [0, 1], maxPoints);
+
+        Plotly.extendTraces('MV03-plot', {
+          x: [[t], [t]],
+          y: [[puData.MV03_sp], [puData.MV03]]
+        }, [0, 1], maxPoints);
+
+        Plotly.extendTraces('MV04_sp-05-plot', {
+          x: [[t], [t], [t], [t]],
+          y: [[puData.MV04_sp], [puData.MV04], [puData.MV05_sp], [puData.MV05]]
+        }, [0, 1, 2, 3], maxPoints);
+
+        Plotly.extendTraces('MV06-plot', {
+          x: [[t], [t]],
+          y: [[puData.MV06_sp], [puData.MV06]]
+        }, [0, 1], maxPoints);
 
 
-      Plotly.extendTraces('MV02_sp-plot', {
-        x: [[t], [t]],
-        y: [[puData.MV02_sp], [puData.MV02]]
-      }, [0, 1], maxPoints);
-
-      Plotly.extendTraces('MV03_sp-plot', {
-        x: [[t], [t]],
-        y: [[puData.MV03_sp], [puData.MV03]]
-      }, [0, 1], maxPoints);
-
-      Plotly.extendTraces('MV04_sp-05-plot', {
-        x: [[t], [t], [t], [t]],
-        y: [[puData.MV04_sp], [puData.MV04], [puData.MV05_sp], [puData.MV05]]
-      }, [0, 1, 2, 3], maxPoints);
-
-      Plotly.extendTraces('MV06_sp-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', {
-        x: [[t], [t]],
-        y: [[puData.MV08_sp], [puData.MV08]]
-      }, [0, 1], maxPoints);
-    } catch (e) {
-      console.error("Error updating plots:", e);
+        Plotly.extendTraces('MV08-plot', {
+          x: [[t], [t]],
+          y: [[puData.MV08_sp], [puData.MV08]]
+        }, [0, 1], maxPoints);
+      } catch (e) {
+        console.error("Error updating plots:", e);
+      }
     }
-  }
 
-  async function fetchPUStatus() {
-    try {
-      const res = await fetch("/api/pu_status");
-      const data = await res.json();
-      const status = data[`PU${puNumber}`] || "Unknown";
-      document.getElementById("currentStatus").textContent = status;
-    } catch (e) {
-      console.error("Error fetching PU status:", e);
-      document.getElementById("currentStatus").textContent = "Error fetching status";
+    async function fetchPUStatus() {
+      try {
+        const res = await fetch("/api/pu_status");
+        const data = await res.json();
+        const status = data[`PU${puNumber}`] || "Unknown";
+        document.getElementById("currentStatus").textContent = status;
+      } catch (e) {
+        console.error("Error fetching PU status:", e);
+        document.getElementById("currentStatus").textContent = "Error fetching status";
+      }
     }
-  }
 
-  function initPlots() {
-    const time0 = [new Date()];
+    function initPlots() {
+      const time0 = [new Date()];
 
-    Plotly.newPlot('flow-plot-1', [
-      { x: time0, y: [0], name: 'Qperm', mode: 'lines' },
-      { x: time0, y: [0], name: 'Qdilute', mode: 'lines' }
-    ], {
-      title: 'Qperm and Qdilute',
-      xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' }
-    });
+      Plotly.newPlot('flow-plot-1', [
+        { x: time0, y: [0], name: 'Qperm', mode: 'lines' },
+        { x: time0, y: [0], name: 'Qdilute', mode: 'lines' }
+      ], {
+        title: 'Qperm and Qdilute',
+        xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' }
+      });
 
-    Plotly.newPlot('flow-plot-2', [
-      { x: time0, y: [0], name: 'Qdrain', mode: 'lines' },
-      { x: time0, y: [0], name: 'Qrecirc', mode: 'lines' },
-      { x: time0, y: [0], name: 'QSkid', mode: 'lines' },
-      { x: time0, y: [0], name: 'QdrainEDI', mode: 'lines' }
-    ], {
-      title: 'Other Flows', xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' }
-    });
+      Plotly.newPlot('flow-plot-2', [
+        { x: time0, y: [0], name: 'Qdrain', mode: 'lines' },
+        { x: time0, y: [0], name: 'Qrecirc', mode: 'lines' },
+        { x: time0, y: [0], name: 'QSkid', mode: 'lines' },
+        { x: time0, y: [0], name: 'QdrainEDI', mode: 'lines' }
+      ], {
+        title: 'Other Flows', xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' }
+      });
 
-    Plotly.newPlot('pressure-plot-1', [
-      { x: time0, y: [0], name: 'Pro', mode: 'lines' },
-      { x: time0, y: [0], name: 'Pretentate', mode: 'lines' }
-    ], {
-      title: 'Pro and Pretentate ', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' }
-    });
+      Plotly.newPlot('pressure-plot-1', [
+        { x: time0, y: [0], name: 'Pro', mode: 'lines' },
+        { x: time0, y: [0], name: 'Pretentate', mode: 'lines' }
+      ], {
+        title: 'Pro and Pretentate ', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' }
+      });
 
-    Plotly.newPlot('pressure-plot-2', [
-      { x: time0, y: [0], name: 'Pdilute', mode: 'lines' }
-    ], {
-      title: 'Pdilute Pressure', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' }
-    });
+      Plotly.newPlot('pressure-plot-2', [
+        { x: time0, y: [0], name: 'Pdilute', mode: 'lines' }
+      ], {
+        title: 'Pdilute Pressure', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' }
+      });
 
-    Plotly.newPlot('conductivity-plot', [
-      { x: time0, y: [0], name: 'Cfeed', mode: 'lines' },
-      { x: time0, y: [0], name: 'Cperm', mode: 'lines' },
-      { x: time0, y: [0], name: 'Cdilute', mode: 'lines' }
-    ], {
-      title: 'Conductivity Measurements',
-      xaxis: { type: 'date' },
-      yaxis: { title: 'Conductivity (µS/cm)' }
-    });
+      Plotly.newPlot('conductivity-plot', [
+        { x: time0, y: [0], name: 'Cfeed', mode: 'lines' },
+        { x: time0, y: [0], name: 'Cperm', mode: 'lines' },
+        { x: time0, y: [0], name: 'Cdilute', mode: 'lines' }
+      ], {
+        title: 'Conductivity Measurements',
+        xaxis: { type: 'date' },
+        yaxis: { title: 'Conductivity (µS/cm)' }
+      });
 
 
-    Plotly.newPlot('MV02_sp-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] }
-    });
+      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: {}
+      });
 
-    Plotly.newPlot('MV03_sp-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] }
-    });
+      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: {}
+      });
 
-    Plotly.newPlot('MV04_sp-05-plot', [
-      { x: time0, y: [0], name: 'MV04_sp', mode: 'lines' },
-      { x: time0, y: [0], name: 'MV04', mode: 'lines' },
-      { x: time0, y: [0], name: 'MV05_sp', mode: 'lines' },
-      { x: time0, y: [0], name: 'MV05', mode: 'lines' }
-    ], {
-      title: 'MV04 & MV05: Setpoints and Actuals', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
-    });
+      Plotly.newPlot('MV04_sp-05-plot', [
+        { x: time0, y: [0], name: 'MV04_sp', mode: 'lines' },
+        { x: time0, y: [0], name: 'MV04', mode: 'lines' },
+        { x: time0, y: [0], name: 'MV05_sp', mode: 'lines' },
+        { x: time0, y: [0], name: 'MV05', mode: 'lines' }
+      ], {
+        title: 'MV04 & MV05: Setpoints and Actuals', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+      });
 
-    Plotly.newPlot('MV06_sp-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] }
-    });
+      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: {}
+      });
 
-    Plotly.newPlot('MV07_sp-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] }
-    });
+      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: {}
+      });
 
-    Plotly.newPlot('MV08_sp-plot', [
-      { x: time0, y: [0], name: 'MV08_sp', mode: 'lines' },
-      { x: time0, y: [0], name: 'MV08', mode: 'lines' }
-    ], {
-      title: 'MV08: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
-    });
+      Plotly.newPlot('MV08-plot', [
+        { x: time0, y: [0], name: 'MV08_sp', mode: 'lines' },
+        { x: time0, y: [0], name: 'MV08', mode: 'lines' }
+      ], {
+        title: 'MV08: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+      });
 
-    setInterval(updatePlots, 500);
-  }
+      setInterval(updatePlots, 500);
+    }
 
-  window.onload = function() {
-    initPlots();
-    fetchPUStatus();
-    setInterval(fetchPUStatus, 5000);
-  };
-</script>
+    window.onload = function () {
+      initPlots();
+      fetchPUStatus();
+      setInterval(fetchPUStatus, 5000);
+    };
+  </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,287 +240,303 @@
             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;
+            margin-top: 10px;
+            display: flex;
+            justify-content: space-around;
         }
+
         .button-group button {
-          padding: 8px 16px;
-          font-size: 1rem;
-          border-radius: 8px;
-          background-color: #008CBA;
-          color: white;
-          border: none;
-          cursor: pointer;
+            padding: 8px 16px;
+            font-size: 1rem;
+            border-radius: 8px;
+            background-color: #008CBA;
+            color: white;
+            border: none;
+            cursor: pointer;
         }
+
         .button-group button:hover {
-          background-color: #005f6b;
+            background-color: #005f6b;
         }
     </style>
 </head>
+
 <body>
-<div class="header">
-    <h1>Hydraulic Machine Control</h1>
-    <div class="monitor-pu-buttons">
-    <!-- New multi-monitor button -->
-    <a href="/multi-monitor-page" target="_blank" class="monitor-link">
-        <i class="fas fa-chart-bar"></i> Monitor All PUs
-    </a>
+    <div class="header">
+        <h1>Hydraulic Machine Control</h1>
+        <div class="monitor-pu-buttons">
+            <!-- New multi-monitor button -->
+            <a href="/multi-monitor-page" target="_blank" class="monitor-link">
+                <i class="fas fa-chart-bar"></i> Monitor All PUs
+            </a>
 
-    <a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link">
-        <i class="fas fa-chart-line"></i> Monitor PU 1
-    </a>
-    <a href="/monitor-page?pu_number=2" target="_blank" class="monitor-link">
-        <i class="fas fa-chart-line"></i> Monitor PU 2
-    </a>
-    <a href="/monitor-page?pu_number=3" target="_blank" class="monitor-link">
-        <i class="fas fa-chart-line"></i> Monitor PU 3
-    </a>
+            <a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link">
+                <i class="fas fa-chart-line"></i> Monitor PU 1
+            </a>
+            <a href="/monitor-page?pu_number=2" target="_blank" class="monitor-link">
+                <i class="fas fa-chart-line"></i> Monitor PU 2
+            </a>
+            <a href="/monitor-page?pu_number=3" target="_blank" class="monitor-link">
+                <i class="fas fa-chart-line"></i> Monitor PU 3
+            </a>
 
-    <!-- New Record Button -->
-    <button id="recordButton" class="connect-button" onclick="toggleRecording()">
-        <i class="fas fa-circle"></i> Start Recording
-    </button>
+            <!-- New Record Button -->
+            <button id="recordButton" class="connect-button" onclick="toggleRecording()">
+                <i class="fas fa-circle"></i> Start Recording
+            </button>
+        </div>
+        <button id="connectButton" class="connect-button" onclick="toggleConnection()">
+            <i class="fas fa-power-off"></i> Disconnect
+        </button>
     </div>
-    <button id="connectButton" class="connect-button" onclick="toggleConnection()">
-        <i class="fas fa-power-off"></i> Disconnect
-    </button>
-</div>
 
-<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>
+    <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>
+                </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>
+                </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>
+                </div>
+            </div>
+            <div class="slider-container">
+                <label for="ploopSetpoint">P-loop Setpoint (bars):</label>
+                <div class="slider-values">
+                    <span id="minValue">0.5</span>
+                    <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)">
+            </div>
+            <div class="mode-block">
+                <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>
+                <div class="pu-item"><span>PU 2: </span><span id="pu2-status">Offline</span></div>
+                <div class="pu-item"><span>PU 3: </span><span id="pu3-status">Offline</span></div>
+            </div>
+            <div class="button-group">
+                <button onclick="runAutoTest(1)">Automatic Test PU1</button>
+                <button onclick="runAutoTest(2)">Automatic Test PU2</button>
+                <button onclick="runAutoTest(3)">Automatic Test PU3</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>
+        <div class="right-panel">
+            <div class="monitor-block">
+                <h2><i class="fas fa-tint"></i> Q Perm</h2>
+                <div class="monitor-values" id="Qperm">
+                    <div class="monitor-value">#1<br>0.0 L/h</div>
+                    <div class="monitor-value">#2<br>0.0 L/h</div>
+                    <div class="monitor-value">#3<br>0.0 L/h</div>
+                </div>
             </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>
+            <div class="monitor-block">
+                <h2><i class="fas fa-water"></i> P Dilute</h2>
+                <div class="monitor-values" id="Pdilute">
+                    <div class="monitor-value">#1<br>0.0 bar</div>
+                    <div class="monitor-value">#2<br>0.0 bar</div>
+                    <div class="monitor-value">#3<br>0.0 bar</div>
+                </div>
             </div>
-        </div>
-        <div class="slider-container">
-            <label for="ploopSetpoint">P-loop Setpoint (bars):</label>
-            <div class="slider-values">
-                <span id="minValue">0.5</span>
-                <span id="currentValue">2.5</span>
-                <span id="maxValue">3.5</span>
+            <div class="monitor-block">
+                <h2><i class="fas fa-bolt"></i> Cdilute</h2>
+                <div class="monitor-values" id="Cdilute">
+                    <div class="monitor-value">#1<br>0.0 µS/cm</div>
+                    <div class="monitor-value">#2<br>0.0 µS/cm</div>
+                    <div class="monitor-value">#3<br>0.0 µS/cm</div>
+                </div>
             </div>
-            <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>
-        </div>
-        <div class="pu-status">
-            <div class="pu-item"><span>PU 1: </span><span id="pu1-status">Offline</span></div>
-            <div class="pu-item"><span>PU 2: </span><span id="pu2-status">Offline</span></div>
-            <div class="pu-item"><span>PU 3: </span><span id="pu3-status">Offline</span></div>
-        </div>
-        <div class="button-group">
-          <button onclick="runAutoTest(1)">Automatic Test PU1</button>
-          <button onclick="runAutoTest(2)">Automatic Test PU2</button>
-          <button onclick="runAutoTest(3)">Automatic Test PU3</button>
-        </div>
-    </div>
-    <div class="right-panel">
-        <div class="monitor-block">
-            <h2><i class="fas fa-tint"></i> Q Perm</h2>
-            <div class="monitor-values" id="Qperm">
-                <div class="monitor-value">#1<br>0.0 L/h</div>
-                <div class="monitor-value">#2<br>0.0 L/h</div>
-                <div class="monitor-value">#3<br>0.0 L/h</div>
-            </div>
-        </div>
-        <div class="monitor-block">
-            <h2><i class="fas fa-water"></i> P Dilute</h2>
-            <div class="monitor-values" id="Pdilute">
-                <div class="monitor-value">#1<br>0.0 bar</div>
-                <div class="monitor-value">#2<br>0.0 bar</div>
-                <div class="monitor-value">#3<br>0.0 bar</div>
-            </div>
-        </div>
-        <div class="monitor-block">
-            <h2><i class="fas fa-bolt"></i> Cdilute</h2>
-            <div class="monitor-values" id="Cdilute">
-                <div class="monitor-value">#1<br>0.0 µS/cm</div>
-                <div class="monitor-value">#2<br>0.0 µS/cm</div>
-                <div class="monitor-value">#3<br>0.0 µS/cm</div>
-            </div>
-        </div>
-        <div class="monitor-block">
-             <h2><i class="fas fa-thermometer-half"></i> Pro</h2>
-            <div class="monitor-values" id="Pro">
-                <div class="monitor-value">#1<br>0.0 units</div>
-                <div class="monitor-value">#2<br>0.0 units</div>
-                <div class="monitor-value">#3<br>0.0 units</div>
+            <div class="monitor-block">
+                <h2><i class="fas fa-thermometer-half"></i> Pro</h2>
+                <div class="monitor-values" id="Pro">
+                    <div class="monitor-value">#1<br>0.0 units</div>
+                    <div class="monitor-value">#2<br>0.0 units</div>
+                    <div class="monitor-value">#3<br>0.0 units</div>
+                </div>
             </div>
         </div>
     </div>
-</div>
-<script>
-    function updatePloopSetpoint(value) {
-        document.getElementById('currentValue').textContent = value;
-    }
+    <script>
+        function updatePloopSetpoint(value) {
+            document.getElementById('currentValue').textContent = value;
+        }
 
-    async function getConnectionStatus() {
-      const response = await fetch('/is_connected', { method: 'GET' });
-      const data = await response.json();
-      const connectButton = document.getElementById('connectButton');
-      if (data.connected) {
-            connectButton.classList.add('connected');
-            connectButton.innerHTML = '<i class="fas fa-power-off"></i> Disconnect';
-      } else {
-            connectButton.classList.remove('connected');
-            connectButton.innerHTML = '<i class="fas fa-power-off"></i> Connect';
-      }
-      connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
-    }
-
-    async function toggleConnection() {
-      const response = await fetch('/connect_toggle', { method: 'POST' });
-      const data = await response.json();
-      const connectButton = document.getElementById('connectButton');
-    //   connectButton.classList.toggle('connected', data.connected);
-    //   connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
-    }
-
-
-    let isRecording = false;
-
-    async function toggleRecording() {
-        const button = document.getElementById('recordButton');
-        try {
-            if (!isRecording) {
-                await fetch('/start_recording', { method: 'POST' });
-                button.innerHTML = '<i class="fas fa-stop-circle"></i> Stop Recording';
-                button.classList.add('connected'); // Optional: green background
+        async function getConnectionStatus() {
+            const response = await fetch('/is_connected', { method: 'GET' });
+            const data = await response.json();
+            const connectButton = document.getElementById('connectButton');
+            if (data.connected) {
+                connectButton.classList.add('connected');
+                connectButton.innerHTML = '<i class="fas fa-power-off"></i> Disconnect';
             } else {
-                await fetch('/stop_recording', { method: 'POST' });
-                button.innerHTML = '<i class="fas fa-circle"></i> Start Recording';
-                button.classList.remove('connected');
+                connectButton.classList.remove('connected');
+                connectButton.innerHTML = '<i class="fas fa-power-off"></i> Connect';
             }
-            isRecording = !isRecording;
-        } catch (error) {
-            console.error('Recording toggle failed:', error);
-            alert('Failed to toggle recording. Check connection.');
+            connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
         }
-    }
-    async function sendCommand(state, puNumber, buttonEl) {
-        const ploopSetpoint = document.getElementById('ploopSetpoint').value;
-        await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, {method: 'POST'});
-        document.querySelectorAll('button').forEach(btn => {
-            btn.classList.remove('in-progress', 'ready', 'production');
-        });
-        if (state === 'PRE-PRODUCTION') {
-            buttonEl.classList.add('in-progress');
-            buttonEl.textContent = `Waiting... PU ${puNumber}`;
-            buttonEl.disabled = true;
-            const checkReady = async () => {
-                const res = await fetch(`/api/pu_status`);
-                const states = await res.json();
-                const currentState = states[`PU${puNumber}`];
-                if (currentState === 'SYSTEM_MODE_READY') {
-                    buttonEl.classList.remove('in-progress');
-                    buttonEl.classList.add('ready');
-                    buttonEl.textContent = `START PRODUCTION PU ${puNumber}`;
-                    buttonEl.disabled = false;
-                    buttonEl.onclick = async () => {
-                        await sendCommand("PRODUCTION", puNumber, buttonEl);
-                        buttonEl.classList.remove('ready');
-                        buttonEl.classList.add('production');
-                        buttonEl.textContent = `PRODUCTION ON PU ${puNumber}`;
-                        buttonEl.disabled = true;
-                    };
+
+        async function toggleConnection() {
+            const response = await fetch('/connect_toggle', { method: 'POST' });
+            const data = await response.json();
+            const connectButton = document.getElementById('connectButton');
+            //   connectButton.classList.toggle('connected', data.connected);
+            //   connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
+        }
+
+
+        let isRecording = false;
+
+        async function toggleRecording() {
+            const button = document.getElementById('recordButton');
+            try {
+                if (!isRecording) {
+                    await fetch('/start_recording', { method: 'POST' });
+                    button.innerHTML = '<i class="fas fa-stop-circle"></i> Stop Recording';
+                    button.classList.add('connected'); // Optional: green background
                 } else {
-                    setTimeout(checkReady, 1000);
+                    await fetch('/stop_recording', { method: 'POST' });
+                    button.innerHTML = '<i class="fas fa-circle"></i> Start Recording';
+                    button.classList.remove('connected');
                 }
-            };
-            checkReady();
-        } else if (state === 'PRODUCTION') {
-            buttonEl.classList.add('production');
-            buttonEl.textContent = `PRODUCTION ON PU ${puNumber}`;
-        } else if (state === 'IDLE' || state === 'FIRST_START') {
-            buttonEl.classList.remove('in-progress', 'ready', 'production');
-            buttonEl.classList.add('production');
-            buttonEl.textContent = `${state.replace('_', ' ')} PU ${puNumber}`;
-            const preProdBtn = document.querySelector(`button[data-action="PRE-PRODUCTION"][data-pu="${puNumber}"]`);
-            if (preProdBtn) {
-                preProdBtn.classList.remove('in-progress', 'ready', 'production');
-                preProdBtn.innerHTML = `<i class="fas fa-play"></i> PRE-PROD PU ${puNumber}`;
-                preProdBtn.disabled = false;
-                preProdBtn.onclick = () => sendCommand("PRE-PRODUCTION", puNumber, preProdBtn);
-            }
-            const idleBtn = document.querySelector(`button[data-action="IDLE"][data-pu="${puNumber}"]`);
-            if (idleBtn && idleBtn !== buttonEl) {
-                idleBtn.classList.remove('in-progress', 'ready', 'production');
-                idleBtn.innerHTML = `<i class="fas fa-power-off"></i> IDLE PU ${puNumber}`;
-                idleBtn.disabled = false;
-                idleBtn.onclick = () => sendCommand("IDLE", puNumber, idleBtn);
-            }
-            const firstStartBtn = document.querySelector(`button[data-action="FIRST_START"][data-pu="${puNumber}"]`);
-            if (firstStartBtn && firstStartBtn !== buttonEl) {
-                firstStartBtn.classList.remove('in-progress', 'ready', 'production');
-                firstStartBtn.innerHTML = `<i class="fas fa-power-off"></i> FIRST START PU ${puNumber}`;
-                firstStartBtn.disabled = false;
-                firstStartBtn.onclick = () => sendCommand("FIRST_START", puNumber, firstStartBtn);
+                isRecording = !isRecording;
+            } catch (error) {
+                console.error('Recording toggle failed:', error);
+                alert('Failed to toggle recording. Check connection.');
             }
         }
-    }
-    function runAutoTest(puNumber) {
-        const endpoint = `/test/auto/${puNumber}`;  // Example: /test/auto/1
-
-        fetch(endpoint, {
-            method: 'POST'
-        })
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Test PU${puNumber} failed`);
+        async function sendCommand(state, puNumber, buttonEl) {
+            const ploopSetpoint = document.getElementById('ploopSetpoint').value;
+            await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, { method: 'POST' });
+            document.querySelectorAll('button').forEach(btn => {
+                btn.classList.remove('in-progress', 'ready', 'production');
+            });
+            if (state === 'PRE-PRODUCTION') {
+                buttonEl.classList.add('in-progress');
+                buttonEl.textContent = `Waiting... PU ${puNumber}`;
+                buttonEl.disabled = true;
+                const checkReady = async () => {
+                    const res = await fetch(`/api/pu_status`);
+                    const states = await res.json();
+                    const currentState = states[`PU${puNumber}`];
+                    if (currentState === 'SYSTEM_MODE_READY') {
+                        buttonEl.classList.remove('in-progress');
+                        buttonEl.classList.add('ready');
+                        buttonEl.textContent = `START PRODUCTION PU ${puNumber}`;
+                        buttonEl.disabled = false;
+                        buttonEl.onclick = async () => {
+                            await sendCommand("PRODUCTION", puNumber, buttonEl);
+                            buttonEl.classList.remove('ready');
+                            buttonEl.classList.add('production');
+                            buttonEl.textContent = `PRODUCTION ON PU ${puNumber}`;
+                            buttonEl.disabled = true;
+                        };
+                    } else {
+                        setTimeout(checkReady, 1000);
+                    }
+                };
+                checkReady();
+            } else if (state === 'PRODUCTION') {
+                buttonEl.classList.add('production');
+                buttonEl.textContent = `PRODUCTION ON PU ${puNumber}`;
+            } else if (state === 'IDLE' || state === 'FIRST_START') {
+                buttonEl.classList.remove('in-progress', 'ready', 'production');
+                buttonEl.classList.add('production');
+                buttonEl.textContent = `${state.replace('_', ' ')} PU ${puNumber}`;
+                const preProdBtn = document.querySelector(`button[data-action="PRE-PRODUCTION"][data-pu="${puNumber}"]`);
+                if (preProdBtn) {
+                    preProdBtn.classList.remove('in-progress', 'ready', 'production');
+                    preProdBtn.innerHTML = `<i class="fas fa-play"></i> PRE-PROD PU ${puNumber}`;
+                    preProdBtn.disabled = false;
+                    preProdBtn.onclick = () => sendCommand("PRE-PRODUCTION", puNumber, preProdBtn);
+                }
+                const idleBtn = document.querySelector(`button[data-action="IDLE"][data-pu="${puNumber}"]`);
+                if (idleBtn && idleBtn !== buttonEl) {
+                    idleBtn.classList.remove('in-progress', 'ready', 'production');
+                    idleBtn.innerHTML = `<i class="fas fa-power-off"></i> IDLE PU ${puNumber}`;
+                    idleBtn.disabled = false;
+                    idleBtn.onclick = () => sendCommand("IDLE", puNumber, idleBtn);
+                }
+                const firstStartBtn = document.querySelector(`button[data-action="FIRST_START"][data-pu="${puNumber}"]`);
+                if (firstStartBtn && firstStartBtn !== buttonEl) {
+                    firstStartBtn.classList.remove('in-progress', 'ready', 'production');
+                    firstStartBtn.innerHTML = `<i class="fas fa-power-off"></i> FIRST START PU ${puNumber}`;
+                    firstStartBtn.disabled = false;
+                    firstStartBtn.onclick = () => sendCommand("FIRST_START", puNumber, firstStartBtn);
+                }
             }
-            return response.json();
-        })
-        // .then(data => {
-        //     alert(`Automatic Test PU${puNumber} started successfully.`);
-        //     console.log(data);
-        // })
-        // .catch(error => {
-        //     alert(`Error starting test for PU${puNumber}: ${error.message}`);
-        //     console.error(error);
-        // });
-    }
+        }
+        function runAutoTest(puNumber) {
+            const endpoint = `/test/auto/${puNumber}`;  // Example: /test/auto/1
 
-    async function fetchPUStatus() {
-        const response = await fetch("/api/pu_status");
-        const data = await response.json();
-        document.getElementById("pu1-status").textContent = data.PU1 || "Unknown";
-        document.getElementById("pu2-status").textContent = data.PU2 || "Unknown";
-        document.getElementById("pu3-status").textContent = data.PU3 || "Unknown";
-    }
+            fetch(endpoint, {
+                method: 'POST'
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`Test PU${puNumber} failed`);
+                    }
+                    return response.json();
+                })
+            // .then(data => {
+            //     alert(`Automatic Test PU${puNumber} started successfully.`);
+            //     console.log(data);
+            // })
+            // .catch(error => {
+            //     alert(`Error starting test for PU${puNumber}: ${error.message}`);
+            //     console.error(error);
+            // });
+        }
 
-    fetchPUStatus();
-    setInterval(fetchPUStatus, 5000);
+        async function fetchPUStatus() {
+            const response = await fetch("/api/pu_status");
+            const data = await response.json();
+            document.getElementById("pu1-status").textContent = data.PU1 || "Unknown";
+            document.getElementById("pu2-status").textContent = data.PU2 || "Unknown";
+            document.getElementById("pu3-status").textContent = data.PU3 || "Unknown";
+        }
 
-    async function updateMonitorData() {
-        const response = await fetch('/monitor');
-        const data = await response.json();
-        for (const [puId, puData] of Object.entries(data)) {
-            const container = document.getElementById(puId);
-            if (!container) continue;
-            container.innerHTML = `
+        fetchPUStatus();
+        setInterval(fetchPUStatus, 5000);
+
+        async function updateMonitorData() {
+            const response = await fetch('/monitor');
+            const data = await response.json();
+            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>
@@ -496,56 +547,57 @@
         <div class="monitor-value">P_retentate<br>${puData.Pretentate.toFixed(1)} bar</div>
         <div class="monitor-value">Cdilute<br>${puData.Cdilute.toFixed(1)} µS/cm</div>
         `;
+            }
         }
-    }
-
-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 = {
-            "Qperm": "L/h",
-            "Pdilute": "bar",
-            "Cdilute": "µS/cm",
-            "Pro": "bar"
-        };
-
-        const dataResponse = await fetch('/monitor');
-        const allData = await dataResponse.json();
-
-        for (const [fieldId, unit] of Object.entries(fields)) {
-            const container = document.getElementById(fieldId);
-            if (!container) continue;
 
+        function updateMonitorValues(id, values, unit) {
+            const container = document.getElementById(id);
             const valueElements = container.querySelectorAll('.monitor-value');
-
-            puLabels.forEach((puLabel, index) => {
-                const puData = allData[puLabel];
-                const value = puData && fieldId in puData ? puData[fieldId] : 0.0;
-                if (valueElements[index]) {
-                    valueElements[index].innerHTML = `#${index + 1}<br>${value.toFixed(1)} ${unit}`;
+            valueElements.forEach((element, index) => {
+                if (index < values.length) {
+                    element.innerHTML = `#${index + 1}<br>${values[index]} ${unit}`;
                 }
             });
         }
-    } catch (error) {
-        console.error('Error fetching monitor data:', error);
-    }
-}
+        setInterval(updateMonitorData, 1000);
+        async function fetchMonitorData() {
+            try {
+                const puLabels = ["PU_1", "PU_2", "PU_3"];
+                const fields = {
+                    "Qperm": "L/h",
+                    "Pdilute": "bar",
+                    "Cdilute": "µS/cm",
+                    "Pro": "bar"
+                };
 
-getConnectionStatus();
-ssetInterval(getConnectionStatus, 1000);
+                const dataResponse = await fetch('/monitor');
+                const allData = await dataResponse.json();
 
-setInterval(fetchMonitorData, 1000);
-fetchMonitorData();
-</script>
+                for (const [fieldId, unit] of Object.entries(fields)) {
+                    const container = document.getElementById(fieldId);
+                    if (!container) continue;
+
+                    const valueElements = container.querySelectorAll('.monitor-value');
+
+                    puLabels.forEach((puLabel, index) => {
+                        const puData = allData[puLabel];
+                        const value = puData && fieldId in puData ? puData[fieldId] : 0.0;
+                        if (valueElements[index]) {
+                            valueElements[index].innerHTML = `#${index + 1}<br>${value.toFixed(1)} ${unit}`;
+                        }
+                    });
+                }
+            } catch (error) {
+                console.error('Error fetching monitor data:', error);
+            }
+        }
+
+        setInterval(getConnectionStatus, 1000);
+        getConnectionStatus();
+
+        setInterval(fetchMonitorData, 1000);
+        fetchMonitorData();
+    </script>
 </body>
+
 </html>