Motor/Servo Output tab & port usage indicator

css/style.css

@@ -451,7 +451,49 @@ a:hover {
     .tab-auxiliary_configuration .update.active:hover {
         cursor: pointer;
         background-color: #13d81d;
-    }    
+    } 
+.tab-motor_outputs {
+}    
+    .tab-motor_outputs .right.servos {
+        margin-right: -10px;
+    }
+    .tab-motor_outputs .titles {
+        height: 20px;
+    }
+        .tab-motor_outputs .titles li {
+            float: left;
+            width: 42px;
+            margin-right: 10px;
+            
+            text-align: center;
+        }
+        .tab-motor_outputs .titles .active {
+            color: green;
+        }
+    .tab-motor_outputs .m-block {
+        float: left;
+        
+        width: 40px;
+        height: 330px;
+        
+        margin-right: 10px;
+        
+        border: 1px solid silver;
+        background-color: #e9e9e9;
+    }
+    .tab-motor_outputs .indicator {
+        position: absolute;
+        margin-top: 330px;
+        
+        width: 40px;
+        height: 0px;
+    }
+    .tab-motor_outputs p {
+        margin-top: 20px;
+        padding: 5px;
+        
+        border: 1px dotted silver;
+    }
     
 /* Flotr related styles */
 .flotr-legend {

js/main.js

@@ -25,12 +25,14 @@ $(document).ready(function() {
                 $('#content').load("./tabs/receiver.html", tab_initialize_receiver);
             } else if ($(this).parent().hasClass('tab_auxiliary_configuration')) {
                 $('#content').load("./tabs/auxiliary_configuration.html", tab_initialize_auxiliary_configuration);
+            } else if ($(this).parent().hasClass('tab_motor_outputs')) {
+                $('#content').load("./tabs/motor_outputs.html", tab_initialize_motor_outputs);
             }
         }
     });
     
     // temporary
-    //$('#content').load("./tabs/auxiliary_configuration.html", tab_initialize_auxiliary_configuration);
+    //$('#content').load("./tabs/motor_outputs.html", tab_initialize_motor_outputs);
 });
 
 function disable_timers() {

js/serial_backend.js

@@ -85,6 +85,9 @@ var SENSOR_DATA = {
     altitude:      0
 };
 
+var MOTOR_DATA = new Array(8);
+var SERVO_DATA = new Array(8);
+
 $(document).ready(function() { 
     port_picker = $('div#port-picker .port select');
     baud_picker = $('div#port-picker #baud');
@@ -134,6 +137,11 @@ $(document).ready(function() {
                 
                 clearTimeout(connection_delay);
                 clearInterval(serial_poll);
+                clearInterval(port_usage_poll);
+                
+                // Change port utilization to 0
+                $('span.port-usage').html('0%');
+                
                 
                 $(this).text('Connect');
                 $(this).removeClass('active');            
@@ -162,6 +170,7 @@ function onOpen(openInfo) {
         connection_delay = setTimeout(function() {
             // start polling
             serial_poll = setInterval(readPoll, 10);
+            port_usage_poll = setInterval(port_usage, 1000);
             
             // request configuration data
             send_message(MSP_codes.MSP_IDENT, MSP_codes.MSP_IDENT);
@@ -203,6 +212,7 @@ var message_length_received = 0;
 var message_buffer;
 var message_buffer_uint8_view;
 var message_checksum = 0;
+var char_counter = 0;
 
 function onCharRead(readInfo) {
     if (readInfo && readInfo.bytesRead > 0 && readInfo.data) {
@@ -272,6 +282,8 @@ function onCharRead(readInfo) {
                     message_state = 0;                   
                     break;
             }
+            
+            char_counter++;
         }
     }
 }
@@ -326,6 +338,46 @@ function process_message(code, data) {
             CONFIG.version = parseFloat((view.getUint8(0) / 100).toFixed(2));
             CONFIG.multiType = view.getUint8(1);
             
+            $('.software-version').html(CONFIG.version);
+            
+            // TODO: utilize this info
+            switch (CONFIG.multiType) {
+                case 1: // TRI
+                    break;
+                case 2: // QUAD+
+                    break;
+                case 3: // QUAD X
+                    break;
+                case 4: // BI
+                    break;
+                case 5: // GIMBAL
+                    break;
+                case 6: // Y6
+                    break;
+                case 7: // HEX 6
+                    break;
+                case 8: // FLYING_WING
+                    break;
+                case 9: // Y4
+                    break;
+                case 10: // HEX6 X
+                    break;
+                case 11: // OCTO X8
+                case 12:
+                case 13:
+                    break;
+                case 14: // AIRPLANE
+                    break;
+                case 15: // Heli 120 
+                    break;
+                case 16: // Heli 90 
+                    break;
+                case 17: // Vtail 
+                    break;
+                case 18: // HEX6 H
+                    break;
+            }
+            
             // IDENT received, show the tab content
             $('#tabs li a:first').click();
             break;
@@ -351,10 +403,20 @@ function process_message(code, data) {
             SENSOR_DATA.magnetometer[2] = view.getInt16(16, 1) / 3;
             break;
         case MSP_codes.MSP_SERVO:
-            console.log(data);
+            var needle = 0;
+            for (var i = 0; i < SERVO_DATA.length; i++) {
+                SERVO_DATA[i] = view.getUint16(needle, 1);
+                
+                needle += 2;
+            } 
             break; 
         case MSP_codes.MSP_MOTOR:
-            console.log(data);        
+            var needle = 0;
+            for (var i = 0; i < MOTOR_DATA.length; i++) {
+                MOTOR_DATA[i] = view.getUint16(needle, 1);
+                
+                needle += 2;
+            }            
             break; 
         case MSP_codes.MSP_RC:
             RC.roll = view.getUint16(0, 1);
@@ -498,6 +560,14 @@ function process_message(code, data) {
     }
 }
 
+function port_usage() {
+    var port_usage = (char_counter * 10 / selected_baud) * 100;    
+    $('span.port-usage').html(parseInt(port_usage) + '%');
+
+    // reset counter
+    char_counter = 0;
+}
+
 function sensor_status(sensors_detected) {
     var e_sensor_status = $('div#sensor-status');
     

main.html

@@ -14,7 +14,8 @@
         <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/auxiliary_configuration.js"></script> 
+        <script type="text/javascript" src="./tabs/auxiliary_configuration.js"></script>
+        <script type="text/javascript" src="./tabs/motor_outputs.js"></script>
     </head>
     <body>
         <div id="main-wrapper">
@@ -78,13 +79,15 @@
                     <li class="tab_pid_tuning"><a href="#">PID Tuning</a></li>
                     <li class="tab_receiver"><a href="#">Receiver</a></li>
                     <li class="tab_auxiliary_configuration"><a href="#">Auxiliary Configuration</a></li>
+                    <li class="tab_motor_outputs"><a href="#">Motor/Servo Outputs</a></li>
                 </ul>
                 <div class="clear-both"></div>
             </div>            
             <div id="content">
             </div>
             <div id="status-bar">
-                <!-- port usage, flight software version info and other stuff goes here -->
+                Port utilization: <span class="port-usage">0%</span> | 
+                MCU Software Version: <span class="software-version">0.00</span>
             </div>
         </div>
     </body>

tabs/auxiliary_configuration.js

@@ -66,7 +66,10 @@ function tab_initialize_auxiliary_configuration() {
             }
             
             send_message(MSP_codes.MSP_SET_BOX, AUX_val_buffer_out); 
-        
+
+            // Save changes to EEPROM
+            send_message(MSP_codes.MSP_EEPROM_WRITE, MSP_codes.MSP_EEPROM_WRITE);
+            
             // remove the active status
             $(this).removeClass('active');
         }

tabs/motor_outputs.html

@@ -0,0 +1,50 @@
+<div class="tab-motor_outputs">
+    <div class="left motors">
+        <ul class="titles">
+            <li title="Motor - 1">M - 1</li>
+            <li title="Motor - 2">M - 2</li>
+            <li title="Motor - 3">M - 3</li>
+            <li title="Motor - 4">M - 4</li>
+            <li title="Motor - 5">M - 5</li>
+            <li title="Motor - 6">M - 6</li>
+            <li title="Motor - 7">M - 7</li>
+            <li title="Motor - 8">M - 8</li>
+        </ul>
+        <div class="bar-wrapper">
+            <div class="m-block motor-0"><div class="indicator"></div></div>
+            <div class="m-block motor-1"><div class="indicator"></div></div>
+            <div class="m-block motor-2"><div class="indicator"></div></div>
+            <div class="m-block motor-3"><div class="indicator"></div></div>
+            <div class="m-block motor-4"><div class="indicator"></div></div>
+            <div class="m-block motor-5"><div class="indicator"></div></div>
+            <div class="m-block motor-6"><div class="indicator"></div></div>
+            <div class="m-block motor-7"><div class="indicator"></div></div>
+        </div>
+    </div>
+    <div class="right servos">
+        <ul class="titles">
+            <li title="Servo - 1">S - 1</li>
+            <li title="Servo - 2">S - 2</li>
+            <li title="Servo - 3">S - 3</li>
+            <li title="Servo - 4">S - 4</li>
+            <li title="Servo - 5">S - 5</li>
+            <li title="Servo - 6">S - 6</li>
+            <li title="Servo - 7">S - 7</li>
+            <li title="Servo - 8">S - 8</li>
+        </ul>
+        <div class="bar-wrapper">
+            <div class="m-block servo-0"><div class="indicator"></div></div>
+            <div class="m-block servo-1"><div class="indicator"></div></div>
+            <div class="m-block servo-2"><div class="indicator"></div></div>
+            <div class="m-block servo-3"><div class="indicator"></div></div>
+            <div class="m-block servo-4"><div class="indicator"></div></div>
+            <div class="m-block servo-5"><div class="indicator"></div></div>
+            <div class="m-block servo-6"><div class="indicator"></div></div>
+            <div class="m-block servo-7"><div class="indicator"></div></div>
+        </div>
+    </div>
+    <div class="clear-both"></div>
+    <p>
+        Some info goes here
+    </p>
+</div>

tabs/motor_outputs.js

@@ -0,0 +1,31 @@
+function tab_initialize_motor_outputs() {
+    // enable Motor data pulling
+    motor_poll = setInterval(motorPoll, 50);
+    timers.push(motor_poll);
+}
+
+function motorPoll() {
+    // Request New Motor data
+    send_message(MSP_codes.MSP_MOTOR, MSP_codes.MSP_MOTOR);
+    
+    // Update UI
+    for (var i = 0; i < MOTOR_DATA.length; i++) {
+        MOTOR_DATA[i] -= 1000; 
+        var margin_top = 330.0 - (MOTOR_DATA[i] * 0.33);
+        var height = (MOTOR_DATA[i] * 0.33);
+        var color = parseInt(MOTOR_DATA[i] * 0.256);
+        $('.motor-' + i + ' .indicator').css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgb(' + color + ',0,0)'});
+    } 
+
+    // Request New Servo data
+    send_message(MSP_codes.MSP_SERVO, MSP_codes.MSP_SERVO);
+    
+    // Update UI
+    for (var i = 0; i < SERVO_DATA.length; i++) {
+        SERVO_DATA[i] -= 1000; 
+        var margin_top = 330.0 - (SERVO_DATA[i] * 0.33);
+        var height = (SERVO_DATA[i] * 0.33);
+        var color = parseInt(SERVO_DATA[i] * 0.256);
+        $('.servo-' + i + ' .indicator').css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgb(' + color + ',0,0)'});
+    } 
+}

tabs/pid_tuning.js

@@ -146,6 +146,9 @@ function tab_initialize_pid_tuning() {
             // Send over the RC_tuning changes
             send_message(MSP_codes.MSP_SET_RC_TUNING, RC_tuning_buffer_out);
             
+            // Save changes to EEPROM
+            send_message(MSP_codes.MSP_EEPROM_WRITE, MSP_codes.MSP_EEPROM_WRITE);
+            
             // remove the active status
             $(this).removeClass('active');
         }

tabs/receiver.js

@@ -75,7 +75,10 @@ function tab_initialize_receiver() {
             
             // Send over the RC_tuning changes
             send_message(MSP_codes.MSP_SET_RC_TUNING, RC_tuning_buffer_out);        
-        
+
+            // Save changes to EEPROM
+            send_message(MSP_codes.MSP_EEPROM_WRITE, MSP_codes.MSP_EEPROM_WRITE);
+            
             // remove the active status
             $(this).removeClass('active');        
         }