Display heading on GPS Tab (#3355)

locales/en/messages.json

@@ -2482,6 +2482,9 @@
     "gpsLon": {
         "message": "Longitude:"
     },
+    "gpsHeading": {
+        "message": "Heading:"
+    },
     "gpsSpeed": {
         "message": "Speed:"
     },
@@ -4878,7 +4881,7 @@
     },
     "osdTextElementVTXchannelVariantPower": {
         "message": "VTX power",
-        "description": "One of the variants of the VTX channel element of the OSD"        
+        "description": "One of the variants of the VTX channel element of the OSD"
     },
     "osdTextElementVTXchannelVariantFull": {
         "message": "Band:Channel:Pwr:Pit",

src/js/VirtualFC.js

@@ -156,6 +156,8 @@ const VirtualFC = {
             mag_hardware: 1,
         };
 
+        virtualFC.SENSOR_DATA = { ...FC.SENSOR_DATA };
+
         virtualFC.RC = {
             channels: Array.from({length: 16}),
             active_channels: 16,
@@ -180,8 +182,20 @@ const VirtualFC = {
 
         // 11 1111 (pass bitchecks)
         virtualFC.CONFIG.activeSensors = 63;
+
+        virtualFC.GPS_CONFIG = {
+            provider: 1,
+            ublox_sbas: 1,
+            auto_config: 1,
+            auto_baud: 0,
+            home_point_once: 1,
+            ublox_use_galileo: 1,
+        };
+
+        virtualFC.GPS_DATA = sampleGpsData;
     },
-    setupVirtualOSD(){
+
+    setupVirtualOSD() {
         const virtualOSD = OSD;
 
         virtualOSD.data.video_system = 1;
@@ -221,4 +235,21 @@ const VirtualFC = {
     },
 };
 
+const sampleGpsData = {
+    "fix": 2,
+    "numSat": 10,
+    "lat": 474919409,
+    "lon": 190539766,
+    "alt": 0,
+    "speed": 0,
+    "ground_course": 1337,
+    "distanceToHome": 0,
+    "directionToHome": 0,
+    "update": 0,
+    "chn": [0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 6, 6, 6, 6, 6, 6, 6, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
+    "svid": [1, 2, 10, 15, 18, 23, 26, 123, 136, 1, 15, 2, 3, 4, 9, 10, 16, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    "quality": [3, 95, 95, 95, 95, 95, 95, 23, 23, 1, 31, 20, 31, 23, 20, 17, 31, 31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    "cno": [27, 37, 43, 37, 34, 47, 44, 42, 39, 0, 40, 24, 40, 35, 26, 0, 35, 41, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+};
+
 export default VirtualFC;

src/js/fc.js

@@ -300,7 +300,7 @@ const FC = {
             speed:                      0,
             ground_course:              0,
             distanceToHome:             0,
-            ditectionToHome:            0,
+            directionToHome:            0,
             update:                     0,
 
             chn:                        [],

src/js/tabs/gps.js

@@ -21,6 +21,8 @@ gps.initialize = async function (callback) {
     await MSP.promise(MSPCodes.MSP_GPS_CONFIG);
     await MSP.promise(MSPCodes.MSP_STATUS);
 
+    const hasMag = have_sensor(FC.CONFIG.activeSensors, 'mag');
+
     load_html();
 
     function load_html() {
@@ -52,7 +54,11 @@ gps.initialize = async function (callback) {
         }
 
         function get_gpsvinfo_data() {
-            MSP.send_message(MSPCodes.MSP_GPS_SV_INFO, false, false, update_ui);
+            MSP.send_message(MSPCodes.MSP_GPS_SV_INFO, false, false, hasMag ? get_imu_data : update_ui);
+        }
+
+        function get_imu_data() {
+            MSP.send_message(MSPCodes.MSP_RAW_IMU, false, false, update_ui);
         }
 
         // To not flicker the divs while the fix is unstable
@@ -178,6 +184,8 @@ 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 heading = hasMag ? Math.atan2(FC.SENSOR_DATA.magnetometer[1], FC.SENSOR_DATA.magnetometer[0]) : undefined;
+            const headingDeg = heading === undefined ? 0 : heading * 180 / Math.PI;
             const gnssArray = ['GPS', 'SBAS', 'Galileo', 'BeiDou', 'IMES', 'QZSS', 'Glonass'];
             const qualityArray = ['gnssQualityNoSignal', 'gnssQualitySearching', 'gnssQualityAcquired', 'gnssQualityUnusable', 'gnssQualityLocked',
                 'gnssQualityFullyLocked', 'gnssQualityFullyLocked', 'gnssQualityFullyLocked'];
@@ -189,6 +197,7 @@ gps.initialize = async function (callback) {
             $('.GPS_info td.alt').text(`${alt} m`);
             $('.GPS_info td.lat a').prop('href', url).text(`${lat.toFixed(4)} deg`);
             $('.GPS_info td.lon a').prop('href', url).text(`${lon.toFixed(4)} deg`);
+            $('.GPS_info td.heading').text(`${headingDeg.toFixed(4)} deg`);
             $('.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`);
@@ -263,6 +272,7 @@ gps.initialize = async function (callback) {
                 action: 'center',
                 lat: lat,
                 lon: lon,
+                heading: heading,
             };
 
             frame = document.getElementById('map');
@@ -271,7 +281,9 @@ gps.initialize = async function (callback) {
 
                 if (FC.GPS_DATA.fix) {
                    gpsWasFixed = true;
-                   frame.contentWindow.postMessage(message, '*');
+                    if (!!frame.contentWindow) {
+                        frame.contentWindow.postMessage(message, '*');
+                    }
                    $('#loadmap').show();
                    $('#waiting').hide();
                 } else if (!gpsWasFixed) {
@@ -279,7 +291,9 @@ gps.initialize = async function (callback) {
                    $('#waiting').show();
                 } else {
                     message.action = 'nofix';
-                    frame.contentWindow.postMessage(message, '*');
+                    if (!!frame.contentWindow) {
+                        frame.contentWindow.postMessage(message, '*');
+                    }
                 }
             } else {
                 gpsWasFixed = false;
@@ -291,11 +305,6 @@ gps.initialize = async function (callback) {
 
         // enable data pulling
         GUI.interval_add('gps_pull', function gps_update() {
-            // avoid usage of the GPS commands until a GPS sensor is detected for targets that are compiled without GPS support.
-            if (!have_sensor(FC.CONFIG.activeSensors, 'gps')) {
-                //return;
-            }
-
             get_raw_gps_data();
         }, 75, true);
 

src/js/tabs/map.js

@@ -76,31 +76,30 @@ function initializeMap() {
 }
 
 function processMapEvents(e) {
-
     try {
-        switch(e.data.action) {
+        switch (e.data.action) {
+            case 'zoom_in':
+                mapView.setZoom(mapView.getZoom() + 1);
+                break;
 
-        case 'zoom_in':
+            case 'zoom_out':
-            mapView.setZoom(mapView.getZoom() + 1);
+                mapView.setZoom(mapView.getZoom() - 1);
-            break;
+                break;
 
-        case 'zoom_out':
+            case 'center':
-            mapView.setZoom(mapView.getZoom() - 1);
+                iconFeature.setStyle(iconStyle);
-            break;
+                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);
+                iconGeometry.setCoordinates(center);
+                break;
 
-        case 'center':
+            case 'nofix':
-            iconFeature.setStyle(iconStyle);
+                iconFeature.setStyle(iconStyleNoFix);
-            const center = ol.proj.fromLonLat([e.data.lon, e.data.lat]);
+                break;
-            mapView.setCenter(center);
-            iconGeometry.setCoordinates(center);
-            break;
-
-        case 'nofix':
-            iconFeature.setStyle(iconStyleNoFix);
-            break;
         }
-
+    } catch (err) {
-  } catch (err) {
+        console.error('Map error', err);
-      console.log(`Map error ${err}`);
+    }
-  }
 }

src/tabs/gps.html

@@ -100,6 +100,10 @@
                                 <td i18n="gpsLon"></td>
                                 <td class="lon"><a href="#" target="_blank">0.0000 deg</a></td>
                             </tr>
+                            <tr>
+                                <td i18n="gpsHeading"></td>
+                                <td class="heading"><a href="#" target="_blank">0.0000 deg</a></td>
+                            </tr>
                             <tr>
                                 <td i18n="gpsSpeed"></td>
                                 <td class="speed">0 cm/s</td>