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