:sparkles: Make first version of interface

1 files changed, 228 insertions, 0 deletions

diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5e07229
--- /dev/null
+++ b/script.js
@@ -0,0 +1,228 @@
+let StickyControls = false;
+
+let throttleElement = document.querySelector(".throttle");
+let rudderElement = document.querySelector(".rudder");
+
+const hoverControlModule = () => {
+    let _throttle = 0;
+    let _rudder = 0;
+    let _arm = false;
+
+    const setThrottle = (throttle) => {
+        if (!_arm) { return; }
+        if (throttle > 100) { throttle = 100; }
+        if (throttle < 0) { throttle = 0; }
+        _throttle = throttle;
+
+        document.querySelector(".throttle-thumb").style.height = throttle + "%";
+    }
+    const getThrottle = () => _throttle;
+
+    const setRudder = (rudder) => {
+        if (!_arm) { return; }
+        if (rudder > 90) { rudder = 90; }
+        if (rudder < -90) { rudder = -90; }
+        _rudder = rudder;
+
+        let rudderThumb = document.querySelector(".rudder-thumb");
+        rudderThumb.style.width = ((Math.abs(_rudder) / (90 / 50))) + "%";
+        if (_rudder > 0) {
+            rudderThumb.style.backgroundColor = "yellow";
+        } else {
+            rudderThumb.style.backgroundColor = "red";
+            rudderThumb.style.left = (50 - ((Math.abs(_rudder) / (90 / 50)))) + "%";
+        }
+    }
+    const getRudder = () => _rudder;
+
+    const setArm = (arm) => {
+        _arm = arm;
+        if (!_arm) {
+            _throttle = 0;
+            _rudder = 0;
+        }
+    }
+    const getArm = () => _arm;
+
+    return {
+        setThrottle,
+        getThrottle,
+        setRudder,
+        getRudder,
+        setArm,
+        getArm
+    };
+}
+let hoverControl = hoverControlModule();
+
+window.onload = () => {
+    throttleElement.addEventListener('mousedown', on_pointer_hold_throttle,false);
+    document.body.addEventListener('mouseup', on_pointer_release_throttle, false);
+
+    throttleElement.addEventListener('touchstart', on_pointer_hold_throttle,false);
+    document.body.addEventListener('touchend', on_pointer_release_throttle, false);
+
+    rudderElement.addEventListener('mousedown', on_pointer_hold_rudder,false);
+    document.body.addEventListener('mouseup', on_pointer_release_rudder, false);
+
+    rudderElement.addEventListener('touchstart', on_pointer_hold_rudder,false);
+    document.body.addEventListener('touchend', on_pointer_release_rudder, false);
+};
+
+function on_pointer_hold_throttle() {
+    throttleElement.addEventListener('mousemove',(on_mouse_move_throttle),true);
+    document.body.addEventListener('mousemove',on_mouse_move_throttle,true);
+
+    throttleElement.addEventListener('touchmove',on_touch_move_throttle,true);
+    document.body.addEventListener('touchmove',on_touch_move_throttle,true);
+}
+
+function on_mouse_move_throttle(event) {
+    let throttle = Math.round(100 - (event.clientY) / (throttleElement.clientHeight / 100));
+    hoverControl.setThrottle(throttle);
+}
+
+function on_touch_move_throttle(touch) {
+    let throttle = Math.round(100 - (touch.touches[0].clientY) / (throttleElement.clientHeight / 100));
+    hoverControl.setThrottle(throttle);
+}
+
+function on_pointer_release_throttle() {
+	throttleElement.removeEventListener('mousemove',on_mouse_move_throttle,true);
+	document.body.removeEventListener('mousemove',on_mouse_move_throttle,true);
+
+	throttleElement.removeEventListener('touchmove',on_touch_move_throttle,true);
+	document.body.removeEventListener('touchmove',on_touch_move_throttle,true);
+
+    if (!StickyControls) {
+        hoverControl.setThrottle(0);
+    }
+}
+
+function on_pointer_hold_rudder() {
+    rudderElement.addEventListener('mousemove',on_mouse_move_rudder,true);
+    document.body.addEventListener('mousemove',on_mouse_move_rudder,true);
+
+    rudderElement.addEventListener('touchmove',on_touch_move_rudder,true);
+    document.body.addEventListener('touchmove',on_touch_move_rudder,true);
+}
+
+function on_mouse_move_rudder(event) {
+    let rudder = ((event.clientX * (90 - (-90))) / (rudderElement.clientWidth)) + (-90);
+    hoverControl.setRudder(rudder);
+}
+
+function on_touch_move_rudder(touch) {
+    let rudder = ((touch.touches[0].clientX * (90 - (-90))) / (rudderElement.clientWidth)) + (-90);
+    hoverControl.setRudder(rudder);
+}
+
+function on_pointer_release_rudder() {
+	rudderElement.removeEventListener('mousemove',on_mouse_move_rudder,true);
+	document.body.removeEventListener('mousemove',on_mouse_move_rudder,true);
+
+	rudderElement.removeEventListener('touchmove',on_touch_move_rudder,true);
+	document.body.removeEventListener('touchmove',on_touch_move_rudder,true);
+
+    if (!StickyControls) {
+        hoverControl.setRudder(0);
+    }
+}
+
+const logEl = document.getElementById("logEl");
+const log = (message) => logEl.innerHTML = `${message}\n${logEl.innerHTML}`;
+const logJson = (message) => log(JSON.stringify(message, null, 2));
+const eventHandler = event => log(`${event.type}: ${JSON.stringify(event.detail, null, 2)}`);
+let bDev;
+
+document.getElementById("btn_arm").addEventListener("click", () => {
+    hoverControl.setArm(true);
+    document.querySelector(".arm").classList.add("armed");
+    document.querySelector(".arm-status").innerHTML = "ARMED";
+    document.querySelector("#btn_sticky").style.display = "block";
+    document.querySelector("#btn_disarm").style.display = "block";
+    document.querySelector("#btn_arm").style.display = "none";
+});
+
+document.getElementById("btn_disarm").addEventListener("click", () => {
+    hoverControl.setArm(false);
+    document.querySelector(".arm").classList.remove("armed");
+    document.querySelector(".arm-status").innerHTML = "DISARMED";
+    document.querySelector("#btn_sticky").style.display = "none";
+    document.querySelector("#btn_disarm").style.display = "none";
+    document.querySelector("#btn_arm").style.display = "block";
+});
+
+document.getElementById("btn_sticky").addEventListener("click", () => {
+    StickyControls = !StickyControls;
+    if (StickyControls) {
+        document.getElementById("btn_sticky").style.backgroundColor = "green";
+    } else {
+        hoverControl.setThrottle(0);
+        hoverControl.setRudder(0);
+        document.getElementById("btn_sticky").style.backgroundColor = null;
+    }
+});
+
+document.getElementById("btn_connect").onclick = async () => {
+    const device = await microbit.requestMicrobit(window.navigator.bluetooth);
+    bDev = device;
+
+    let connCheckInterval = setInterval(() => {
+        if (device) {
+            if (device.gatt.connected) {
+                document.querySelector("#btn_disconnect").style.display = "block";
+                document.querySelector("#btn_connect").style.display = "none";
+
+                document.querySelector(".info-device").classList.add("connected");
+                document.querySelector(".connection-status").innerHTML = "CONNECTED";
+            } else {
+                hoverControl = hoverControlModule();
+                document.querySelector("#btn_sticky").style.display = "none";
+                document.querySelector("#btn_disarm").style.display = "none";
+                document.querySelector("#btn_arm").style.display = "none";
+                document.querySelector("#btn_disconnect").style.display = "none";
+                document.querySelector("#btn_connect").style.display = "block";
+                document.querySelector(".info-device").classList.remove("connected");
+                document.querySelector(".connection-status").innerHTML = "DISCONNECTED";
+                clearInterval(connCheckInterval);
+            }
+        } else {
+            alert("FATAL ERROR, Please reload page...");
+            clearInterval(connCheckInterval);
+        }
+    }, 500);
+
+    if (device) {
+        hoverControl = hoverControlModule();
+        const services = await microbit.getServices(device);
+
+        document.querySelector("#btn_arm").style.display = "block";
+
+        document.querySelector("#btn_disconnect").addEventListener("click", () => {
+            device.gatt.disconnect();
+            document.querySelector("#btn_sticky").style.display = "none";
+            document.querySelector("#btn_disarm").style.display = "none";
+            document.querySelector("#btn_arm").style.display = "none";
+            document.querySelector("#btn_disconnect").style.display = "none";
+            document.querySelector("#btn_disconnect").onclick = null;
+        });
+
+        if (services.deviceInformationService) {
+            // logJson(await services.deviceInformationService.readDeviceInformation());
+        }
+
+        if (services.uartService) {
+            services.uartService.addEventListener("receiveText", eventHandler);
+
+            document.getElementById("btn_arm").onclick = async() => {
+                await services.uartService.sendText("A1:");
+            }
+
+            document.getElementById("btn_disarm").onclick = async() => {
+                await services.uartService.sendText("A0:");
+            }
+
+        }
+    }
+}