Adds record button
This commit is contained in:
Etienne Chassaing
parent
fe05d62736
commit
83ebe2f212
|
|
@ -15,7 +15,6 @@ class CANBackend:
|
|||
def shutdown(self):
|
||||
self.connected = False
|
||||
|
||||
|
||||
def read_current_state(self,pu_number: int):
|
||||
# Placeholder for reading mode command
|
||||
return PUs_states[pu_number-1]["PU_MODE"]
|
||||
|
|
|
|||
|
|
@ -34,6 +34,16 @@
|
|||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#recordButton {
|
||||
background-color: #ff4444;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -44,7 +54,7 @@
|
|||
<option value="2">PU 2</option>
|
||||
<option value="3">PU 3</option>
|
||||
</select>
|
||||
|
||||
<button id="recordButton" onclick="toggleRecording()">Record</button>
|
||||
<div class="plot-container">
|
||||
<div id="flow-plot" class="large-plot"></div>
|
||||
<div id="pressure-plot" class="large-plot"></div>
|
||||
|
|
@ -55,8 +65,82 @@
|
|||
<div id="mv07-plot" class="small-plot"></div>
|
||||
<div id="mv08-plot" class="small-plot"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let isRecording = false;
|
||||
let recordedData = [];
|
||||
let recordingInterval;
|
||||
let csvFileName = '';
|
||||
|
||||
async function toggleRecording() {
|
||||
const recordButton = document.getElementById('recordButton');
|
||||
if (!isRecording) {
|
||||
isRecording = true;
|
||||
recordButton.style.backgroundColor = '#ff0000';
|
||||
recordButton.textContent = 'Stop Recording';
|
||||
recordedData = [];
|
||||
csvFileName = `monitoring_data_${new Date().toISOString().replace(/[:.]/g, '-')}.csv`;
|
||||
startRecording();
|
||||
} else {
|
||||
isRecording = false;
|
||||
recordButton.style.backgroundColor = '#ff4444';
|
||||
recordButton.textContent = 'Record';
|
||||
stopRecording();
|
||||
}
|
||||
}
|
||||
|
||||
function startRecording() {
|
||||
recordingInterval = setInterval(async () => {
|
||||
const response = await fetch(`/monitor?pu_number=${document.getElementById('puSelector').value}`);
|
||||
if (!response.ok) {
|
||||
console.error(`HTTP error! status: ${response.status}`);
|
||||
return;
|
||||
}
|
||||
const pu = await response.json();
|
||||
recordedData.push({
|
||||
timestamp: new Date().toISOString(),
|
||||
Qperm: pu.Qperm,
|
||||
Qdilute: pu.Qdilute,
|
||||
Qdrain: pu.Qdrain,
|
||||
Qrecirc: pu.Qrecirc,
|
||||
Pro: pu.Pro,
|
||||
Pdilute: pu.Pdilute,
|
||||
Prentate: pu.Prentate,
|
||||
MV02: pu.MV02,
|
||||
MV03: pu.MV03,
|
||||
MV04: pu.MV04,
|
||||
MV05: pu.MV05,
|
||||
MV06: pu.MV06,
|
||||
MV07: pu.MV07,
|
||||
MV08: pu.MV08
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
async function stopRecording() {
|
||||
clearInterval(recordingInterval);
|
||||
if (recordedData.length > 0) {
|
||||
const csvContent = "data:text/csv;charset=utf-8," +
|
||||
"Timestamp,Qperm,Qdilute,Qdrain,Qrecirc,Pro,Pdilute,Prentate,MV02,MV03,MV04,MV05,MV06,MV07,MV08\n" +
|
||||
recordedData.map(row =>
|
||||
`${row.timestamp},${row.Qperm},${row.Qdilute},${row.Qdrain},${row.Qrecirc},${row.Pro},${row.Pdilute},${row.Prentate},${row.MV02},${row.MV03},${row.MV04},${row.MV05},${row.MV06},${row.MV07},${row.MV08}`
|
||||
).join("\n");
|
||||
|
||||
const encodedUri = encodeURI(csvContent);
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", csvFileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
}
|
||||
}
|
||||
|
||||
window.onbeforeunload = function() {
|
||||
if (isRecording) {
|
||||
stopRecording();
|
||||
}
|
||||
};
|
||||
|
||||
// Existing plot initialization and update functions
|
||||
const maxPoints = 100;
|
||||
const time = () => new Date();
|
||||
let selectedPU = 1;
|
||||
|
|
@ -71,51 +155,46 @@
|
|||
return [oneMinuteAgo, now];
|
||||
}
|
||||
|
||||
async function updatePlots() {
|
||||
try {
|
||||
const response = await fetch(`/monitor?pu_number=${selectedPU}`);
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const pu = await response.json(); // <- Directly using it
|
||||
const t = time();
|
||||
async function updatePlots() {
|
||||
try {
|
||||
const response = await fetch(`/monitor?pu_number=${selectedPU}`);
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const pu = await response.json();
|
||||
const t = time();
|
||||
Plotly.extendTraces('flow-plot', {
|
||||
x: [[t], [t], [t], [t]],
|
||||
y: [[pu.Qperm], [pu.Qdilute], [pu.Qdrain], [pu.Qrecirc]]
|
||||
}, [0, 1, 2, 3], maxPoints);
|
||||
Plotly.extendTraces('pressure-plot', {
|
||||
x: [[t], [t], [t]],
|
||||
y: [[pu.Pro], [pu.Pdilute], [pu.Prentate]]
|
||||
}, [0, 1, 2], maxPoints);
|
||||
//
|
||||
// Plotly.extendTraces('mv02-plot', { x: [[t]], y: [[pu.MV02]] }, [0]);
|
||||
// Plotly.extendTraces('mv03-plot', { x: [[t]], y: [[pu.MV03]] }, [0]);
|
||||
// Plotly.extendTraces('mv04-05-plot', {
|
||||
// x: [[t], [t]],
|
||||
// y: [[pu.MV04], [pu.MV05]]
|
||||
// }, [0, 1]);
|
||||
// Plotly.extendTraces('mv06-plot', { x: [[t]], y: [[pu.MV06]] }, [0]);
|
||||
// Plotly.extendTraces('mv07-plot', { x: [[t]], y: [[pu.MV07]] }, [0]);
|
||||
// Plotly.extendTraces('mv08-plot', { x: [[t]], y: [[pu.MV08]] }, [0]);
|
||||
|
||||
Plotly.extendTraces('flow-plot', {
|
||||
x: [[t], [t], [t], [t]],
|
||||
y: [[pu.Qperm], [pu.Qdilute], [pu.Qdrain], [pu.Qrecirc]]
|
||||
}, [0, 1, 2, 3], maxPoints);
|
||||
|
||||
Plotly.extendTraces('pressure-plot', {
|
||||
x: [[t], [t], [t]],
|
||||
y: [[pu.Pro], [pu.Pdilute], [pu.Prentate]]
|
||||
}, [0, 1, 2], maxPoints);
|
||||
// TURN OFF FOR NOW
|
||||
// Plotly.extendTraces('mv02-plot', { x: [[t]], y: [[pu.MV02]] }, [0]);
|
||||
// Plotly.extendTraces('mv03-plot', { x: [[t]], y: [[pu.MV03]] }, [0]);
|
||||
// Plotly.extendTraces('mv04-05-plot', {
|
||||
// x: [[t], [t]],
|
||||
// y: [[pu.MV04], [pu.MV05]]
|
||||
// }, [0, 1]);
|
||||
// Plotly.extendTraces('mv06-plot', { x: [[t]], y: [[pu.MV06]] }, [0]);
|
||||
// Plotly.extendTraces('mv07-plot', { x: [[t]], y: [[pu.MV07]] }, [0]);
|
||||
// Plotly.extendTraces('mv08-plot', { x: [[t]], y: [[pu.MV08]] }, [0]);
|
||||
|
||||
const range = getLastMinuteRange();
|
||||
const plotIds = [
|
||||
'flow-plot', 'pressure-plot', 'mv02-plot', 'mv03-plot',
|
||||
'mv04-05-plot', 'mv06-plot', 'mv07-plot', 'mv08-plot'
|
||||
];
|
||||
plotIds.forEach(id => {
|
||||
Plotly.relayout(id, { 'xaxis.range': range });
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error updating plots:", error);
|
||||
const range = getLastMinuteRange();
|
||||
const plotIds = [
|
||||
'flow-plot', 'pressure-plot', 'mv02-plot', 'mv03-plot',
|
||||
'mv04-05-plot', 'mv06-plot', 'mv07-plot', 'mv08-plot'
|
||||
];
|
||||
plotIds.forEach(id => {
|
||||
Plotly.relayout(id, { 'xaxis.range': range });
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error updating plots:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function initPlots() {
|
||||
const time0 = [time()];
|
||||
|
||||
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' } },
|
||||
|
|
@ -126,7 +205,6 @@
|
|||
xaxis: { title: 'Time', type: 'date' },
|
||||
yaxis: { title: 'Flow (L/h)', range: [0, 2000] }
|
||||
});
|
||||
|
||||
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' } },
|
||||
|
|
@ -136,49 +214,41 @@
|
|||
xaxis: { title: 'Time', type: 'date' },
|
||||
yaxis: { title: 'Pressure (bar)', range: [0, 15] }
|
||||
});
|
||||
//
|
||||
// Plotly.newPlot('mv02-plot', [{
|
||||
// x: time0, y: [0], name: 'MV02', mode: 'lines'
|
||||
// }], {
|
||||
// title: 'MV02 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
// });
|
||||
//
|
||||
// Plotly.newPlot('mv03-plot', [{
|
||||
// x: time0, y: [0], name: 'MV03', mode: 'lines'
|
||||
// }], {
|
||||
// title: 'MV03 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
// });
|
||||
//
|
||||
// Plotly.newPlot('mv04-05-plot', [
|
||||
// { x: time0, y: [0], name: 'MV04', mode: 'lines' },
|
||||
// { x: time0, y: [0], name: 'MV05', mode: 'lines' }
|
||||
// ], {
|
||||
// title: 'MV04 + MV05 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
// });
|
||||
//
|
||||
// Plotly.newPlot('mv06-plot', [{
|
||||
// x: time0, y: [0], name: 'MV06', mode: 'lines'
|
||||
// }], {
|
||||
// title: 'MV06 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
// });
|
||||
//
|
||||
// Plotly.newPlot('mv07-plot', [{
|
||||
// x: time0, y: [0], name: 'MV07', mode: 'lines'
|
||||
// }], {
|
||||
// title: 'MV07 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
// });
|
||||
//
|
||||
// Plotly.newPlot('mv08-plot', [{
|
||||
// x: time0, y: [0], name: 'MV08', mode: 'lines'
|
||||
// }], {
|
||||
// title: 'MV08 (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
|
||||
// });
|
||||
|
||||
setInterval(updatePlots, 250);
|
||||
setInterval(updatePlots, 1000);
|
||||
}
|
||||
|
||||
window.onload = initPlots;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user