Re-implement model diagram on motors tab.

See 79505e42ed.

js/model.js

@@ -1,84 +1,28 @@
 'use strict';
 
-function update_model(multiType) {
-
-    // Display multiType and motor diagram (if such exist)
-    var str = '';
-    switch (multiType) {
-        case 1: // TRI
-            str = 'TRI';
-            $('.modelMixDiagram').attr('src', './images/motor_order/tri.svg').addClass('modelMixTri');
-            break;
-        case 2: // QUAD +
-            str = 'Quad +';
-            $('.modelMixDiagram').attr('src', './images/motor_order/quadp.svg').addClass('modelMixQuadP');
-            break;
-        case 3: // QUAD X
-            str = 'Quad X';
-            $('.modelMixDiagram').attr('src', './images/motor_order/quadx.svg').addClass('modelMixQuadX');
-            break;
-        case 4: // BI
-            str = 'BI';
-            break;
-        case 5: // GIMBAL
-            str = 'Gimbal';
-            break;
-        case 6: // Y6
-            str = 'Y6';
-            $('.modelMixDiagram').attr('src', './images/motor_order/y6.svg').addClass('modelMixY6');
-            break;
-        case 7: // HEX 6
-            str = 'HEX 6';
-            $('.modelMixDiagram').attr('src', './images/motor_order/hex6p.svg').addClass('modelMixHex6P');
-            break;
-        case 8: // FLYING_WING
-            str = 'Flying Wing';
-            break;
-        case 9: // Y4
-            str = 'Y4';
-            $('.modelMixDiagram').attr('src', './images/motor_order/y4.svg').addClass('modelMixY4');
-            break;
-        case 10: // HEX6 X
-            str = 'HEX6 X';
-            $('.modelMixDiagram').attr('src', './images/motor_order/hex6x.svg').addClass('modelMixHex6X');
-            break;
-        case 11: // OCTO X8
-        case 12:
-        case 13:
-            str = 'OCTO X8';
-            $('.modelMixDiagram').attr('src', './images/motor_order/octox.svg').addClass('modelMixOctoX');
-            break;
-        case 14: // AIRPLANE
-            str = 'Airplane';
-            $('.modelMixDiagram').attr('src', './images/motor_order/airplane.svg').addClass('modelMixAirplane');
-            break;
-        case 15: // Heli 120
-            str = 'Heli 120';
-            break;
-        case 16: // Heli 90
-            str = 'Heli 90';
-            break;
-        case 17: // Vtail
-            str = 'Vtail';
-            $('.modelMixDiagram').attr('src', './images/motor_order/vtail.svg').addClass('modelMixVtail');
-            break;
-        case 18: // HEX6 H
-            str = 'HEX6 H';
-            $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom');
-            break;
-        case 19: // PPM to SERVO
-            str = 'PPM to SERVO';
-            $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom');
-            break;
-        case 20: // Dualcopter
-            str = 'Dualcopter';
-            $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom');
-            break;
-        case 21: // Singlecopter
-            str = 'Singlecopter';
-            $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom');
-            break;
-    }
-
-    $('span.model').text(chrome.i18n.getMessage('initialSetupModel', [str]));
-};
+// generate mixer
+var mixerList = [
+    {name: 'Tricopter', image: 'tri'},
+    {name: 'Quad +', image: 'quad_p'},
+    {name: 'Quad X', image: 'quad_x'},
+    {name: 'Bicopter', image: 'custom'},
+    {name: 'Gimbal', image: 'custom'},
+    {name: 'Y6', image: 'y6'},
+    {name: 'Hex +', image: 'hex_p'},
+    {name: 'Flying Wing', image: 'flying_wing'},
+    {name: 'Y4', image: 'y4'},
+    {name: 'Hex X', image: 'hex_x'},
+    {name: 'Octo X8', image: 'octo_x8'},
+    {name: 'Octo Flat +', image: 'custom'},
+    {name: 'Octo Flat X', image: 'octo_flat_x'},
+    {name: 'Airplane', image: 'airplane'},
+    {name: 'Heli 120', image: 'custom'},
+    {name: 'Heli 90', image: 'custom'},
+    {name: 'V-tail Quad', image: 'vtail_quad'},
+    {name: 'Hex H', image: 'custom'},
+    {name: 'PPM to SERVO', image: 'custom'},
+    {name: 'Dualcopter', image: 'custom'},
+    {name: 'Singlecopter', image: 'custom'},
+    //{name: 'A-tail Quad', image: 'atail_quad'}, // Not supported in Cleanflight yet.
+    {name: 'Custom', image: 'custom'}
+];

tabs/configuration.js

@@ -36,33 +36,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         // translate to user-selected language
         localize();
 
-        // generate mixer
-        var mixerList = [
-            {name: 'Tricopter', image: 'tri'},
-            {name: 'Quad +', image: 'quad_p'},
-            {name: 'Quad X', image: 'quad_x'},
-            {name: 'Bicopter', image: 'custom'},
-            {name: 'Gimbal', image: 'custom'},
-            {name: 'Y6', image: 'y6'},
-            {name: 'Hex +', image: 'hex_p'},
-            {name: 'Flying Wing', image: 'flying_wing'},
-            {name: 'Y4', image: 'y4'},
-            {name: 'Hex X', image: 'hex_x'},
-            {name: 'Octo X8', image: 'octo_x8'},
-            {name: 'Octo Flat +', image: 'custom'},
-            {name: 'Octo Flat X', image: 'octo_flat_x'},
-            {name: 'Airplane', image: 'airplane'},
-            {name: 'Heli 120', image: 'custom'},
-            {name: 'Heli 90', image: 'custom'},
-            {name: 'V-tail Quad', image: 'vtail_quad'},
-            {name: 'Hex H', image: 'custom'},
-            {name: 'PPM to SERVO', image: 'custom'},
-            {name: 'Dualcopter', image: 'custom'},
-            {name: 'Singlecopter', image: 'custom'},
-            {name: 'A-tail Quad', image: 'atail_quad'},
-            {name: 'Custom', image: 'custom'}
-        ];
-
         var mixer_list_e = $('select.mixerList');
         for (var i = 0; i < mixerList.length; i++) {
             mixer_list_e.append('<option value="' + (i + 1) + '">' + mixerList[i].name + '</option>');
@@ -285,7 +258,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
                         GUI.log(chrome.i18n.getMessage('deviceReady'));
                         TABS.configuration.initialize(false, $('#content').scrollTop());
                     });
-                }, 1500); // 1500 ms seems to be just the right amount of delay to prevent data request timeouts
+                },1500); // 1500 ms seems to be just the right amount of delay to prevent data request timeouts
             }
 
             MSP.send_message(MSP_codes.MSP_SET_CONFIG, MSP.crunch(MSP_codes.MSP_SET_CONFIG), false, save_misc);

tabs/motors.css

@@ -1,3 +1,22 @@
+.tab-motors .wrapper.modelAndAccel {
+    float: left;
+    width: 100%;
+}
+
+.tab-motors .wrapper.accel {
+    float: left;
+    width: calc(100% - 120px);
+}
+
+.tab-motors .mixerPreview {
+    float: left;
+}
+
+.tab-motors .mixerPreview img {
+    width: 120px;
+    height: 120px;
+}
+
 .tab-motors .plot_control {
     float: right;
 

tabs/motors.html

@@ -1,4 +1,8 @@
 <div class="tab-motors">
+    <div class="wrapper modelAndAccel">
+        <div class="mixerPreview">
+            <img src="./resources/motor_order/custom.svg" />
+        </div>
     <div class="wrapper accel">
         <div class="plot_control">
             <div class="title">Accelerometer - <a class="reset_accel_max" href="#" title="Reset overtime maximum">[Reset]</a></div>
@@ -44,6 +48,8 @@
         </svg>
         <div class="clear-both"></div>
     </div>
+    </div>
+    
     <div class="left motors">
         <div class="title">Motors</div>
         <ul class="titles">

tabs/motors.js

@@ -137,6 +137,10 @@ TABS.motors.initialize = function (callback) {
         lines.attr('d', graphHelpers.line);
     }
 
+    function update_model(val) {
+        $('.mixerPreview img').attr('src', './resources/motor_order/' + mixerList[val - 1].image + '.svg');
+    }
+    
     function process_html() {
         // translate to user-selected language
         localize();