aniketSaha/NorthStar-HMI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds DS data reading and monitor page

Browse Source
This commit is contained in:
Etienne Chassaing 2025-08-06 10:49:56 +02:00
parent 5b11f8006c
commit 7edb759bd9
1 changed files with 34 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
templates/control.html
View File

@ -21,8 +21,8 @@
background-color: #1e1e1e;
padding: 10px 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
align-items: center;
}
.header-row {
display: flex;
@ -191,25 +191,28 @@
.monitor-link {
color: white;
background-color: #007bff;
padding: 10px 15px;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
.monitor-link:hover {
background-color: #0056b3;
}
.monitor-pu-buttons {
display: flex;
gap: 10px;
gap: 5px;
margin: 10px;
}
.monitor-pu-buttons a {
color: white;
background-color: #007bff;
padding: 10px 15px;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
.monitor-pu-buttons a:hover {
background-color: #0056b3;
@ -235,38 +238,32 @@
</head>
<body>
<div class="header">
<div class="header-row">
<h1>Hydraulic Machine Control</h1>
<div>
<button id="recordButton" class="connect-button" onclick="toggleRecording()">
<i class="fas fa-circle"></i> Start Recording
</button>
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
<i class="fas fa-power-off"></i> Disconnect
</button>
</div>
</div>
<div class="header-row">
<div class="monitor-pu-buttons">
<a href="/multi-monitor-page" target="_blank" class="monitor-link">
<i class="fas fa-chart-bar"></i> Monitor All PUs
</a>
<a href="/monitor-DS" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor DS
</a>
</div>
<div class="monitor-pu-buttons">
<a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 1
</a>
<a href="/monitor-page?pu_number=2" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 2
</a>
<a href="/monitor-page?pu_number=3" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 3
</a>
</div>
<h1>Hydraulic Machine Control</h1>
<div class="monitor-pu-buttons">
<!-- New multi-monitor button -->
<a href="/multi-monitor-page" target="_blank" class="monitor-link">
<i class="fas fa-chart-bar"></i> Monitor All PUs
</a>
<a href="/monitor-page?pu_number=1" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 1
</a>
<a href="/monitor-page?pu_number=2" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 2
</a>
<a href="/monitor-page?pu_number=3" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor PU 3
</a>
<a href="/monitor-DS" target="_blank" class="monitor-link">
<i class="fas fa-chart-line"></i> Monitor DS
</a>
<!-- New Record Button -->
<button id="recordButton" class="connect-button" onclick="toggleRecording()">
<i class="fas fa-circle"></i> Start Recording
</button>
</div>
<button id="connectButton" class="connect-button" onclick="toggleConnection()">
<i class="fas fa-power-off"></i> Disconnect
</button>
</div>
<div class="container">
<div class="left-panel">
@ -377,12 +374,12 @@
connectButton.classList.remove('connected');
connectButton.innerHTML = '<i class="fas fa-power-off"></i> Connect';
}
connectButton.innerHTML = `<i class="fas fa-power-off"></i> ${data.connected ? 'Disconnect' : 'Connect'}`;
}
async function toggleConnection() {
const response = await fetch('/connect_toggle', { method: 'POST' });
const data = await response.json();
await getConnectionStatus();
}
let isRecording = false;