From 4391ea882b30f2148a7886f9016dec38fd0a3298 Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Wed, 3 Apr 2019 12:35:06 +0200
Subject: [PATCH] Remove flickering when fix is unstable

---
 manifest.json                               |   3 +-
 package.json                                |   3 +-
 src/images/icons/cf_icon_position_nofix.png | Bin 0 -> 5976 bytes
 src/js/tabs/gps.js                          |  13 +++++--
 src/js/tabs/map.js                          |  40 +++++++++++++++-----
 5 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 src/images/icons/cf_icon_position_nofix.png

diff --git a/manifest.json b/manifest.json
index a1fe4295fc..8b919cba54 100644
--- a/manifest.json
+++ b/manifest.json
@@ -53,7 +53,8 @@
                                           "js/tabs/map.js", 
                                           "/js/libraries/openlayers/ol.css", 
                                           "/js/libraries/openlayers/ol.js",
-                                          "/images/icons/cf_icon_position.png"]
+                                          "/images/icons/cf_icon_position.png",
+                                          "/images/icons/cf_icon_position_nofix.png"]
             }
         ]
     },
diff --git a/package.json b/package.json
index 313c9748d0..52d3e8c8e2 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
           "js/tabs/map.js",
           "/js/libraries/openlayers/ol.css",
           "/js/libraries/openlayers/ol.js",
-          "/images/icons/cf_icon_position.png"
+          "/images/icons/cf_icon_position.png",
+          "/images/icons/cf_icon_position_nofix.png"
         ]
       }
     ]
diff --git a/src/images/icons/cf_icon_position_nofix.png b/src/images/icons/cf_icon_position_nofix.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccb4bd52ea4ba303b2ec9eed538bc123e53ce3de
GIT binary patch
literal 5976
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
GLSTXcOOEaU

literal 0
HcmV?d00001

diff --git a/src/js/tabs/gps.js b/src/js/tabs/gps.js
index 1dc095e755..2429856de0 100644
--- a/src/js/tabs/gps.js
+++ b/src/js/tabs/gps.js
@@ -42,6 +42,9 @@ TABS.gps.initialize = function (callback) {
             MSP.send_message(MSPCodes.MSP_GPS_SV_INFO, false, false, update_ui);
         }
 
+        // To not flicker the divs while the fix is unstable
+        var gpsWasFixed = false;
+
         function update_ui() {
             var lat = GPS_DATA.lat / 10000000;
             var lon = GPS_DATA.lon / 10000000;
@@ -81,16 +84,20 @@ TABS.gps.initialize = function (callback) {
             if (navigator.onLine) {
                 $('#connect').hide();
 
-                //if(lat != 0 && lon != 0){
-                if(GPS_DATA.fix){
+                if (GPS_DATA.fix) {
+                   gpsWasFixed = true;
                    frame.contentWindow.postMessage(message, '*');
                    $('#loadmap').show();
                    $('#waiting').hide();
-                }else{
+                } else if (!gpsWasFixed) {
                    $('#loadmap').hide();
                    $('#waiting').show();
+                } else {
+                    message.action = 'nofix';
+                    frame.contentWindow.postMessage(message, '*');
                 }
             }else{
+                gpsWasFixed = false;
                 $('#connect').show();
                 $('#waiting').hide(); 
                 $('#loadmap').hide();
diff --git a/src/js/tabs/map.js b/src/js/tabs/map.js
index 22eab723d5..49aeae7f3b 100644
--- a/src/js/tabs/map.js
+++ b/src/js/tabs/map.js
@@ -1,12 +1,15 @@
 const DEFAULT_ZOOM = 16,
       DEFAULT_LON = 0,
       DEFAULT_LAT = 0,
-      ICON_IMAGE = '/images/icons/cf_icon_position.png';
+      ICON_IMAGE = '/images/icons/cf_icon_position.png',
+      ICON_IMAGE_NOFIX = '/images/icons/cf_icon_position_nofix.png';
 
 var iconGeometry,
     map,
     mapView,
-    marker;
+    iconStyle,
+    iconStyleNoFix,
+    iconFeature;
 
 window.onload = initializeMap;
 
@@ -30,17 +33,30 @@ function initializeMap() {
         controls: []
       });
 
-    var iconStyle = new ol.style.Style({
-        image: new ol.style.Icon(({
-            anchor: [0.5, 1],
-            opacity: 1,
-            scale: 0.5,
-            src: ICON_IMAGE
-        }))
+    var icon = new ol.style.Icon(({
+        anchor: [0.5, 1],
+        opacity: 1,
+        scale: 0.5,
+        src: ICON_IMAGE
+    }));
+
+    var iconNoFix = new ol.style.Icon(({
+        anchor: [0.5, 1],
+        opacity: 1,
+        scale: 0.5,
+        src: ICON_IMAGE_NOFIX
+    }));
+
+    iconStyle = new ol.style.Style({
+        image: icon 
+    });
+
+    iconStyleNoFix = new ol.style.Style({
+        image: iconNoFix
     });
 
     iconGeometry = new ol.geom.Point(lonLat);
-    var iconFeature = new ol.Feature({
+    iconFeature = new ol.Feature({
         geometry: iconGeometry
     });
 
@@ -73,11 +89,15 @@ function processMapEvents(e) {
             break;
 
         case 'center':
+            iconFeature.setStyle(iconStyle);
             var center = ol.proj.fromLonLat([e.data.lon, e.data.lat]);
             mapView.setCenter(center);
             iconGeometry.setCoordinates(center);
             break;
 
+        case 'nofix':
+            iconFeature.setStyle(iconStyleNoFix);
+            break;
         }
 
   } catch (e) {