:sparkles: Add ping indicator and send all parameters

3 files changed, 53 insertions, 12 deletions

diff --git a/index.html b/index.html
index 9bb2147..a704871 100644
--- a/index.html
+++ b/index.html
@@ -20,12 +20,15 @@
                 </span>
                 <span class="battery">
                     <i class="material-icons">battery_std</i>
-                    <span class="connection-status">0%</span>
+                    <span class="battery-status">0%</span>
                 </span>
                 <span class="arm">
                     <i class="material-icons">warning</i>
                     <span class="arm-status">Disarmed</span>
                 </span>
+                <span class="ping">
+                    <i class="material-icons">settings_input_antenna</i>
+                </span>
             </div>
         </div>
 
diff --git a/script.js b/script.js
index 5e07229..dc61b25 100644
--- a/script.js
+++ b/script.js
@@ -108,12 +108,12 @@ function on_pointer_hold_rudder() {
 }
 
 function on_mouse_move_rudder(event) {
-    let rudder = ((event.clientX * (90 - (-90))) / (rudderElement.clientWidth)) + (-90);
+    let rudder = Math.round(((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);
+    let rudder = Math.round(((touch.touches[0].clientX * (90 - (-90))) / (rudderElement.clientWidth)) + (-90));
     hoverControl.setRudder(rudder);
 }
 
@@ -213,15 +213,31 @@ document.getElementById("btn_connect").onclick = async () => {
         }
 
         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:");
-            }
+            services.uartService.addEventListener("receiveText", (event) => {
+                var elm = document.querySelector(".ping i");
+                var newone = elm.cloneNode(true);
+                elm.parentNode.replaceChild(newone, elm);
+
+                document.querySelector(".battery-status").innerHTML = event.detail + "mV";
+                // console.log(event);
+            });
+
+            let sendCommands = setInterval(async() => {
+                if (device) {
+                    if (device.gatt.connected) {
+                        let command =
+                            "T" + hoverControl.getThrottle() +
+                            "R" + hoverControl.getRudder() +
+                            "A" + (hoverControl.getArm() ? "1" : "0") +
+                            "S0" +  // Sending this one because my decoding-code is a bit buggy currently.
+                            ":";
+                        console.log(command);
+                        await services.uartService.sendText(command);
+                    } else {
+                        clearInterval(sendCommands)
+                    }
+                }
+            }, 50);
 
         }
     }
diff --git a/styles.css b/styles.css
index bff4d94..dd18832 100644
--- a/styles.css
+++ b/styles.css
@@ -67,6 +67,28 @@ body {
     color: #008000;
 }
 
+.ping {
+    display: none;
+}
+
+.connected .ping {
+    display: block;
+    margin-left: 5px;
+    color: #4a4a4a;
+}
+
+.ping i {
+    -webkit-animation: ping-fade-out 2s forwards; /* Safari 4+ */
+    -moz-animation:    ping-fade-out 2s forwards; /* Fx 2+ */
+    -o-animation:      ping-fade-out 2s forwards; /* Opera 12+ */
+    animation:         ping-fade-out 2s forwards; /* IE 10+, Fx 29+ */
+}
+
+@-webkit-keyframes ping-fade-out {
+  0%   { opacity: 1; }
+  100% { opacity: 0; }
+}
+
 .options {
     position: absolute;
     display: flex;