Adds a monitor page
This commit is contained in:
Etienne Chassaing
parent
174befca92
commit
1e3f47876c
28
MockCAN.py
28
MockCAN.py
|
|
@ -28,8 +28,28 @@ class CANBackend:
|
|||
# Placeholder for sending mode command
|
||||
PUs_states[pu_number-1] = {"PU_MODE": state, "ploop_setpoint":ploop_setpoint}
|
||||
|
||||
|
||||
def get_latest_data(self):
|
||||
# Placeholder for getting latest TPDO data
|
||||
return {"FM2" : round(1000*np.random.random(),1),"PS1" : round(10*np.random.random(),2)}
|
||||
|
||||
# Simulate getting the latest data with random values
|
||||
return {
|
||||
"FM2": round(1000 * np.random.random(), 1),
|
||||
"FM3": round(1000 * np.random.random(), 1),
|
||||
"FM4": round(1000 * np.random.random(), 1),
|
||||
"FM5": round(1000 * np.random.random(), 1),
|
||||
"PS1": round(10 * np.random.random(), 2),
|
||||
"PS2": round(10 * np.random.random(), 2),
|
||||
"PS3": round(10 * np.random.random(), 2),
|
||||
"PS4": round(10 * np.random.random(), 2),
|
||||
"Cond": 1* np.random.random(),
|
||||
"MV02": round(100 * np.random.random(), 2),
|
||||
"MV02_sp": round(100 * np.random.random(), 2),
|
||||
"MV03": round(100 * np.random.random(), 2),
|
||||
"MV03_sp": round(100 * np.random.random(), 2),
|
||||
"MV05": round(100 * np.random.random(), 2),
|
||||
"MV05_sp": round(100 * np.random.random(), 2),
|
||||
"MV06": round(100 * np.random.random(), 2),
|
||||
"MV06_sp": round(100 * np.random.random(), 2),
|
||||
"MV07": round(100 * np.random.random(), 2),
|
||||
"MV07_sp": round(100 * np.random.random(), 2),
|
||||
"MV08": round(100 * np.random.random(), 2),
|
||||
"MV08_sp": round(100 * np.random.random(), 2),
|
||||
}
|
||||
80
main.py
80
main.py
|
|
@ -41,15 +41,79 @@ def send_command(state: str, pu_number: int, ploop_setpoint: float = Query(...))
|
|||
return {"status": "success", "command": state.upper(), "pu": pu_number, "ploop_setpoint": ploop_setpoint}
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=str(e))
|
||||
|
||||
@app.get("/monitor")
|
||||
def get_monitor_data():
|
||||
# TODO : agree on the structure
|
||||
data = can_backend.get_latest_data()
|
||||
print(f"[MONITOR] Latest SDO: {data}")
|
||||
return {
|
||||
"Qperm": [data.get("FM2", 0.0), data.get("FM2", 0.0), 0.0],
|
||||
"Pdilute": [data.get("PS1", 0.0), 0.0, 0.0],
|
||||
"Conductivity": [0.0, 0.0, 0.0],
|
||||
"Pro": [0.0, 0.0, 0.0],
|
||||
"PU_1": {
|
||||
"Qperm": data.get("FM2", 0.0),
|
||||
"Qdilute": data.get("FM3", 0.0),
|
||||
"Qdrain": data.get("FM4", 0.0),
|
||||
"Qrecirc": data.get("FM5", 0.0),
|
||||
"Pro": data.get("PS1", 0.0),
|
||||
"Pdilute": data.get("PS2", 0.0),
|
||||
"Prentate": data.get("PS3", 0.0),
|
||||
"Conductivity": data.get("Cond", 0.0),
|
||||
"MV02": data.get("MV02", 0.0),
|
||||
"MV02_sp": data.get("MV02_sp", 0.0),
|
||||
"MV03": data.get("MV03", 0.0),
|
||||
"MV03_sp": data.get("MV03_sp", 0.0),
|
||||
"MV05": data.get("MV05", 0.0),
|
||||
"MV05_sp": data.get("MV05_sp", 0.0),
|
||||
"MV06": data.get("MV06", 0.0),
|
||||
"MV06_sp": data.get("MV06_sp", 0.0),
|
||||
"MV07": data.get("MV07", 0.0),
|
||||
"MV07_sp": data.get("MV07_sp", 0.0),
|
||||
"MV08": data.get("MV08", 0.0),
|
||||
"MV08_sp": data.get("MV08_sp", 0.0)
|
||||
},
|
||||
"PU_2": {
|
||||
"Qperm": data.get("FM2", 0.0),
|
||||
"Qdilute": data.get("FM3", 0.0),
|
||||
"Qdrain": data.get("FM4", 0.0),
|
||||
"Qrecirc": data.get("FM5", 0.0),
|
||||
"Pro": data.get("PS1", 0.0),
|
||||
"Pdilute": data.get("PS2", 0.0),
|
||||
"Prentate": data.get("PS3", 0.0),
|
||||
"Conductivity": data.get("Cond", 0.0),
|
||||
"MV02": data.get("MV02", 0.0),
|
||||
"MV02_sp": data.get("MV02_sp", 0.0),
|
||||
"MV03": data.get("MV03", 0.0),
|
||||
"MV03_sp": data.get("MV03_sp", 0.0),
|
||||
"MV05": data.get("MV05", 0.0),
|
||||
"MV05_sp": data.get("MV05_sp", 0.0),
|
||||
"MV06": data.get("MV06", 0.0),
|
||||
"MV06_sp": data.get("MV06_sp", 0.0),
|
||||
"MV07": data.get("MV07", 0.0),
|
||||
"MV07_sp": data.get("MV07_sp", 0.0),
|
||||
"MV08": data.get("MV08", 0.0),
|
||||
"MV08_sp": data.get("MV08_sp", 0.0)
|
||||
},
|
||||
"PU_3": {
|
||||
"Qperm": data.get("FM2", 0.0),
|
||||
"Qdilute": data.get("FM3", 0.0),
|
||||
"Qdrain": data.get("FM4", 0.0),
|
||||
"Qrecirc": data.get("FM5", 0.0),
|
||||
"Pro": data.get("PS1", 0.0),
|
||||
"Pdilute": data.get("PS2", 0.0),
|
||||
"Prentate": data.get("PS3", 0.0),
|
||||
"Conductivity": data.get("Cond", 0.0),
|
||||
"MV02": data.get("MV02", 0.0),
|
||||
"MV02_sp": data.get("MV02_sp", 0.0),
|
||||
"MV03": data.get("MV03", 0.0),
|
||||
"MV03_sp": data.get("MV03_sp", 0.0),
|
||||
"MV05": data.get("MV05", 0.0),
|
||||
"MV05_sp": data.get("MV05_sp", 0.0),
|
||||
"MV06": data.get("MV06", 0.0),
|
||||
"MV06_sp": data.get("MV06_sp", 0.0),
|
||||
"MV07": data.get("MV07", 0.0),
|
||||
"MV07_sp": data.get("MV07_sp", 0.0),
|
||||
"MV08": data.get("MV08", 0.0),
|
||||
"MV08_sp": data.get("MV08_sp", 0.0)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -64,6 +128,14 @@ async def read_root():
|
|||
with open("static/index.html", "r") as file:
|
||||
return HTMLResponse(content=file.read(), status_code=200)
|
||||
|
||||
|
||||
@app.get("/monitor-page", response_class=HTMLResponse)
|
||||
async def read_monitor_page():
|
||||
"""Serve monitor HTML page."""
|
||||
with open("static/monitor.html", "r") as file:
|
||||
return HTMLResponse(content=file.read(), status_code=200)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
uvicorn.run(
|
||||
|
|
|
|||
|
|
@ -271,12 +271,36 @@
|
|||
|
||||
async function updateMonitorData() {
|
||||
const response = await fetch('/monitor');
|
||||
const data = await response.json();
|
||||
updateMonitorValues('Qperm', data.Qperm, 'L/h');
|
||||
updateMonitorValues('Pdilute', data.Pdilute, 'bar');
|
||||
updateMonitorValues('Conductivity', data.Conductivity, 'µS/cm');
|
||||
updateMonitorValues('Pro', data.Pro, 'units');
|
||||
const data = await response.json(); // data = { PU_1: {...}, PU_2: {...}, PU_3: {...} }
|
||||
|
||||
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>
|
||||
<div class="monitor-value">Q_drain<br>${puData.Qdrain.toFixed(1)} L/h</div>
|
||||
<div class="monitor-value">Q_recirc<br>${puData.Qrecirc.toFixed(1)} L/h</div>
|
||||
|
||||
<div class="monitor-value">P_ro<br>${puData.Pro.toFixed(1)} bar</div>
|
||||
<div class="monitor-value">P_dilute<br>${puData.Pdilute.toFixed(1)} bar</div>
|
||||
<div class="monitor-value">P_rentate<br>${puData.Prentate.toFixed(1)} bar</div>
|
||||
|
||||
<div class="monitor-value">Conductivity<br>${puData.Conductivity.toFixed(1)} µS/cm</div>
|
||||
|
||||
<div class="monitor-value">MV02<br>${puData.MV02.toFixed(1)} % (sp: ${puData.MV02_sp.toFixed(1)})</div>
|
||||
<div class="monitor-value">MV03<br>${puData.MV03.toFixed(1)} % (sp: ${puData.MV03_sp.toFixed(1)})</div>
|
||||
<div class="monitor-value">MV05<br>${puData.MV05.toFixed(1)} % (sp: ${puData.MV05_sp.toFixed(1)})</div>
|
||||
<div class="monitor-value">MV06<br>${puData.MV06.toFixed(1)} % (sp: ${puData.MV06_sp.toFixed(1)})</div>
|
||||
<div class="monitor-value">MV07<br>${puData.MV07.toFixed(1)} % (sp: ${puData.MV07_sp.toFixed(1)})</div>
|
||||
<div class="monitor-value">MV08<br>${puData.MV08.toFixed(1)} % (sp: ${puData.MV08_sp.toFixed(1)})</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function updateMonitorValues(id, values, unit) {
|
||||
const container = document.getElementById(id);
|
||||
|
|
@ -291,5 +315,40 @@
|
|||
// Update monitor data every second
|
||||
setInterval(updateMonitorData, 1000);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
async function fetchMonitorData() {
|
||||
try {
|
||||
const response = await fetch('/monitor');
|
||||
const data = await response.json();
|
||||
|
||||
const keys = ["PU_1", "PU_2", "PU_3"];
|
||||
const fields = {
|
||||
"Qperm": "L/h",
|
||||
"Pdilute": "bar",
|
||||
"Conductivity": "µS/cm",
|
||||
"Pro": "bar"
|
||||
};
|
||||
|
||||
for (const field in fields) {
|
||||
const container = document.getElementById(field);
|
||||
if (!container) continue;
|
||||
|
||||
container.innerHTML = keys.map((pu, i) => {
|
||||
const value = data[pu][field] ?? 0.0;
|
||||
return `<div class="monitor-value">#${i + 1}<br>${value.toFixed(1)} ${fields[field]}</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la récupération des données de /monitor :', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Rafraîchir toutes les 3 secondes
|
||||
setInterval(fetchMonitorData, 3000);
|
||||
fetchMonitorData(); // Premier appel immédiat
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
170
static/monitor.html
Normal file
170
static/monitor.html
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
<!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: 22%;
|
||||
height: 200px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Live Monitoring Dashboard</h1>
|
||||
<div class="plot-container">
|
||||
<div id="flow-plot" class="large-plot"></div>
|
||||
<div id="pressure-plot" class="large-plot"></div>
|
||||
<div id="mv02-plot" class="small-plot"></div>
|
||||
<div id="mv03-plot" class="small-plot"></div>
|
||||
<div id="mv04-05-plot" class="small-plot"></div>
|
||||
<div id="mv06-plot" class="small-plot"></div>
|
||||
<div id="mv07-plot" class="small-plot"></div>
|
||||
<div id="mv08-plot" class="small-plot"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const maxPoints = 100; // Number of time points to keep
|
||||
const time = () => new Date(); // Timestamp for x-axis
|
||||
|
||||
async function updatePlots() {
|
||||
try {
|
||||
const response = await fetch('/monitor');
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const data = await response.json();
|
||||
|
||||
const pu = data["PU_1"];
|
||||
const t = time();
|
||||
|
||||
// Extend traces for flow plot
|
||||
Plotly.extendTraces('flow-plot', {
|
||||
x: [[t], [t], [t], [t]],
|
||||
y: [[pu.Qperm], [pu.Qdilute], [pu.Qdrain], [pu.Qrecirc]]
|
||||
}, [0, 1, 2, 3], maxPoints);
|
||||
|
||||
// Extend traces for pressure plot
|
||||
Plotly.extendTraces('pressure-plot', {
|
||||
x: [[t], [t], [t]],
|
||||
y: [[pu.Pro], [pu.Pdilute], [pu.Prentate]]
|
||||
}, [0, 1, 2], maxPoints);
|
||||
|
||||
const mv = pu; // assuming pu = data.PU_1
|
||||
|
||||
Plotly.extendTraces('mv02-plot', { x: [[t]], y: [[mv.MV02]] }, [0]);
|
||||
Plotly.extendTraces('mv03-plot', { x: [[t]], y: [[mv.MV03]] }, [0]);
|
||||
Plotly.extendTraces('mv04-05-plot', {
|
||||
x: [[t], [t]],
|
||||
y: [[mv.MV04], [mv.MV05]]
|
||||
}, [0, 1]);
|
||||
Plotly.extendTraces('mv06-plot', { x: [[t]], y: [[mv.MV06]] }, [0]);
|
||||
Plotly.extendTraces('mv07-plot', { x: [[t]], y: [[mv.MV07]] }, [0]);
|
||||
Plotly.extendTraces('mv08-plot', { x: [[t]], y: [[mv.MV08]] }, [0]);
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error updating plots:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function initPlots() {
|
||||
const time0 = [time()];
|
||||
|
||||
// Flow plot with multiple traces
|
||||
Plotly.newPlot('flow-plot', [
|
||||
{ x: time0, y: [0], name: 'Qperm', mode: 'lines', line: { color: 'blue' } },
|
||||
{ x: time0, y: [0], name: 'Qdilute', mode: 'lines', line: { color: 'green' } },
|
||||
{ x: time0, y: [0], name: 'Qdrain', mode: 'lines', line: { color: 'red' } },
|
||||
{ x: time0, y: [0], name: 'Qrecirc', mode: 'lines', line: { color: 'orange' } }
|
||||
], {
|
||||
title: 'Flow Rates Over Time',
|
||||
xaxis: { title: 'Time', type: 'date' },
|
||||
yaxis: { title: 'Flow (L/h)', range: [0, 2000] }
|
||||
});
|
||||
|
||||
// Pressure plot
|
||||
Plotly.newPlot('pressure-plot', [
|
||||
{ x: time0, y: [0], name: 'Pro', mode: 'lines', line: { color: 'purple' } },
|
||||
{ x: time0, y: [0], name: 'Pdilute', mode: 'lines', line: { color: 'teal' } },
|
||||
{ x: time0, y: [0], name: 'Prentate', mode: 'lines', line: { color: 'gray' } }
|
||||
], {
|
||||
title: 'Pressure Over Time',
|
||||
xaxis: { title: 'Time', type: 'date' },
|
||||
yaxis: { title: 'Pressure (bar)', range: [0, 15] }
|
||||
});
|
||||
// MV02
|
||||
Plotly.newPlot('mv02-plot', [{
|
||||
x: [time()], y: [0], name: 'MV02', mode: 'lines'
|
||||
}], {
|
||||
title: 'MV02 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
});
|
||||
|
||||
// MV03
|
||||
Plotly.newPlot('mv03-plot', [{
|
||||
x: [time()], y: [0], name: 'MV03', mode: 'lines'
|
||||
}], {
|
||||
title: 'MV03 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
});
|
||||
|
||||
// MV04 + MV05
|
||||
Plotly.newPlot('mv04-05-plot', [
|
||||
{ x: [time()], y: [0], name: 'MV04', mode: 'lines' },
|
||||
{ x: [time()], y: [0], name: 'MV05', mode: 'lines' }
|
||||
], {
|
||||
title: 'MV04 + MV05 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
});
|
||||
|
||||
// MV06
|
||||
Plotly.newPlot('mv06-plot', [{
|
||||
x: [time()], y: [0], name: 'MV06', mode: 'lines'
|
||||
}], {
|
||||
title: 'MV06 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
});
|
||||
|
||||
// MV07
|
||||
Plotly.newPlot('mv07-plot', [{
|
||||
x: [time()], y: [0], name: 'MV07', mode: 'lines'
|
||||
}], {
|
||||
title: 'MV07 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
});
|
||||
|
||||
// MV08
|
||||
Plotly.newPlot('mv08-plot', [{
|
||||
x: [time()], y: [0], name: 'MV08', mode: 'lines'
|
||||
}], {
|
||||
title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
});
|
||||
|
||||
// Update every second
|
||||
setInterval(updatePlots, 1000);
|
||||
}
|
||||
|
||||
window.onload = initPlots;
|
||||
</script>
|
||||
|
||||
|
||||
// Initialize plots when the page loads
|
||||
window.onload = initPlots;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user