From f5ca382c491fe2a1bbd2e4b74b1f57a406ebae3b Mon Sep 17 00:00:00 2001
From: jc4419 <60656643+jc4419@users.noreply.github.com>
Date: Fri, 11 Jun 2021 22:45:00 +0400
Subject: [PATCH] Added extra telemetry data parameters, and the corresponding
 javascript websocket back end. In short rover to client interface is done,
 needs to be tested. Also changed button interface to accomodate new 'command
 buffer' system. No real time control. Also made layout static so that button
 layout doesnt break when resizing window.

---
 Control/data/index.html | 211 ++++++++++++++++++++++------------------
 1 file changed, 118 insertions(+), 93 deletions(-)

diff --git a/Control/data/index.html b/Control/data/index.html
index 2585688..53242ae 100644
--- a/Control/data/index.html
+++ b/Control/data/index.html
@@ -12,38 +12,17 @@
             box-sizing: border-box;
         }
 
-        .section_container {
-            float: left;
-            width: 33%;
-            padding: 0px;
-        }
-
         .flex-container {
             display: flex;
             flex-wrap: nowrap;
         }
 
-        ul {
-            list-style-type: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        li {
-            padding: 0px;
-            margin-bottom: 0px;
-        }
-
         :is(h1, h2, h3, h4, h5, h6, label, strong, meter) {
             font-family: Arial, Helvetica, sans-serif;
         }
 
-        .movement_control {
-            text-align: center;
-        }
-
-        .sensor_data {
-            text-align: center;
+        h2{
+            margin: 0px;
         }
 
         meter {
@@ -59,10 +38,11 @@
             position: relative;
         }
 
-        .button {
+        button {
+            width: 100%;
             display: inline-block;
-            padding: 15px 25px;
-            font-size: 24px;
+            padding: 7px 7px;
+            font-size: 12px;
             cursor: pointer;
             text-align: center;
             text-decoration: none;
@@ -70,17 +50,17 @@
             color: rgb(255, 255, 255);
             background-color: #161616;
             border: none;
-            border-radius: 15px;
-            box-shadow: 0 9px rgb(161, 161, 161);
+            border-radius: 5px;
+            box-shadow: 0 3px rgb(161, 161, 161);
         }
 
-        .button:hover {
+        button:hover {
             background-color: #585858
         }
 
-        .button:active {
+        button:active {
             background-color: #107C10;
-            box-shadow: 0 5px rgb(161, 161, 161);
+            box-shadow: 0 3px rgb(161, 161, 161);
             transform: translateY(4px);
         }
 
@@ -100,22 +80,47 @@
 
         var connection = new WebSocket('ws://' + location.hostname + ':81/');
 
-        var MVM_F_status = 0;
-        var MVM_L_status = 0;
-        var MVM_R_status = 0;
-        var MVM_B_status = 0;
+        var command_id = 0;
+        var mode = 0;
+        var reqHeading = 0;
+        var reqSpeed = 0;
+        var reqCharge = 0;
+
+        var batteryVoltage = 0;
+        var totalTripDistance = 0;
+        var currentHeading = rdoc["cH"];
+        var current_pos = [,];
+        var current_x = 0;
+        var current_y = 0;
+        var signal_strength = 0;
+        var lastCompletedCommand_id = rdoc["LCCid"];
+        var ChargeStatus = 0;
 
-        var BTRY_VOLT = 0;
-        var ODO_DIST = 0;
 
         connection.onmessage = function (event) {
             var raw_data = event.data;
             console.log(raw_data);
             var data = JSON.parse(raw_data);
-            BTRY_VOLT = data.BTRY_VOLT;
-            ODO_DIST = data.ODO_DIST;
-            document.getElementById("btry_meter").value = BTRY_VOLT;
-            document.getElementById("Odometer").innerHTML = ODO_DIST;
+
+            batteryVoltage = data.bV;
+            totalTripDistance = data.tD;
+            currentHeading = data.cH;
+            current_pos = data.pos;
+            current_x = current_pos[0];
+            current_y = current_pos[1];
+            signal_strength = data.rssi;
+            lastCompletedCommand_id = data.LCCid;
+            ChargeStatus = data.cS;
+            
+            document.getElementById("SigStr").value = signal_strength;
+            document.getElementById("PosX").innerHTML = current_x;
+            document.getElementById("PosY").innerHTML = current_y;
+            document.getElementById("Hdg").innerHTML = currentHeading;
+            document.getElementById("TrpDist").innerHTML = totalTripDistance;
+            document.getElementById("btry_meter").value = batteryVoltage;
+            document.getElementById("ChgStat").innerHTML = (ChargeStatus ? "Charging" : "Discharging");
+            
+            
         }
 
         function send_data() {
@@ -124,6 +129,10 @@
             console.log(raw_data);
         }
 
+        function cIdIncrement() {
+            command_id++;
+        }
+
         function left_pressed() {
             MVM_L_status = 1;
             send_data();
@@ -191,48 +200,6 @@
             left_unpressed();
         }
 
-
-        document.onkeydown = function (e) {
-            switch (e.keyCode) {
-                case 37:
-                    document.getElementById("left_arrow").className = "button pressed";
-                    left_pressed();
-                    break;
-                case 38:
-                    document.getElementById("up_arrow").className = "button pressed";
-                    up_pressed();
-                    break;
-                case 39:
-                    document.getElementById("right_arrow").className = "button pressed";
-                    right_pressed();
-                    break;
-                case 40:
-                    document.getElementById("down_arrow").className = "button pressed";
-                    down_pressed();
-                    break;
-            }
-        };
-        document.onkeyup = function (e) {
-            switch (e.keyCode) {
-                case 37:
-                    document.getElementById("left_arrow").className = "button";
-                    left_unpressed();
-                    break;
-                case 38:
-                    document.getElementById("up_arrow").className = "button";
-                    up_unpressed();
-                    break;
-                case 39:
-                    document.getElementById("right_arrow").className = "button";
-                    right_unpressed();
-                    break;
-                case 40:
-                    document.getElementById("down_arrow").className = "button";
-                    down_unpressed();
-                    break;
-            }
-        };
-
     </script>
 </head>
 
@@ -241,15 +208,54 @@
     <h1 style="text-align:center;">ROVER COMMAND CENTER</h1>
 
     <div class="clearfix">
-        <table style="width:100%;">
+        <table style="width:1000px; border-spacing: 10px; margin-left: auto; margin-right: auto;">
             <tr>
-                <th><h2>Control Panel</h2></th>
-                <th><h2>Telemetry</h2></th>
-                <th><h2>Command Line</h2></th>
+                <th style="width: 33%;"><h2>Control Panel</h2></th>
+                <th style="width: 33%;"><h2>Telemetry</h2></th>
+                <th style="width: 33%;"><h2>Command Buffer</h2></th>
             </tr>
+            <tr><hr></tr>
             <tr>
                 <td>
-                    <div style="transform: translateY(0px); text-align:center;">
+                    <table style="border-spacing: 5px;">
+                        <tr><td colspan="6"><hr></td></tr>
+                        <tr>
+                            <td style="text-align: center;" colspan="6"><strong>Main</strong></td>
+                        </tr>
+                        
+                        <tr>
+                            <td style="text-align: center;" colspan="2"><button>Emergency <br> Stop</button></td>
+                            <td style="text-align: center;" colspan="2"><button>Telemetry Reset</button></td>
+                            <td style="text-align: center;" colspan="2"><button>Stop and Charge</button></td>
+                        </tr>
+                        <tr><td colspan="6"><hr></td></tr>
+                        <tr>
+                            <td style="text-align: center;" colspan="6"><strong >Rotation</strong></td>
+                        </tr>
+                        
+                        <tr>
+                            <td><button><i>-90&#176;</i></button></td>
+                            <td><button><i>-45&#176;</i></button></td>
+                            <td><button><i>-30&#176;</i></button></td>
+                            <td><button><i>30&#176;</i></button></td>
+                            <td><button><i>45&#176;</i></button></td>
+                            <td><button><i>90&#176;</i></button></td>
+                        </tr>
+                        <tr><td colspan="6"><hr></td></tr>
+                        <tr>
+                            <td style="text-align: center;" colspan="6"><strong>Translation</strong></td>
+                        </tr>
+                        <tr>
+                            <td><button><i>-10000 mm</i></button></td>
+                            <td><button><i>-1000 mm</i></button></td>
+                            <td><button><i>-100 mm</i></button></td>
+                            <td><button><i>100 mm</i></button></td>
+                            <td><button><i>1000 mm</i></button></td>
+                            <td><button><i>10000 mm</i></button></td>
+                        </tr>
+                        <tr><td colspan="6"><hr></td></tr>
+                    </table>
+                    <!-- <div style="transform: translateY(0px); text-align:center;">
                         <button id="up_arrow" onmousedown="up_mouseDown()" onmouseup="up_mouseUp()"
                             class="button"><span>&#8679;</span></button>
                     </div>
@@ -260,19 +266,38 @@
                             class="button"><span>&#8681;</span></button>
                         <button id="right_arrow" onmousedown="right_mouseDown()" onmouseup="right_mouseUp()"
                             class="button"><span>&#8680;</span></button>
-                    </div>
+                    </div> -->
                 </td>
                 <td>
-                <table style="width:100%;">
+                <table style="width:100%; border-spacing: 5px;">
+                    <tr>
+                        <td style="width:50%;"><label>Signal Strength</label></td>
+                        <td style="width:50%;"><meter id="SigStr" min="-80" max="-30" low="-70" high="-50" optimum="-40"  value="-XX"
+                            title="dB"></meter></td>
+                    </tr>
+                    <tr>
+                        <td style="width:50%;"><label>Position</label></td>
+                        <td style="width:50%;"><strong id="PosX">X</strong><strong>,</strong><strong id="PosY">Y</strong></td>
+                    </tr>
+                    <tr>
+                        <td style="width:50%;"><label>Heading</label></td>
+                        <td style="width:50%;"><strong id="Hdg">H</strong><strong>&#176;</strong></td>
+                    </tr>
+                    <tr>
+                        <td style="width:50%;"><label>Trip Distance</label></td>
+                        <td style="width:50%;"><strong id="TrpDist">X</strong><strong> mm</strong></td>
+                    </tr>
                     <tr>
                         <td style="width:50%;"><label>Battery Voltage</label></td>
-                        <td style="width:50%;"><meter id="btry_meter" min="4.0" max="6.0" low="4.5" optimum="5.0" high="4.8" value="5.8"
+                        <td style="width:50%;"><meter id="btry_meter" min="4.0" max="6.0" low="4.5" high="4.8" optimum="5.0"  value="X.X"
                             title="V"></meter></td>
                     </tr>
+                    
                     <tr>
-                        <td style="width:50%;"><label>Odometer</label></td>
-                        <td><strong id="Odometer">28</strong><strong>mm</strong></td>
+                        <td style="width:50%;"><label>Charge Status</label></td>
+                        <td style="width:50%;"><strong id="ChgStat">Disconnect</strong></td>
                     </tr>
+                    
                 </table>
                 </td>
             </tr>