254 lines
9.2 KiB
HTML
254 lines
9.2 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: #f4f4f9;
|
|
}
|
|
.header {
|
|
background-color: #333;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
.connect-button {
|
|
background-color: #ff4444;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
.connected {
|
|
background-color: #00C851;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
.left-panel, .right-panel {
|
|
flex: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
.left-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
background-color: #e9ecef;
|
|
}
|
|
.mode-block {
|
|
border: 1px solid #ccc;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: background-color 0.3s;
|
|
}
|
|
.mode-block.active {
|
|
background-color: #a5d6a7; /* Light green background for active mode */
|
|
}
|
|
.mode-block h2 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
.mode-block button {
|
|
background-color: #4285F4;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
.mode-block button:hover {
|
|
background-color: #3367d6;
|
|
}
|
|
.mode-block button i {
|
|
margin-right: 8px;
|
|
}
|
|
.monitor-block {
|
|
border: 1px solid #ccc;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.monitor-block h2 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
.monitor-values {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
}
|
|
.monitor-value {
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
|
|
<i class="fas fa-plug"></i> Disconnected
|
|
</button>
|
|
</div>
|
|
<div class="container">
|
|
<div class="left-panel">
|
|
<div class="mode-block" id="idleMode">
|
|
<h2><i class="fas fa-pause-circle"></i> IDLE Mode</h2>
|
|
<button onclick="triggerPU('IDLE', 1)"><i class="fas fa-power-off"></i> PU 1</button>
|
|
<button onclick="triggerPU('IDLE', 2)"><i class="fas fa-power-off"></i> PU 2</button>
|
|
<button onclick="triggerPU('IDLE', 3)"><i class="fas fa-power-off"></i> PU 3</button>
|
|
</div>
|
|
<div class="mode-block" id="prodMode">
|
|
<h2><i class="fas fa-play-circle"></i> PRODUCTION Mode</h2>
|
|
<button onclick="triggerPU('PRODUCTION', 1)"><i class="fas fa-power-off"></i> PU 1</button>
|
|
<button onclick="triggerPU('PRODUCTION', 2)"><i class="fas fa-power-off"></i> PU 2</button>
|
|
<button onclick="triggerPU('PRODUCTION', 3)"><i class="fas fa-power-off"></i> PU 3</button>
|
|
</div>
|
|
<div class="mode-block" id="firstStartMode">
|
|
<h2><i class="fas fa-sync-alt"></i> First Start</h2>
|
|
<button onclick="triggerPU('FIRST_START', 1)"><i class="fas fa-power-off"></i> PU 1</button>
|
|
<button onclick="triggerPU('FIRST_START', 2)"><i class="fas fa-power-off"></i> PU 2</button>
|
|
<button onclick="triggerPU('FIRST_START', 3)"><i class="fas fa-power-off"></i> PU 3</button>
|
|
</div>
|
|
<div class="mode-block">
|
|
<h2><i class="fas fa-broom"></i> Thermal Loop Cleaning</h2>
|
|
<button onclick="thermalLoopCleaning('IDLE')"><i class="fas fa-broom"></i> Clean</button>
|
|
</div>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="monitor-block">
|
|
<h2><i class="fas fa-tachometer-alt"></i> Q perm</h2>
|
|
<div class="monitor-values" id="Qperm">
|
|
<div class="monitor-value">Q1: 0.0</div>
|
|
<div class="monitor-value">Q2: 0.0</div>
|
|
<div class="monitor-value">Q3: 0.0</div>
|
|
</div>
|
|
</div>
|
|
<div class="monitor-block">
|
|
<h2><i class="fas fa-water"></i> Pdilute</h2>
|
|
<div class="monitor-values" id="Pdilute">
|
|
<div class="monitor-value">P1: 0.0</div>
|
|
<div class="monitor-value">P2: 0.0</div>
|
|
<div class="monitor-value">P3: 0.0</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">C1: 0.0</div>
|
|
<div class="monitor-value">C2: 0.0</div>
|
|
<div class="monitor-value">C3: 0.0</div>
|
|
</div>
|
|
</div>
|
|
<div class="monitor-block">
|
|
<h2><i class="fas fa-flask"></i> Pro</h2>
|
|
<div class="monitor-values" id="Pro">
|
|
<div class="monitor-value">PR1: 0.0</div>
|
|
<div class="monitor-value">PR2: 0.0</div>
|
|
<div class="monitor-value">PR3: 0.0</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-plug"></i> Connected';
|
|
} else {
|
|
connectButton.classList.remove('connected');
|
|
connectButton.innerHTML = '<i class="fas fa-plug"></i> Disconnected';
|
|
}
|
|
}
|
|
|
|
async function triggerPU(state, puNumber) {
|
|
const response = await fetch(`/command/${state}/pu/${puNumber}`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await response.json();
|
|
console.log(data);
|
|
|
|
// Highlight the active mode block based on the state
|
|
document.querySelectorAll('.mode-block').forEach(block => {
|
|
block.classList.remove('active');
|
|
});
|
|
|
|
// Map state to lowercase div ID suffix
|
|
const stateToId = {
|
|
"IDLE": "idle",
|
|
"PRODUCTION": "prod",
|
|
"FIRST_START": "firstStart"
|
|
};
|
|
|
|
const blockId = stateToId[state];
|
|
if (blockId) {
|
|
const block = document.getElementById(`${blockId}Mode`);
|
|
if (block) {
|
|
block.classList.add('active');
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
async function thermalLoopCleaning(mode) {
|
|
const response = await fetch(`/mode/${mode}/thermal_loop`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await response.json();
|
|
console.log(data);
|
|
}
|
|
|
|
async function updateMonitorData() {
|
|
const response = await fetch('/monitor');
|
|
const data = await response.json();
|
|
updateMonitorValues('Qperm', data.Qperm);
|
|
updateMonitorValues('Pdilute', data.Pdilute);
|
|
updateMonitorValues('Conductivity', data.Conductivity);
|
|
updateMonitorValues('Pro', data.Pro);
|
|
}
|
|
|
|
function updateMonitorValues(id, values) {
|
|
const container = document.getElementById(id);
|
|
const valueElements = container.querySelectorAll('.monitor-value');
|
|
valueElements.forEach((element, index) => {
|
|
if (index < values.length) {
|
|
element.textContent = `${id.charAt(0)}${index + 1}: ${values[index]}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update monitor data every second
|
|
setInterval(updateMonitorData, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|