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

Adds DS data reading and monitor page

Browse Source
This commit is contained in:
Etienne Chassaing 2025-08-06 10:45:46 +02:00
parent 7984e11514
commit 6aeb2f9d3e
4 changed files with 226 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
main.py
View File

@ -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)

119
static/monitor_DS.html Normal file
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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>
body {
font-family: Arial, sans-serif;
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;
border-radius: 5px;
margin: 10px auto;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h1 id="pageTitle">Live Monitoring Dashboard - DS</h1>
<div class="status-container">
<p>Current Status: <span id="currentStatus">Loading...</span></p>
</div>
<div class="plot-container">
<div id="tank-level-plot" class="large-plot"></div>
<div id="flow-plot" class="large-plot"></div>
</div>
<script>
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 dsData = allData['DS'];
const t = new Date(dsData.timestamp);
Plotly.extendTraces('tank-level-plot', {
x: [[t]],
y: [[dsData.TankLevel]]
}, [0], maxPoints);
Plotly.extendTraces('flow-plot', {
x: [[t], [t], [t]],
y: [[dsData.Q_conso_filt], [dsData.Qinlet], [dsData.Qoutlet]]
}, [0, 1, 2], maxPoints);
} catch (e) {
console.error("Error updating plots:", e);
}
}
async function fetchDSStatus() {
try {
const res = await fetch("/api/ds_status");
const data = await res.json();
const status = data['DS'] || "Unknown";
document.getElementById("currentStatus").textContent = status;
} catch (e) {
console.error("Error fetching DS status:", e);
document.getElementById("currentStatus").textContent = "Error fetching status";
}
}
function initPlots() {
const time0 = [new Date()];
Plotly.newPlot('tank-level-plot', [
{ x: time0, y: [0], name: 'Tank Level', mode: 'lines' }
], {
title: 'Tank Level',
xaxis: { type: 'date' },
yaxis: { title: 'Level' }
});
Plotly.newPlot('flow-plot', [
{ x: time0, y: [0], name: 'Q_conso_filt', mode: 'lines' },
{ x: time0, y: [0], name: 'Qinlet', mode: 'lines' },
{ x: time0, y: [0], name: 'Qoutlet', mode: 'lines' }
], {
title: 'Flow Measurements',
xaxis: { type: 'date' },
yaxis: { title: 'Flow (L/h)' }
});
setInterval(updatePlots, 500);
}
window.onload = function () {
initPlots();
fetchDSStatus();
setInterval(fetchDSStatus, 5000);
};
</script>
</body>
</html>

0
static/monitor.html → static/monitor_PU.html
View File

166
templates/control.html
View File

@ -1,6 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -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,22 +228,34 @@
border: none;
cursor: pointer;
}
.button-group button:hover {
background-color: #005f6b;
}
</style>
</head>
<body>
<div class="header">
<div class="header-row">
<h1>Hydraulic Machine Control</h1>
<div>
<button id="recordButton" class="connect-button" onclick="toggleRecording()">
<i class="fas fa-circle"></i> Start Recording
</button>
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
<i class="fas fa-power-off"></i> Disconnect
</button>
</div>
</div>
<div class="header-row">
<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-DS" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor DS
</a>
</div>
<div class="monitor-pu-buttons">
<a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 1
</a>
@ -285,47 +265,30 @@
<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>
</div>
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
<i class="fas fa-power-off"></i> Disconnect
</button>
</div>
</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>
<button onclick="sendCommand('IDLE', 1, this)" data-action="IDLE" data-pu="1"><i class="fas fa-power-off"></i> IDLE PU 1</button>
<button onclick="sendCommand('IDLE', 2, this)" data-action="IDLE" data-pu="2"><i class="fas fa-power-off"></i> IDLE PU 2</button>
<button onclick="sendCommand('IDLE', 3, this)" data-action="IDLE" data-pu="3"><i class="fas fa-power-off"></i> IDLE PU 3</button>
</div>
</div>
<div class="mode-block">
<div class="pu-buttons">
<button onclick="sendCommand('PRE-PRODUCTION', 1, this)" data-action="PRE-PRODUCTION" data-pu="1"><i
class="fas fa-play"></i> PRE-PROD PU 1</button>
<button onclick="sendCommand('PRE-PRODUCTION', 2, this)" data-action="PRE-PRODUCTION" data-pu="2"><i
class="fas fa-play"></i> PRE-PROD PU 2</button>
<button onclick="sendCommand('PRE-PRODUCTION', 3, this)" data-action="PRE-PRODUCTION" data-pu="3"><i
class="fas fa-play"></i> PRE-PROD PU 3</button>
<button onclick="sendCommand('PRE-PRODUCTION', 1, this)" data-action="PRE-PRODUCTION" data-pu="1"><i class="fas fa-play"></i> PRE-PROD PU 1</button>
<button onclick="sendCommand('PRE-PRODUCTION', 2, this)" data-action="PRE-PRODUCTION" data-pu="2"><i class="fas fa-play"></i> PRE-PROD PU 2</button>
<button onclick="sendCommand('PRE-PRODUCTION', 3, this)" data-action="PRE-PRODUCTION" data-pu="3"><i class="fas fa-play"></i> PRE-PROD PU 3</button>
</div>
</div>
<div class="mode-block">
<div class="pu-buttons">
<button onclick="sendCommand('FIRST_START', 1, this)" data-action="FIRST_START" data-pu="1"><i
class="fas fa-power-off"></i> FIRST START PU 1</button>
<button onclick="sendCommand('FIRST_START', 2, this)" data-action="FIRST_START" data-pu="2"><i
class="fas fa-power-off"></i> FIRST START PU 2</button>
<button onclick="sendCommand('FIRST_START', 3, this)" data-action="FIRST_START" data-pu="3"><i
class="fas fa-power-off"></i> FIRST START PU 3</button>
<button onclick="sendCommand('FIRST_START', 1, this)" data-action="FIRST_START" data-pu="1"><i class="fas fa-power-off"></i> FIRST START PU 1</button>
<button onclick="sendCommand('FIRST_START', 2, this)" data-action="FIRST_START" data-pu="2"><i class="fas fa-power-off"></i> FIRST START PU 2</button>
<button onclick="sendCommand('FIRST_START', 3, this)" data-action="FIRST_START" data-pu="3"><i class="fas fa-power-off"></i> FIRST START PU 3</button>
</div>
</div>
<div class="slider-container">
@ -335,12 +298,10 @@
<span id="currentValue">2.5</span>
<span id="maxValue">3.5</span>
</div>
<input type="range" min="0.5" max="3.5" step="0.1" value="2.5" id="ploopSetpoint" class="slider"
oninput="updatePloopSetpoint(this.value)">
<input type="range" min="0.5" max="3.5" step="0.1" value="2.5" id="ploopSetpoint" class="slider" oninput="updatePloopSetpoint(this.value)">
</div>
<div class="mode-block">
<button onclick="sendCommand('ThermalLoopCleaning', 0, this)"><i class="fas fa-fire"></i> Thermal Loop
Cleaning</button>
<button onclick="sendCommand('ThermalLoopCleaning', 0, this)"><i class="fas fa-fire"></i> Thermal Loop Cleaning</button>
</div>
<div class="pu-status">
<div class="pu-item"><span>PU 1: </span><span id="pu1-status">Offline</span></div>
@ -386,6 +347,18 @@
<div class="monitor-value">#3<br>0.0 units</div>
</div>
</div>
<div class="monitor-block">
<div style="display: flex; justify-content: space-between;">
<div style="flex: 1; margin-right: 10px;">
<h2><i class="fas fa-tachometer-alt"></i> Tank Level</h2>
<div class="monitor-value">DS<br>0.0</div>
</div>
<div style="flex: 1; margin-left: 10px;">
<h2><i class="fas fa-exchange-alt"></i> Qconso</h2>
<div class="monitor-value">DS<br>0.0 L/h</div>
</div>
</div>
</div>
</div>
</div>
<script>
@ -410,21 +383,16 @@
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
button.classList.add('connected');
} else {
await fetch('/stop_recording', { method: 'POST' });
button.innerHTML = '<i class="fas fa-circle"></i> Start Recording';
@ -436,6 +404,7 @@
alert('Failed to toggle recording. Check connection.');
}
}
async function sendCommand(state, puNumber, buttonEl) {
const ploopSetpoint = document.getElementById('ploopSetpoint').value;
await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, { method: 'POST' });
@ -497,9 +466,9 @@
}
}
}
function runAutoTest(puNumber) {
const endpoint = `/test/auto/${puNumber}`; // Example: /test/auto/1
function runAutoTest(puNumber) {
const endpoint = `/test/auto/${puNumber}`;
fetch(endpoint, {
method: 'POST'
})
@ -508,15 +477,7 @@
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);
// });
});
}
async function fetchPUStatus() {
@ -559,7 +520,9 @@
}
});
}
setInterval(updateMonitorData, 1000);
async function fetchMonitorData() {
try {
const puLabels = ["PU_1", "PU_2", "PU_3"];
@ -569,16 +532,21 @@
"Cdilute": "µS/cm",
"Pro": "bar"
};
const dataResponse = await fetch('/monitor');
const allData = await dataResponse.json();
// Update Tank Level and Qconso
const dsData = allData["DS"];
if (dsData) {
document.querySelector("#TankLevel .monitor-value").innerHTML = `DS<br>${dsData.TankLevel.toFixed(1)}`;
const qconso = dsData.Qinlet - dsData.Qoutlet;
document.querySelector("#Qconso .monitor-value").innerHTML = `DS<br>${qconso.toFixed(1)} L/h`;
}
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;
@ -594,10 +562,8 @@
setInterval(getConnectionStatus, 1000);
getConnectionStatus();
setInterval(fetchMonitorData, 1000);
fetchMonitorData();
</script>
</body>
</html>