initial support for tab UI setup

css/style.css

@@ -108,7 +108,7 @@ a:hover {
         float: left;
         
         margin-left: 10px;
-        padding: 0 6px 0 6px;
+        padding: 0 10px 0 10px;
         
         height: 18px;
         line-height: 18px;
@@ -122,3 +122,52 @@ a:hover {
     #sensor-status .on {
         background-color: #0d8b13;
     }  
+#tabs {
+    position: absolute;
+    margin-top: 1px;
+}
+    #tabs li {
+        float: left;
+        margin-right: 5px;
+        
+        border: 1px solid #848484;
+    }
+        #tabs li.first {
+        }
+        #tabs li.last {
+        }
+        #tabs li.active {
+            border-bottom: 1px solid white;
+        }
+            #tabs li.active a {
+                background-color: white;            
+            }
+            #tabs li.active a:hover {
+                background-color: white;
+                cursor: default;
+            }
+        #tabs li a {
+            display: block;
+            
+            height: 15px;
+            
+            padding: 5px;
+            padding-left: 12px;
+            padding-right: 12px;
+            
+            background-color: #d0d0d0;
+        }
+        #tabs li a:hover {
+            text-decoration: none;
+            background-color: #acacac;
+        } 
+#content {
+    margin-top: 27px;
+    
+    padding: 10px;
+    
+    background-color: white;
+    height: 400px;
+    
+    border: 1px solid #848484;
+}         

js/main.js

@@ -0,0 +1,22 @@
+$(document).ready(function() { 
+    var tabs = $('#tabs > ul');
+    $('a', tabs).click(function() {
+        if ($(this).parent().hasClass('active') == false) { // only initialize when the tab isn't already active
+            if (connectionId < 1) { // if there is no active connection, return
+                return;
+            }
+            
+            // Disable previous active button
+            $('li', tabs).removeClass('active');
+            
+            // Highlight selected button
+            $(this).parent().addClass('active');
+            
+            if ($(this).parent().hasClass('tab_initial_setup')) {
+                $('#content').load("./tabs/initial_setup.html", tab_initialize_initial_setup);
+            } else if ($(this).parent().hasClass('tab_pid_tuning')) {
+                $('#content').load("./tabs/pid_tuning.html", tab_initialize_pid_tuning);
+            }
+        }
+    });
+});    

js/serial_backend.js

@@ -49,7 +49,8 @@ var CONFIG = {
     mode:          0,
     gyroscope:     [0, 0, 0],
     accelerometer: [0, 0, 0],
-    magnetometer:  [0, 0, 0]
+    magnetometer:  [0, 0, 0],
+    altitude:      0
 };
 
 $(document).ready(function() { 
@@ -140,7 +141,11 @@ function onOpen(openInfo) {
 function onClosed(result) {
     if (result) { // All went as expected
         connectionId = -1; // reset connection id
+        
         sensor_status(sensors_detected = 0); // reset active sensor indicators
+        $('#content').empty(); // empty content
+        $('#tabs > ul li').removeClass('active'); // de-select any selected tabs
+        
         console.log('Connection closed successfully.');
     } else { // Something went wrong
         if (connectionId > 0) {
@@ -281,6 +286,8 @@ function process_message(code, data) {
         case MSP_codes.MSP_IDENT:
             CONFIG.version = view.getUint8(0);
             CONFIG.multiType = view.getUint8(1);
+            
+            $('#tabs li a:first').click();
             break;
         case MSP_codes.MSP_STATUS:
             CONFIG.cycleTime = view.getUint16(0, 1);
@@ -322,7 +329,7 @@ function process_message(code, data) {
             console.log(data);
             break; 
         case MSP_codes.MSP_ALTITUDE:
-            console.log(data);
+            CONFIG.altitude = view.getUint32(0, 1);
             break; 
         case MSP_codes.MSP_BAT:
             console.log(data);

main.html

@@ -8,6 +8,10 @@
         <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
         <script type="text/javascript" src="./js/serial_backend.js"></script> 
         <script type="text/javascript" src="./js/main.js"></script>
+
+        <!-- Various tabs are divided into separate files (for clarity) --> 
+        <script type="text/javascript" src="./tabs/initial_setup.js"></script>
+        <script type="text/javascript" src="./tabs/pid_tuning.js"></script>        
     </head>
     <body>
         <div id="main-wrapper">
@@ -56,12 +60,25 @@
             </div>
             <div id="sensor-status">
                 <ul>
-                    <li class="gyro">Gyroscope</li>
+                    <li class="gyro">Gyro</li>
-                    <li class="accel">Accelerometer</li>
+                    <li class="accel">Accel</li>
-                    <li class="mag">Magnetometer</li>
+                    <li class="mag">Mag</li>
-                    <li class="baro">Barometer</li>
+                    <li class="baro">Baro</li>
+                    <li class="gps">GPS</li>
+                    <li class="sonar">Sonar</li>
+                    <li class="optic">Optic</li>
                 </ul>
             </div>
+            <div class="clear-both"></div>
+            <div id="tabs">
+                <ul>
+                    <li class="first tab_initial_setup"><a href="#">Initial Setup</a></li>
+                    <li class="tab_pid_tuning"><a href="#">PID Tuning</a></li>
+                </ul>
+                <div class="clear-both"></div>
+            </div>            
+            <div id="content">
+            </div>
         </div>
     </body>
 </html>                     

tabs/initial_setup.js

@@ -0,0 +1,2 @@
+function tab_initialize_initial_setup() {
+}

tabs/pid_tuning.js

@@ -0,0 +1,2 @@
+function tab_initialize_pid_tuning() {
+}