working mixer list with mixer preview

_locales/en/messages.json

@@ -300,6 +300,9 @@
     "configurationFeatures": {
         "message": "Features"
     },
+    "configurationThrottleAndRC": {
+        "message": "Throttle & RC"
+    },
     "configurationEepromSaved": {
         "message": "EEPROM <span style=\"color: green\">saved</span>"
     },

tabs/configuration.css

@@ -3,16 +3,33 @@
 }
 .tab-configuration .groupTitle {
     padding: 0 0 5px 0;
-    margin: 0 0 10px 0;
+    margin: 10px 0 10px 0;
 
     font-size: 16px;
 
     border-bottom: 1px solid #dddddd;
 }
-.tab-configuration .hugeWhitespace {
+.tab-configuration .groupTitle:nth-of-type(1){
-    height: 100px;
+    margin-top: 0;
 }
-.tab-configuration dl.features {
+.tab-configuration .mixerList {
+    float: left;
+
+    height: 100px;
+
+    border: 1px solid silver;
+}
+.tab-configuration .mixerPreview {
+    float: left;
+
+    width: 100px;
+    height: 100px;
+
+    margin: 0 0 0 15px;
+}
+.tab-configuration .mixerPreview img {
+    width: 100%;
+    height: 100%;
 }
 .tab-configuration dl.features dt {
     float: left;
@@ -30,7 +47,6 @@
 
     line-height: 18px;
 }
-
 .tab-configuration .buttons {
     position: fixed;
 

tabs/configuration.html

@@ -1,10 +1,17 @@
 <div class="tab-configuration">
     <div class="groupTitle" i18n="configurationMixer"></div>
-    <div class="hugeWhitespace"></div>
+    <select class="mixerList" size="6">
+        <!-- mixer list generated here -->
+    </select>
+    <div class="mixerPreview">
+        <img src="./images/motor_order/custom.svg" />
+    </div>
+    <div class="clear-both"></div>
     <div class="groupTitle" i18n="configurationFeatures"></div>
     <dl class="features">
         <!-- feature list generated here -->
     </dl>
+    <div class="groupTitle" i18n="configurationThrottleAndRC"></div>
     <div class="buttons">
         <a class="save" href="#" i18n="configurationButtonSave"></a>
     </div>

tabs/configuration.js

@@ -50,6 +50,49 @@ TABS.configuration.initialize = function (callback) {
         // index references
         var RCMAPlLetters = ['A', 'E', 'R', 'T', '1', '2', '3', '4'];
 
+        // generate mixer
+        var mixerList = [
+            {name: 'Tricopter', image: 'tri'},
+            {name: 'Quad +', image: 'quadp'},
+            {name: 'Quad X', image: 'quadx'},
+            {name: 'Bicopter', image: 'custom'},
+            {name: 'Gimbal', image: 'custom'},
+            {name: 'Y 6', image: 'y6'},
+            {name: 'HEX 6', image: 'hex6p'},
+            {name: 'Flying Wing', image: 'custom'},
+            {name: 'Y 4', image: 'y4'},
+            {name: 'HEX 6 X', image: 'hex6x'},
+            {name: 'OCTO X8', image: 'octox'},
+            {name: 'OCTO Flat +', image: 'octox'},
+            {name: 'OCTO Flat X', image: 'octox'},
+            {name: 'Airplane', image: 'airplane'},
+            {name: 'Heli 120', image: 'custom'},
+            {name: 'Heli 90', image: 'custom'},
+            {name: 'Vtail 4', image: 'vtail'},
+            {name: 'Hex 6 H', image: 'custom'},
+            {name: 'PPM to SERVO', image: 'custom'},
+            {name: 'Dualcopter', image: 'custom'},
+            {name: 'Singlecopter', image: 'custom'},
+            {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>');
+        }
+
+        mixer_list_e.change(function () {
+            var val = parseInt($(this).val());
+
+            BF_CONFIG.mixerConfiguration = val;
+
+            $('.mixerPreview img').attr('src', './images/motor_order/' + mixerList[val - 1].image + '.svg');
+        });
+
+        // select current configuration
+        mixer_list_e.val(BF_CONFIG.mixerConfiguration).change();
+
+        // generate features
         var featureNames = [
             'PPM - Disable PWM input and enable PPM input',
             'VBAT',
@@ -68,7 +111,6 @@ TABS.configuration.initialize = function (callback) {
             '3D'
         ];
 
-        // generate features
         var features_e = $('.features');
         for (var i = 0; i < featureNames.length; i++) {
             var element = $('<dt><input id="feature-' + i + '" type="checkbox" /></dt><dd><label for="feature-' + i + '">' + featureNames[i] + '</label></dd>');