From 6aeb2f9d3e86b5c03a27915fc60230096642c456 Mon Sep 17 00:00:00 2001
From: Etienne Chassaing <60154720+cetiennec@users.noreply.github.com>
Date: Wed, 6 Aug 2025 10:45:46 +0200
Subject: [PATCH] Adds DS data reading and monitor page
---
main.py | 13 +-
static/monitor_DS.html | 119 ++++++++++++
static/{monitor.html => monitor_PU.html} | 0
templates/control.html | 226 ++++++++++-------------
4 files changed, 226 insertions(+), 132 deletions(-)
create mode 100644 static/monitor_DS.html
rename static/{monitor.html => monitor_PU.html} (100%)
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;
}
-
-
-
\ No newline at end of file
+