GPS info block for initial tab

css/style.css

@@ -188,11 +188,13 @@ a:hover {
 }
 
 /* tab specific sections */
-.tab-initial_setup .section {
+.tab-initial_setup {
+}
+    .tab-initial_setup .section {
         clear: both;
         padding-bottom: 10px;
-}
+    }
-.tab-initial_setup .section a {
+        .tab-initial_setup .section a {
             display: block;
             
             float: left;
@@ -206,19 +208,19 @@ a:hover {
             
             border: 1px solid #c0c0c0;
             background-color: #5569d0;
-}
+        }
-.tab-initial_setup .section a:hover {
+        .tab-initial_setup .section a:hover {
             background-color: #424d84;
-}
+        }
-.tab-initial_setup .section p {
+        .tab-initial_setup .section p {
             margin-left: 180px;
             
             padding: 5px;
             
             border: 1px dotted silver;
-}
+        }
 #interactive_block {
-    float: right;
+    float: left;
     
     margin-top: 10px;
     
@@ -323,6 +325,31 @@ a:hover {
                 -webkit-transform: rotateX(90deg) translateZ(100px);
                 background-color: silver;
             }
+    .tab-initial_setup .GPS_info {
+        float: left;
+        display: block;
+        
+        margin-top: 10px;
+        margin-left: 20px;
+        
+        width: 145px;
+        
+        border: 1px solid silver;
+    }
+        .tab-initial_setup .GPS_info .head {
+            display: block;
+            
+            text-align: center;
+            line-height: 20px;
+            font-weight: bold;
+            
+            border-bottom: 1px solid silver;
+            background-color: #ececec;
+        }
+        .tab-initial_setup .GPS_info table {
+            padding: 5px;
+            line-height: 18px;
+        }
 .tab-pid_tuning table {
     width: 100%;
     border-collapse: collapse;    

js/main.js

@@ -35,6 +35,7 @@ $(document).ready(function() {
     
     // temporary
     //$('#content').load("./tabs/sensors.html", tab_initialize_sensors);
+    //$('#content').load("./tabs/initial_setup.html", tab_initialize_initial_setup);
 });
 
 function disable_timers() {

js/serial_backend.js

@@ -91,6 +91,18 @@ var SENSOR_DATA = {
 var MOTOR_DATA = new Array(8);
 var SERVO_DATA = new Array(8);
 
+var GPS_DATA = {
+    fix:             0,
+    numSat:          0,
+    lat:             0,
+    lon:             0,
+    alt:             0,
+    speed:           0,
+    distanceToHome:  0,
+    ditectionToHome: 0,
+    update:          0
+};
+
 $(document).ready(function() { 
     port_picker = $('div#port-picker .port select');
     baud_picker = $('div#port-picker #baud');
@@ -433,10 +445,17 @@ function process_message(code, data) {
             RC.AUX4 = view.getUint16(14, 1);
             break; 
         case MSP_codes.MSP_RAW_GPS:
-            console.log(data);
+            GPS_DATA.fix = view.getUint8(0);
+            GPS_DATA.numSat = view.getUint8(1);
+            GPS_DATA.lat = view.getUint32(2, 1);
+            GPS_DATA.lon = view.getUint32(6, 1);
+            GPS_DATA.alt = view.getUint16(10, 1);
+            GPS_DATA.speed = view.getUint16(12, 1);
             break; 
         case MSP_codes.MSP_COMP_GPS:
-            console.log(data);
+            GPS_DATA.distanceToHome = view.getUint16(0, 1);
+            GPS_DATA.directionToHome = view.getUint16(2, 1);
+            GPS_DATA.update = view.getUint8(4);
             break; 
         case MSP_codes.MSP_ATTITUDE:
             SENSOR_DATA.kinematicsX = view.getInt16(0, 1) / 10.0;

tabs/initial_setup.html

@@ -35,4 +35,33 @@
             </div>
         </div>
     </div>
+    <div class="GPS_info">
+        <span class="head">GPS</span>
+        <table>
+            <tr>
+                <td style="width: 90px;">Altitude:</td>
+                <td class="alt">0</td>
+            </tr>
+            <tr>
+                <td>Latitude:</td>
+                <td class="lat">0</td>
+            </tr>
+            <tr>
+                <td>Longitude:</td>
+                <td class="lon">0</td>
+            </tr>
+            <tr>
+                <td>Speed:</td>
+                <td class="speed">0</td>
+            </tr>
+            <tr>
+                <td>Sats:</td>
+                <td class="sats">0</td>
+            </tr>
+            <tr>
+                <td>Dist to Home:</td>
+                <td class="distToHome">0</td>
+            </tr>            
+        </table>
+    </div>
 </div>

tabs/initial_setup.js

@@ -20,11 +20,11 @@ function tab_initialize_initial_setup() {
         console.log("YAW reset to 0");
     });  
     
-    // enable kinematics data pulling
+    // enable data pulling
-    timers.push(setInterval(kinematics_poll, 50));    
+    timers.push(setInterval(data_poll, 50));    
 }
 
-function kinematics_poll() {
+function data_poll() {
     // Update cube
     var cube = $('div#cube');
     
@@ -32,6 +32,16 @@ function kinematics_poll() {
     $('#cubePITCH', cube).css('-webkit-transform', 'rotateX(' + SENSOR_DATA.kinematicsY + 'deg)');
     $('#cubeROLL', cube).css('-webkit-transform', 'rotateZ(' + SENSOR_DATA.kinematicsX + 'deg)'); 
     
+    // Update GPS data
+    $('td.alt').html(GPS_DATA.alt);
+    $('td.lat').html(GPS_DATA.lat);
+    $('td.long').html(GPS_DATA.lon);
+    $('td.speed').html(GPS_DATA.speed);
+    $('td.sats').html(GPS_DATA.numSat);
+    $('td.distToHome').html(GPS_DATA.distanceToHome);
+
     // Request new data
     send_message(MSP_codes.MSP_ATTITUDE, MSP_codes.MSP_ATTITUDE); 
+    send_message(MSP_codes.MSP_RAW_GPS, MSP_codes.MSP_RAW_GPS);
+    send_message(MSP_codes.MSP_COMP_GPS, MSP_codes.MSP_COMP_GPS);
 }

tabs/sensors.js

@@ -2,4 +2,9 @@ function tab_initialize_sensors() {
 }
 
 function sensor_array_pull() {
+    // Update UI
+    
+    // Request new data
+    send_message(MSP_codes.MSP_RAW_IMU, MSP_codes.MSP_RAW_IMU);
+    send_message(MSP_codes.MSP_ALTITUDE, MSP_codes.MSP_ALTITUDE);
 }