aniketSaha/NorthStar-HMI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: aniketSaha:9b0daf2d06c02d2931e9f160635d54ed618d6dbb
Branches Tags
aniketSaha:main
aniketSaha:asyncio-integration
...
compare: aniketSaha:6d29fa00591d340a7a6798107dfc77ca2109ca1f
Branches Tags
aniketSaha:main
aniketSaha:asyncio-integration

4 Commits
9b0daf2d06 ... 6d29fa0059

Author SHA1 Message Date
aniketSaha
6d29fa0059 Added docking board parameters on hmi backend 2025-08-06 10:13:45 +02:00
aniketSaha
efd44dbf3e updates to html page 2025-08-05 13:23:03 +02:00
aniketSaha
79b9f2d95d PU1 adress corrected 2025-08-05 11:34:38 +02:00
aniketSaha
81353c8b1f conductivity reading update and logging of uvicorn set to warning 2025-08-05 11:08:32 +02:00
4 changed files with 547 additions and 465 deletions
Show Stats Expand all files Collapse all files

21
classCAN.py
View File

@ -133,8 +133,8 @@ class CANBackend:
}) })
elif cob_id == 0x2AB and len(data) >= 7: elif cob_id == 0x2AB and len(data) >= 7:
self.latest_data[2].update({ self.latest_data[1].update({
"PU2_STATE" : data[0], "PU1_STATE" : data[0],
"Conductivity_Feed" : int.from_bytes(data[1:3], 'little') / 100.0, "Conductivity_Feed" : int.from_bytes(data[1:3], 'little') / 100.0,
"Conductivity_Permeate": int.from_bytes(data[3:5], '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, "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, "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: elif cob_id == 0x2B1 and len(data) >= 7:
data = list(data) data = list(data)
self.latest_data[2].update({ self.latest_data[2].update({
@ -209,6 +224,8 @@ class CANBackend:
"Conductivity_Product" : int.from_bytes(data[5:7], 'little') / 100.0, "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 ========== # # ========== PU1 DRIFT CHECK ==========
# if cob_id in (0x2A6, 0x2A8): # FM1 or MV03_sp updates for PU1 # if cob_id in (0x2A6, 0x2A8): # FM1 or MV03_sp updates for PU1
# mv03_sp = self.latest_data[1].get("MV03_sp") # mv03_sp = self.latest_data[1].get("MV03_sp")

19
main.py
View File

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

338
static/monitor.html
View File

@ -1,8 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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> <title>Live Monitoring Dashboard</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style> <style>
@ -11,23 +12,28 @@
margin: 0; margin: 0;
padding: 20px; padding: 20px;
} }
.plot-container { .plot-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
} }
.large-plot { .large-plot {
width: 45%; width: 45%;
height: 300px; height: 300px;
} }
.small-plot { .small-plot {
width: 30%; width: 30%;
height: 250px; height: 250px;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.status-container { .status-container {
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 10px; padding: 10px;
@ -38,6 +44,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<h1 id="pageTitle">Live Monitoring Dashboard</h1> <h1 id="pageTitle">Live Monitoring Dashboard</h1>
<div class="status-container"> <div class="status-container">
@ -50,198 +57,199 @@
<div id="flow-plot-2" class="large-plot"></div> <div id="flow-plot-2" class="large-plot"></div>
<div id="pressure-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="conductivity-plot" class="large-plot"></div>
<div id="MV02_sp-plot" class="small-plot"></div> <div id="MV07-plot" class="small-plot"></div>
<div id="MV03_sp-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="MV04_sp-05-plot" class="small-plot"></div>
<div id="MV06_sp-plot" class="small-plot"></div> <div id="MV06-plot" class="small-plot"></div>
<div id="MV07_sp-plot" class="small-plot"></div> <div id="MV08-plot" class="small-plot"></div>
<div id="MV08_sp-plot" class="small-plot"></div>
</div> </div>
<script> <script>
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const puNumber = urlParams.get('pu_number') || '1'; const puNumber = urlParams.get('pu_number') || '1';
document.getElementById('pageTitle').textContent = `Live Monitoring Dashboard - PU ${puNumber}`; document.getElementById('pageTitle').textContent = `Live Monitoring Dashboard - PU ${puNumber}`;
const maxPoints = 100; const maxPoints = 50;
async function updatePlots() { async function updatePlots() {
try { try {
const response = await fetch('/monitor'); const response = await fetch('/monitor');
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const allData = await response.json(); const allData = await response.json();
const puData = allData[`PU_${puNumber}`]; const puData = allData[`PU_${puNumber}`];
const SkidData = allData[`PatientSkid`]; const SkidData = allData[`PatientSkid`];
const t = new Date(puData.timestamp); const t = new Date(puData.timestamp);
Plotly.extendTraces('flow-plot-1', { Plotly.extendTraces('flow-plot-1', {
x: [[t], [t]], x: [[t], [t]],
y: [[puData.Qperm], [puData.Qdilute]] y: [[puData.Qperm], [puData.Qdilute]]
}, [0, 1], maxPoints); }, [0, 1], maxPoints);
Plotly.extendTraces('flow-plot-2', { Plotly.extendTraces('flow-plot-2', {
x: [[t], [t], [t], [t]], x: [[t], [t], [t], [t]],
y: [[puData.Qdrain], [puData.Qrecirc], [SkidData.QSkid], [puData.QdrainEDI]] y: [[puData.Qdrain], [puData.Qrecirc], [SkidData.QSkid], [puData.QdrainEDI]]
}, [0, 1, 2, 3], maxPoints); }, [0, 1, 2, 3], maxPoints);
Plotly.extendTraces('pressure-plot-1', { Plotly.extendTraces('pressure-plot-1', {
x: [[t], [t]], x: [[t], [t]],
y: [[puData.Pro], [puData.Pretentate]] y: [[puData.Pro], [puData.Pretentate]]
}, [0, 1], maxPoints); }, [0, 1], maxPoints);
Plotly.extendTraces('pressure-plot-2', { Plotly.extendTraces('pressure-plot-2', {
x: [[t]], x: [[t]],
y: [[puData.Pdilute]] y: [[puData.Pdilute]]
}, [0], maxPoints); }, [0], maxPoints);
Plotly.extendTraces('conductivity-plot', { Plotly.extendTraces('conductivity-plot', {
x: [[t], [t], [t]], x: [[t], [t], [t]],
y: [[puData.Cfeed], [puData.Cperm], [puData.Cdilute]] y: [[puData.Cfeed], [puData.Cperm], [puData.Cdilute]]
}, [0, 1, 2], maxPoints); }, [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', { Plotly.extendTraces('MV08-plot', {
x: [[t], [t]], x: [[t], [t]],
y: [[puData.MV02_sp], [puData.MV02]] y: [[puData.MV08_sp], [puData.MV08]]
}, [0, 1], maxPoints); }, [0, 1], maxPoints);
} catch (e) {
Plotly.extendTraces('MV03_sp-plot', { console.error("Error updating plots:", e);
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);
} }
}
async function fetchPUStatus() { async function fetchPUStatus() {
try { try {
const res = await fetch("/api/pu_status"); const res = await fetch("/api/pu_status");
const data = await res.json(); const data = await res.json();
const status = data[`PU${puNumber}`] || "Unknown"; const status = data[`PU${puNumber}`] || "Unknown";
document.getElementById("currentStatus").textContent = status; document.getElementById("currentStatus").textContent = status;
} catch (e) { } catch (e) {
console.error("Error fetching PU status:", e); console.error("Error fetching PU status:", e);
document.getElementById("currentStatus").textContent = "Error fetching status"; document.getElementById("currentStatus").textContent = "Error fetching status";
}
} }
}
function initPlots() { function initPlots() {
const time0 = [new Date()]; const time0 = [new Date()];
Plotly.newPlot('flow-plot-1', [ Plotly.newPlot('flow-plot-1', [
{ x: time0, y: [0], name: 'Qperm', mode: 'lines' }, { x: time0, y: [0], name: 'Qperm', mode: 'lines' },
{ x: time0, y: [0], name: 'Qdilute', mode: 'lines' } { x: time0, y: [0], name: 'Qdilute', mode: 'lines' }
], { ], {
title: 'Qperm and Qdilute', title: 'Qperm and Qdilute',
xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' } xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' }
}); });
Plotly.newPlot('flow-plot-2', [ Plotly.newPlot('flow-plot-2', [
{ x: time0, y: [0], name: 'Qdrain', mode: 'lines' }, { x: time0, y: [0], name: 'Qdrain', mode: 'lines' },
{ x: time0, y: [0], name: 'Qrecirc', mode: 'lines' }, { x: time0, y: [0], name: 'Qrecirc', mode: 'lines' },
{ x: time0, y: [0], name: 'QSkid', mode: 'lines' }, { x: time0, y: [0], name: 'QSkid', mode: 'lines' },
{ x: time0, y: [0], name: 'QdrainEDI', mode: 'lines' } { x: time0, y: [0], name: 'QdrainEDI', mode: 'lines' }
], { ], {
title: 'Other Flows', xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' } title: 'Other Flows', xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' }
}); });
Plotly.newPlot('pressure-plot-1', [ Plotly.newPlot('pressure-plot-1', [
{ x: time0, y: [0], name: 'Pro', mode: 'lines' }, { x: time0, y: [0], name: 'Pro', mode: 'lines' },
{ x: time0, y: [0], name: 'Pretentate', mode: 'lines' } { x: time0, y: [0], name: 'Pretentate', mode: 'lines' }
], { ], {
title: 'Pro and Pretentate ', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' } title: 'Pro and Pretentate ', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' }
}); });
Plotly.newPlot('pressure-plot-2', [ Plotly.newPlot('pressure-plot-2', [
{ x: time0, y: [0], name: 'Pdilute', mode: 'lines' } { x: time0, y: [0], name: 'Pdilute', mode: 'lines' }
], { ], {
title: 'Pdilute Pressure', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' } title: 'Pdilute Pressure', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' }
}); });
Plotly.newPlot('conductivity-plot', [ Plotly.newPlot('conductivity-plot', [
{ x: time0, y: [0], name: 'Cfeed', mode: 'lines' }, { x: time0, y: [0], name: 'Cfeed', mode: 'lines' },
{ x: time0, y: [0], name: 'Cperm', mode: 'lines' }, { x: time0, y: [0], name: 'Cperm', mode: 'lines' },
{ x: time0, y: [0], name: 'Cdilute', mode: 'lines' } { x: time0, y: [0], name: 'Cdilute', mode: 'lines' }
], { ], {
title: 'Conductivity Measurements', title: 'Conductivity Measurements',
xaxis: { type: 'date' }, xaxis: { type: 'date' },
yaxis: { title: 'Conductivity (µS/cm)' } yaxis: { title: 'Conductivity (µS/cm)' }
}); });
Plotly.newPlot('MV02_sp-plot', [ Plotly.newPlot('MV02-plot', [
{ x: time0, y: [0], name: 'MV02_sp', mode: 'lines' }, { x: time0, y: [0], name: 'MV02_sp', mode: 'lines' },
{ x: time0, y: [0], name: 'MV02', 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_sp', mode: 'lines' },
{ x: time0, y: [0], name: 'MV03', 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', [ Plotly.newPlot('MV04_sp-05-plot', [
{ x: time0, y: [0], name: 'MV04_sp', mode: 'lines' }, { x: time0, y: [0], name: 'MV04_sp', mode: 'lines' },
{ x: time0, y: [0], name: 'MV04', 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_sp', mode: 'lines' },
{ x: time0, y: [0], name: 'MV05', mode: 'lines' } { x: time0, y: [0], name: 'MV05', mode: 'lines' }
], { ], {
title: 'MV04 & MV05: Setpoints and Actuals', xaxis: { type: 'date' }, yaxis: { range: [0, 100] } 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_sp', mode: 'lines' },
{ x: time0, y: [0], name: 'MV06', 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_sp', mode: 'lines' },
{ x: time0, y: [0], name: 'MV07', 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_sp', mode: 'lines' },
{ x: time0, y: [0], name: 'MV08', mode: 'lines' } { x: time0, y: [0], name: 'MV08', mode: 'lines' }
], { ], {
title: 'MV08: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] } title: 'MV08: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
}); });
setInterval(updatePlots, 500); setInterval(updatePlots, 500);
} }
window.onload = function() { window.onload = function () {
initPlots(); initPlots();
fetchPUStatus(); fetchPUStatus();
setInterval(fetchPUStatus, 5000); setInterval(fetchPUStatus, 5000);
}; };
</script> </script>
</body> </body>
</html>
</html>

634
templates/control.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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">
@ -17,6 +18,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.header { .header {
background-color: #1e1e1e; background-color: #1e1e1e;
padding: 10px 20px; padding: 10px 20px;
@ -24,6 +26,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.connect-button { .connect-button {
background-color: #ff4444; background-color: #ff4444;
color: white; color: white;
@ -36,9 +39,11 @@
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.connected { .connected {
background-color: #00C851; background-color: #00C851;
} }
.container { .container {
display: flex; display: flex;
flex: 1; flex: 1;
@ -46,17 +51,21 @@
overflow-x: hidden; overflow-x: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
.left-panel, .right-panel {
.left-panel,
.right-panel {
flex: 1; flex: 1;
padding: 20px; padding: 20px;
overflow-y: auto; overflow-y: auto;
} }
.left-panel { .left-panel {
background-color: #1e1e1e; background-color: #1e1e1e;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
.mode-block { .mode-block {
background-color: #333; background-color: #333;
padding: 15px; padding: 15px;
@ -65,10 +74,12 @@
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
.pu-buttons { .pu-buttons {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
.mode-block button { .mode-block button {
background-color: #4285F4; background-color: #4285F4;
color: white; color: white;
@ -80,39 +91,49 @@
transition: background-color 0.3s; transition: background-color 0.3s;
flex: 1; flex: 1;
} }
.mode-block button:hover { .mode-block button:hover {
background-color: #3367d6; background-color: #3367d6;
} }
.mode-block button.active { .mode-block button.active {
background-color: #00C851; background-color: #00C851;
} }
.mode-block button.in-progress { .mode-block button.in-progress {
background-color: #ffcc00; background-color: #ffcc00;
color: #000; color: #000;
} }
.mode-block button.ready { .mode-block button.ready {
background-color: #00C851; background-color: #00C851;
color: #fff; color: #fff;
} }
.mode-block button.disabled { .mode-block button.disabled {
background-color: #777; background-color: #777;
cursor: not-allowed; cursor: not-allowed;
} }
.in-progress { .in-progress {
background-color: yellow !important; background-color: yellow !important;
color: black !important; color: black !important;
} }
.ready { .ready {
background-color: orange !important; background-color: orange !important;
color: black !important; color: black !important;
} }
.production { .production {
background-color: green !important; background-color: green !important;
color: white !important; color: white !important;
} }
.pu-status { .pu-status {
margin-top: 20px; margin-top: 20px;
} }
.pu-item { .pu-item {
background-color: #333; background-color: #333;
padding: 10px; padding: 10px;
@ -122,24 +143,28 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.monitor-block { .monitor-block {
background-color: #333; background-color: #333;
padding: 15px; padding: 15px;
border-radius: 5px; border-radius: 5px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.monitor-values { .monitor-values {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 10px; gap: 10px;
margin-top: 10px; margin-top: 10px;
} }
.monitor-value { .monitor-value {
background-color: #444; background-color: #444;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
border-radius: 5px; border-radius: 5px;
} }
.slider-container { .slider-container {
background-color: #1e1e1e; background-color: #1e1e1e;
padding: 10px; padding: 10px;
@ -147,12 +172,14 @@
color: #fff; color: #fff;
width: 95%; width: 95%;
} }
.slider-container label { .slider-container label {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;
display: block; display: block;
} }
.slider-values { .slider-values {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -161,10 +188,12 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.slider-values span#currentValue { .slider-values span#currentValue {
font-weight: bold; font-weight: bold;
color: #00bfff; color: #00bfff;
} }
.slider { .slider {
width: 100%; width: 100%;
height: 8px; height: 8px;
@ -174,13 +203,16 @@
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
} }
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
height: 18px; height: 18px;
width: 18px; width: 18px;
background: #007bff; background: #007bff;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
} }
.monitor-link { .monitor-link {
color: white; color: white;
background-color: #007bff; background-color: #007bff;
@ -189,14 +221,17 @@
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
.monitor-link:hover { .monitor-link:hover {
background-color: #0056b3; background-color: #0056b3;
} }
.monitor-pu-buttons { .monitor-pu-buttons {
display: flex; display: flex;
gap: 10px; gap: 10px;
margin: 10px; margin: 10px;
} }
.monitor-pu-buttons a { .monitor-pu-buttons a {
color: white; color: white;
background-color: #007bff; background-color: #007bff;
@ -205,287 +240,303 @@
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
.monitor-pu-buttons a:hover { .monitor-pu-buttons a:hover {
background-color: #0056b3; background-color: #0056b3;
} }
.button-group { .button-group {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.button-group button { .button-group button {
padding: 8px 16px; padding: 8px 16px;
font-size: 1rem; font-size: 1rem;
border-radius: 8px; border-radius: 8px;
background-color: #008CBA; background-color: #008CBA;
color: white; color: white;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.button-group button:hover { .button-group button:hover {
background-color: #005f6b; background-color: #005f6b;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<h1>Hydraulic Machine Control</h1> <h1>Hydraulic Machine Control</h1>
<div class="monitor-pu-buttons"> <div class="monitor-pu-buttons">
<!-- New multi-monitor button --> <!-- New multi-monitor button -->
<a href="/multi-monitor-page" target="_blank" class="monitor-link"> <a href="/multi-monitor-page" target="_blank" class="monitor-link">
<i class="fas fa-chart-bar"></i> Monitor All PUs <i class="fas fa-chart-bar"></i> Monitor All PUs
</a> </a>
<a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link"> <a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 1 <i class="fas fa-chart-line"></i> Monitor PU 1
</a> </a>
<a href="/monitor-page?pu_number=2" target="_blank" class="monitor-link"> <a href="/monitor-page?pu_number=2" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 2 <i class="fas fa-chart-line"></i> Monitor PU 2
</a> </a>
<a href="/monitor-page?pu_number=3" target="_blank" class="monitor-link"> <a href="/monitor-page?pu_number=3" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 3 <i class="fas fa-chart-line"></i> Monitor PU 3
</a> </a>
<!-- New Record Button --> <!-- New Record Button -->
<button id="recordButton" class="connect-button" onclick="toggleRecording()"> <button id="recordButton" class="connect-button" onclick="toggleRecording()">
<i class="fas fa-circle"></i> Start Recording <i class="fas fa-circle"></i> Start Recording
</button> </button>
</div>
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
<i class="fas fa-power-off"></i> Disconnect
</button>
</div> </div>
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
<i class="fas fa-power-off"></i> Disconnect
</button>
</div>
<div class="container"> <div class="container">
<div class="left-panel"> <div class="left-panel">
<div class="mode-block"> <div class="mode-block">
<div class="pu-buttons"> <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', 1, this)" data-action="IDLE" data-pu="1"><i
<button onclick="sendCommand('IDLE', 2, this)" data-action="IDLE" data-pu="2"><i class="fas fa-power-off"></i> IDLE PU 2</button> class="fas fa-power-off"></i> IDLE PU 1</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', 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> </div>
<div class="mode-block"> <div class="right-panel">
<div class="pu-buttons"> <div class="monitor-block">
<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> <h2><i class="fas fa-tint"></i> Q Perm</h2>
<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> <div class="monitor-values" id="Qperm">
<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="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> <div class="monitor-block">
<div class="mode-block"> <h2><i class="fas fa-water"></i> P Dilute</h2>
<div class="pu-buttons"> <div class="monitor-values" id="Pdilute">
<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> <div class="monitor-value">#1<br>0.0 bar</div>
<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> <div class="monitor-value">#2<br>0.0 bar</div>
<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-value">#3<br>0.0 bar</div>
</div>
</div> </div>
</div> <div class="monitor-block">
<div class="slider-container"> <h2><i class="fas fa-bolt"></i> Cdilute</h2>
<label for="ploopSetpoint">P-loop Setpoint (bars):</label> <div class="monitor-values" id="Cdilute">
<div class="slider-values"> <div class="monitor-value">#1<br>0.0 µS/cm</div>
<span id="minValue">0.5</span> <div class="monitor-value">#2<br>0.0 µS/cm</div>
<span id="currentValue">2.5</span> <div class="monitor-value">#3<br>0.0 µS/cm</div>
<span id="maxValue">3.5</span> </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 class="monitor-block">
</div> <h2><i class="fas fa-thermometer-half"></i> Pro</h2>
<div class="mode-block"> <div class="monitor-values" id="Pro">
<button onclick="sendCommand('ThermalLoopCleaning', 0, this)"><i class="fas fa-fire"></i> Thermal Loop Cleaning</button> <div class="monitor-value">#1<br>0.0 units</div>
</div> <div class="monitor-value">#2<br>0.0 units</div>
<div class="pu-status"> <div class="monitor-value">#3<br>0.0 units</div>
<div class="pu-item"><span>PU 1: </span><span id="pu1-status">Offline</span></div> </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> </div>
</div> </div>
</div> </div>
</div> <script>
<script> function updatePloopSetpoint(value) {
function updatePloopSetpoint(value) { document.getElementById('currentValue').textContent = value;
document.getElementById('currentValue').textContent = value; }
}
async function getConnectionStatus() { async function getConnectionStatus() {
const response = await fetch('/is_connected', { method: 'GET' }); const response = await fetch('/is_connected', { method: 'GET' });
const data = await response.json(); const data = await response.json();
const connectButton = document.getElementById('connectButton'); const connectButton = document.getElementById('connectButton');
if (data.connected) { if (data.connected) {
connectButton.classList.add('connected'); connectButton.classList.add('connected');
connectButton.innerHTML = '<i class="fas fa-power-off"></i> Disconnect'; 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
} else { } else {
await fetch('/stop_recording', { method: 'POST' }); connectButton.classList.remove('connected');
button.innerHTML = '<i class="fas fa-circle"></i> Start Recording'; connectButton.innerHTML = '<i class="fas fa-power-off"></i> Connect';
button.classList.remove('connected');
} }
isRecording = !isRecording; connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
} catch (error) {
console.error('Recording toggle failed:', error);
alert('Failed to toggle recording. Check connection.');
} }
}
async function sendCommand(state, puNumber, buttonEl) { async function toggleConnection() {
const ploopSetpoint = document.getElementById('ploopSetpoint').value; const response = await fetch('/connect_toggle', { method: 'POST' });
await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, {method: 'POST'}); const data = await response.json();
document.querySelectorAll('button').forEach(btn => { const connectButton = document.getElementById('connectButton');
btn.classList.remove('in-progress', 'ready', 'production'); // connectButton.classList.toggle('connected', data.connected);
}); // connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
if (state === 'PRE-PRODUCTION') { }
buttonEl.classList.add('in-progress');
buttonEl.textContent = `Waiting... PU ${puNumber}`;
buttonEl.disabled = true; let isRecording = false;
const checkReady = async () => {
const res = await fetch(`/api/pu_status`); async function toggleRecording() {
const states = await res.json(); const button = document.getElementById('recordButton');
const currentState = states[`PU${puNumber}`]; try {
if (currentState === 'SYSTEM_MODE_READY') { if (!isRecording) {
buttonEl.classList.remove('in-progress'); await fetch('/start_recording', { method: 'POST' });
buttonEl.classList.add('ready'); button.innerHTML = '<i class="fas fa-stop-circle"></i> Stop Recording';
buttonEl.textContent = `START PRODUCTION PU ${puNumber}`; button.classList.add('connected'); // Optional: green background
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 { } else {
setTimeout(checkReady, 1000); await fetch('/stop_recording', { method: 'POST' });
button.innerHTML = '<i class="fas fa-circle"></i> Start Recording';
button.classList.remove('connected');
} }
}; isRecording = !isRecording;
checkReady(); } catch (error) {
} else if (state === 'PRODUCTION') { console.error('Recording toggle failed:', error);
buttonEl.classList.add('production'); alert('Failed to toggle recording. Check connection.');
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);
} }
} }
} async function sendCommand(state, puNumber, buttonEl) {
function runAutoTest(puNumber) { const ploopSetpoint = document.getElementById('ploopSetpoint').value;
const endpoint = `/test/auto/${puNumber}`; // Example: /test/auto/1 await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, { method: 'POST' });
document.querySelectorAll('button').forEach(btn => {
fetch(endpoint, { btn.classList.remove('in-progress', 'ready', 'production');
method: 'POST' });
}) if (state === 'PRE-PRODUCTION') {
.then(response => { buttonEl.classList.add('in-progress');
if (!response.ok) { buttonEl.textContent = `Waiting... PU ${puNumber}`;
throw new Error(`Test PU${puNumber} failed`); 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(); }
}) function runAutoTest(puNumber) {
// .then(data => { const endpoint = `/test/auto/${puNumber}`; // Example: /test/auto/1
// alert(`Automatic Test PU${puNumber} started successfully.`);
// console.log(data);
// })
// .catch(error => {
// alert(`Error starting test for PU${puNumber}: ${error.message}`);
// console.error(error);
// });
}
async function fetchPUStatus() { fetch(endpoint, {
const response = await fetch("/api/pu_status"); method: 'POST'
const data = await response.json(); })
document.getElementById("pu1-status").textContent = data.PU1 || "Unknown"; .then(response => {
document.getElementById("pu2-status").textContent = data.PU2 || "Unknown"; if (!response.ok) {
document.getElementById("pu3-status").textContent = data.PU3 || "Unknown"; 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(); async function fetchPUStatus() {
setInterval(fetchPUStatus, 5000); 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() { fetchPUStatus();
const response = await fetch('/monitor'); setInterval(fetchPUStatus, 5000);
const data = await response.json();
for (const [puId, puData] of Object.entries(data)) { async function updateMonitorData() {
const container = document.getElementById(puId); const response = await fetch('/monitor');
if (!container) continue; const data = await response.json();
container.innerHTML = ` for (const [puId, puData] of Object.entries(data)) {
const container = document.getElementById(puId);
if (!container) continue;
container.innerHTML = `
<h3>${puId}</h3> <h3>${puId}</h3>
<div class="monitor-value">Q_perm<br>${puData.Qperm.toFixed(1)} L/h</div> <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_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">P_retentate<br>${puData.Pretentate.toFixed(1)} bar</div>
<div class="monitor-value">Cdilute<br>${puData.Cdilute.toFixed(1)} µS/cm</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'); const valueElements = container.querySelectorAll('.monitor-value');
valueElements.forEach((element, index) => {
puLabels.forEach((puLabel, index) => { if (index < values.length) {
const puData = allData[puLabel]; element.innerHTML = `#${index + 1}<br>${values[index]} ${unit}`;
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) { setInterval(updateMonitorData, 1000);
console.error('Error fetching monitor data:', error); 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(); const dataResponse = await fetch('/monitor');
ssetInterval(getConnectionStatus, 1000); const allData = await dataResponse.json();
setInterval(fetchMonitorData, 1000); for (const [fieldId, unit] of Object.entries(fields)) {
fetchMonitorData(); const container = document.getElementById(fieldId);
</script> 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> </body>
</html>
</html>