Add visual info about pdop quality (#4343)

fix display of magnetic declination

swapped moderate and fair :)

remove not needed href for latlon

revert remove not needed href for latlon

locales/en/messages.json

@@ -2962,6 +2962,10 @@
     "gpsPositionalDop": {
         "message": "Positional DOP:"
     },
+    "gpsMagneticDeclination": {
+        "message": "$t(configurationMagDeclination):",
+        "description": "Do not translate"
+    },
     "gpsSignalStrHead": {
         "message": "GPS Signal Strength"
     },

src/css/main.less

@@ -1512,6 +1512,31 @@ table {
     &.ready {
         background-color: var(--success-500);
     }
+    &.ideal {
+        // should be blue
+        background-color: blue;
+    }
+    &.excellent {
+        // should be green
+        background-color: var(--success-500);
+    }
+    &.good {
+        // should be orange
+        background-color: var(--warning-500);
+    }
+    &.moderate {
+        // should be yellow
+        background-color: var(--primary-500);
+        color: black;
+    }
+    &.fair {
+        // should be red
+        background-color: var(--error-500);
+    }
+    &.poor {
+        // should be gray
+        background-color: var(--surface-500);
+    }
 }
 .buildInfoBtn {
     position: relative;

src/js/tabs/gps.js

@@ -314,6 +314,33 @@ gps.initialize = async function (callback) {
             }
         }
 
+        function getPositionalDopQuality(positionalDop) {
+            // See https://en.wikipedia.org/wiki/Dilution_of_precision_(navigation)
+            let qualityColor;
+            let stars;
+            if (positionalDop < 1) {
+                qualityColor = "ideal"; // blue
+                stars = "★★★★★";
+            } else if (positionalDop < 2) {
+                qualityColor = "excellent"; // green
+                stars = "★★★★☆";
+            } else if (positionalDop < 5) {
+                qualityColor = "good"; // orange
+                stars = "★★★☆☆";
+            } else if (positionalDop < 10) {
+                qualityColor = "moderate"; // yellow
+                stars = "★★☆☆☆";
+            } else if (positionalDop < 20) {
+                qualityColor = "fair"; // red
+                stars = "★☆☆☆☆";
+            } else {
+                qualityColor = "poor"; // grey
+                stars = "☆☆☆☆☆";
+            }
+
+            return { qualityColor, stars };
+        }
+
         function update_ui() {
             const lat = FC.GPS_DATA.lat / 10000000;
             const lon = FC.GPS_DATA.lon / 10000000;
@@ -343,8 +370,12 @@ gps.initialize = async function (callback) {
             $(".GPS_info td.distToHome").text(`${FC.GPS_DATA.distanceToHome} m`);
 
             if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
-                const positionalDop = FC.GPS_DATA.positionalDop / 100;
-                $(".GPS_info td.positionalDop").text(`${positionalDop.toFixed(2)}`);
+                const positionalDop = (FC.GPS_DATA.positionalDop / 100).toFixed(2);
+                const { qualityColor, stars } = getPositionalDopQuality(positionalDop);
+                const pdopHtml = `${stars} <span class="colorToggle ${qualityColor}">${positionalDop}</span>`;
+
+                $(".GPS_info td.positionalDop").html(pdopHtml);
+
                 if (hasMag) {
                     $(".GPS_info td.magDeclination").text(
                         `${FC.COMPASS_CONFIG.mag_declination.toFixed(1)} ${gpsUnitText}`,

src/tabs/gps.html

@@ -103,7 +103,7 @@
                             </tr>
                             <tr>
                                 <td i18n="gpsHeading"></td>
-                                <td class="heading"><a href="#" target="_blank">0.0000 deg</a></td>
+                                <td class="heading"></td>
                             </tr>
                             <tr>
                                 <td i18n="gpsLatLon"></td>
@@ -118,7 +118,7 @@
                                 <td class="positionalDop"></td>
                             </tr>
                             <tr>
-                                <td i18n="configurationMagDeclination"></td>
+                                <td i18n="gpsMagneticDeclination"></td>
                                 <td class="magDeclination"></td>
                             </tr>
                         </table>