aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2024-04-10 10:47:22 +0200
committerlonkaars <loek@pipeframe.xyz>2024-04-10 10:47:22 +0200
commit4e54fd359f2920e015a59af2265688dc557376d5 (patch)
tree14a83c48b65a67608bb4daad39af18767e2c8fd5
parentfe9ff20d6e525ea58fe18f87d5ff8b63c104699c (diff)
implement cctv commands
-rw-r--r--ui/css/style.css5
-rw-r--r--ui/index.html46
-rw-r--r--ui/js/api.js32
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),
},
},
};