diff --git a/main.py b/main.py index 8c9aa99..2062487 100644 --- a/main.py +++ b/main.py @@ -106,10 +106,14 @@ def format_DS_data(data): return { "timestamp": datetime.datetime.now().isoformat(), "Q_conso_filt": np.round(data.get("Qdrain_sp", 0.0), 1), - "TankLevel": np.round(data.get("TankLevel", 0.0), 1), + "TankLevel": np.round(data.get("TankLevel", 0.0), 2), "Qinlet": np.round(data.get("Inlet_flow", 0.0), 1), "Qoutlet": np.round(data.get("Outlet_flow", 0.0), 1), + "Q_conso_filt": np.round(data.get("Qdrain_sp", 0.0), 1), + "Q_conso_filt": np.round(data.get("Qdrain_sp", 0.0), 1), + "Q_conso_filt": np.round(data.get("Qdrain_sp", 0.0), 1), + } @@ -168,9 +172,14 @@ def control_page(request: Request): return templates.TemplateResponse("control.html", {"request": request}) +@app.get("/monitor-DS", response_class=HTMLResponse) +def monitor_page(request: Request): + with open("static/monitor_DS.html") as f: + return HTMLResponse(f.read()) + @app.get("/monitor-page", response_class=HTMLResponse) def monitor_page(request: Request): - with open("static/monitor.html") as f: + with open("static/monitor_PU.html") as f: return HTMLResponse(f.read()) @app.get("/multi-monitor-page", response_class=HTMLResponse) diff --git a/static/monitor_DS.html b/static/monitor_DS.html new file mode 100644 index 0000000..8a2855e --- /dev/null +++ b/static/monitor_DS.html @@ -0,0 +1,119 @@ + + + + + + Live Monitoring Dashboard + + + + +

Live Monitoring Dashboard - DS

+
+

Current Status: Loading...

+
+
+
+
+
+ + + diff --git a/static/monitor.html b/static/monitor_PU.html similarity index 100% rename from static/monitor.html rename to static/monitor_PU.html diff --git a/templates/control.html b/templates/control.html index 8099053..4570436 100644 --- a/templates/control.html +++ b/templates/control.html @@ -1,6 +1,5 @@ - @@ -18,15 +17,19 @@ display: flex; flex-direction: column; } - .header { background-color: #1e1e1e; padding: 10px 20px; display: flex; - justify-content: space-between; - align-items: center; + flex-direction: column; + align-items: flex-start; + } + .header-row { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 5px; } - .connect-button { background-color: #ff4444; color: white; @@ -39,11 +42,9 @@ align-items: center; gap: 10px; } - .connected { background-color: #00C851; } - .container { display: flex; flex: 1; @@ -51,21 +52,17 @@ 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; @@ -74,12 +71,10 @@ flex-direction: column; gap: 10px; } - .pu-buttons { display: flex; gap: 10px; } - .mode-block button { background-color: #4285F4; color: white; @@ -91,49 +86,39 @@ 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; @@ -143,28 +128,24 @@ 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); + display: flex; gap: 10px; margin-top: 10px; } - .monitor-value { background-color: #444; padding: 10px; text-align: center; border-radius: 5px; + flex: 1; } - .slider-container { background-color: #1e1e1e; padding: 10px; @@ -172,14 +153,12 @@ 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; @@ -188,12 +167,10 @@ width: 100%; overflow: hidden; } - .slider-values span#currentValue { font-weight: bold; color: #00bfff; } - .slider { width: 100%; height: 8px; @@ -203,7 +180,6 @@ appearance: none; cursor: pointer; } - .slider::-webkit-slider-thumb, .slider::-moz-range-thumb { height: 18px; @@ -212,7 +188,6 @@ border-radius: 50%; cursor: pointer; } - .monitor-link { color: white; background-color: #007bff; @@ -221,17 +196,13 @@ 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; @@ -240,17 +211,14 @@ text-decoration: none; font-weight: bold; } - .monitor-pu-buttons a:hover { background-color: #0056b3; } - .button-group { margin-top: 10px; display: flex; justify-content: space-around; } - .button-group button { padding: 8px 16px; font-size: 1rem; @@ -260,72 +228,67 @@ border: none; cursor: pointer; } - .button-group button:hover { background-color: #005f6b; } -
-

Hydraulic Machine Control

-
- - - Monitor All PUs - - - - Monitor PU 1 - - - Monitor PU 2 - - - Monitor PU 3 - - - - +
+

Hydraulic Machine Control

+
+ + +
+
+
+
+ + Monitor All PUs + + + Monitor DS + +
+
+ + Monitor PU 1 + + + Monitor PU 2 + + + Monitor PU 3 + +
-
-
- - - + + +
- - - + + +
- - - + + +
@@ -335,12 +298,10 @@ 2.5 3.5
- +
- +
PU 1: Offline
@@ -386,6 +347,18 @@
#3
0.0 units
+
+
+
+

Tank Level

+
DS
0.0
+
+
+

Qconso

+
DS
0.0 L/h
+
+
+
- - \ No newline at end of file +