diff options
| -rw-r--r-- | ui/css/style.css | 5 | ||||
| -rw-r--r-- | ui/index.html | 46 | ||||
| -rw-r--r-- | ui/js/api.js | 32 |
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), }, }, }; |