Merge pull request #1 from JakobST1n/controller-redesign

First shot at a redesign of the webapp

1 files changed, 36 insertions, 117 deletions

diff --git a/script.js b/script.js
index a75fdcc..1f9ea31 100644
--- a/script.js
+++ b/script.js
@@ -1,11 +1,8 @@
+/* Register service worker */
 if (navigator.serviceWorker) {
     navigator.serviceWorker.register('/hoverbit-ble/sw.js', {scope: '/hoverbit-ble/'});
 }
 
-let StickyControls = false;
-let throttleElement = document.querySelector(".throttle");
-let rudderElement = document.querySelector(".rudder");
-
 const hoverControlModule = () => {
     let _throttle = 0;
     let _throttleAcc = 0;
@@ -19,11 +16,9 @@ const hoverControlModule = () => {
             switch (item.substring(0, 1)) {
                 case "T":
                     _throttleAcc = parseInt(item.substring(1, item.length));
-                    document.querySelector(".throttle-indicator").style["bottom"] = _throttleAcc + "%";
                     break;
                 case "R":
                     _rudderAcc = parseInt(item.substring(1, item.length));
-                    document.querySelector(".rudder-indicator").style.left = (((_rudderAcc+90) * (100)) / (180)) + "%";
                     break;
                 case "A":
                     _armAcc = parseInt(item.substring(1, item.length)) == 1;
@@ -39,6 +34,7 @@ const hoverControlModule = () => {
                     console.log(`Unkown acc: ${item}`);
             }
         });
+        document.querySelector(".acc-string pre").innerHTML = `T: ${_throttleAcc}, R: ${_rudderAcc}`;
     }
 
     const reset = () => {
@@ -52,8 +48,6 @@ const hoverControlModule = () => {
         if (throttle > 100) { throttle = 100; }
         if (throttle < 0) { throttle = 0; }
         _throttle = throttle;
-
-        document.querySelector(".throttle-thumb").style.height = throttle + "%";
     }
     const getThrottle = () => _throttle;
 
@@ -62,15 +56,6 @@ const hoverControlModule = () => {
         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;
 
@@ -94,93 +79,43 @@ const hoverControlModule = () => {
         getArm
     };
 }
-let hoverControl = hoverControlModule();
-
-window.onload = () => {
-    addEventListener("touchstart", (touch) => {
-        addEventListener("touchmove", (touch => {
-            console.log(touch);
-        }), true);
-    }, false);
-
-    // 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 = Math.round(((event.clientX * (90 - (-90))) / (rudderElement.clientWidth)) + (-90));
-    hoverControl.setRudder(rudder);
-}
+/* Define and initialize things */
+let hoverControl = hoverControlModule();
+let joystickLeft = nipplejs.create({
+    zone: document.querySelector(".joystick-left"),
+    size: 200,
+    position: {left: '50%', bottom: '50%'},
+    mode: "static",
+    lockX: true
+});
+let joystickRight = nipplejs.create({
+    zone: document.querySelector(".joystick-right"),
+    size: 200,
+    position: {left: '50%', bottom: '50%'},
+    mode: "static",
+    lockY: true
+});
+let bDev;
 
-function on_touch_move_rudder(touch) {
-    let rudder = Math.round(((touch.touches[0].clientX * (90 - (-90))) / (rudderElement.clientWidth)) + (-90));
+/* Setup event_listeners */
+joystickLeft.on("move", (evt, data) => {
+    rudder = ((data.distance * 90) / 100);
+    if (data.angle.degree > 90) { rudder = rudder * -1; }
     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);
-    }
-}
+});
+joystickLeft.on("end", (evt, data) => {
+    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;
+joystickRight.on("move", (evt, data) => {
+    throttle = data.distance;
+    if (data.angle.degree > 90) { throttle = 0; }
+    hoverControl.setThrottle(throttle);
+});
+joystickRight.on("end", (evt, data) => {
+    hoverControl.setThrottle(0);
+});
 
 document.getElementById("btn_arm").addEventListener("click", () => {
     hoverControl.setArm(true);
@@ -190,17 +125,6 @@ document.getElementById("btn_disarm").addEventListener("click", () => {
     hoverControl.setArm(false);
 });
 
-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;
@@ -209,12 +133,10 @@ document.getElementById("btn_connect").onclick = async () => {
         if (device) {
             if (device.gatt.connected) {
                 document.body.classList.add("connected");
-                // document.querySelector(".connection-status").innerHTML = "CONNECTED";
             } else {
                 hoverControl.reset();
                 document.body.classList.remove("connected");
                 document.body.classList.remove("armed");
-                // document.querySelector(".connection-status").innerHTML = "DISCONNECTED";
                 // clearInterval(connCheckInterval);
                 device.gatt.disconnect();
             }
@@ -230,10 +152,7 @@ document.getElementById("btn_connect").onclick = async () => {
         const services = await microbit.getServices(device);
 
         document.querySelector("#btn_disconnect").addEventListener("click", () => {
-            hoverControl.setArm(0);
-            hoverControl.setThrottle(0);
-            hoverControl.setRudder(0);
-
+            hoverControl.reset();
             device.gatt.disconnect();
         });