removed mag and board alignment from configuration tab

exposed board alignment on alignment tag

_locales/en/messages.json

@@ -900,18 +900,6 @@
     "configurationSerialRXHelp": {
         "message": "<strong>Note:</strong> Remember to configure a Serial Port (via Ports tab) for the serial receiver"
     },
-    "configurationBoardAlignment": {
-        "message": "Board and Sensor Alignment"
-    },
-    "configurationBoardAlignmentRoll": {
-        "message": "Roll Degrees"
-    },
-    "configurationBoardAlignmentPitch": {
-        "message": "Pitch Degrees"
-    },
-    "configurationBoardAlignmentYaw": {
-        "message": "Yaw Degrees"
-    },
     "configurationSensorAlignmentMag": {
         "message": "MAG Alignment"
     },
@@ -2035,16 +2023,19 @@
         "message": "Signal Strength"
     },
     "magnetometerHead": {
-        "message": "Magnetometer Alignment"
+        "message": "Alignment tool"
     },
     "magnetometerHelp": {
-        "message": "Adjust the magnetometer orientation to match physical orientation on the aircraft.<br/>If magnetometer is not BN-880, adjust according to \"compass direction\" arrow or axis markings on your magnetometer model.<br/><strong>Note:</strong> Magnetometer orientation preset (align_mag) is relative to FC. Make sure to align FC first (board_align_yaw, board_align_pitch, board_align_roll).<br/>If preset is not used (some of the align_mag_roll, align_mag_pitch or align_mag_yaw are non-zero), magnetometer orientation does not depend on FC orientation."
+        "message": "1. Adjust Flight Controller orientation to match physical orientation on the aircraft <u>according to \"direction\" arrow on Flight Controller</u>.<br/>2. Adjust magnetometer orientation to match physical orientation on the aircraft <u>according to \"compass direction\" arrow or axis markings on magnetometer</u>.<br/><strong>Note:</strong> Magnetometer orientation preset (align_mag) is relative to FC. Make sure to align FC first (align_board_pitch, align_board_roll, align_board_yaw).<br/>If preset is not used (orientation is set using align_mag_pitch, align_mag_roll and align_mag_yaw), then magnetometer orientation is independent."
     },
     "magnetometerOrientationPreset": {
         "message": "Orientation preset (align_mag). Relative to FC orientation"
     },
+    "boardInfo": {
+        "message": "1. Select Flight Controller alignment (align_board_pitch, align_board_roll, align_board_yaw)"
+    },
     "magnetometerInfo": {
-        "message": "Select a preset or create a custom configuration moving the sliders"
+        "message": "2. Select a preset (align_mag) or create a custom configuration using the sliders (align_mag_pitch, align_mag_roll, align_mag_yaw)"
     },
     "magnetometerElementToShow": {
         "message": "Element to show: Magnetometer model or axes"
@@ -2060,9 +2051,6 @@
         "message": "Value [degree]"
     },
 
-
-
-
     "configurationMagnetometerHelp": {
         "message": "<strong>Note:</strong> Remember to configure a Serial Port (via Ports tab) when using the Magnetometer feature."
     },
@@ -2070,7 +2058,7 @@
         "message": "Mag Statistics"
     },
     "tabMAGNETOMETER": {
-        "message": "Magnetometer"
+        "message": "Alignment tool"
     },
     "motors": {
         "message": "Motors"
@@ -4772,9 +4760,6 @@
     "WaypointOptionP2": {
         "message": "P2"
     },
-    "rollPitchAdjustmentsMoved": {
-        "message": "Roll & Pitch board orientation is available only in the CLI. Do not use it to trim the airplane for the level flight! Use Fixed Wing Level Trim on the PID tuning tab under Mechanics instead (<strong>fw_level_pitch_trim</strong>)."
-    },
     "pidId": {
         "message": "#"
     },

src/css/tabs/magnetometer.css

@@ -137,7 +137,7 @@
 .tab-magnetometer #interactive_block {
     position: absolute;
     width: calc(100% - 40px);
-    height: calc(100% - 245px);
+    height: calc(100% - 200px);
     background-color: #f9f9f9;
     border-radius: 5px;
     border: 1px solid #e4e4e4;

tabs/configuration.html

@@ -54,28 +54,6 @@
 
                 </div>
             </div>
-            <div class="board gui_box grey">
-                <div class="gui_box_titlebar">
-                    <div class="spacer_box_title" data-i18n="configurationBoardAlignment"></div>
-                    <div class="helpicon cf_tip" data-i18n_title="configHelp2"></div>
-                </div>
-                <div class="spacer_box">
-                    <div class="info-box" data-i18n="rollPitchAdjustmentsMoved"></div>
-                    <div class="number">
-                        <input id="board_align_yaw" type="number" name="board_align_yaw" step="0.1" min="-180" max="360" />
-                        <div class="alignicon yaw"></div>
-                        <label for="board_align_yaw" data-i18n="configurationBoardAlignmentYaw"></label>
-                    </div>
-                    <div class="select" style="position: relative; top: -3px;">
-                        <select id="magalign" class="magalign">
-                            <option value="0">Default</option>
-                            <!-- list generated here -->
-                        </select>
-                        <div class="alignicon yaw"></div>
-                        <label for="magalign" data-i18n="configurationSensorAlignmentMag"></label>
-                    </div>
-                </div>
-            </div>
 
             <div class="config-section gui_box grey other">
                 <div class="gui_box_titlebar">

tabs/configuration.js

@@ -30,12 +30,10 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
     var saveChainer = new MSPChainerClass();
 
     var saveChain = [
-        mspHelper.saveSensorAlignment,
         mspHelper.saveAccTrim,
         mspHelper.saveArmingConfig,
         mspHelper.saveAdvancedConfig,
         mspHelper.saveVTXConfig,
-        mspHelper.saveBoardAlignment,
         mspHelper.saveCurrentMeterConfig,
         mspHelper.saveMiscV2,
         saveSettings,
@@ -115,14 +113,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         // translate to user-selected language
         localize();
 
-        let alignments = FC.getSensorAlignments();
-        let orientation_mag_e = $('select.magalign');
-
-        for (i = 0; i < alignments.length; i++) {
-            orientation_mag_e.append('<option value="' + (i + 1) + '">' + alignments[i] + '</option>');
-        }
-        orientation_mag_e.val(SENSOR_ALIGNMENT.align_mag);
-
         // VTX
         var config_vtx = $('.config-vtx');
         if (VTX_CONFIG.device_type != VTX.DEV_UNKNOWN) {
@@ -209,7 +199,8 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         $('input[name="board_align_yaw"]').val((BOARD_ALIGNMENT.yaw / 10.0).toFixed(1));
 
         // fill magnetometer
-        $('#mag_declination').val(MISC.mag_declination);
+        //UPDATE: moved to GPS tab and hidden
+        //$('#mag_declination').val(MISC.mag_declination);
 
         // fill battery voltage
         $('#voltagesource').val(MISC.voltage_source);
@@ -264,6 +255,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
         $i2cSpeed.change();
 
         $('a.save').click(function () {
+            //UPDATE: moved to GPS tab and hidden
             MISC.mag_declination = parseFloat($('#mag_declination').val());
 
             ARMING_CONFIG.auto_disarm_delay = parseInt($('input[name="autodisarmdelay"]').val());
@@ -281,8 +273,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             MISC.battery_capacity_critical = parseInt($('#battery_capacity_critical').val() * MISC.battery_capacity / 100);
             MISC.battery_capacity_unit = $('#battery_capacity_unit').val();
 
-            SENSOR_ALIGNMENT.align_mag = parseInt(orientation_mag_e.val());
-
             googleAnalytics.sendEvent('Setting', 'I2CSpeed', $('#i2c_speed').children("option:selected").text());
 
             googleAnalytics.sendEvent('Board', 'Accelerometer', $('#sensor-acc').children("option:selected").text());
@@ -300,7 +290,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             helper.features.reset();
             helper.features.fromUI($('.tab-configuration'));
             helper.features.execute(function () {
-                BOARD_ALIGNMENT.yaw = Math.round(parseFloat($('input[name="board_align_yaw"]').val()) * 10);
                 CURRENT_METER_CONFIG.scale = parseInt($('#currentscale').val());
                 CURRENT_METER_CONFIG.offset = Math.round(parseFloat($('#currentoffset').val()) * 10);
                 saveChainer.execute();

tabs/magnetometer.html

@@ -18,6 +18,72 @@
                 </div>
             </div>
         </div>
+        <div class="config-section gui_box grey">
+            <div class="spacer_box">
+                <div id="board-alignment-info" class="info-box">
+                    <span data-i18n="boardInfo"></span>
+                </div>
+
+                <table class="axis-table">
+                    <thead>
+                        <tr>
+                            <td style="width: 5%; padding-bottom: 10px;">
+                                <p class="table-title">
+                                    <span data-i18n="axisTableTitleAxis"></span>
+                                </p>
+                            </td>
+                            <td style="width: 90%; padding-bottom: 10px;">
+                                <p class="table-title">
+                                    <span data-i18n="axisTableTitleSlider"></span>
+                                </p>
+                            </td>
+                            <td style="width: 5%; padding-bottom: 10px;">
+                                <a class="table-title">
+                                    <span data-i18n="axisTableTitleValue"></span>
+                                </a>
+
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="info">
+                                <p class="title" data-i18n="configurationSensorAlignmentMagPitch"></p>
+                            </td>
+                            <td>
+                                <div id="board_roll_slider" class="slider"></div>
+                            </td>
+                            <td>
+                                <input type="number" id="boardAlignRoll" class="tab-magnetometer" data-setting="tz_offset" data-setting-multiplier="1" step="1" min="-180" max="360" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="info">
+                                <p class="title" data-i18n="configurationSensorAlignmentMagRoll"></p>
+                            </td>
+                            <td>
+                                <div id="board_pitch_slider" class="slider"></div>
+                            </td>
+                            <td>
+                                <input type="number" id="boardAlignPitch" class="tab-magnetometer" data-setting="tz_offset" data-setting-multiplier="1" step="1" min="-180" max="360" />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="info">
+                                <p class="title" data-i18n="configurationSensorAlignmentMagYaw"></p>
+                            </td>
+                            <td>
+                                <div id="board_yaw_slider" class="slider"></div>
+                            </td>
+                            <td>
+                                <input type="number" id="boardAlignYaw" class="tab-magnetometer" data-setting="tz_offset" data-setting-multiplier="1" step="1" min="-180" max="360" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
         <div class="config-section gui_box grey">
             <div class="spacer_box">
                 <div id="alignment-info" class="info-box">
@@ -69,7 +135,7 @@
                                 <div id="roll_slider" class="slider"></div>
                             </td>
                             <td>
-                                <input type="number" id="alignRoll" class="tab-magnetometer" data-setting="tz_offset" data-setting-multiplier="1" step="1" min="-180" max="180" />
+                                <input type="number" id="alignRoll" class="tab-magnetometer" data-setting="tz_offset" data-setting-multiplier="1" step="1" min="-180" max="360" />
                             </td>
                         </tr>
                         <tr>
@@ -80,7 +146,7 @@
                                 <div id="pitch_slider" class="slider"></div>
                             </td>
                             <td>
-                                <input type="number" id="alignPitch" class="tab-magnetometer" data-setting="tz_offset" data-setting-multiplier="1" step="1" min="-180" max="180" />
+                                <input type="number" id="alignPitch" class="tab-magnetometer" data-setting="tz_offset" data-setting-multiplier="1" step="1" min="-180" max="360" />
                             </td>
                         </tr>
                         <tr>

tabs/magnetometer.js

@@ -18,6 +18,12 @@ TABS.magnetometer.initialize = function (callback) {
         yaw: 0
     };
 
+    self.boardAlignmentConfig = {
+        pitch: 0,
+        roll: 0,
+        yaw: 0
+    };
+
     self.pageElements = {};
     self.isSavePreset = true;
     self.showMagnetometer = true;
@@ -29,6 +35,12 @@ TABS.magnetometer.initialize = function (callback) {
     var loadChain = [
         mspHelper.loadMixerConfig,
         mspHelper.loadBoardAlignment,
+        function (callback) {
+            self.boardAlignmentConfig.pitch = Math.round(BOARD_ALIGNMENT.pitch / 10);
+            self.boardAlignmentConfig.roll = Math.round(BOARD_ALIGNMENT.roll / 10);
+            self.boardAlignmentConfig.yaw = Math.round(BOARD_ALIGNMENT.yaw / 10);
+            callback();
+        },
         mspHelper.loadSensorAlignment,
         // Pitch and roll must be inverted
         function (callback) {
@@ -57,7 +69,7 @@ TABS.magnetometer.initialize = function (callback) {
     }
 
     function isBoardAlignmentZero() {
-        return (BOARD_ALIGNMENT.pitch == 0 ) && (BOARD_ALIGNMENT.roll == 0 ) && (BOARD_ALIGNMENT.yaw == 0);
+        return (self.boardAlignmentConfig.pitch == 0 ) && (self.boardAlignmentConfig.roll == 0 ) && (self.boardAlignmentConfig.yaw == 0);
     }
 
     //========================
@@ -66,6 +78,13 @@ TABS.magnetometer.initialize = function (callback) {
     var saveChainer = new MSPChainerClass();
 
     var saveChain = [
+        function (callback) {
+            BOARD_ALIGNMENT.pitch = self.boardAlignmentConfig.pitch * 10;
+            BOARD_ALIGNMENT.roll = self.boardAlignmentConfig.roll * 10;
+            BOARD_ALIGNMENT.yaw = self.boardAlignmentConfig.yaw * 10;
+            callback();
+        },
+        mspHelper.saveBoardAlignment,
         // Magnetometer alignment
         function (callback) {
             let orientation_mag_e = $('select.magalign');
@@ -178,10 +197,10 @@ TABS.magnetometer.initialize = function (callback) {
         var magRotation = new THREE.Euler(-THREE.Math.degToRad(degree[0]), THREE.Math.degToRad(-180 - degree[2]), THREE.Math.degToRad(degree[1]), 'YXZ'); 
         var matrix = (new THREE.Matrix4()).makeRotationFromEuler(magRotation);
 
-        var boardRotation = new THREE.Euler( THREE.Math.degToRad( -BOARD_ALIGNMENT.pitch / 10.0 ), THREE.Math.degToRad( -BOARD_ALIGNMENT.yaw / 10.0 ), THREE.Math.degToRad( -BOARD_ALIGNMENT.roll / 10.0 ), 'YXZ');
+        var boardRotation = new THREE.Euler( THREE.Math.degToRad( -self.boardAlignmentConfig.pitch ), THREE.Math.degToRad( -self.boardAlignmentConfig.yaw ), THREE.Math.degToRad( -self.boardAlignmentConfig.roll ), 'YXZ');
         var matrix1 = (new THREE.Matrix4()).makeRotationFromEuler(boardRotation);
 
-        matrix.multiply(matrix1);  
+        matrix.premultiply(matrix1);  
 
         var euler = new THREE.Euler();
         euler.setFromRotationMatrix(matrix, 'YXZ');
@@ -193,6 +212,37 @@ TABS.magnetometer.initialize = function (callback) {
         return [pitch, roll, yaw];
     }
 
+    function updateMagOrientationWithPreset() {
+        if (self.isSavePreset) {
+            const degrees = getAxisDegreeWithPresetAndBoardOrientation(SENSOR_ALIGNMENT.align_mag);
+            presetUpdated(degrees);
+        }
+    }
+
+    function updateBoardRollAxis(value) {
+        self.boardAlignmentConfig.roll = Number(value);
+        self.pageElements.board_roll_slider.val(self.boardAlignmentConfig.roll);
+        self.pageElements.orientation_board_roll.val(self.boardAlignmentConfig.roll);
+        updateMagOrientationWithPreset();
+        self.render3D();
+    }
+
+    function updateBoardPitchAxis(value) {
+        self.boardAlignmentConfig.pitch = Number(value);
+        self.pageElements.board_pitch_slider.val(self.boardAlignmentConfig.pitch);
+        self.pageElements.orientation_board_pitch.val(self.boardAlignmentConfig.pitch);
+        updateMagOrientationWithPreset();
+        self.render3D();
+    }
+
+    function updateBoardYawAxis(value) {
+        self.boardAlignmentConfig.yaw = Number(value);
+        self.pageElements.board_yaw_slider.val(self.boardAlignmentConfig.yaw);
+        self.pageElements.orientation_board_yaw.val(self.boardAlignmentConfig.yaw);
+        updateMagOrientationWithPreset();
+        self.render3D();
+    }
+
     //Called when roll values change
     function updateRollAxis(value) {
         self.alignmentConfig.roll = Number(value);
@@ -232,7 +282,6 @@ TABS.magnetometer.initialize = function (callback) {
 
     //Called when a preset is selected
     function presetUpdated(degrees) {
-console.log("presetUpdated()");
         enableSavePreset();
         updatePitchAxis(degrees[0]);
         updateRollAxis(degrees[1]);
@@ -242,14 +291,20 @@ console.log("presetUpdated()");
 
     function process_html() {
 
-console.log("process_html()");
-
         localize();
 
         // initialize 3D
         self.initialize3D();
 
         let alignments = FC.getSensorAlignments();
+
+        self.pageElements.orientation_board_roll = $('#boardAlignRoll');
+        self.pageElements.orientation_board_pitch = $('#boardAlignPitch');
+        self.pageElements.orientation_board_yaw = $('#boardAlignYaw');
+        self.pageElements.board_roll_slider = $('#board_roll_slider');
+        self.pageElements.board_pitch_slider = $('#board_pitch_slider');
+        self.pageElements.board_yaw_slider = $('#board_yaw_slider');
+
         self.pageElements.orientation_mag_e = $('select.magalign');
         self.pageElements.orientation_mag_roll = $('#alignRoll');
         self.pageElements.orientation_mag_pitch = $('#alignPitch');
@@ -276,6 +331,75 @@ console.log("process_html()");
             disableSavePreset();
         }
 
+
+        self.pageElements.orientation_board_roll.change(function () {
+            updateBoardRollAxis(clamp(this, -180, 360));
+        });
+
+        self.pageElements.orientation_board_pitch.change(function () {
+            updateBoardPitchAxis(clamp(this, -180, 360));
+        });
+
+        self.pageElements.orientation_board_yaw.change(function () {
+            updateBoardYawAxis(clamp(this, -180, 360));
+        });
+
+        self.pageElements.board_roll_slider.noUiSlider({
+            start: [self.boardAlignmentConfig.roll],
+            range: {
+                'min': [-180],
+                'max': [360]
+            },
+            step: 1,
+        });
+        self.pageElements.board_roll_slider.noUiSlider_pips({
+            mode: 'values',
+            values: generateRange(-180, 360, 45),
+            density: 4,
+            stepped: true
+        });
+
+        self.pageElements.board_pitch_slider.noUiSlider({
+            start: [self.boardAlignmentConfig.pitch],
+            range: {
+                'min': [-180],
+                'max': [360]
+            },
+            step: 1,
+        });
+        self.pageElements.board_pitch_slider.noUiSlider_pips({
+            mode: 'values',
+            values: generateRange(-180, 360, 45),
+            density: 4,
+            stepped: true
+        });
+
+        self.pageElements.board_yaw_slider.noUiSlider({
+            start: [self.boardAlignmentConfig.yaw],
+            range: {
+                'min': [-180],
+                'max': [360]
+            },
+            step: 1,
+        });
+        self.pageElements.board_yaw_slider.noUiSlider_pips({
+            mode: 'values',
+            values: generateRange(-180, 360, 45),
+            density: 4,
+            stepped: true
+        });
+
+
+        self.pageElements.board_pitch_slider.Link('lower').to((e) => {
+            updateBoardPitchAxis(e);
+        });
+        self.pageElements.board_roll_slider.Link('lower').to((e) => {
+            updateBoardRollAxis(e);
+        });
+        self.pageElements.board_yaw_slider.Link('lower').to((e) => {
+            updateBoardYawAxis(e);
+        });
+
         const elementToShow = $("#element_to_show");
         elementToShow.change(function () {
             const value = parseInt($(this).val());
@@ -294,23 +418,21 @@ console.log("process_html()");
         });
 
         self.pageElements.orientation_mag_e.on('mousedown', function () {
-console.log("orientation_mag_e.on('input')");
             const degrees = getAxisDegreeWithPresetAndBoardOrientation(SENSOR_ALIGNMENT.align_mag);
             presetUpdated(degrees);
         });
 
         self.pageElements.orientation_mag_roll.change(function () {
             disableSavePreset();
-            updateRollAxis(clamp(this, -180, 180));
+            updateRollAxis(clamp(this, -180, 360));
         });
 
         self.pageElements.orientation_mag_pitch.change(function () {
             disableSavePreset();
-            updatePitchAxis(clamp(this, -180, 180));
+            updatePitchAxis(clamp(this, -180, 360));
         });
 
         self.pageElements.orientation_mag_yaw.change(function () {
-console.log("orientation_mag_yaw.change()");
             disableSavePreset();
             updateYawAxis(clamp(this, -180, 360));
         });
@@ -323,13 +445,13 @@ console.log("orientation_mag_yaw.change()");
             start: [self.alignmentConfig.roll],
             range: {
                 'min': [-180],
-                'max': [180]
+                'max': [360]
             },
             step: 1,
         });
         self.pageElements.roll_slider.noUiSlider_pips({
             mode: 'values',
-            values: generateRange(-180, 180, 15),
+            values: generateRange(-180, 360, 45),
             density: 4,
             stepped: true
         });
@@ -338,13 +460,13 @@ console.log("orientation_mag_yaw.change()");
             start: [self.alignmentConfig.pitch],
             range: {
                 'min': [-180],
-                'max': [180]
+                'max': [360]
             },
             step: 1,
         });
         self.pageElements.pitch_slider.noUiSlider_pips({
             mode: 'values',
-            values: generateRange(-180, 180, 15),
+            values: generateRange(-180, 360, 45),
             density: 4,
             stepped: true
         });
@@ -372,7 +494,6 @@ console.log("orientation_mag_yaw.change()");
             updateRollAxis(e);
         });
         self.pageElements.yaw_slider.Link('lower').to((e) => {
-console.log("yaw_slider.Link('lower')");
             updateYawAxis(e);
         });
 
@@ -383,7 +504,6 @@ console.log("yaw_slider.Link('lower')");
             disableSavePreset();
         });
         self.pageElements.yaw_slider.on('slide', (e) => {
-console.log("yaw_slider.on('slide')");
             disableSavePreset();
         });
 
@@ -460,13 +580,12 @@ TABS.magnetometer.initialize3D = function () {
         var magRotation = new THREE.Euler(-THREE.Math.degToRad(self.alignmentConfig.pitch), THREE.Math.degToRad(-180 - self.alignmentConfig.yaw), THREE.Math.degToRad(self.alignmentConfig.roll), 'YXZ'); 
         var matrix = (new THREE.Matrix4()).makeRotationFromEuler(magRotation);
 
-        var boardRotation = new THREE.Euler( THREE.Math.degToRad( -BOARD_ALIGNMENT.pitch / 10.0 ), THREE.Math.degToRad( -BOARD_ALIGNMENT.yaw / 10.0 ), THREE.Math.degToRad( -BOARD_ALIGNMENT.roll / 10.0 ), 'YXZ');
+        var boardRotation = new THREE.Euler( THREE.Math.degToRad( -self.boardAlignmentConfig.pitch ), THREE.Math.degToRad( -self.boardAlignmentConfig.yaw ), THREE.Math.degToRad( -self.boardAlignmentConfig.roll ), 'YXZ');
         var matrix1 = (new THREE.Matrix4()).makeRotationFromEuler(boardRotation);
 
-console.log(self.isSavePreset);
 /*
         if ( self.isSavePreset ) {
-          matrix.multiply(matrix1);  //preset specifies orientation relative to FC, align_max_xxx specify absolute orientation 
+          matrix.premultiply(matrix1);  //preset specifies orientation relative to FC, align_max_xxx specify absolute orientation 
         }
 */
         gps.rotation.setFromRotationMatrix(matrix);