full dynamic support for Auxiliary Configuration

css/style.css

@@ -376,8 +376,8 @@ a:hover {
             float: left;
             
             width: 182px;
-            height: 25px;
+            height: 22px;
-            line-height: 25px;
+            line-height: 22px;
             
             text-align: center;
             font-weight: bold;
@@ -385,6 +385,8 @@ a:hover {
             border: 1px solid #8b8b8b;
             border-bottom: 0;
             border-left: 0;
+            
+            background-color: #ececec;
         }
             .tab-auxiliary_configuration .heads li:first-child {
                 margin-left: 181px;
@@ -401,16 +403,52 @@ a:hover {
         border-collapse: collapse;            
     }
         .tab-auxiliary_configuration .boxes th, .tab-auxiliary_configuration .boxes td {            
-            padding: 5px;
+            line-height: 22px;
-            padding-right: 0px;
+            text-align: center;
-            padding-left: 0px;
             
             border: 1px solid #8b8b8b;
         }
+        .tab-auxiliary_configuration .boxes .name {
+            /* padding-left: 5px; */
+            text-align: center;
+        }
+        .tab-auxiliary_configuration .boxes td input {
+            position: absolute;
+            
+            margin-top: -6px;
+            margin-left: -6px;
+        }        
     .tab-auxiliary_configuration .boxes tr:nth-child(odd) {
         background-color: #ececec;
     } 
+    .tab-auxiliary_configuration .update {
+        display: block;
+        float: right;
         
+        margin-top: 10px;
+        
+        width: 120px;
+        height: 30px;
+        line-height: 30px;
+        
+        font-size: 14px;
+        color: white;
+        text-align: center;
+        
+        border: 1px solid silver;
+        
+        background-color: #6f1515;
+    }
+    .tab-auxiliary_configuration .update:hover {
+        cursor: default;
+    }
+    .tab-auxiliary_configuration .update.active {
+        background-color: #0fab16;
+    }
+    .tab-auxiliary_configuration .update.active:hover {
+        cursor: pointer;
+        background-color: #13d81d;
+    }    
     
 /* Flotr related styles */
 .flotr-legend {

js/main.js

@@ -30,7 +30,7 @@ $(document).ready(function() {
     });
     
     // temporary
-    $('#content').load("./tabs/auxiliary_configuration.html", tab_initialize_auxiliary_configuration);
+    //$('#content').load("./tabs/auxiliary_configuration.html", tab_initialize_auxiliary_configuration);
 });
 
 function disable_timers() {

js/serial_backend.js

@@ -168,6 +168,8 @@ function onOpen(openInfo) {
             send_message(MSP_codes.MSP_STATUS, MSP_codes.MSP_STATUS);
             send_message(MSP_codes.MSP_PID, MSP_codes.MSP_PID);
             send_message(MSP_codes.MSP_RC_TUNING, MSP_codes.MSP_RC_TUNING);
+            send_message(MSP_codes.MSP_BOXNAMES, MSP_codes.MSP_BOXNAMES);
+            send_message(MSP_codes.MSP_BOX, MSP_codes.MSP_BOX);
             
         }, connection_delay * 1000);
     }
@@ -433,6 +435,8 @@ function process_message(code, data) {
             console.log(data);
             break; 
         case MSP_codes.MSP_BOXNAMES:
+            AUX_CONFIG = []; // empty the array as new data is coming in
+            
             var buff = new Array();
             for (var i = 0; i < data.byteLength; i++) {
                 if (view.getUint8(i) == 0x3B) { // ; (delimeter char)
@@ -541,3 +545,11 @@ function lowByte(num) {
 function bit_check(num, bit) {
     return ((num >> bit) % 2 != 0)
 }
+
+function bit_set(num, bit) {
+    return num | 1 << bit;
+}
+
+function bit_clear(num, bit) {
+    return num & ~(1 << bit);
+}

tabs/auxiliary_configuration.html

@@ -24,4 +24,5 @@
             <th>HIGH</th>            
         </tr>
     </table>
+    <a class="update" href="#" title="">Update</a>
 </div>

tabs/auxiliary_configuration.js

@@ -1,7 +1,77 @@
 function tab_initialize_auxiliary_configuration() {
-    // Request AUX_CONFIG names
+    // generate table from the supplied AUX names and AUX data
-    send_message(MSP_codes.MSP_BOXNAMES, MSP_codes.MSP_BOXNAMES);
+    for (var i = 0; i < AUX_CONFIG.length; i++) {
+        $('.tab-auxiliary_configuration .boxes > tbody:last').append(
+            '<tr>' +
+                '<td class="name">' + AUX_CONFIG[i] + '</td>' +
+                box_check(AUX_CONFIG_values[i], 0) +
+                box_check(AUX_CONFIG_values[i], 1) +
+                box_check(AUX_CONFIG_values[i], 2) +
                 
-    // Request AUX_CONFIG values
+                box_check(AUX_CONFIG_values[i], 3) +
-    send_message(MSP_codes.MSP_BOX, MSP_codes.MSP_BOX);
+                box_check(AUX_CONFIG_values[i], 4) +
+                box_check(AUX_CONFIG_values[i], 5) +
+
+                box_check(AUX_CONFIG_values[i], 6) +
+                box_check(AUX_CONFIG_values[i], 7) +
+                box_check(AUX_CONFIG_values[i], 8) +
+
+                box_check(AUX_CONFIG_values[i], 9) +
+                box_check(AUX_CONFIG_values[i], 10) +
+                box_check(AUX_CONFIG_values[i], 11) +            
+            '</tr>'
+        );
+    }
+    
+    // UI Hooks
+    $('.tab-auxiliary_configuration .boxes input').change(function() {
+        // if any of the fields changed, unlock update button
+        $('a.update').addClass('active');
+    });
+    
+    $('.tab-auxiliary_configuration a.update').click(function() {
+        if ($(this).hasClass('active')) {
+            // catch the input changes
+            var main_needle = 0;
+            var needle = 0;
+            $('.tab-auxiliary_configuration .boxes input').each(function() {
+                if ($(this).is(':checked')) {
+                    AUX_CONFIG_values[main_needle] = bit_set(AUX_CONFIG_values[main_needle], needle);
+                } else {
+                    AUX_CONFIG_values[main_needle] = bit_clear(AUX_CONFIG_values[main_needle], needle);
+                }
+                
+                needle++;
+                
+                if (needle >= 12) { // 4 aux * 3 checkboxes = 12 bits per line
+                    main_needle++;
+                    
+                    needle = 0;
+                }
+            });
+            
+            // send over the data
+            var AUX_val_buffer_out = new Array();
+            
+            var needle = 0;
+            for (var i = 0; i < AUX_CONFIG_values.length; i++) {
+                AUX_val_buffer_out[needle++] = highByte(AUX_CONFIG_values[i]);
+                AUX_val_buffer_out[needle++] = lowByte(AUX_CONFIG_values[i]);
+            }
+            
+            send_message(MSP_codes.MSP_SET_BOX, AUX_val_buffer_out); 
+        
+            // remove the active status
+            $(this).removeClass('active');
+        }
+    });
+    
+}
+
+function box_check(num, pos) {
+    if (bit_check(num, pos)) { // 1
+        return '<td><input type="checkbox" checked="checked" /></td>';
+    } else { // 0
+        return '<td><input type="checkbox" /></td>';
+    }
 }