Add play feature

common.js

@@ -23,6 +23,50 @@ function display_stats(point) {
     document.getElementById("point_info_bearing").innerHTML = point.bearing.toPrecision(4) + "°N";
 }
 
+// Auto play fucntions
+var play_index = 0;
+var auto_play_timer = 0;
+var play_time_period;
+
+function play_cmd() {
+    if (typeof paragliding_info !== 'undefined') {
+        if(auto_play_timer == 0) {
+            document.getElementById("play_picture").style.backgroundImage="url(ressources/pause.png)";
+            play();
+        } else {
+            document.getElementById("play_picture").style.backgroundImage="url(ressources/play.png)";
+            stop();
+        }
+    }
+}
+
+function speed_cmd() {
+    if ( (typeof paragliding_info !== 'undefined') && (auto_play_timer != 0) ) {
+        play_time_period /= 2;
+        clearInterval(auto_play_timer);
+        auto_play_timer = setInterval(play_period, play_time_period);
+    }
+}
+
+function play() {
+    play_time_period = paragliding_info[1].timestamp - paragliding_info[0].timestamp;
+    auto_play_timer = setInterval(play_period, play_time_period);
+}
+
+function play_period() {
+    play_index++;
+    if(play_index >= paragliding_stats.length()) {
+        play_cmd();
+    } else {
+        update_position(play_index);
+    }
+}
+
+function stop() {
+    clearInterval(auto_play_timer);
+    auto_play_timer = 0;
+}
+
 function update_position(position_index) {
     latlng = new leaflet.LatLng(0, 0);
     // Update cursor
@@ -45,6 +89,8 @@ function update_position(position_index) {
     elevation_graph.layout.shapes[0].label.text=paragliding_stats[position_index].gpsAltitude.toPrecision(4) + 'm<br>' 
         + (paragliding_stats[position_index].distance_total/1000).toPrecision(4) + 'km';
     Plotly.restyle('elevation', updt);
+    // Update auto play index
+    play_index = position_index;
 }
 
 // Create elevation data

index.css

@@ -6,28 +6,87 @@
     display: none;
 }
 
+#menu_button {
+    position: absolute;
+    top: 0;
+    margin-left: 10px;
+    margin-top: 20px;
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+    z-index: 5;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+}
+
 #my-file-selector {
     display: block;
     cursor: pointer;
-    background-color: whitesmoke;
+    background-color: white;
     background-image: url("ressources/folder.png");
     background-repeat: no-repeat;
     background-position: center;
     height: 100%;
+    border-radius: 2px;
 }
 
-#menu_button {
+#my-file-selector:hover {
+    background-color: whitesmoke;
+}
+
+#play_stop_button {
     position: absolute;
     top: 0;
-    margin-left: 10px;
+    margin-left: 65px;
     margin-top: 20px;
+    width: 25px;
+    height: 25px;
+    border-radius: 4px;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    z-index: 5;
+}
+
+#play_picture {
+    display: block;
+    cursor: pointer;
+    background-color: white;
+    background-image: url("ressources/play.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 2px;
+    height: 100%;
+    width: 100%;
+}
+
+#play_picture:hover {
     background-color: whitesmoke;
-    width: 50px;
-    height: 50px;
-    border-radius: 5px;
-    border: 2px solid lightgray;
+}
+
+#speed_button {
+    position: absolute;
+    top: 0;
+    margin-left: 95px;
+    margin-top: 20px;
+    width: 25px;
+    height: 25px;
+    border-radius: 4px;
+    border: 2px solid rgba(0, 0, 0, 0.2);
     z-index: 5;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+
+#speed_picture {
+    display: block;
+    cursor: pointer;
+    background-color: white;
+    background-image: url("ressources/fastforward.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 2px;
+    height: 100%;
+    width: 100%;
+}
+
+#speed_picture:hover {
+    background-color: whitesmoke;
 }
 
 #menu {

index.html

@@ -31,6 +31,8 @@
 				<label id="my-file-selector" for="file-selector"></label>
 				<input type="file" id="file-selector" accept=".igc">
 			</div>
+			<div id="play_stop_button"><div id="play_picture" onclick="play_cmd()"></div></div>
+			<div id="speed_button"><div id="speed_picture" onclick="speed_cmd()"></div></div>
 			<div id="map"></div>
 			<div id="elevation"></div>
 			<div id="speed_gauge"></div>
@@ -145,23 +147,36 @@
 				var last_item = Object.keys(paragliding_stats).length-1 ;
 				var start_icon = L.icon({iconUrl: 'ressources/marker-icon-g.png', iconSize: [25, 41], iconAnchor: [12, 41]});
 				var end_icon = L.icon({iconUrl: 'ressources/marker-icon-r.png', iconSize: [25, 41], iconAnchor: [12, 41]});
-				L.marker([paragliding_stats[0].latitude, paragliding_stats[0].longitude], {icon: start_icon}).addTo(map).bindPopup('Start');
-				L.marker([paragliding_stats[last_item].latitude, paragliding_stats[last_item].longitude], {icon: end_icon}).addTo(map).bindPopup('End');			
+				L.marker([paragliding_stats[0].latitude, paragliding_stats[0].longitude], {icon: start_icon}).addTo(map);
+				L.marker([paragliding_stats[last_item].latitude, paragliding_stats[last_item].longitude], {icon: end_icon}).addTo(map);			
 				var paraglider_icon = L.icon({iconUrl: 'ressources/paraglider.png', iconSize: [25, 23], iconAnchor: [12, 20]});
 				cursor = L.marker([paragliding_stats[0].latitude, paragliding_stats[0].longitude], {icon: paraglider_icon});
-				cursor.addTo(map).bindPopup('Cursor');
+				cursor.addTo(map);
 
 				// Create trace
 				var latlngs = [];
 				for(let point in paragliding_stats) {
 					latlngs.push([paragliding_stats[point].latitude, paragliding_stats[point].longitude]);
 				}
 				geo = L.polyline(latlngs, {color: 'red'});
+				var autorize_map_mousemove = true;
 				map.on('mousemove', function(ev) {
-						var latlng = map.mouseEventToLatLng(ev.originalEvent);
-						closest_point_index = closest_point(latlng.lat, latlng.lng);
-						update_position(closest_point_index);
+						if( (auto_play_timer == 0) && (autorize_map_mousemove) ) {
+							var latlng = map.mouseEventToLatLng(ev.originalEvent);
+							closest_point_index = closest_point(latlng.lat, latlng.lng);
+							update_position(closest_point_index);
+						}
 					});
+				map.on('click', function(ev) {
+					if(autorize_map_mousemove) {
+						autorize_map_mousemove = false;
+					} else {
+						autorize_map_mousemove = true;
+					}
+					var latlng = map.mouseEventToLatLng(ev.originalEvent);
+					closest_point_index = closest_point(latlng.lat, latlng.lng);
+					update_position(closest_point_index);
+				});
 				geo.addTo(map);
 
 				// zoom the map to the polyline