motor testing implementation (needs to be polished)

css/style.css

@@ -827,7 +827,7 @@ a:hover {
         float: left;
         
         width: 40px;
-        height: 330px;
+        height: 220px;
         
         margin-right: 10px;
         
@@ -847,6 +847,24 @@ a:hover {
         
         border: 1px dotted silver;
     }
+    .tab-motor_outputs .motor_testing .sliders {
+        margin-top: 20px;
+    }
+        .tab-motor_outputs .motor_testing .sliders input {
+            -webkit-appearance: slider-vertical;
+            
+            width: 48px;
+        }
+    .tab-motor_outputs .motor_testing .values {
+        margin-top: 5px;
+    }
+        .tab-motor_outputs .motor_testing .values li {
+            float: left;
+            
+            width: 51px;
+            
+            text-align: center;
+        }
 .tab-sensors {
 }
     .tab-sensors #gyro {

js/msp.js

@@ -240,7 +240,7 @@ function process_data(command, message_buffer, message_length_expected) {
             break;
         case MSP_codes.MSP_SERVO:
             var needle = 0;
-            for (var i = 0; i < SERVO_DATA.length; i++) {
+            for (var i = 0; i < 8; i++) {
                 SERVO_DATA[i] = data.getUint16(needle, 1);
                 
                 needle += 2;
@@ -248,7 +248,7 @@ function process_data(command, message_buffer, message_length_expected) {
             break; 
         case MSP_codes.MSP_MOTOR:
             var needle = 0;
-            for (var i = 0; i < MOTOR_DATA.length; i++) {
+            for (var i = 0; i < 8; i++) {
                 MOTOR_DATA[i] = data.getUint16(needle, 1);
                 
                 needle += 2;
@@ -436,7 +436,9 @@ function process_data(command, message_buffer, message_length_expected) {
             break;  
         case MSP_codes.MSP_DEBUG:
             for (var i = 0; i < 4; i++)
-              SENSOR_DATA.debug[i] = data.getInt16((2 * i), 1);
+                SENSOR_DATA.debug[i] = data.getInt16((2 * i), 1);
+            break;
+        case MSP_codes.MSP_SET_MOTOR:
             break;
         // Additional baseflight commands that are not compatible with MultiWii
         case MSP_codes.MSP_UID:

tabs/motor_outputs.html

@@ -48,4 +48,28 @@
         Bars on the <strong>left</strong> are representing raw PWM signal for <strong>ESCs</strong>.<br />
         Bars on the <strong>right</strong> are representing raw PWM signal for <strong>Servos</strong>.<br /> 
     </p>
+    <div class="motor_testing">
+        <div class="sliders">
+            <input type="range" min="1000" max="2000" value="1000" />
+            <input type="range" min="1000" max="2000" value="1000" />
+            <input type="range" min="1000" max="2000" value="1000" />
+            <input type="range" min="1000" max="2000" value="1000" />
+            <input type="range" min="1000" max="2000" value="1000" />
+            <input type="range" min="1000" max="2000" value="1000" />
+            <input type="range" min="1000" max="2000" value="1000" />
+            <input type="range" min="1000" max="2000" value="1000" />
+        </div>
+        <div class="values">
+            <ul>
+                <li>1000</li>
+                <li>1000</li>
+                <li>1000</li>
+                <li>1000</li>
+                <li>1000</li>
+                <li>1000</li>
+                <li>1000</li>
+                <li>1000</li>
+            </ul>
+        </div>
+    </div>
 </div>

tabs/motor_outputs.js

@@ -2,6 +2,25 @@ function tab_initialize_motor_outputs() {
     ga_tracker.sendAppView('Motor Outputs Page');
     GUI.active_tab = 'motor_outputs';
     
+    // UI hooks
+    $('div.sliders input').change(function() {
+        var index = $(this).index();
+        
+        $('div.values li').eq(index).html($(this).val());
+        
+        // send data to mcu
+        var buffer_out = [];
+        
+        for (var i = 0; i < 8; i++) {
+            var val = parseInt($('div.sliders input').eq(i).val());
+            
+            buffer_out.push(lowByte(val));
+            buffer_out.push(highByte(val));
+        }
+        
+        send_message(MSP_codes.MSP_SET_MOTOR, buffer_out);
+    });
+    
     // enable Motor data pulling
     timers.push(setInterval(motorPoll, 50));
 }
@@ -14,8 +33,8 @@ function motorPoll() {
     // 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 margin_top = 220.0 - (MOTOR_DATA[i] * 0.22);
+        var height = (MOTOR_DATA[i] * 0.22);
         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)'});
     } 
@@ -26,8 +45,8 @@ function motorPoll() {
     // 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 margin_top = 220.0 - (SERVO_DATA[i] * 0.22);
+        var height = (SERVO_DATA[i] * 0.22);
         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)'});
     }