MSP Multiple GYRO/ACC alignment support

* Make use of 1.41.0 MSP API changes introduced
  https://github.com/betaflight/betaflight/pull/7506
* Not really happy with the elements/css, but opening this up for feedback. I
  can't quite get the select inputs or the text/icons to go where I want :p

locales/en/messages.json

@@ -1039,6 +1039,24 @@
     "configurationSensorAlignmentGyro": {
         "message": "GYRO Alignment"
     },
+    "configurationSensorGyroToUse": {
+        "message": "GYRO/ACCEL"
+    },
+    "configurationSensorGyroToUseDefaultOption": {
+        "message": "First"
+    },
+    "configurationSensorGyroToUseSecond": {
+        "message": "Second"
+    },
+    "configurationSensorGyroToUseBoth": {
+        "message": "Both"
+    },
+    "configurationSensorAlignmentGyro1": {
+        "message": "First GYRO"
+    },
+    "configurationSensorAlignmentGyro2": {
+        "message": "Second GYRO"
+    },
     "configurationSensorAlignmentAcc": {
         "message": "ACCEL Alignment"
     },

src/css/tabs/configuration.css

@@ -210,6 +210,15 @@
     border-bottom: 1px solid #ddd;
     width: 100%;
     float: left;
+ }
+
+.tab-configuration .board_align_inputs,
+.tab-configuration .gyro_alignment_inputs {
+    margin-bottom: 5px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #ddd;
+    width: 33.3%;
+    float: left;
 }
 
 .tab-configuration .selectProtocol
@@ -394,10 +403,10 @@
 }
 
 .tab-configuration .board select {
-    /*float: left;*/
+    float: left;
-    width: 45%;
+    width: fit-content;
     height: 20px;
-    margin: 0 0px 2px 0;
+    margin-right: 5px;
     border: 1px solid silver;
     border-radius:3px;
 }
@@ -473,19 +482,16 @@
     margin-top: 3px;
 }
 
-.tab-configuration .sensoralignment {
+.tab-configuration .gyro_align_content {
-    width: 50%;
+    width: 100%;
-    float: left;
 }
 
 .tab-configuration .board_align_content {
-    width: 50%;
+    width: 100%;
-    float: left;
 }
 
 .tab-configuration .sensoralignment span {
-    width: 55%;
+    width: 100%;
-    float: left;
 }
 
 .tab-configuration .escprotocol {

src/js/fc.js

@@ -336,6 +336,10 @@ var FC = {
             align_gyro:                 0,
             align_acc:                  0,
             align_mag:                  0,
+            use_multi_gyro:             0,
+            gyro_to_use:                0,
+            gyro_1_align:               0,
+            gyro_2_align:               0,
         };
 
         PID_ADVANCED_CONFIG = {

src/js/msp/MSPHelper.js

@@ -536,6 +536,13 @@ MspHelper.prototype.process_data = function(dataHandler) {
                 SENSOR_ALIGNMENT.align_gyro = data.readU8();
                 SENSOR_ALIGNMENT.align_acc = data.readU8();
                 SENSOR_ALIGNMENT.align_mag = data.readU8();
+
+                if (semver.gte(CONFIG.apiVersion, '1.41.0')) {
+                    SENSOR_ALIGNMENT.use_multi_gyro = data.readU8();
+                    SENSOR_ALIGNMENT.gyro_to_use = data.readU8();
+                    SENSOR_ALIGNMENT.gyro_1_align = data.readU8();
+                    SENSOR_ALIGNMENT.gyro_2_align = data.readU8();
+                }
                 break;
             case MSPCodes.MSP_DISPLAYPORT:
                 break;
@@ -1658,6 +1665,11 @@ MspHelper.prototype.crunch = function(code) {
             buffer.push8(SENSOR_ALIGNMENT.align_gyro)
                 .push8(SENSOR_ALIGNMENT.align_acc)
                 .push8(SENSOR_ALIGNMENT.align_mag);
+            if (semver.gte(CONFIG.apiVersion, "1.41.0")) {
+                buffer.push8(SENSOR_ALIGNMENT.gyro_to_use)
+                .push8(SENSOR_ALIGNMENT.gyro_1_align)
+                .push8(SENSOR_ALIGNMENT.gyro_2_align);
+            }
             break;
         case MSPCodes.MSP_SET_ADVANCED_CONFIG:
             buffer.push8(PID_ADVANCED_CONFIG.gyro_sync_denom)

src/js/tabs/configuration.js

@@ -311,6 +311,26 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         // translate to user-selected language
         i18n.localizePage();
 
+        var gyro_align_content_e = $('.tab-configuration .gyro_align_content');
+        var legacy_gyro_alignment_e = $('.tab-configuration .legacy_gyro_alignment');
+        var legacy_accel_alignment_e = $('.tab-configuration .legacy_accel_alignment');
+
+        // Hide the new multi gyro element by default
+        gyro_align_content_e.hide();
+
+        // If we are sent USE_MULTI_GYRO flag from the target, show the new element, while hiding the old ones.
+        if (SENSOR_ALIGNMENT.use_multi_gyro == 1) {
+            gyro_align_content_e.show();
+            legacy_gyro_alignment_e.hide();
+            legacy_accel_alignment_e.hide();
+        }
+
+        // As the gyro_to_use does not have a 'DEFAULT' 0th element enum like alingments, the 0th element 'First' is excluded from here.
+        var gyros = [
+            i18n.getMessage('configurationSensorGyroToUseSecond'),
+            i18n.getMessage('configurationSensorGyroToUseBoth')
+        ];
+
         var alignments = [
             'CW 0°',
             'CW 90°',
@@ -326,17 +346,32 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         var orientation_acc_e = $('select.accalign');
         var orientation_mag_e = $('select.magalign');
 
+        var orientation_gyro_to_use_e = $('select.gyro_to_use');
+        var orientation_gyro_1_align_e = $('select.gyro_1_align');
+        var orientation_gyro_2_align_e = $('select.gyro_2_align');
+
         if (semver.lt(CONFIG.apiVersion, "1.15.0")) {
             $('.tab-configuration .sensoralignment').hide();
         } else {
+            for (var i = 0; i< gyros.length; i++) {
+                orientation_gyro_to_use_e.append('<option value="' + (i+1) + '">'+ gyros[i] + '</option>');
+            }
             for (var i = 0; i < alignments.length; i++) {
                 orientation_gyro_e.append('<option value="' + (i+1) + '">'+ alignments[i] + '</option>');
                 orientation_acc_e.append('<option value="' + (i+1) + '">'+ alignments[i] + '</option>');
                 orientation_mag_e.append('<option value="' + (i+1) + '">'+ alignments[i] + '</option>');
+
+                orientation_gyro_1_align_e.append('<option value="' + (i+1) + '">'+ alignments[i] + '</option>');
+                orientation_gyro_2_align_e.append('<option value="' + (i+1) + '">'+ alignments[i] + '</option>');
             }
             orientation_gyro_e.val(SENSOR_ALIGNMENT.align_gyro);
             orientation_acc_e.val(SENSOR_ALIGNMENT.align_acc);
             orientation_mag_e.val(SENSOR_ALIGNMENT.align_mag);
+
+            orientation_gyro_to_use_e.val(SENSOR_ALIGNMENT.gyro_to_use);
+
+            orientation_gyro_1_align_e.val(SENSOR_ALIGNMENT.gyro_1_align);
+            orientation_gyro_2_align_e.val(SENSOR_ALIGNMENT.gyro_2_align);
         }
 
         // ESC protocols
@@ -1023,6 +1058,11 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             SENSOR_ALIGNMENT.align_gyro = parseInt(orientation_gyro_e.val());
             SENSOR_ALIGNMENT.align_acc = parseInt(orientation_acc_e.val());
             SENSOR_ALIGNMENT.align_mag = parseInt(orientation_mag_e.val());
+            if (semver.gte(CONFIG.apiVersion, "1.41.0")) {
+                SENSOR_ALIGNMENT.gyro_to_use = parseInt(orientation_gyro_to_use_e.val());
+                SENSOR_ALIGNMENT.gyro_1_align = parseInt(orientation_gyro_1_align_e.val());
+                SENSOR_ALIGNMENT.gyro_2_align = parseInt(orientation_gyro_2_align_e.val());
+            }
 
             PID_ADVANCED_CONFIG.fast_pwm_protocol = parseInt(esc_protocol_e.val()-1);
             PID_ADVANCED_CONFIG.use_unsyncedPwm = $('input[id="unsyncedPWMSwitch"]').is(':checked') ? 1 : 0;

src/tabs/configuration.html

@@ -247,27 +247,61 @@
                             </div>
                             <div class="spacer_box">
                                 <div class="board_align_content">
-                                    <div class="number">
+                                    <div class="board_align_inputs">
-                                        <label> <input type="number" name="board_align_roll" step="1" min="-180" max="360" /> <span
-                                            i18n="configurationBoardAlignmentRoll"></span>
-                                        </label>
                                         <div class="alignicon roll"></div>
+                                        <label>
+                                            <input type="number" name="board_align_roll" step="1" min="-180" max="360" />
+                                            <span i18n="configurationBoardAlignmentRoll"></span>
+                                        </label>
                                      </div>
-                                    <div class="number">
+
-                                        <label> <input type="number" name="board_align_pitch" step="1" min="-180" max="360" />
+                                     <div class="board_align_inputs">
+                                         <div class="alignicon pitch"></div>
+                                         <label>
+                                            <input type="number" name="board_align_pitch" step="1" min="-180" max="360" />
                                             <span i18n="configurationBoardAlignmentPitch"></span>
                                         </label>
-                                        <div class="alignicon pitch"></div>
                                      </div>
-                                    <div class="number">
+
-                                        <label> <input type="number" name="board_align_yaw" step="1" min="-180" max="360" /> <span
+                                     <div class="board_align_inputs">
-                                            i18n="configurationBoardAlignmentYaw"></span>
-                                        </label>
                                          <div class="alignicon yaw"></div>
+                                         <label>
+                                            <input type="number" name="board_align_yaw" step="1" min="-180" max="360" />
+                                            <span i18n="configurationBoardAlignmentYaw"></span>
+                                        </label>
                                      </div>
                                 </div>
-                                <div class="sensoralignment">
+                                <div class="gyro_align_content">
-                                    <div class="select">
+                                    <div class="gyro_alignment_inputs">
+                                        <label>
+                                            <span i18n="configurationSensorGyroToUse"></span>
+                                            <select class="gyro_to_use">
+                                                <option i18n="configurationSensorGyroToUseDefaultOption" value="0"></option>
+                                                <!-- list generated here -->
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="gyro_alignment_inputs">
+                                        <label>
+                                            <span i18n="configurationSensorAlignmentGyro1"></span>
+                                            <select class="gyro_1_align">
+                                                <option i18n="configurationSensorAlignmentDefaultOption" value="0"></option>
+                                                <!-- list generated here -->
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="gyro_alignment_inputs">
+                                        <label>
+                                            <span i18n="configurationSensorAlignmentGyro2"></span>
+                                            <select class="gyro_2_align">
+                                                <option i18n="configurationSensorAlignmentDefaultOption" value="0"></option>
+                                                <!-- list generated here -->
+                                            </select>
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="sensor_align_content">
+                                    <div class="legacy_gyro_alignment select">
                                         <label>
                                             <span i18n="configurationSensorAlignmentGyro"></span>
                                             <select class="gyroalign">
@@ -276,7 +310,7 @@
                                             </select>
                                         </label>
                                     </div>
-                                    <div class="select">
+                                    <div class="legacy_accel_alignment select">
                                         <label>
                                             <span i18n="configurationSensorAlignmentAcc"></span>
                                             <select class="accalign">