AUX improvements

css/style.css

@@ -172,6 +172,20 @@ a:hover {
     
     border: 1px solid #848484;
 } 
+#status-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    
+    width: 940px;
+    height: 20px;
+    line-height: 20px;
+    
+    padding: 0 10px 0 10px;
+    
+    border-top: 1px solid #7d7d79;
+    background-color: #bfbeb5;
+}
 
 /* tab specific sections */
 .tab-initial_setup .section {
@@ -353,20 +367,50 @@ a:hover {
         width: 880px; 
         height: 250px;
     }
-#status-bar {
+.tab-auxiliary_configuration {
-    position: absolute;
+
-    bottom: 0;
-    left: 0;
-    
-    width: 940px;
-    height: 20px;
-    line-height: 20px;
-    
-    padding: 0 10px 0 10px;
-    
-    border-top: 1px solid #7d7d79;
-    background-color: #bfbeb5;
 }
+    .tab-auxiliary_configuration .heads {
+    }
+        .tab-auxiliary_configuration .heads li {
+            float: left;
+            
+            width: 182px;
+            height: 25px;
+            line-height: 25px;
+            
+            text-align: center;
+            font-weight: bold;
+            
+            border: 1px solid #8b8b8b;
+            border-bottom: 0;
+            border-left: 0;
+        }
+            .tab-auxiliary_configuration .heads li:first-child {
+                margin-left: 181px;
+                border-left: 1px solid #8b8b8b;
+            }
+            .tab-auxiliary_configuration .heads li:nth-child(3) {
+                width: 183px;
+            }
+            .tab-auxiliary_configuration .heads li:nth-child(4) {
+                width: 185px;
+            }
+    .tab-auxiliary_configuration .boxes {
+        width: 100%;
+        border-collapse: collapse;            
+    }
+        .tab-auxiliary_configuration .boxes th, .tab-auxiliary_configuration .boxes td {
+            padding: 5px;
+            padding-right: 0px;
+            padding-left: 0px;
+            
+            border: 1px solid #8b8b8b;
+        }
+    .tab-auxiliary_configuration .boxes tr:nth-child(odd) {
+        background-color: #ececec;
+    }   
+    
     
 /* Flotr related styles */
 .flotr-legend {

js/main.js

@@ -23,14 +23,14 @@ $(document).ready(function() {
                 $('#content').load("./tabs/pid_tuning.html", tab_initialize_pid_tuning);
             } else if ($(this).parent().hasClass('tab_receiver')) {
                 $('#content').load("./tabs/receiver.html", tab_initialize_receiver);
-            } else if ($(this).parent().hasClass('tab_auxillary_configuration')) {
+            } else if ($(this).parent().hasClass('tab_auxiliary_configuration')) {
-                $('#content').load("./tabs/auxillary_configuration.html", tab_initialize_auxillary_configuration);
+                $('#content').load("./tabs/auxiliary_configuration.html", tab_initialize_auxiliary_configuration);
             }
         }
     });
     
     // temporary
-    //$('#content').load("./tabs/receiver.html", tab_initialize_receiver);
+    $('#content').load("./tabs/auxiliary_configuration.html", tab_initialize_auxiliary_configuration);
 });
 
 function disable_timers() {

js/serial_backend.js

@@ -75,6 +75,9 @@ var RC_tuning = {
     throttle_EXPO:   0,
 };
 
+var AUX_CONFIG = new Array();
+var AUX_CONFIG_values = new Array();
+
 var SENSOR_DATA = {
     gyroscope:     [0, 0, 0],
     accelerometer: [0, 0, 0],
@@ -419,7 +422,9 @@ function process_message(code, data) {
             }
             break; 
         case MSP_codes.MSP_BOX:
-            console.log(data);
+            for (var i = 0; i < data.byteLength; i += 2) { // + 2 because uint16_t = 2 bytes
+                AUX_CONFIG_values.push(view.getUint16(i, 1));
+            }
             break; 
         case MSP_codes.MSP_MISC:
             console.log(data);
@@ -428,7 +433,18 @@ function process_message(code, data) {
             console.log(data);
             break; 
         case MSP_codes.MSP_BOXNAMES:
-            console.log(data);
+            var buff = new Array();
+            for (var i = 0; i < data.byteLength; i++) {
+                if (view.getUint8(i) == 0x3B) { // ; (delimeter char)
+                    AUX_CONFIG.push(String.fromCharCode.apply(null, buff)); // convert bytes into ASCII and save as strings
+                    
+                    // empty buffer
+                    buff = [];
+                } else {
+                    buff.push(view.getUint8(i));
+                }
+                
+            }
             break; 
         case MSP_codes.MSP_PIDNAMES:
             console.log(data);
@@ -443,7 +459,7 @@ function process_message(code, data) {
             console.log('PID settings saved');
             break; 
         case MSP_codes.MSP_SET_BOX:
-            console.log(data);
+            console.log('AUX Configuration saved');
             break; 
         case MSP_codes.MSP_SET_RC_TUNING:
             console.log('RC Tuning saved');

main.html

@@ -14,7 +14,7 @@
         <script type="text/javascript" src="./tabs/initial_setup.js"></script>
         <script type="text/javascript" src="./tabs/pid_tuning.js"></script>
         <script type="text/javascript" src="./tabs/receiver.js"></script>
-        <script type="text/javascript" src="./tabs/auxillary_configuration.js"></script> 
+        <script type="text/javascript" src="./tabs/auxiliary_configuration.js"></script> 
     </head>
     <body>
         <div id="main-wrapper">
@@ -77,7 +77,7 @@
                     <li class="first tab_initial_setup"><a href="#">Initial Setup</a></li>
                     <li class="tab_pid_tuning"><a href="#">PID Tuning</a></li>
                     <li class="tab_receiver"><a href="#">Receiver</a></li>
-                    <li class="tab_auxillary_configuration"><a href="#">Auxillary Configuration</a></li>
+                    <li class="tab_auxiliary_configuration"><a href="#">Auxiliary Configuration</a></li>
                 </ul>
                 <div class="clear-both"></div>
             </div>            

tabs/auxiliary_configuration.html

@@ -0,0 +1,27 @@
+<div class="tab-auxiliary_configuration">
+    <div class="heads">
+        <ul>
+            <li>AUX 1</li>
+            <li>AUX 2</li>
+            <li>AUX 3</li>
+            <li>AUX 4</li>
+        </ul>
+    </div>
+    <table class="boxes">
+        <tr class="main">
+            <th style="width: 180px;">Name</th>
+            <th>LOW</th>
+            <th>MED</th>
+            <th>HIGH</th>
+            <th>LOW</th>
+            <th>MED</th>
+            <th>HIGH</th>
+            <th>LOW</th>
+            <th>MED</th>
+            <th>HIGH</th>
+            <th>LOW</th>
+            <th>MED</th>
+            <th>HIGH</th>            
+        </tr>
+    </table>
+</div>

tabs/auxiliary_configuration.js

@@ -0,0 +1,7 @@
+function tab_initialize_auxiliary_configuration() {
+    // Request AUX_CONFIG names
+    send_message(MSP_codes.MSP_BOXNAMES, MSP_codes.MSP_BOXNAMES);
+    
+    // Request AUX_CONFIG values
+    send_message(MSP_codes.MSP_BOX, MSP_codes.MSP_BOX);
+}

tabs/auxillary_configuration.html

@@ -1,3 +0,0 @@
-<div class="auxillary_configuration">
-    we are here
-</div>

tabs/auxillary_configuration.js

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