Merge pull request #1341 from McGiverGim/fix_flickering_gps

Remove flickering when fix is unstable

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"]
             }
         ]
     },

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"
         ]
       }
     ]

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();

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({
+    var icon = new ol.style.Icon(({
-        image: new ol.style.Icon(({
+        anchor: [0.5, 1],
-            anchor: [0.5, 1],
+        opacity: 1,
-            opacity: 1,
+        scale: 0.5,
-            scale: 0.5,
+        src: ICON_IMAGE
-            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) {