feat: add control lock toggle to cyberpunk web interface

Author: fhirschmann

README.md

@@ -82,6 +82,7 @@ neon logo that doubles as the SVG favicon ([`8d9725c`](../../commit/8d9725c)):
 | SD card capacity gauge in the files tab and the info dialog | [`a2b9f2b`](../../commit/a2b9f2b) |
 | FTP server can be stopped from the web interface (start button turns into a stop button) | [`f0906b4`](../../commit/f0906b4) |
 | Bluetooth modes can be stopped from the web interface; commands 143/144 switch modes directly via buttons | [`0c3edd0`](../../commit/0c3edd0) |
+| Button lock (Kindersicherung) toggle directly in the control tab of the web interface with visual lock status indicator | [`ae83116`](../../commit/ae83116) |
 
 #### Feature highlights
 

html/locales/de.json

@@ -157,7 +157,9 @@
 		"voldown": "Leiser",
 		"volup": "Lauter",
 		"current": "Aktueller Titel",
-		"command": "Modifikation ausführen"
+		"command": "Modifikation ausführen",
+		"locked": "Gesperrt",
+		"unlocked": "Entsperrt"
 	},
 	"files": {
 		"title": "Dateien",

html/locales/en.json

@@ -158,7 +158,9 @@
 		"voldown": "Volume Down",
 		"volup": "Volume Up",
 		"current": "Current track",
-		"command": "Execute Modification"
+		"command": "Execute Modification",
+		"locked": "Locked",
+		"unlocked": "Unlocked"
 	},
 	"files": {
 		"title": "Files",

html/locales/fr.json

@@ -150,7 +150,9 @@
 		"voldown": "Diminuer le volume",
 		"volup": "Augmenter le volume",
 		"current": "Piste actuelle",
-		"command": "Exécuter la modification"
+		"command": "Exécuter la modification",
+		"locked": "Verrouillé",
+		"unlocked": "Déverrouillé"
 	},
 	"files": {
 		"title": "Fichiers",

html/management.html

@@ -661,6 +661,45 @@
 			box-shadow: 0 0 24px -4px rgba(255, 42, 109, .9);
 		}
 
+		.cp-lock-button {
+			font-family: "Rajdhani", sans-serif;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: .1em;
+			padding: 4px 10px;
+			border-radius: 4px;
+			font-size: 0.8rem;
+			transition: all 0.3s ease;
+		}
+
+		.cp-lock-button.unlocked {
+			color: var(--cp-cyan);
+			border: 1px solid rgba(0, 240, 255, .4);
+			background: rgba(0, 240, 255, .05);
+			box-shadow: 0 0 8px rgba(0, 240, 255, .1);
+		}
+
+		.cp-lock-button.unlocked:hover {
+			color: #021019;
+			background: var(--cp-cyan);
+			border-color: var(--cp-cyan);
+			box-shadow: 0 0 12px rgba(0, 240, 255, .6);
+		}
+
+		.cp-lock-button.locked {
+			color: var(--cp-magenta);
+			border: 1px solid rgba(255, 42, 109, .4);
+			background: rgba(255, 42, 109, .05);
+			box-shadow: 0 0 8px rgba(255, 42, 109, .1);
+		}
+
+		.cp-lock-button.locked:hover {
+			color: #021019;
+			background: var(--cp-magenta);
+			border-color: var(--cp-magenta);
+			box-shadow: 0 0 12px rgba(255, 42, 109, .6);
+		}
+
 		.volume-button {
 			width: 60px;
 		}
@@ -1573,7 +1612,13 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 			aria-labelledby="nav-control-tab">
 			<div class="container" id="navControl">
 				<div class="col-md-12">
-					<legend data-i18n="control.title"></legend>
+					<div class="d-flex justify-content-between align-items-center mb-1 pb-1" style="border-bottom: 1px solid var(--cp-border);">
+						<legend data-i18n="control.title" style="border-bottom: none; margin-bottom: 0; padding-bottom: 0;"></legend>
+						<button type="button" class="btn btn-sm cp-lock-button unlocked" id="btn-lock-controls" onclick="sendControl(100)" style="margin-bottom: 4px;">
+							<span id="ico-lock-controls" class="fas fa-lock-open me-1"></span>
+							<span id="lbl-lock-controls" data-i18n="control.unlocked">Unlocked</span>
+						</button>
+					</div>
 					<div class="mb-3 col-md-12">
 						<img src="/cover" class="coverimage-container" id="coverimg" alt="">
 					</div>
@@ -3689,6 +3734,9 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 					if (socketMsg.pong == 'pong') {
 						pong();
 					}
+					if ("controlsLocked" in socketMsg) {
+						updateLockControlsState(socketMsg.controlsLocked);
+					}
 				}
 				if ("opmode" in socketMsg) {
 					currentOpMode = socketMsg.opmode;
@@ -3709,6 +3757,9 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				if ("trackinfo" in socketMsg) {
 					document.getElementById('track').innerHTML = socketMsg.trackinfo.name;
 					setTrackProgress(socketMsg.trackinfo);
+					if ("controlsLocked" in socketMsg.trackinfo) {
+						updateLockControlsState(socketMsg.trackinfo.controlsLocked);
+					}
 					var btnTrackPlayPause = document.getElementById('nav-btn-play');
 					if (socketMsg.trackinfo.pausePlay) {
 						btnTrackPlayPause.innerHTML = '<i id="ico-play-pause" class="fas fa-lg fa-play"></i>';
@@ -4471,6 +4522,25 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 			}
 		}
 
+		function updateLockControlsState(locked) {
+			const btn = document.getElementById('btn-lock-controls');
+			const ico = document.getElementById('ico-lock-controls');
+			const lbl = document.getElementById('lbl-lock-controls');
+			if (!btn || !ico || !lbl) return;
+
+			if (locked) {
+				btn.className = "btn btn-sm cp-lock-button locked";
+				ico.className = "fas fa-lock me-1";
+				lbl.setAttribute('data-i18n', 'control.locked');
+				lbl.innerHTML = i18next.t("control.locked");
+			} else {
+				btn.className = "btn btn-sm cp-lock-button unlocked";
+				ico.className = "fas fa-lock-open me-1";
+				lbl.setAttribute('data-i18n', 'control.unlocked');
+				lbl.innerHTML = i18next.t("control.unlocked");
+			}
+		}
+
 		async function mqttSettings(clickedId) {
 			lastIdclicked = clickedId;
 			var val;

src/System.cpp

@@ -137,11 +137,15 @@ uint8_t System_GetSleepTimer(void) {
 }
 
 void System_SetLockControls(bool value) {
-	System_LockControls = value;
+	if (System_LockControls != value) {
+		System_LockControls = value;
+		Web_SendWebsocketData(0, WebsocketCodeType::Pong);
+	}
 }
 
 void System_ToggleLockControls(void) {
 	System_LockControls = !System_LockControls;
+	Web_SendWebsocketData(0, WebsocketCodeType::Pong);
 }
 
 bool System_AreControlsLocked(void) {

src/Web.cpp

@@ -1989,6 +1989,7 @@ void Web_SendWebsocketData(uint32_t client, WebsocketCodeType code) {
 	} else if (code == WebsocketCodeType::Pong) {
 		object["pong"] = "pong";
 		object["rssi"] = Wlan_GetRssi();
+		object["controlsLocked"] = System_AreControlsLocked();
 #ifdef BATTERY_MEASURE_ENABLE
 		JsonObject batteryObj = object["battery"].to<JsonObject>();
 		batteryObj["voltage"] = Battery_GetVoltage();
@@ -2006,6 +2007,7 @@ void Web_SendWebsocketData(uint32_t client, WebsocketCodeType code) {
 		entry["name"] = gPlayProperties.title;
 		entry["posPercent"] = gPlayProperties.currentRelPos;
 		entry["playMode"] = gPlayProperties.playMode;
+		entry["controlsLocked"] = System_AreControlsLocked();
 	} else if (code == WebsocketCodeType::CoverImg) {
 		object["coverimg"] = "coverimg";
 	} else if (code == WebsocketCodeType::Volume) {