Blinken der LEDs und des WebInterface in Sync

This commit is contained in:
toptah
2026-03-12 21:22:12 +01:00
parent c39fd04b07
commit 2f23c784ee
7 changed files with 78 additions and 7 deletions
+13 -1
View File
@@ -6,6 +6,9 @@
<link rel="stylesheet" href="style.css">
<title>Port Status</title>
<style>
:root {
--blink-duration: 1s;
}
.port {
margin: 10px;
padding: 10px;
@@ -22,7 +25,7 @@
}
.missing {
background-color: red;
animation: blink 1s infinite;
animation: blink var(--blink-duration) infinite;
}
@keyframes blink {
0%, 50% { background-color: red; }
@@ -43,6 +46,9 @@
try {
const response = await fetch('/status/data');
const data = await response.json();
if (data.blink_interval !== undefined) {
updateBlinkDuration(data.blink_interval);
}
const container = document.getElementById('portsContainer');
container.innerHTML = '';
data.ports.forEach((port, index) => {
@@ -72,6 +78,12 @@
}
}
// blink length updater must be defined before starting
async function updateBlinkDuration(blinkInterval) {
const period = blinkInterval * 2;
document.documentElement.style.setProperty('--blink-duration', period + 'ms');
}
loadStatus();
setInterval(loadStatus, 1000); // Aktualisiere jede Sekunde
</script>
+10 -1
View File
@@ -9,6 +9,9 @@
<body>
<h1>Port Konfiguration</h1>
<form id="portForm">
<label>
Blinkintervall (ms): <input type="number" id="blinkInput" name="blink_interval" min="1" value="">
</label><br>
<div id="portsContainer"></div>
<input type="submit" value="Speichern">
</form>
@@ -19,6 +22,9 @@
try {
const response = await fetch('/portconfig/data');
const data = await response.json();
if (data.blink_interval !== undefined) {
document.getElementById('blinkInput').value = data.blink_interval;
}
const container = document.getElementById('portsContainer');
container.innerHTML = '';
data.ports.forEach((port, index) => {
@@ -46,11 +52,14 @@
enabled: formData.has(`enabled${i}`)
});
}
const blink = parseInt(formData.get('blink_interval')) || null;
const payload = { ports };
if (blink !== null) payload.blink_interval = blink;
try {
await fetch('/portconfig', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ports })
body: JSON.stringify(payload)
});
alert('Konfiguration gespeichert!');
loadConfig(); // Reload