Use attitude heading (#3663)

* Rename heading

* Change gpsHeading message

* Use IMU heading on GPS tab

* Remove precision and rotation

* Code style fixes

Author: haslinghuis

locales/en/messages.json

@@ -818,8 +818,8 @@
         "message": "Reset Z axis, offset: $1 deg"
     },
     "initialSetupHeading": {
-        "message": "Heading:",
-        "description": "Heading shown on Setup tab"
+        "message": "Yaw:",
+        "description": "Heading [yaw] attitude value shown on Setup tab"
     },
     "initialSetupMixerHead": {
         "message": "Mixer Type"
@@ -2823,8 +2823,8 @@
         "description": "Show GPS position - Latitude / Longitude"
     },
     "gpsHeading": {
-        "message": "Heading Mag / GPS:",
-        "description": "Show GPS heading - Magnetic / GPS course over ground"
+        "message": "Heading IMU / GPS:",
+        "description": "Show IMU / GPS heading - Attitude / GPS course over ground"
     },
     "gpsSpeed": {
         "message": "Speed:"

src/js/tabs/gps.js

@@ -52,7 +52,11 @@ gps.initialize = async function (callback) {
         }
 
         function get_gpsvinfo_data() {
-            MSP.send_message(MSPCodes.MSP_GPS_SV_INFO, false, false, hasMag ? get_imu_data : update_ui);
+            MSP.send_message(MSPCodes.MSP_GPS_SV_INFO, false, false, get_attitude_data);
+        }
+
+        function get_attitude_data() {
+            MSP.send_message(MSPCodes.MSP_ATTITUDE, false, false, hasMag ? get_imu_data : update_ui);
         }
 
         function get_imu_data() {
@@ -185,6 +189,7 @@ gps.initialize = async function (callback) {
             const lat = FC.GPS_DATA.lat / 10000000;
             const lon = FC.GPS_DATA.lon / 10000000;
             const url = `https://maps.google.com/?q=${lat},${lon}`;
+            const imuHeading = FC.SENSOR_DATA.kinematics[2];
             const magHeading = hasMag ? Math.atan2(FC.SENSOR_DATA.magnetometer[1], FC.SENSOR_DATA.magnetometer[0]) : undefined;
             const magHeadingDeg = magHeading === undefined ? 0 : magHeading * 180 / Math.PI;
             const gpsHeading = FC.GPS_DATA.ground_course / 100;
@@ -200,7 +205,7 @@ gps.initialize = async function (callback) {
             const gspUnitText = i18n.getMessage('gpsPositionUnit');
             $('.GPS_info td.alt').text(`${alt} m`);
             $('.GPS_info td.latLon a').prop('href', url).text(`${lat.toFixed(6)} / ${lon.toFixed(6)} ${gspUnitText}`);
-            $('.GPS_info td.heading').text(`${magHeadingDeg.toFixed(4)} / ${gpsHeading.toFixed(4)} ${gspUnitText}`);
+            $('.GPS_info td.heading').text(`${imuHeading.toFixed(0)} / ${gpsHeading.toFixed(0)} ${gspUnitText}`);
             $('.GPS_info td.speed').text(`${FC.GPS_DATA.speed} cm/s`);
             $('.GPS_info td.sats').text(FC.GPS_DATA.numSat);
             $('.GPS_info td.distToHome').text(`${FC.GPS_DATA.distanceToHome} m`);
@@ -298,7 +303,7 @@ gps.initialize = async function (callback) {
                 action: 'center',
                 lat: lat,
                 lon: lon,
-                heading: magHeading,
+                heading: gpsHeading,
             };
 
             frame = document.getElementById('map');

src/js/tabs/map.js

@@ -21,41 +21,41 @@ function initializeMap() {
     const lonLat = ol.proj.fromLonLat([DEFAULT_LON, DEFAULT_LAT]);
 
     mapView = new ol.View({
-                        center: lonLat,
-                        zoom: DEFAULT_ZOOM,
-                      });
+        center: lonLat,
+        zoom: DEFAULT_ZOOM,
+    });
 
     map = new ol.Map({
         target: 'map-canvas',
         layers: [
-          new ol.layer.Tile({
-            source: new ol.source.OSM(),
-          }),
+            new ol.layer.Tile({
+                source: new ol.source.OSM(),
+            }),
         ],
         view: mapView,
         controls: [],
-      });
+    });
 
-      const iconGPS = new ol.style.Icon(({
+    const iconGPS = new ol.style.Icon({
         anchor: [0.5, 1],
         opacity: 1,
         scale: 0.5,
         src: ICON_IMAGE_GPS,
-    }));
+    });
 
-    const iconMag = new ol.style.Icon(({
+    const iconMag = new ol.style.Icon({
         anchor: [0.5, 1],
         opacity: 1,
         scale: 0.5,
         src: ICON_IMAGE_MAG,
-    }));
+    });
 
-    const iconNoFix = new ol.style.Icon(({
+    const iconNoFix = new ol.style.Icon({
         anchor: [0.5, 1],
         opacity: 1,
         scale: 0.5,
         src: ICON_IMAGE_NOFIX,
-    }));
+    });
 
     iconStyleGPS = new ol.style.Style({
         image: iconGPS,
@@ -70,6 +70,7 @@ function initializeMap() {
     });
 
     iconGeometry = new ol.geom.Point(lonLat);
+
     iconFeature = new ol.Feature({
         geometry: iconGeometry,
     });
@@ -106,8 +107,9 @@ function processMapEvents(e) {
                 iconFeature.setStyle(iconStyle);
                 const center = ol.proj.fromLonLat([e.data.lon, e.data.lat]);
                 mapView.setCenter(center);
-                const heading = e.data.heading === undefined ? 0 : e.data.heading;
-                mapView.setRotation(heading);
+                // TODO - add rotation for the icon
+                // const heading = e.data.heading === undefined ? 0 : e.data.heading;
+                // mapView.setRotation(heading);
                 iconGeometry.setCoordinates(center);
                 break;