389 lines
14 KiB
HTML
389 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hydraulic Machine Control</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #121212;
|
|
color: white;
|
|
}
|
|
.header {
|
|
background-color: #1e1e1e;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.connect-button {
|
|
background-color: #ff4444;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.connected {
|
|
background-color: #00C851;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
.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;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.pu-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.mode-block button {
|
|
background-color: #4285F4;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
transition: background-color 0.3s;
|
|
flex: 1;
|
|
}
|
|
.mode-block button:hover {
|
|
background-color: #3367d6;
|
|
}
|
|
.mode-block button.active {
|
|
background-color: #00C851;
|
|
}
|
|
.pu-status {
|
|
margin-top: 20px;
|
|
}
|
|
.pu-item {
|
|
background-color: #333;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.monitor-block {
|
|
background-color: #333;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.monitor-block h2 {
|
|
margin-top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.monitor-values {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.monitor-value {
|
|
background-color: #444;
|
|
padding: 10px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
}
|
|
.monitor-link {
|
|
color: white;
|
|
background-color: #007bff;
|
|
padding: 10px 15px;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.monitor-link:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.slider-container {
|
|
margin-top: 10px;
|
|
}
|
|
.slider-container label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
.slider-container input {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Hydraulic Machine Control</h1>
|
|
<a href="/monitor-page" target="_blank" rel="noopener noreferrer" class="monitor-link">
|
|
<i class="fas fa-chart-line"></i> Monitor
|
|
</a>
|
|
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
|
|
<i class="fas fa-power-off"></i> Connect
|
|
</button>
|
|
</div>
|
|
<div class="container">
|
|
<div class="left-panel">
|
|
<div class="mode-block">
|
|
<div class="pu-buttons">
|
|
<button onclick="sendCommand('IDLE', 1, this)"><i class="fas fa-power-off"></i> IDLE PU 1</button>
|
|
<button onclick="sendCommand('IDLE', 2, this)"><i class="fas fa-power-off"></i> IDLE PU 2</button>
|
|
<button onclick="sendCommand('IDLE', 3, this)"><i class="fas fa-power-off"></i> IDLE PU 3</button>
|
|
</div>
|
|
</div>
|
|
<div class="mode-block">
|
|
<div class="pu-buttons">
|
|
<button onclick="sendCommand('PRODUCTION', 1, this)"><i class="fas fa-power-off"></i> PROD PU 1</button>
|
|
<button onclick="sendCommand('PRODUCTION', 2, this)"><i class="fas fa-power-off"></i> PROD PU 2</button>
|
|
<button onclick="sendCommand('PRODUCTION', 3, this)"><i class="fas fa-power-off"></i> PROD PU 3</button>
|
|
</div>
|
|
</div>
|
|
<div class="mode-block">
|
|
<div class="pu-buttons">
|
|
<button onclick="sendCommand('FIRST_START', 1, this)"><i class="fas fa-power-off"></i> FIRST START PU 1</button>
|
|
<button onclick="sendCommand('FIRST_START', 2, this)"><i class="fas fa-power-off"></i> FIRST START PU 2</button>
|
|
<button onclick="sendCommand('FIRST_START', 3, this)"><i class="fas fa-power-off"></i> FIRST START PU 3</button>
|
|
</div>
|
|
</div>
|
|
<div class="slider-container">
|
|
<label for="ploopSetpoint">P-loop Setpoint (bars):</label>
|
|
<div class="slider-values">
|
|
<span id="minValue">0.5</span>
|
|
<span id="currentValue">1.0</span>
|
|
<span id="maxValue">3.5</span>
|
|
</div>
|
|
<input type="range" min="0.5" max="3.5" step="0.1" value="1.0" id="ploopSetpoint" class="slider" oninput="updatePloopSetpoint(this.value)">
|
|
</div>
|
|
|
|
<script>
|
|
function updatePloopSetpoint(value) {
|
|
document.getElementById('currentValue').textContent = value;
|
|
}
|
|
</script>
|
|
<div class="mode-block">
|
|
<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>
|
|
<div class="pu-item">
|
|
<span>PU 2: </span><span id="pu2-status">Offline</span>
|
|
</div>
|
|
<div class="pu-item">
|
|
<span>PU 3: </span><span id="pu3-status">Offline</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="monitor-block">
|
|
<h2><i class="fas fa-tint"></i> Q Perm</h2>
|
|
<div class="monitor-values" id="Qperm">
|
|
<div class="monitor-value">#1<br>0.0 L/h</div>
|
|
<div class="monitor-value">#2<br>0.0 L/h</div>
|
|
<div class="monitor-value">#3<br>0.0 L/h</div>
|
|
</div>
|
|
</div>
|
|
<div class="monitor-block">
|
|
<h2><i class="fas fa-water"></i> P Dilute</h2>
|
|
<div class="monitor-values" id="Pdilute">
|
|
<div class="monitor-value">#1<br>0.0 bar</div>
|
|
<div class="monitor-value">#2<br>0.0 bar</div>
|
|
<div class="monitor-value">#3<br>0.0 bar</div>
|
|
</div>
|
|
</div>
|
|
<div class="monitor-block">
|
|
<h2><i class="fas fa-bolt"></i> Conductivity</h2>
|
|
<div class="monitor-values" id="Conductivity">
|
|
<div class="monitor-value">#1<br>0.0 µS/cm</div>
|
|
<div class="monitor-value">#2<br>0.0 µS/cm</div>
|
|
<div class="monitor-value">#3<br>0.0 µS/cm</div>
|
|
</div>
|
|
</div>
|
|
<div class="monitor-block">
|
|
<h2><i class="fas fa-thermometer-half"></i> Pro</h2>
|
|
<div class="monitor-values" id="Pro">
|
|
<div class="monitor-value">#1<br>0.0 units</div>
|
|
<div class="monitor-value">#2<br>0.0 units</div>
|
|
<div class="monitor-value">#3<br>0.0 units</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function toggleConnection() {
|
|
const response = await fetch('/connect_toggle', {
|
|
method: 'POST'
|
|
});
|
|
const data = await response.json();
|
|
const connectButton = document.getElementById('connectButton');
|
|
if (data.connected) {
|
|
connectButton.classList.add('connected');
|
|
connectButton.innerHTML = '<i class="fas fa-power-off"></i> Disconnect';
|
|
} else {
|
|
connectButton.classList.remove('connected');
|
|
connectButton.innerHTML = '<i class="fas fa-power-off"></i> Connect';
|
|
}
|
|
}
|
|
|
|
async function sendCommand(state, puNumber, buttonEl) {
|
|
const ploopSetpoint = document.getElementById('ploopSetpoint').value;
|
|
const response = await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, {
|
|
method: 'POST'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
console.error('Failed to send command');
|
|
return;
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log(data);
|
|
|
|
// Reset all buttons
|
|
document.querySelectorAll('.mode-block button').forEach(button => {
|
|
button.classList.remove('active');
|
|
});
|
|
|
|
async function fetchPUStatus() {
|
|
try {
|
|
const response = await fetch("/api/pu_status"); // Replace with your actual endpoint
|
|
const data = await response.json();
|
|
|
|
// Assume response is like:
|
|
// { "PU1": "Online", "PU2": "Offline", "PU3": "Online" }
|
|
|
|
document.getElementById("pu1-status").textContent = data.PU1 || "Unknown";
|
|
document.getElementById("pu2-status").textContent = data.PU2 || "Unknown";
|
|
document.getElementById("pu3-status").textContent = data.PU3 || "Unknown";
|
|
} catch (error) {
|
|
console.error("Failed to fetch PU status:", error);
|
|
}
|
|
}
|
|
|
|
// Call it on load and then every 5 seconds
|
|
fetchPUStatus();
|
|
setInterval(fetchPUStatus, 5000);
|
|
|
|
|
|
// Set the clicked button to active
|
|
buttonEl.classList.add('active');
|
|
|
|
}
|
|
|
|
|
|
async function updateMonitorData() {
|
|
const response = await fetch('/monitor');
|
|
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);
|
|
const valueElements = container.querySelectorAll('.monitor-value');
|
|
valueElements.forEach((element, index) => {
|
|
if (index < values.length) {
|
|
element.innerHTML = `#${index + 1}<br>${values[index]} ${unit}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
setInterval(fetchMonitorData, 1000);
|
|
fetchMonitorData(); // Premier appel immédiat
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|