implement cctv commands

3 files changed, 48 insertions, 35 deletions

diff --git a/ui/css/style.css b/ui/css/style.css
index ca35786..a3c1f38 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -201,3 +201,8 @@ button:not([disabled]):active {
 	background-color: #0004;
 }
 
+.inputlabel {
+	display: flex;
+	gap: 8px;
+	align-items: stretch;
+}
diff --git a/ui/index.html b/ui/index.html
index 088985e..a3f61ed 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -62,8 +62,8 @@
 			<details open>
 				<summary>Verlichting</summary>
 				<div class="light_controls">
-					<input id="lightsInput" type="range" min="0" max="10" step="1" value="0" oninput="api.msg.send.lights(this)"/>
 					<div>Felheid: <span id="lightsValue">??</span>%</div>
+					<input id="lightsInput" type="range" min="0" max="10" step="1" value="0" oninput="api.msg.send.lights(this)"/>
 				</div>
 			</details>
 
@@ -77,31 +77,31 @@
 			</details>
 
 			<details open>
-				<summary>CCTV Presets</summary>
-				<div>
-					Huidige preset: <span id="cctvPresetValue">??</span>
-				</div>
+				<summary>CCTV Controls</summary>
 				<div class="buttons">
-					<button value="preset1" onclick="api.msg.send.cctv(this)">Preset 1</button>
-					<button value="preset2" onclick="api.msg.send.cctv(this)">Preset 2</button>
-					<button value="preset3" onclick="api.msg.send.cctv(this)">Preset 3</button>
-					<button value="preset4" onclick="api.msg.send.cctv(this)">Preset 4</button>
-					<button value="preset5" onclick="api.msg.send.cctv(this)">Preset 5</button>
-					<button value="preset6" onclick="api.msg.send.cctv(this)">Preset 6</button>
-					<button value="preset7" onclick="api.msg.send.cctv(this)">Preset 7</button>
-					<button value="preset8" onclick="api.msg.send.cctv(this)">Preset 8</button>
-					<button value="preset9" onclick="api.msg.send.cctv(this)">Preset 9</button>
+					<button value="preset1" onclick="api.msg.send.cctvPreset(this)">Preset 1</button>
+					<button value="preset2" onclick="api.msg.send.cctvPreset(this)">Preset 2</button>
+					<button value="preset3" onclick="api.msg.send.cctvPreset(this)">Preset 3</button>
+					<button value="preset4" onclick="api.msg.send.cctvPreset(this)">Preset 4</button>
+					<button value="preset5" onclick="api.msg.send.cctvPreset(this)">Preset 5</button>
+					<button value="preset6" onclick="api.msg.send.cctvPreset(this)">Preset 6</button>
+					<button value="preset7" onclick="api.msg.send.cctvPreset(this)">Preset 7</button>
+					<button value="preset8" onclick="api.msg.send.cctvPreset(this)">Preset 8</button>
+					<button value="preset9" onclick="api.msg.send.cctvPreset(this)">Preset 9</button>
 				</div>
 				<div>
-					Controls: <span id="cctvControls">??</span>
-				</div>
-				<div class="buttons">
-					<button value="panleft" onclick="api.msg.send.cctv(this)">Pan left</button>
-					<button value="panright" onclick="api.msg.send.cctv(this)">Pan right</button>
-					<button value="tiltup" onclick="api.msg.send.cctv(this)">Tilt up</button>
-					<button value="tiltdown" onclick="api.msg.send.cctv(this)">Tilt down</button>
-					<button value="zoomin" onclick="api.msg.send.cctv(this)">Zoom in</button>
-					<button value="zoomout" onclick="api.msg.send.cctv(this)">Zoom out</button>
+					<div class="inputlabel">
+						<label>Pan</label>
+						<input id="cctvPanInput" type="range" min="0" max="360" step="1" value="0" oninput="api.msg.send.cctvCtl()"/>
+					</div>
+					<div class="inputlabel">
+						<label>Tilt</label>
+						<input id="cctvTiltInput" type="range" min="-90" max="90" step="1" value="0" oninput="api.msg.send.cctvCtl()"/>
+					</div>
+					<div class="inputlabel">
+						<label>Zoom</label>
+						<input id="cctvZoomInput" type="range" min="10" max="45" step="1" value="10" oninput="api.msg.send.cctvCtl()"/>
+					</div>
 				</div>
 			</details>
 
diff --git a/ui/js/api.js b/ui/js/api.js
index 647cbd6..00349be 100644
--- a/ui/js/api.js
+++ b/ui/js/api.js
@@ -27,9 +27,6 @@ const api = {
 		},
 		matrix: state => document.getElementById("matrixValue").value = state,
 		photocell: on => setPolkaDot(document.getElementById("photocellValue"), on),
-		cctv: preset => {
-			document.getElementById("cctvPresetValue").innerText = preset;
-		},
 		carSpeed: speed => {
 			for (let i = 0; i < 4; i++)
 				document.getElementById(`zone${i+1}SpeedValue`).innerText = speed[i];
@@ -66,7 +63,12 @@ const api = {
 		},
 		start: () => {
 			document.getElementById("setupDialog").close();
-		}
+		},
+		cctvCtl: (pan, tilt, zoom) => {
+			document.getElementById("cctvPanInput").value = pan;
+			document.getElementById("cctvTiltInput").value = tilt;
+			document.getElementById("cctvZoomInput").value = zoom;
+		},
 	},
 	msg: {
 		send: {
@@ -97,20 +99,26 @@ const api = {
 				send({ type: 'photocell', on });
 				api.update.photocell(on);
 			},
-			cctv: el => {
-				var preset = el.value;
-				send({ type: 'cctv', preset });
-				api.update.cctv(preset);
-			},
 			sos: el => {
 				var statusSOS = el.value == "true";
 				send({ type: 'sosBericht', statusSOS });
 				api.update.sos(statusSOS);
 			},
-			start: el => {
+			start: () => {
 				send({ type: 'start' });
 				api.update.start();
-			}
+			},
+			cctvPreset: el => {
+				var preset = el.value;
+				send({ type: 'cctvPreset', preset });
+			},
+			cctvCtl: () => {
+				var pan = document.getElementById("cctvPanInput").value;
+				var tilt = document.getElementById("cctvTiltInput").value;
+				var zoom = document.getElementById("cctvZoomInput").value;
+				send({ type: 'cctvControl', pan, tilt, zoom });
+				api.update.cctvCtl(pan, tilt, zoom);
+			},
 		},
 		handle: {
 			helloWorld: msg => console.log(msg),
@@ -119,10 +127,10 @@ const api = {
 			lights: msg => api.update.lights(msg.value),
 			matrix: msg => api.update.matrix(msg.state),
 			photocell: msg => api.update.photocell(msg.on),
-			cctv: msg => api.update.cctv(msg.preset),
 			autoPerZone: msg => api.update.carCount(msg.autos),
 			sosBericht: msg => api.update.notifications(msg),
 			lfvReady: msg => api.update.lfvReady(msg),
+			cctvControl: msg => api.update.cctvCtl(msg.pan, msg.tilt, msg.zoom),
 		},
 	},
 };