Batteriebanner hinzugefügt

data/index.css

@@ -119,6 +119,134 @@ html {
         box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
       }
 
+      /* Batterie-Banner Styling */
+      .battery-banner {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+        color: white;
+        padding: 15px 20px;
+        text-align: center;
+        z-index: 2000;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        border-bottom: 3px solid rgba(255, 255, 255, 0.2);
+        animation: batteryPulse 2s infinite;
+        transform: translateY(-100%);
+        transition: transform 0.5s ease;
+      }
+
+      .battery-banner.show {
+        transform: translateY(0);
+      }
+
+      .battery-banner .banner-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 15px;
+        flex-wrap: wrap;
+      }
+
+      .battery-banner .banner-icon {
+        font-size: 2rem;
+        animation: batteryBlink 1.5s infinite;
+      }
+
+      .battery-banner .banner-text {
+        font-size: 1.1rem;
+        font-weight: bold;
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+      }
+
+      .battery-banner .banner-devices {
+        font-size: 0.9rem;
+        opacity: 0.9;
+        margin-top: 5px;
+      }
+
+      .battery-banner .close-btn {
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+        background: rgba(255, 255, 255, 0.2);
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        color: white;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        cursor: pointer;
+        font-size: 1.2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
+      }
+
+      .battery-banner .close-btn:hover {
+        background: rgba(255, 255, 255, 0.3);
+        border-color: rgba(255, 255, 255, 0.5);
+        transform: translateY(-50%) scale(1.1);
+      }
+
+      @keyframes batteryPulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.8;
+        }
+      }
+
+      @keyframes batteryBlink {
+        0%, 50% {
+          opacity: 1;
+        }
+        51%, 100% {
+          opacity: 0.5;
+        }
+      }
+
+      /* Anpassung für mobile Geräte */
+      @media (max-width: 768px) {
+        .battery-banner {
+          padding: 12px 15px;
+        }
+        
+        .battery-banner .banner-content {
+          gap: 10px;
+        }
+        
+        .battery-banner .banner-icon {
+          font-size: 1.5rem;
+        }
+        
+        .battery-banner .banner-text {
+          font-size: 1rem;
+        }
+        
+        .battery-banner .close-btn {
+          width: 30px;
+          height: 30px;
+          font-size: 1rem;
+          right: 15px;
+        }
+      }
+
+      /* Hauptcontent nach unten verschieben wenn Banner sichtbar */
+      .content-shifted {
+        margin-top: 80px;
+        transition: margin-top 0.5s ease;
+      }
+
+      @media (max-width: 768px) {
+        .content-shifted {
+          margin-top: 70px;
+        }
+      }
+
       .header {
         text-align: center;
         margin-bottom: 2vh;
@@ -154,20 +282,6 @@ html {
         }
       }
 
-      @media (max-width: 480px) {
-        .timer-container {
-          gap: 20px;
-          padding: 0 10px;
-        }
-      }
-
-      @media (min-width: 1400px) {
-        .timer-container {
-          max-width: 1400px;
-          padding: 0 60px;
-        }
-      }
-
       .lane {
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
@@ -320,96 +434,3 @@ html {
       .learning-mode p {
         font-size: clamp(0.9rem, 1.8vw, 1.1rem);
       }
-
-      /* Responsive Logo Anpassungen für kleine Bildschirme */
-      @media (max-width: 768px) {
-        .logo {
-          position: fixed;
-          top: 10px;
-          left: 50%;
-          transform: translateX(-50%);
-          z-index: 1001;
-        }
-        
-        .header {
-          margin-top: 60px; /* Platz für das Logo schaffen */
-          margin-bottom: 1.5vh;
-        }
-        
-        .settings-btn {
-          top: 10px;
-          right: 10px;
-          width: 40px;
-          height: 40px;
-          font-size: 1rem;
-          padding: 8px;
-        }
-
-        .timer-container {
-          grid-template-columns: 1fr;
-          gap: clamp(10px, 2vh, 15px);
-          padding: 0 3vw;
-          max-height: 50vh; /* Reduziert wegen des zusätzlichen Platzes oben */
-        }
-
-        .header h1 {
-          font-size: clamp(1.5rem, 4vw, 2rem);
-        }
-
-        .header p {
-          font-size: clamp(0.7rem, 2vw, 0.9rem);
-        }
-
-        body {
-          padding: 10px;
-        }
-
-        .swimmer-name {
-          font-size: clamp(1.2rem, 4vw, 1.8rem);
-          margin-bottom: clamp(10px, 1.5vh, 20px);
-        }
-      }
-
-      @media (max-width: 480px) {
-        .logo {
-          top: 8px;
-        }
-        
-        .header {
-          margin-top: 65px; /* Etwas mehr Platz auf sehr kleinen Bildschirmen */
-        }
-        
-        .settings-btn {
-          top: 8px;
-          right: 8px;
-          width: 35px;
-          height: 35px;
-          font-size: 0.9rem;
-          padding: 6px;
-        }
-
-        body {
-          padding: 8px;
-        }
-
-        .timer-container {
-          padding: 0 2vw;
-          max-height: 45vh;
-        }
-
-        .swimmer-name {
-          font-size: clamp(1rem, 4vw, 1.5rem);
-          padding: clamp(6px, 1vh, 10px) clamp(8px, 1.5vw, 12px);
-        }
-      }
-
-      /* Für sehr kleine Bildschirme (iPhone SE, etc.) */
-      @media (max-width: 375px) {
-        .header {
-          margin-top: 70px;
-        }
-        
-        .timer-container {
-          max-height: 40vh;
-        }
-      }

data/index.html

@@ -9,9 +9,21 @@
     
   </head>
     <body>
-      <img src="/pictures/logo.png" class="logo" alt="NinjaCross Logo" />
+    <!-- Batterie-Banner -->
-    </a>
+    <div id="battery-banner" class="battery-banner">
+      <div class="banner-content">
+        <div class="banner-icon">🔋</div>
+        <div>
+          <div class="banner-text">⚠️ Niedrige Batterie erkannt!</div>
+          <div class="banner-devices" id="battery-devices">
+            Geräte mit niedriger Batterie: <span id="low-battery-list"></span>
+          </div>
+        </div>
+      </div>
+      <button class="close-btn" onclick="closeBatteryBanner()">&times;</button>
+    </div>
 
+    <img src="/pictures/logo.png" class="logo" alt="NinjaCross Logo" />
     <a href="/settings" class="settings-btn">⚙️</a>
 
     <div class="heartbeat-indicators">
@@ -74,6 +86,11 @@
       let learningButton = "";
       let name1 = "";
       let name2 = "";
+      
+      // Batterie-Banner State
+      let lowBatteryDevices = new Set();
+      let batteryBannerDismissed = false;
+      
       const ws = new WebSocket(`ws://${window.location.host}/ws`);
 
       // Heartbeat timeout tracker
@@ -93,6 +110,7 @@ const heartbeatTimeouts = {
       ws.onopen = () => {
         console.log("WebSocket connected");
       };
+      
       ws.onclose = () => {
         console.log("WebSocket disconnected");
       };
@@ -103,6 +121,11 @@ ws.onmessage = (event) => {
         try {
           const data = JSON.parse(event.data);
 
+          // Batterie-Status Handling für einzelne Geräte
+          if (data.button && data.mac && data.batteryLevel !== undefined) {
+            handleSingleBatteryStatus(data);
+          }
+
           // Heartbeat-Handling
           if (data.button && data.mac && data.timestamp) {
             let indicatorId = null;
@@ -112,13 +135,12 @@ ws.onmessage = (event) => {
             else if (data.button === "stop2") indicatorId = "heartbeat4";
 
             if (indicatorId) {
-        //heartbeatStatus[deviceId].active = true;
-        //document.getElementById(indicatorId).style.backgroundColor = "limegreen";
               heartbeatTimeouts[data.button] = Date.now();
               document.getElementById(indicatorId).classList.add('active');
             }
           }
 
+          // Namen-Handling
           if ((data.firstname == "" || data.lastname == "") && data.lane == "start1") {
             name1 = "";
           }
@@ -132,7 +154,6 @@ ws.onmessage = (event) => {
             } else if (data.lane === "start2") {
               name2 = `${data.firstname} ${data.lastname}`;
             }
-
             updateDisplay();
           }
         } catch (error) {
@@ -140,6 +161,121 @@ ws.onmessage = (event) => {
         }
       };
 
+      // Batterie-Status Handler für einzelne Geräte
+      function handleSingleBatteryStatus(data) {
+        // Format: {button: "start2", mac: "98:3D:AE:AA:CF:94", batteryLevel: 0}
+        
+        const deviceKey = `${data.button}-${data.mac}`;
+        const batteryLevel = data.batteryLevel || 0;
+        
+        // Batterie als niedrig betrachten wenn <= 15%
+        if (batteryLevel <= 15) {
+          // Gerät zu niedrige Batterie Liste hinzufügen
+          let found = false;
+          for (let device of lowBatteryDevices) {
+            if (device.button === data.button && device.mac === data.mac) {
+              device.battery = batteryLevel;
+              found = true;
+              break;
+            }
+          }
+          
+          if (!found) {
+            lowBatteryDevices.add({
+              button: data.button,
+              mac: data.mac,
+              battery: batteryLevel
+            });
+          }
+          
+          if (!batteryBannerDismissed) {
+            showBatteryBanner();
+          }
+        } else {
+          // Gerät aus niedrige Batterie Liste entfernen
+          lowBatteryDevices.forEach(device => {
+            if (device.button === data.button && device.mac === data.mac) {
+              lowBatteryDevices.delete(device);
+            }
+          });
+          
+          // Banner verstecken wenn keine Geräte mehr niedrige Batterie haben
+          if (lowBatteryDevices.size === 0) {
+            hideBatteryBanner();
+          } else {
+            // Banner aktualisieren
+            showBatteryBanner();
+          }
+        }
+      }
+
+      // Alte Batterie-Status Handler (als Fallback)
+      function handleBatteryStatus(data) {
+        // data.devices ist ein Array mit Geräten die niedrige Batterie haben
+        // Format: [{button: "start1", mac: "XX:XX:XX", battery: 15}, ...]
+        
+        lowBatteryDevices.clear();
+        
+        if (data.devices && data.devices.length > 0) {
+          data.devices.forEach(device => {
+            lowBatteryDevices.add({
+              button: device.button,
+              mac: device.mac,
+              battery: device.battery || 0
+            });
+          });
+          
+          if (!batteryBannerDismissed) {
+            showBatteryBanner();
+          }
+        } else {
+          hideBatteryBanner();
+        }
+      }
+
+      // Batterie-Banner anzeigen
+      function showBatteryBanner() {
+        const banner = document.getElementById('battery-banner');
+        const deviceList = document.getElementById('low-battery-list');
+        
+        // Geräteliste erstellen
+        const deviceNames = Array.from(lowBatteryDevices).map(device => {
+          const buttonName = getButtonDisplayName(device.button);
+          return `${buttonName} (${device.battery}%)`;
+        }).join(', ');
+        
+        deviceList.textContent = deviceNames;
+        
+        // Banner anzeigen
+        banner.classList.add('show');
+        document.body.classList.add('content-shifted');
+      }
+
+      // Batterie-Banner verstecken
+      function hideBatteryBanner() {
+        const banner = document.getElementById('battery-banner');
+        banner.classList.remove('show');
+        document.body.classList.remove('content-shifted');
+        batteryBannerDismissed = false;
+      }
+
+      // Banner manuell schließen
+      function closeBatteryBanner() {
+        batteryBannerDismissed = true;
+        hideBatteryBanner();
+      }
+
+      // Button-Namen für Anzeige
+      function getButtonDisplayName(button) {
+        switch(button) {
+          case 'start1': return 'Start Bahn 1';
+          case 'stop1': return 'Stop Bahn 1';
+          case 'start2': return 'Start Bahn 2';
+          case 'stop2': return 'Stop Bahn 2';
+          default: return button;
+        }
+      }
+
       function formatTime(seconds) {
         if (seconds === 0) return "00.00";
         return seconds.toFixed(2);
@@ -183,11 +319,10 @@ ws.onmessage = (event) => {
         document.getElementById("best2").textContent =
           best2 > 0 ? formatTime(best2) + "s" : "--.-";
 
-    // Namen anzeigen/verstecken - verbesserte Logik
+        // Namen anzeigen/verstecken
         const name1Element = document.getElementById("name1");
         const name2Element = document.getElementById("name2");
 
-    
         if (name1 && name1.trim() !== "") {
           name1Element.textContent = name1;
           name1Element.style.display = "block";

src/communication.h

@@ -155,18 +155,17 @@ void handleBatteryTopic(const char* topic, const char* payload) {
     }
 
     // Parse payload for timestamp (optional, falls im Payload enthalten)
-    uint64_t timestamp = millis();
     StaticJsonDocument<128> payloadDoc;
     if (payload && strlen(payload) > 0 && deserializeJson(payloadDoc, payload) == DeserializationError::Ok) {
         if (payloadDoc.containsKey("voltage")) {
-            timestamp = payloadDoc["voltage"];
+            batteryLevel = payloadDoc["voltage"];
         }
     }
 
     //Berechne die Prozentzahl des Batteriestands für eine 1S LIPO batteryLevel sind Volts
     // Hier wird angenommen, dass 3.7V 100% entspricht und 3.0V 0%
     batteryLevel = batteryLevel * 1000; // Umwandlung von V in mV für genauere Berechnung
-    if (batteryLevel < 3000) {
+    if (batteryLevel < 3200) {
         batteryLevel = 0; // 0% bei 3.0V
     } else if (batteryLevel > 3700) {
         batteryLevel = 100; // 100% bei 3.7V