aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui/css/style.css4
-rw-r--r--ui/index.html88
-rw-r--r--ui/js/api.js55
-rw-r--r--ui/websocket_output.json16
4 files changed, 94 insertions, 69 deletions
diff --git a/ui/css/style.css b/ui/css/style.css
index 7b8f8d2..8b2201a 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -160,3 +160,7 @@ details[open] summary {
border-bottom: 1px solid #0008;
}
+input[type="range"] {
+ width: 100%;
+}
+
diff --git a/ui/index.html b/ui/index.html
index 07c4141..61723a1 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -18,47 +18,33 @@
<div class="state_controls">
<ul>
<li class="list-item">
- <span class="dot"></span> Fotocellen
+ <span id="photocellValue" class="dot"></span> Fotocellen
<div class="buttons">
- <button onclick="onOffButton(this)" value="1">On</button>
- <button onclick="onOffButton(this)" value="0">Off</button>
+ <button value="true" onclick="api.msg.send.photocell(this)">On</button>
+ <button value="false" onclick="api.msg.send.photocell(this)">Off</button>
</div>
</li>
<li class="list-item">
- <span class="dot"></span> CCTV
+ <span id="cctvValue" class="dot"></span> CCTV
<div class="buttons">
- <button onclick="onOffButton(this)" value="1">On</button>
- <button onclick="onOffButton(this)" value="0">Off</button>
+ <button value="true" onclick="api.msg.send.cctv(this)">On</button>
+ <button value="false" onclick="api.msg.send.cctv(this)">Off</button>
</div>
</li>
<li class="list-item">
- <span class="dot"></span> Verlichting
+ <span id="barrierValue" class="dot"></span> Slagboom
<div class="buttons">
- <button onclick="onOffButton(this)" value="1">On</button>
- <button onclick="onOffButton(this)" value="0">Off</button>
+ <button value="true" onclick="api.msg.send.barrier(this)">Open</button>
+ <button value="false" onclick="api.msg.send.barrier(this)">Close</button>
</div>
</li>
<li class="list-item">
- <span class="dot"></span> Verkeerslicht
+ Matrixbord
<div class="buttons">
- <button onclick="onOffButton(this)" value="1">On</button>
- <button onclick="onOffButton(this)" value="0">Off</button>
- </div>
- </li>
- <li class="list-item">
- <span class="dot"></span> Slagboom
- <div class="buttons">
- <button onclick="onOffButton(this)" value="1">On</button>
- <button onclick="onOffButton(this)" value="0">Off</button>
- </div>
- </li>
- <li class="list-item">
- <span class="dot"></span> Matrixbord
- <div class="buttons">
- <select class="dropdown">
- <option value="wegafsluiting">Wegafsluiting</option>
- <option value="werkzaamheden">Werkzaamheden</option>
- <option value="uitschakelen">Uitschakelen</option>
+ <select class="dropdown" id="matrixValue" onchange="api.msg.send.matrix(this)">
+ <option value="road_closed">Wegafsluiting</option>
+ <option value="construction">Werkzaamheden</option>
+ <option value="disabled">Uitschakelen</option>
</select>
</div>
</li>
@@ -66,48 +52,20 @@
</div>
</details>
- <details>
- <summary>Lights</summary>
+ <details open>
+ <summary>Verlichting</summary>
<div class="light_controls">
- <ul>
- <li><button onclick="setPercentage(0)">0%</button></li>
- <li><button onclick="setPercentage(10)">10%</button></li>
- <li><button onclick="setPercentage(20)">20%</button></li>
- </ul>
- <div id="percentageDisplay">Percentage: 0%</div>
- <script>
- function setPercentage(percentage) {
- document.getElementById('percentageDisplay').innerText = `Percentage: ${percentage}%`;
- }
- </script>
+ <input type="range" min="0" max="100" step="1" value="0" oninput="api.msg.send.lights(this)"/>
+ <div>Felheid: <span id="lightsValue">0</span>%</div>
</div>
</details>
- <details>
- <summary>Traffic lights</summary>
+ <details open>
+ <summary>Stoplichten</summary>
<div class="traffic_light_controls">
- <button onclick="setStatus('Red')">Red</button>
- <button onclick="setStatus('Off')">Off</button>
- <div id="statusDisplay">Status: </div>
- <script>
- function setStatus(status) {
- document.getElementById('statusDisplay').innerText = `Status: ${status}`;
- }
- </script>
- </div>
- </details>
-
- <details>
- <summary>Barrier</summary>
- <div class="barrier_controls">
- <button onclick="setStatus('Open')">Open</button>
- <button onclick="setStatus('Close')">Close</button>
- <div id="statusDisplay">Status: </div>
- <script>
- function setStatus(status) {
- document.getElementById('statusDisplay').innerText = `Status: ${status}`;
- }
- </script>
+ <button value="red" onclick="api.msg.send.trafficLights(this)">Rood</button>
+ <button value="off" onclick="api.msg.send.trafficLights(this)">Uit</button>
+ <div>Status: <span id="trafficLightsValue"></span></div>
</div>
</details>
diff --git a/ui/js/api.js b/ui/js/api.js
index 5fca3cf..319d8c2 100644
--- a/ui/js/api.js
+++ b/ui/js/api.js
@@ -1,11 +1,57 @@
import ws from './socket.js';
-export default {
+function send(obj) {
+ ws.send(JSON.stringify(obj));
+}
+
+function setPolkaDot(el, bool) {
+ el.classList.remove("on");
+ el.classList.remove("off");
+ el.classList.add(bool ? "on" : "off");
+}
+
+const api = {
+ update: {
+ barrier: open => setPolkaDot(document.getElementById("barrierValue"), open),
+ trafficLights: state => document.getElementById("trafficLightsValue").innerText = state,
+ lights: value => document.getElementById("lightsValue").innerText = value,
+ matrix: state => document.getElementById("matrixValue").value = state,
+ photocell: on => setPolkaDot(document.getElementById("photocellValue"), on),
+ cctv: on => setPolkaDot(document.getElementById("cctvValue"), on),
+ },
msg: {
send: {
- helloWorld: () => {
- ws.send(JSON.stringify({res: 'OK'}));
- }
+ helloWorld: () => send({ type: 'helloWorld' }),
+ barrier: el => {
+ var open = el.value == "true"; // string to boolean
+ send({ type: 'barrier', open });
+ api.update.barrier(open);
+ },
+ trafficLights: el => {
+ var state = el.value;
+ send({ type: 'trafficLights', state });
+ api.update.trafficLights(el.innerText);
+ },
+ lights: el => {
+ var value = Number(el.value);
+ send({ type: 'lights', value });
+ api.update.lights(value);
+ },
+ matrix: el => {
+ var state = el.value;
+ send({ type: 'matrix', state });
+ api.update.matrix(value);
+ },
+ photocell: el => {
+ var on = el.value == "true";
+ send({ type: 'photocell', on });
+ api.update.photocell(on);
+ },
+ cctv: el => {
+ var on = el.value == "true";
+ send({ type: 'barrier', on });
+ api.update.cctv(on);
+ },
},
handle: {
helloWorld: msg => {
@@ -15,3 +61,4 @@ export default {
},
};
+export default api;
diff --git a/ui/websocket_output.json b/ui/websocket_output.json
new file mode 100644
index 0000000..6b6deef
--- /dev/null
+++ b/ui/websocket_output.json
@@ -0,0 +1,16 @@
+{ "type": "photocell", "on": true }
+{ "type": "photocell", "on": false }
+{ "type": "barrier", "on": false }
+{ "type": "barrier", "on": true }
+{ "type": "barrier", "open": true }
+{ "type": "barrier", "open": false }
+{ "type": "matrix", "state": "construction" }
+{ "type": "matrix", "state": "road_closed" }
+{ "type": "matrix", "state": "disabled" }
+{ "type": "lights", "value": 0 }
+{ "type": "lights", "value": 12 }
+{ "type": "lights", "value": 100 }
+{ "type": "trafficLights", "state": "off" }
+{ "type": "trafficLights", "state": "red" }
+{ "type": "helloWorld" }
+{ "type": "helloWorld" }