feat: show SD card capacity in web interface

Expose SD card size and free space via /info and render a usage
gauge in the files tab (refreshed after uploads) plus a line in the
system info dialog.

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

Author: fhirschmann

html/locales/de.json

@@ -146,6 +146,10 @@
 	"files": {
 		"title": "Dateien",
 		"loading": "Wird geladen...",
+		"storage": {
+			"title": "Speicherplatz",
+			"info": "{{free}} GB frei von {{total}} GB ({{percent}} % belegt)"
+		},
 		"context": {
 			"newFolder": "Neuer Ordner",
 			"play": "Abspielen",
@@ -511,6 +515,7 @@
 		"arduinoversion": "Arduino Version: {{arduinoversion}} (ESP-IDF {{idfversion}})",
 		"hardware": "Hardware: {{hwmodel}}, Revision {{hwrevision}}, CPU: {{hwfreq}} MHZ",
 		"freeheap": "Freier Heap: {{freeheap}} Bytes",
+		"sdcard": "SD-Karte: {{free}} GB frei von {{total}} GB",
 		"largestfreeblock": "Größter freier Heap-Block: {{largestfreeblock}} Bytes",
 		"freepsram": "Freier PS-RAM: {{freepsram}} Bytes",
 		"currentip": "Aktuelle IP-Adresse: {{currentip}}",

html/locales/en.json

@@ -147,6 +147,10 @@
 	"files": {
 		"title": "Files",
 		"loading": "Please wait...",
+		"storage": {
+			"title": "Storage",
+			"info": "{{free}} GB free of {{total}} GB ({{percent}} % used)"
+		},
 		"context": {
 			"newFolder": "New Folder",
 			"play": "Play",
@@ -513,6 +517,7 @@
 		"arduinoversion": "Arduino Version: {{arduinoversion}} (ESP-IDF {{idfversion}})",
 		"hardware": "Hardware: {{hwmodel}}, Revision {{hwrevision}}, CPU: {{hwfreq}} MHZ",
 		"freeheap": "Free heap: {{freeheap}} Bytes",
+		"sdcard": "SD card: {{free}} GB free of {{total}} GB",
 		"largestfreeblock": "Largest free heap-block: {{largestfreeblock}} Bytes",
 		"freepsram": "Free PS-RAM: {{freepsram}} Bytes",
 		"currentip": "Current IP-Address: {{currentip}}",

html/locales/fr.json

@@ -139,6 +139,10 @@
 	"files": {
 		"title": "Fichiers",
 		"loading": "Veuillez patienter...",
+		"storage": {
+			"title": "Stockage",
+			"info": "{{free}} Go libres sur {{total}} Go ({{percent}} % utilisés)"
+		},
 		"context": {
 			"newFolder": "Nouveau dossier",
 			"play": "Lire",
@@ -500,6 +504,7 @@
 		"arduinoversion": "Version Arduino : {{arduinoversion}} (ESP-IDF {{idfversion}})",
 		"hardware": "Matériel : {{hwmodel}}, Révision {{hwrevision}}, CPU : {{hwfreq}} MHZ",
 		"freeheap": "Mémoire libre : {{freeheap}} octets",
+		"sdcard": "Carte SD : {{free}} Go libres sur {{total}} Go",
 		"largestfreeblock": "Plus grand bloc de mémoire libre : {{largestfreeblock}} octets",
 		"freepsram": "PS-RAM libre : {{freepsram}} octets",
 		"currentip": "Adresse IP actuelle : {{currentip}}",

html/management.html

@@ -1455,6 +1455,14 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 									class="label d-flex position-absolute flex-column align-self-center text-center w-100 text-nowrap text-light">
 								</div>
 							</div>
+							<div id="sdCapacity" class="mt-3" data-visible="false">
+								<small><span data-i18n="files.storage.title"></span>: <span
+										id="sdCapacityText"></span></small>
+								<div class="progress progress-sm">
+									<div id="sdCapacityBar" class="progress-bar" role="progressbar" aria-valuemin="0"
+										aria-valuemax="100"></div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</fieldset>
@@ -2388,6 +2396,7 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 		});
 		i18next.on('languageChanged', (lng) => {
 			document.querySelector('#langSel').value = lng;
+			refreshSdCapacity();
 			if (localize) {
 				localize('body');
 				// (re)initialize all popover buttons to get correct translations in the popovers
@@ -2771,6 +2780,7 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 						addFileDirectory(sel, data);
 						ref.open_node(sel);
 					});
+					refreshSdCapacity();
 				},
 				error: function (request, status, error) {
 					console.log("Upload ERROR!", request);
@@ -4250,6 +4260,28 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 			}
 			return dDisplay + hDisplay + mDisplay;
 		}
+		async function refreshSdCapacity() {
+			try {
+				const info = await (await fetch("http://" + host + "/info?section=sdcard")).json();
+				const sd = info.sdcard;
+				if (!sd || !sd.size) {
+					return;
+				}
+				const usedPercent = Math.round((sd.size - sd.free) * 100 / sd.size);
+				const bar = document.getElementById('sdCapacityBar');
+				bar.style.width = usedPercent + "%";
+				bar.setAttribute('aria-valuenow', usedPercent);
+				document.getElementById('sdCapacityText').textContent = i18next.t("files.storage.info", {
+					free: (sd.free / 1024).toFixed(1),
+					total: (sd.size / 1024).toFixed(1),
+					percent: usedPercent
+				});
+				document.getElementById('sdCapacity').setAttribute('data-visible', true);
+			} catch (e) {
+				console.log("failed to fetch sd capacity", e);
+			}
+		}
+
 		async function fetchInfo() {
 			let info = await (await fetch("http://" + host + "/info")).json();
 			console.log(info);
@@ -4297,6 +4329,12 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 					audiotimesincestart: timestampToDuration(info.audio.playtimeSinceStart, true)
 				}) + "<br>";
 			}
+			if (info.sdcard && info.sdcard.size) {
+				content += i18next.t("systeminfo.sdcard", {
+					free: (info.sdcard.free / 1024).toFixed(1),
+					total: (info.sdcard.size / 1024).toFixed(1)
+				}) + "<br>";
+			}
 			if (info.battery) {
 				content += i18next.t("systeminfo.currvoltage", {
 					currvoltage: info.battery.currVoltage.toFixed(2)

src/Web.cpp

@@ -1401,6 +1401,12 @@ void handleGetInfo(AsyncWebServerRequest *request) {
 		audioObj["playtimeSinceStart"] = AudioPlayer_GetPlayTimeSinceStart();
 		audioObj["firstStart"] = gPrefsSettings.getULong("firstStart", 0);
 	}
+	// sd card
+	if ((section == "") || (section == "sdcard")) {
+		JsonObject sdObj = infoObj["sdcard"].to<JsonObject>();
+		sdObj["size"] = SdCard_GetSize() / (1024 * 1024); // MiB
+		sdObj["free"] = SdCard_GetFreeSize() / (1024 * 1024); // MiB
+	}
 #ifdef BATTERY_MEASURE_ENABLE
 	// battery
 	if ((section == "") || (section == "battery")) {