make segments be separate lines without connections, try to make track drawing code...

[lantea.git] / js / map.js

diff --git a/js/map.js b/js/map.js
index b3ddc11cc6343346db25cf5df3edc83b7d17d081..2532a034aeb76d92b1bdc5e6141cfd99cce604fb 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -129,6 +129,8 @@ function loadPrefs(aEvent) {
 
       document.getElementById("body").addEventListener("keydown", mapEvHandler, false);
 
+      document.addEventListener("visibilitychange", visibilityEvHandler, false);
+
       console.log("Events added.");
       document.getElementById("copyright").innerHTML =
           gMapStyles[gMap.activeMap].copyright;
@@ -185,11 +187,14 @@ function loadPrefs(aEvent) {
       if (aTPoint) {
         // Add in front and return new length.
         var tracklen = gTrack.unshift(aTPoint);
-        // Redraw track periodically, larger distance the longer it gets.
+        // Redraw track periodically, larger distance the longer it gets
+        // (but clamped to the first value over a certain limit).
         // Initial paint will do initial track drawing.
         if (tracklen % redrawBase == 0) {
           drawTrack();
-          redrawBase = tracklen;
+          if (redrawBase < 1000) {
+            redrawBase = tracklen;
+          }
         }
       }
       else {
@@ -377,7 +382,9 @@ var gMap = {
               var imgObj = new Image();
               imgObj.onload = function() {
                 gMap.loadImageToTexture(imgObj, aTileKey);
-                window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+                if (document.hidden != true) { // Only draw if we're actually visible.
+                  window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+                }
                 URL.revokeObjectURL(imgURL);
               }
               imgObj.src = imgURL;
@@ -386,7 +393,9 @@ var gMap = {
         }
       }
     }
-    window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+    if (document.hidden != true) { // Only draw if we're actually visible.
+      window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+    }
   },
 
   drawGL: function() {
@@ -645,13 +654,15 @@ function decodeIndex(encodedIdx) {
 }
 
 function drawTrack() {
-  gLastDrawnPoint = null;
-  gCurPosMapCache = undefined;
-  gTrackContext.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height);
-  if (gTrack.length) {
-    for (var i = 0; i < gTrack.length; i++) {
-      drawTrackPoint(gTrack[i].coords.latitude, gTrack[i].coords.longitude,
-                     (i + 1 >= gTrack.length));
+  if (gTrackContext && (document.hidden != true)) { // Only draw if we're actually visible.
+    gLastDrawnPoint = null;
+    gCurPosMapCache = undefined;
+    gTrackContext.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height);
+    if (gTrack.length) {
+      for (var i = 0; i < gTrack.length; i++) {
+        drawTrackPoint(gTrack[i].coords.latitude, gTrack[i].coords.longitude,
+                      (i + 1 >= gTrack.length || gTrack[i+1].beginSegment));
+      }
     }
   }
 }
@@ -670,22 +681,23 @@ function drawTrackPoint(aLatitude, aLongitude, lastPoint) {
     gTrackContext.lineCap = "round";
     gTrackContext.lineJoin = "round";
   }
+  // This breaks optimiziation, so make sure to reset optimization.
   if (!gLastDrawnPoint || gLastDrawnPoint == trackpoint) {
-    // This breaks optimiziation, so make sure to close path and reset optimization.
-    if (gLastDrawnPoint && gLastDrawnPoint.optimized)
+    trackpoint.optimized = false;
+    // Close path if one was open.
+    if (gLastDrawnPoint && gLastDrawnPoint.optimized) {
       gTrackContext.stroke();
+    }
+  }
+  if (!gLastDrawnPoint || (gLastDrawnPoint == trackpoint) || !gLastDrawnPoint.optimized) {
+    // Start drawing a segment.
     gTrackContext.beginPath();
-    trackpoint.optimized = false;
     gTrackContext.arc(mappos.x, mappos.y,
                       gTrackContext.lineWidth, 0, Math.PI * 2, false);
     gTrackContext.fill();
   }
   else {
-    if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
-      gTrackContext.beginPath();
-      gTrackContext.moveTo(Math.round((gLastDrawnPoint.x - gMap.pos.x) / gMap.zoomFactor + gMap.width / 2),
-                           Math.round((gLastDrawnPoint.y - gMap.pos.y) / gMap.zoomFactor + gMap.height / 2));
-    }
+    // Continue drawing segment, close if needed.
     gTrackContext.lineTo(mappos.x, mappos.y);
     if (!trackpoint.optimized)
       gTrackContext.stroke();
@@ -729,6 +741,54 @@ function undrawCurrentLocation() {
   }
 }
 
+function calcTrackDuration() {
+  // Get the duration of the track in s.
+  var tDuration = 0;
+  if (gTrack.length > 1) {
+    for (var i = 1; i < gTrack.length; i++) {
+      if (!gTrack[i].beginSegment) {
+        tDuration += (gTrack[i].time - gTrack[i-1].time);
+      }
+    }
+  }
+  return Math.round(tDuration / 1000); // The timestamps are in ms but we return seconds.
+}
+
+function calcTrackLength() {
+  // Get the length of the track in km.
+  var tLength = 0;
+  if (gTrack.length > 1) {
+    for (var i = 1; i < gTrack.length; i++) {
+      if (!gTrack[i].beginSegment) {
+        tLength += getPointDistance(gTrack[i-1].coords, gTrack[i].coords);
+      }
+    }
+  }
+  return tLength;
+}
+
+function getPointDistance(aGPSPoint1, aGPSPoint2) {
+  // Get the distance in km between the two given GPS points.
+  // See http://stackoverflow.com/questions/365826/calculate-distance-between-2-gps-coordinates
+  // Earth is almost exactly a sphere and we calculate small distances on the surface, so we can do spherical great-circle math.
+  // Also see http://en.wikipedia.org/wiki/Great-circle_distance
+  var R = 6371; // km
+  var dLat = deg2rad(aGPSPoint2.latitude - aGPSPoint1.latitude);
+  var dLon = deg2rad(aGPSPoint2.longitude - aGPSPoint1.longitude);
+  var lat1 = deg2rad(aGPSPoint1.latitude);
+  var lat2 = deg2rad(aGPSPoint2.latitude);
+
+  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
+          Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
+  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+  return R * c;
+}
+
+function deg2rad(aDegreeValue) {
+  // Convert an angle in degrees to radiants.
+  return aDegreeValue * (Math.PI / 180);
+}
+
 var mapEvHandler = {
   handleEvent: function(aEvent) {
     var touchEvent = aEvent.type.indexOf('touch') != -1;
@@ -960,6 +1020,15 @@ var mapEvHandler = {
   }
 };
 
+function visibilityEvHandler() {
+  // Immediately draw if we just got visible.
+  if (document.hidden != true) {
+    gMap.draw();
+  }
+  // No need to handle the event where we become invisible as we care only draw
+  // when we are visible anyhow.
+}
+
 var geofake = {
   tracking: false,
   lastPos: {x: undefined, y: undefined},