GPS tab: New design for gps Status / Quality (#3566)

* small fixes * Ajust Colours when translated * new design * new design * new design * new design * new design * new design * new design
betaflight · Sep 9, 2023 · bb76112 · bb76112
1 parent 5f13c07
commit bb76112
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 19 deletions.
diff --git a/locales/en/messages.json b/locales/en/messages.json
@@ -2805,7 +2805,7 @@
         "message": "Sat ID"
     },
     "gpsSignalStatusQly": {
-        "message": "Status / Quality"
+        "message": "Status &nbsp;&nbsp;&nbsp; | &nbsp;Quality"
     },
     "gnssQualityNoSignal": {
         "message": "no signal"
@@ -2829,7 +2829,7 @@
         "message": "unused"
     },
     "gnssUsedUsed": {
-        "message": "used"
+        "message": "USED&nbsp;"
     },
     "gnssHealthyUnknown": {
         "message": "unknown"

diff --git a/src/css/main.less b/src/css/main.less
@@ -1725,13 +1725,22 @@ dialog {
     }
 }
 .colorToggle {
-    background-color: #e60000;
+    background-color: #ff0000;
     padding: 2px 5px;
     border-radius: 3px;
     color: #fff;
     font-size: 10px;
+    &.low {
+        background-color: #808080;
+    }
+    &.notReady {
+        background-color: #ffcc3f;
+    }
+    &.locked {
+        background-color: #ff9500;
+    }
     &.ready {
-        background-color: #56ac1d;
+        background-color: #008000;
     }
 }
 .buildInfoBtn {

diff --git a/src/js/tabs/gps.js b/src/js/tabs/gps.js
@@ -192,15 +192,14 @@ gps.initialize = async function (callback) {
             const qualityArray = ['gnssQualityNoSignal', 'gnssQualitySearching', 'gnssQualityAcquired', 'gnssQualityUnusable', 'gnssQualityLocked',
                 'gnssQualityFullyLocked', 'gnssQualityFullyLocked', 'gnssQualityFullyLocked'];
             const usedArray = ['gnssUsedUnused', 'gnssUsedUsed'];
-            const healthyArray = ['gnssHealthyUnknown', 'gnssHealthyHealthy', 'gnssHealthyUnhealthy', 'gnssHealthyUnknown'];
             let alt = FC.GPS_DATA.alt;
 
             $('.GPS_info span.colorToggle').text(FC.GPS_DATA.fix ? i18n.getMessage('gpsFixTrue') : i18n.getMessage('gpsFixFalse'));
             $('.GPS_info span.colorToggle').toggleClass('ready', FC.GPS_DATA.fix != 0);
 
             const gspUnitText = i18n.getMessage('gpsPositionUnit');
             $('.GPS_info td.alt').text(`${alt} m`);
-            $('.GPS_info td.latLon a').prop('href', url).text(`${lat.toFixed(4)} / ${lon.toFixed(4)} ${gspUnitText}`);
+            $('.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.speed').text(`${FC.GPS_DATA.speed} cm/s`);
             $('.GPS_info td.sats').text(FC.GPS_DATA.numSat);
@@ -266,28 +265,28 @@ gps.initialize = async function (callback) {
 
                         let quality = i18n.getMessage(qualityArray[FC.GPS_DATA.quality[i] & 0x7]);
                         let used = i18n.getMessage(usedArray[(FC.GPS_DATA.quality[i] & 0x8) >> 3]);
-                        let healthy = i18n.getMessage(healthyArray[(FC.GPS_DATA.quality[i] & 0x30) >> 4]);
+                        let usedColor = '';
 
                         // Add color to the text
-                        if (quality.startsWith('fully locked')) {
+                        // 2nd column: no signal = red, unusable = red, searching = red, locked = yellow and fully locked = green
+                        if (quality.startsWith(i18n.getMessage('gnssQualityFullyLocked'))) {
+                            usedColor = 'locked';
                             quality = `<span class="colorToggle ready">${quality}</span>`;
+                        } else if (quality.startsWith(i18n.getMessage('gnssQualityLocked'))) {
+                            usedColor = 'notReady';
+                            quality = `<span class="colorToggle locked">${quality}</span>`;
                         } else {
                             quality = `<span class="colorToggle">${quality}</span>`;
                         }
 
-                        if (used.startsWith('used')) {
-                            used = `<span class="colorToggle ready">${used}</span>`;
+                        // 1st column: unused = red, used = green
+                        if (used.startsWith(i18n.getMessage('gnssUsedUsed'))) {
+                            used = `<span class="colorToggle ready">&nbsp${used}&nbsp</span>`;
                         } else {
-                            used = `<span class="colorToggle">${used}</span>`;
+                            used = `<span class="colorToggle ${usedColor}">${used}</span>`;
                         }
 
-                        if (healthy.startsWith('healthy')) {
-                            healthy = `<span class="colorToggle ready">${healthy}</span>`;
-                        } else {
-                            healthy = `<span class="colorToggle">${healthy}</span>`;
-                        }
-
-                        rowContent += `<td>${quality} | ${used} | ${healthy}</td>`;
+                        rowContent += `<td>${used} | ${quality}</td>`;
                     }
                     eSsTable.append(`<tr>${rowContent}</tr>`);
                 }

diff --git a/src/js/tabs/setup.js b/src/js/tabs/setup.js
@@ -435,7 +435,7 @@ setup.initialize = function (callback) {
             const lon = FC.GPS_DATA.lon / 10000000;
             const url = `https://maps.google.com/?q=${lat},${lon}`;
             const gpsUnitText = i18n.getMessage('gpsPositionUnit');
-            $('.GPS_info td.latLon a').prop('href', url).text(`${lat.toFixed(4)} ${gpsUnitText} / ${lon.toFixed(4)} ${gpsUnitText}`);
+            $('.GPS_info td.latLon a').prop('href', url).text(`${lat.toFixed(4)} / ${lon.toFixed(4)} ${gpsUnitText}`);
         }
 
         function get_fast_data() {