171 lines
5.7 KiB
HTML
171 lines
5.7 KiB
HTML
<!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>
|