Blinken der LEDs und des WebInterface in Sync

data/index.html

@@ -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>