Batteriebanner hinzugefügt

data/index.css

@@ -79,7 +79,7 @@ html {
         transform: scale(1.1);
       }
 
-            .heartbeat-indicators {
+      .heartbeat-indicators {
         position: fixed;
         top: 20px;
         right: 90px;
@@ -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);
@@ -319,97 +433,4 @@ 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,12 +9,24 @@
     
   </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">
+    <div class="heartbeat-indicators">
       <div class="heartbeat-indicator" id="heartbeat1" data-label="Start1"></div>
       <div class="heartbeat-indicator" id="heartbeat2" data-label="Stop1"></div>
       <div class="heartbeat-indicator" id="heartbeat3" data-label="Start2"></div>
@@ -62,199 +74,322 @@
     </div>
 
     <script>
-  // State variables
+      // State variables
-  let timer1 = 0;
+      let timer1 = 0;
-  let timer2 = 0;
+      let timer2 = 0;
-  let status1 = "ready";
+      let status1 = "ready";
-  let status2 = "ready";
+      let status2 = "ready";
-  let best1 = 0;
+      let best1 = 0;
-  let best2 = 0;
+      let best2 = 0;
-  let lastSync = Date.now();
+      let lastSync = Date.now();
-  let learningMode = false;
+      let learningMode = false;
-  let learningButton = "";
+      let learningButton = "";
-  let name1 = "";
+      let name1 = "";
-  let name2 = "";
+      let name2 = "";
-  const ws = new WebSocket(`ws://${window.location.host}/ws`);
+      
+      // Batterie-Banner State
+      let lowBatteryDevices = new Set();
+      let batteryBannerDismissed = false;
+      
+      const ws = new WebSocket(`ws://${window.location.host}/ws`);
 
-  // Heartbeat timeout tracker
+      // Heartbeat timeout tracker
-const heartbeatTimeouts = {
+      const heartbeatTimeouts = {
-  start1: 0,
+        start1: 0,
-  stop1: 0,
+        stop1: 0,
-  start2: 0,
+        start2: 0,
-  stop2: 0,
+        stop2: 0,
-};
+      };
 
-// Set all heartbeats to red initially
+      // Set all heartbeats to red initially
-["heartbeat1", "heartbeat2", "heartbeat3", "heartbeat4"].forEach(id => {
+      ["heartbeat1", "heartbeat2", "heartbeat3", "heartbeat4"].forEach(id => {
-  document.getElementById(id).classList.remove('active');
+        document.getElementById(id).classList.remove('active');
-});
+      });
 
-// Handle WebSocket events
+      // Handle WebSocket events
-ws.onopen = () => {
+      ws.onopen = () => {
-  console.log("WebSocket connected");
+        console.log("WebSocket connected");
-};
+      };
-ws.onclose = () => {
+      
-  console.log("WebSocket disconnected");
+      ws.onclose = () => {
-};
+        console.log("WebSocket disconnected");
+      };
 
-ws.onmessage = (event) => {
+      ws.onmessage = (event) => {
-  console.log("WebSocket message received:", event.data);
+        console.log("WebSocket message received:", event.data);
 
-  try {
+        try {
-    const data = JSON.parse(event.data);
+          const data = JSON.parse(event.data);
 
-    // Heartbeat-Handling
+          // Batterie-Status Handling für einzelne Geräte
-    if (data.button && data.mac && data.timestamp) {
+          if (data.button && data.mac && data.batteryLevel !== undefined) {
-      let indicatorId = null;
+            handleSingleBatteryStatus(data);
-      if (data.button === "start1") indicatorId = "heartbeat1";
+          }
-      else if (data.button === "stop1") indicatorId = "heartbeat2";
-      else if (data.button === "start2") indicatorId = "heartbeat3";
-      else if (data.button === "stop2") indicatorId = "heartbeat4";
 
-      if (indicatorId) {
+          // Heartbeat-Handling
-        //heartbeatStatus[deviceId].active = true;
+          if (data.button && data.mac && data.timestamp) {
-        //document.getElementById(indicatorId).style.backgroundColor = "limegreen";
+            let indicatorId = null;
-        heartbeatTimeouts[data.button] = Date.now();
+            if (data.button === "start1") indicatorId = "heartbeat1";
-        document.getElementById(indicatorId).classList.add('active');
+            else if (data.button === "stop1") indicatorId = "heartbeat2";
-      }
+            else if (data.button === "start2") indicatorId = "heartbeat3";
-    }
+            else if (data.button === "stop2") indicatorId = "heartbeat4";
 
-    if ((data.firstname == "" || data.lastname == "") && data.lane == "start1") {
+            if (indicatorId) {
-      name1 = "";
+              heartbeatTimeouts[data.button] = Date.now();
-    }
+              document.getElementById(indicatorId).classList.add('active');
-    if ((data.firstname == "" || data.lastname == "") && data.lane == "start2") {
+            }
-      name2 = "";
+          }
-    }
 
-    if (data.firstname && data.lastname && data.lane) {
+          // Namen-Handling
-      if (data.lane === "start1") {
+          if ((data.firstname == "" || data.lastname == "") && data.lane == "start1") {
-        name1 = `${data.firstname} ${data.lastname}`;
+            name1 = "";
-      } else if (data.lane === "start2") {
+          }
-        name2 = `${data.firstname} ${data.lastname}`;
+          if ((data.firstname == "" || data.lastname == "") && data.lane == "start2") {
+            name2 = "";
+          }
+
+          if (data.firstname && data.lastname && data.lane) {
+            if (data.lane === "start1") {
+              name1 = `${data.firstname} ${data.lastname}`;
+            } else if (data.lane === "start2") {
+              name2 = `${data.firstname} ${data.lastname}`;
+            }
+            updateDisplay();
+          }
+        } catch (error) {
+          console.error("Error processing WebSocket message:", error);
+        }
+      };
+
+      // 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();
+          }
+        }
       }
 
-      updateDisplay();
+      // Alte Batterie-Status Handler (als Fallback)
-    }
+      function handleBatteryStatus(data) {
-  } catch (error) {
+        // data.devices ist ein Array mit Geräten die niedrige Batterie haben
-    console.error("Error processing WebSocket message:", error);
+        // 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();
+        }
+      }
 
-  function formatTime(seconds) {
+      // Batterie-Banner anzeigen
-    if (seconds === 0) return "00.00";
+      function showBatteryBanner() {
-    return seconds.toFixed(2);
+        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');
+      }
 
-  function updateDisplay() {
+      // Batterie-Banner verstecken
-    // Calculate elapsed time since last sync
+      function hideBatteryBanner() {
-    const now = Date.now();
+        const banner = document.getElementById('battery-banner');
-    let display1 = timer1;
+        banner.classList.remove('show');
-    let display2 = timer2;
+        document.body.classList.remove('content-shifted');
+        batteryBannerDismissed = false;
+      }
 
-    if (status1 === "running") {
+      // Banner manuell schließen
-      display1 += (now - lastSync) / 1000;
+      function closeBatteryBanner() {
-    }
+        batteryBannerDismissed = true;
-    if (status2 === "running") {
+        hideBatteryBanner();
-      display2 += (now - lastSync) / 1000;
+      }
-    }
 
-    document.getElementById("time1").textContent = formatTime(display1);
+      // Button-Namen für Anzeige
-    const s1 = document.getElementById("status1");
+      function getButtonDisplayName(button) {
-    s1.className = `status ${status1}`;
+        switch(button) {
-    s1.textContent =
+          case 'start1': return 'Start Bahn 1';
-      status1 === "ready"
+          case 'stop1': return 'Stop Bahn 1';
-        ? "Bereit"
+          case 'start2': return 'Start Bahn 2';
-        : status1 === "running"
+          case 'stop2': return 'Stop Bahn 2';
-        ? "Läuft..."
+          default: return button;
-        : "Beendet";
+        }
+      }
 
-    document.getElementById("time2").textContent = formatTime(display2);
+      function formatTime(seconds) {
-    const s2 = document.getElementById("status2");
+        if (seconds === 0) return "00.00";
-    s2.className = `status ${status2}`;
+        return seconds.toFixed(2);
-    s2.textContent =
+      }
-      status2 === "ready"
-        ? "Bereit"
-        : status2 === "running"
-        ? "Läuft..."
-        : "Beendet";
 
-    document.getElementById("best1").textContent =
+      function updateDisplay() {
-      best1 > 0 ? formatTime(best1) + "s" : "--.-";
+        // Calculate elapsed time since last sync
-    document.getElementById("best2").textContent =
+        const now = Date.now();
-      best2 > 0 ? formatTime(best2) + "s" : "--.-";
+        let display1 = timer1;
+        let display2 = timer2;
 
-    // Namen anzeigen/verstecken - verbesserte Logik
+        if (status1 === "running") {
-    const name1Element = document.getElementById("name1");
+          display1 += (now - lastSync) / 1000;
-    const name2Element = document.getElementById("name2");
+        }
+        if (status2 === "running") {
+          display2 += (now - lastSync) / 1000;
+        }
 
-    
+        document.getElementById("time1").textContent = formatTime(display1);
-    if (name1 && name1.trim() !== "") {
+        const s1 = document.getElementById("status1");
-      name1Element.textContent = name1;
+        s1.className = `status ${status1}`;
-      name1Element.style.display = "block";
+        s1.textContent =
-    } else {
+          status1 === "ready"
-      name1Element.style.display = "none";
+            ? "Bereit"
-    }
+            : status1 === "running"
-    
+            ? "Läuft..."
-    if (name2 && name2.trim() !== "") {
+            : "Beendet";
-      name2Element.textContent = name2;
-      name2Element.style.display = "block";
-    } else {
-      name2Element.style.display = "none";
-    }
 
-    // Lernmodus
+        document.getElementById("time2").textContent = formatTime(display2);
-    const learningDisplay = document.getElementById("learning-display");
+        const s2 = document.getElementById("status2");
-    if (learningMode) {
+        s2.className = `status ${status2}`;
-      document.getElementById("learning-button").textContent = learningButton;
+        s2.textContent =
-      learningDisplay.style.display = "block";
+          status2 === "ready"
-    } else {
+            ? "Bereit"
-      learningDisplay.style.display = "none";
+            : status2 === "running"
-    }
+            ? "Läuft..."
-  }
+            : "Beendet";
 
-  function syncFromBackend() {
+        document.getElementById("best1").textContent =
-    fetch("/api/data")
+          best1 > 0 ? formatTime(best1) + "s" : "--.-";
-      .then((response) => response.json())
+        document.getElementById("best2").textContent =
-      .then((data) => {
+          best2 > 0 ? formatTime(best2) + "s" : "--.-";
-        timer1 = data.time1;
-        timer2 = data.time2;
-        status1 = data.status1;
-        status2 = data.status2;
-        best1 = data.best1;
-        best2 = data.best2;
-        learningMode = data.learningMode;
-        learningButton = data.learningButton || "";
-        lastSync = Date.now();
-        updateDisplay();
-      })
-      .catch((error) =>
-        console.error("Fehler beim Laden der Daten:", error)
-      );
-  }
 
-  // Sync with backend every 1 second
+        // Namen anzeigen/verstecken
-  setInterval(syncFromBackend, 1000);
+        const name1Element = document.getElementById("name1");
+        const name2Element = document.getElementById("name2");
 
-  // Smooth update every 50ms
+        if (name1 && name1.trim() !== "") {
-  setInterval(updateDisplay, 50);
+          name1Element.textContent = name1;
+          name1Element.style.display = "block";
+        } else {
+          name1Element.style.display = "none";
+        }
+        
+        if (name2 && name2.trim() !== "") {
+          name2Element.textContent = name2;
+          name2Element.style.display = "block";
+        } else {
+          name2Element.style.display = "none";
+        }
 
-  // Heartbeat timeout check (every second)
+        // Lernmodus
-setInterval(() => {
+        const learningDisplay = document.getElementById("learning-display");
-  const now = Date.now();
+        if (learningMode) {
-  [
+          document.getElementById("learning-button").textContent = learningButton;
-    {button: "start1", id: "heartbeat1"},
+          learningDisplay.style.display = "block";
-    {button: "stop1", id: "heartbeat2"},
+        } else {
-    {button: "start2", id: "heartbeat3"},
+          learningDisplay.style.display = "none";
-    {button: "stop2", id: "heartbeat4"},
+        }
-  ].forEach(({button, id}) => {
+      }
-    if (now - heartbeatTimeouts[button] > 10000) {
+
-      document.getElementById(id).classList.remove('active');
+      function syncFromBackend() {
-    }
+        fetch("/api/data")
-  });
+          .then((response) => response.json())
-}, 1000);
+          .then((data) => {
-  
+            timer1 = data.time1;
-  // Initial load
+            timer2 = data.time2;
-  syncFromBackend();
+            status1 = data.status1;
-  </script>
+            status2 = data.status2;
+            best1 = data.best1;
+            best2 = data.best2;
+            learningMode = data.learningMode;
+            learningButton = data.learningButton || "";
+            lastSync = Date.now();
+            updateDisplay();
+          })
+          .catch((error) =>
+            console.error("Fehler beim Laden der Daten:", error)
+          );
+      }
+
+      // Sync with backend every 1 second
+      setInterval(syncFromBackend, 1000);
+
+      // Smooth update every 50ms
+      setInterval(updateDisplay, 50);
+
+      // Heartbeat timeout check (every second)
+      setInterval(() => {
+        const now = Date.now();
+        [
+          {button: "start1", id: "heartbeat1"},
+          {button: "stop1", id: "heartbeat2"},
+          {button: "start2", id: "heartbeat3"},
+          {button: "stop2", id: "heartbeat4"},
+        ].forEach(({button, id}) => {
+          if (now - heartbeatTimeouts[button] > 10000) {
+            document.getElementById(id).classList.remove('active');
+          }
+        });
+      }, 1000);
+
+      // Initial load
+      syncFromBackend();
+    </script>
   </body>
 </html>

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