feat: show battery level in web interface navbar

Broadcast voltage, charge level and low-battery state with the
websocket pong and render a battery indicator in the navbar with a
one-shot warning toast when the battery runs low. Only visible on
builds with battery measurement enabled.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: fhirschmann

html/locales/de.json

@@ -18,6 +18,7 @@
 	"shutdowninfo": "ESPuino wird jetzt ausgeschaltet...<br>Die Seite lädt sich nach dem Wiedereinschalten automatisch neu.",
 	"toast": {
 		"rfidDetect": "RFID Tag mit {{rfidId}} erkannt.",
+		"batteryLow": "Akku schwach: noch {{level}} %",
 		"success": "Aktion erfolgreich ausgeführt.",
 		"conlost": "Die Verbindung zum ESPuino ist unterbrochen! Bitte Seite neu laden.",
 		"dropout": "Langsamer Stream, Aussetzer möglich.",

html/locales/en.json

@@ -18,6 +18,7 @@
 	"shutdowninfo": "ESPuino is now switched off...<br>Page reloads automatically when the ESPuino is switched on again.",
 	"toast": {
 		"rfidDetect": "RFID tag {{rfidId}} detected.",
+		"batteryLow": "Battery low: {{level}} % remaining",
 		"success": "Action performed successfully.",
 		"conlost": "Connection to ESPuino broken! Please reload website.",
 		"dropout": "slow stream, dropouts are possible.",

html/locales/fr.json

@@ -18,6 +18,7 @@
 	"shutdowninfo": "ESPuino est maintenant éteint...<br>La page se recharge automatiquement lorsque l'ESPuino est rallumé.",
 	"toast": {
 		"rfidDetect": "Étiquette RFID {{rfidId}} détectée.",
+		"batteryLow": "Batterie faible : {{level}} % restants",
 		"success": "Action effectuée avec succès.",
 		"conlost": "Connexion à l'ESPuino perdue! Veuillez recharger la page.",
 		"dropout": "flux lent, des interruptions sont possibles.",

html/management.html

@@ -218,6 +218,19 @@
 			text-shadow: 0 0 8px rgba(0, 240, 255, .6);
 		}
 
+		#batteryIndicator {
+			color: var(--cp-green);
+			font-family: "Share Tech Mono", monospace;
+			font-size: .9rem;
+			text-shadow: 0 0 8px rgba(10, 255, 157, .5);
+		}
+
+		#batteryIndicator.battery-low {
+			color: var(--cp-magenta);
+			text-shadow: 0 0 8px rgba(255, 42, 109, .6);
+			animation: cp-flicker 3s linear infinite;
+		}
+
 		/* ---------- dropdown menu ---------- */
 		.dropdown-menu {
 			background: var(--cp-panel);
@@ -1023,6 +1036,9 @@
 				<span id="navbar-heading" data-i18n="title"></span>
 			</a>
 			<div class="collapse navbar-collapse justify-content-end">
+				<span class="navbar-text" id="batteryIndicator" data-visible="false">
+					<i class="fas fa-battery-three-quarters" id="batteryIcon"></i><span id="batteryLevel"></span>
+				</span>
 				<ul class="navbar-nav">
 					<li class="nav-item">
 						<button class="btn dropdown-toggle border-0 text-white" id="menuToggle"
@@ -3193,6 +3209,9 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				if ("ftpStatus" in socketMsg) {
 					updateFtpButton(socketMsg.ftpStatus.running);
 				}
+				if ("battery" in socketMsg) {
+					updateBatteryIndicator(socketMsg.battery);
+				}
 				if ("volume" in socketMsg) {
 					volumeSlider.setValue(parseInt(socketMsg.volume));
 				}
@@ -4260,6 +4279,33 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 			}
 			return dDisplay + hDisplay + mDisplay;
 		}
+		var batteryLowWarned = false;
+		function updateBatteryIndicator(battery) {
+			const indicator = document.getElementById('batteryIndicator');
+			const level = Math.round(battery.level);
+			let icon = 'fa-battery-empty';
+			if (level >= 87) {
+				icon = 'fa-battery-full';
+			} else if (level >= 62) {
+				icon = 'fa-battery-three-quarters';
+			} else if (level >= 37) {
+				icon = 'fa-battery-half';
+			} else if (level >= 12) {
+				icon = 'fa-battery-quarter';
+			}
+			document.getElementById('batteryIcon').className = 'fas ' + icon;
+			document.getElementById('batteryLevel').textContent = level + '%';
+			indicator.title = battery.voltage.toFixed(2) + ' V';
+			indicator.classList.toggle('battery-low', battery.low === true);
+			indicator.setAttribute('data-visible', true);
+			if (battery.low && !batteryLowWarned) {
+				batteryLowWarned = true;
+				toaster.warning(i18next.t('toast.batteryLow', { level: level }));
+			} else if (!battery.low) {
+				batteryLowWarned = false;
+			}
+		}
+
 		async function refreshSdCapacity() {
 			try {
 				const info = await (await fetch("http://" + host + "/info?section=sdcard")).json();

src/Web.cpp

@@ -1590,8 +1590,12 @@ void Web_SendWebsocketData(uint32_t client, WebsocketCodeType code) {
 	} else if (code == WebsocketCodeType::Pong) {
 		object["pong"] = "pong";
 		object["rssi"] = Wlan_GetRssi();
-		// todo: battery percent + loading status +++
-		// object["battery"] = Battery_GetVoltage();
+#ifdef BATTERY_MEASURE_ENABLE
+		JsonObject batteryObj = object["battery"].to<JsonObject>();
+		batteryObj["voltage"] = Battery_GetVoltage();
+		batteryObj["level"] = Battery_EstimateLevel() * 100;
+		batteryObj["low"] = Battery_IsLow();
+#endif
 	} else if (code == WebsocketCodeType::OperationMode) {
 		object["opmode"] = System_GetOperationMode();
 	} else if (code == WebsocketCodeType::TrackInfo) {