From 51fe80b8c4556dd6bb32fae2ee2a0e1010cf373c Mon Sep 17 00:00:00 2001
From: olive <01ive@free.fr>
Date: Sat, 27 Jul 2024 12:11:10 +0200
Subject: [PATCH] Remove speed and vario gauges. Add duration instead of time.

---
 bundle.js  |  8 ++++++
 common.js  | 74 +++---------------------------------------------------
 index.css  | 23 ++++++-----------
 index.html | 11 +++-----
 4 files changed, 22 insertions(+), 94 deletions(-)

diff --git a/bundle.js b/bundle.js
index 1edab7d..5d05f24 100644
--- a/bundle.js
+++ b/bundle.js
@@ -107,6 +107,7 @@ class Flight {
         this.paragliding_info.calculate_speeds();
         this.paragliding_info.calculate_bearing();
         this.paragliding_info.calculate_finesse();
+        this.paragliding_info.calculate_duration();
         // Process flight info
         this.flight_info.number_of_point = this.paragliding_info.length();
         
@@ -245,6 +246,13 @@ class ParaglidingPoint {
         }
       }
     }
+
+    calculate_duration() {
+      this[0].duration = 0;
+      for(let i=1; i<this.length(); i++) {
+        this[i].duration = s_to_time(ms_to_s(this[i].timestamp - this[0].timestamp));
+      }
+    }
   
     // Multipoints method
 
diff --git a/common.js b/common.js
index 8c0c94c..8543f23 100644
--- a/common.js
+++ b/common.js
@@ -115,13 +115,6 @@ function update_position(position_index) {
     cursor.setLatLng(latlng);
     // Update info
     display_stats(paragliding_stats[position_index]);
-    // Update speed
-    gauge_data[0].value = paragliding_stats[position_index].speed;
-    Plotly.update('speed_gauge', gauge_data[0]);
-    // Update vario
-    vario_data[0].value = paragliding_stats[position_index].vertical_speed;
-    vario_data[0].delta.reference = paragliding_stats[(position_index==0 ? 0 : position_index-1)].vertical_speed;
-    Plotly.update('vario', vario_data[0]);
     // Update elevation
     let updt = {color: 'red'};
     elevation_graph.layout.shapes[0].x0=paragliding_stats[position_index].distance_total;
@@ -169,14 +162,11 @@ function get_vertical_speed(paragliding_data) {
 
 // Refresh point stats
 function display_stats(point) {
-    document.getElementById("point_info_time").innerHTML = point.time;
+    document.getElementById("point_info_time").innerHTML = point.duration;
     document.getElementById("point_info_elevation_gps").innerHTML = point.gpsAltitude.toPrecision(4) + "m";
     document.getElementById("point_info_terrain").innerHTML = point.terrain_elevation.toPrecision(4) + "m";
-    if(point.pressureAltitude != null) {
-        document.getElementById("point_info_elevation_pressure").innerHTML = point.pressureAltitude.toPrecision(4) + "m";
-    } else {
-        document.getElementById("point_info_elevation_pressure").innerHTML = "----";
-    }
+    document.getElementById("point_info_speed").innerHTML = point.speed.toPrecision(3) + "km/h";
+    document.getElementById("point_info_vario").innerHTML = point.vertical_speed.toPrecision(2) + "m/s";
     document.getElementById("point_info_distance").innerHTML = point.distance_total.toPrecision(4) + "m";
     document.getElementById("point_info_finesse").innerHTML = point.finesse.toPrecision(4);
     document.getElementById("point_info_bearing").innerHTML = point.bearing.toPrecision(4) + "°N";
@@ -214,58 +204,6 @@ function update_globals_infos(flight) {
 /* =========================================================================================================== */
 /* ======================================== User Interface parameters ======================================== */
 /* =========================================================================================================== */
-// Speed gauge
-let gauge_data = [
-    {
-        domain: { x: [0, 1], y: [0, 1] },
-        value: 0,
-        title: { text: "Speed km/h", font: {size: 14} },
-        type: "indicator",
-        mode: "gauge+number",
-        gauge: {
-              axis: { range: [null, 60, 10] }
-        }
-    }
-];
-let gauge_layout = { width: 150, height: 150,
-                        margin: {
-                            autoexpand: true,
-                            b: 0,
-                            l: 25,
-                            pad: 500,
-                            r: 25,
-                            t: 0 
-                        },
-                        paper_bgcolor:"rgba(0, 0, 0, 0)",
-                        plot_bgcolor:"rgba(0, 0, 0, 0)",
-                    };
-// Vario digital display
-let vario_data = [
-    {
-        title: { text: "Vario", font: { size: 14 } },
-        type: "indicator",
-        mode: "number+delta",
-        value: 300,
-        number: { suffix: " m/s", font: { size: 20 } },
-        delta: { position: "down", reference: 320, font: { size: 20 } },
-        domain: { x: [0, 1], y: [0, 1] }
-    }
-];
-let vario_layout = {
-    width: 120,
-    height: 120,
-    margin: { 
-                autoexpand: 0,
-                b: 0,
-                l: 25,
-                pad: 500,
-                r: 25,
-                t: 0 
-            },
-    paper_bgcolor:"rgba(0, 0, 0, 0)",
-    plot_bgcolor:"rgba(0, 0, 0, 0)",
-};
-
 // Create map layers
 var GeoportailFrance_plan = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={format}&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', {
     attribution: '<a target="_blank" href="https://www.geoportail.gouv.fr/">Geoportail France</a>',
@@ -358,8 +296,6 @@ function refresh_map(flight) {
 
     // Display all elements
     document.getElementById('title').style.visibility = 'unset';
-    document.getElementById('speed_gauge').style.visibility = 'unset';
-    document.getElementById('vario').style.visibility = 'unset';
     document.getElementById('elevation').style.visibility = 'unset';
     document.getElementById('point_info').style.visibility = 'unset';
     document.getElementById('zoom_control').style.visibility = 'unset';
@@ -493,8 +429,4 @@ function refresh_map(flight) {
     elevation_graph.on('plotly_hover', function(data){
         update_position(data.points[0].pointIndex);
         });
-    // Create speed graph
-    Plotly.newPlot('speed_gauge', gauge_data, gauge_layout, { displayModeBar: false });
-    // Create Vario
-    Plotly.newPlot('vario', vario_data, vario_layout, { displayModeBar: false });
 }
\ No newline at end of file
diff --git a/index.css b/index.css
index 4c38d11..85b94e3 100644
--- a/index.css
+++ b/index.css
@@ -140,21 +140,6 @@
     visibility: hidden;
 }
 
-#speed_gauge {
-    position: absolute;
-    bottom: 20vh;
-    z-index: 5;
-    cursor: move;
-}
-
-#vario {
-    position: absolute;
-    bottom: 20vh;
-    right: 0;
-    z-index: 5;
-    cursor: move;
-}
-
 #point_info {
     position: absolute;
     bottom: 0;
@@ -173,7 +158,7 @@
     visibility: hidden;
 }
 
-#point_info_time, #point_info_elevation_gps, #point_info_elevation_pressure, #point_info_distance, #point_info_finesse, #point_info_bearing, #point_info_terrain {
+#point_info_time, #point_info_elevation_gps, #point_info_distance, #point_info_finesse, #point_info_bearing, #point_info_terrain, #point_info_speed, #point_info_vario {
     flex: 1 0 auto;
     display: flex;
 }
@@ -183,6 +168,12 @@
 #point_info_terrain {
     color: orange;
 }
+#point_info_speed {
+    color: green;
+}
+#point_info_vario {
+    color: brown;
+}
 
 #title {
     position: absolute;
diff --git a/index.html b/index.html
index 12d13a7..d3c0cfe 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
 			<table>
 				<tr class="line_title"><td>GENERAL INFOS</td></tr>
 				<tr><td>date</td><td id="flight_date">__:__:__</td></tr>
-				<tr><td>time</td><td id="flight_time">----</td></tr>
+				<tr><td>time (utc)</td><td id="flight_time">----</td></tr>
 				<tr><td>logger</td><td id="logger">----</td></tr>
 				<tr><td>duration</td><td id="flight_duration">----</td></tr>
 				<tr><td>high</td><td id="flight_high">----</td></tr>
@@ -60,8 +60,6 @@
 			<div id="visibility_button"><div id="visibility_picture" onmouseover="document.getElementById('visibility_menu').style.visibility = 'visible'"></div></div>
 			<div id="visibility_menu" onmouseleave="this.style.visibility = 'hidden'">
 				<label><input type="checkbox" id="chkbx_title" value="title" checked onclick='visibility_checkbox_action(this);'>Global infos</label><br>
-				<label><input type="checkbox" id="chkbx_speed_gauge" value="speed_gauge" checked onclick='visibility_checkbox_action(this);'>Speed gauge</label><br>
-				<label><input type="checkbox" id="chkbx_vario" value="vario" checked onclick='visibility_checkbox_action(this);'>Variometer</label><br>
 				<label><input type="checkbox" id="chkbx_elevation" value="elevation" checked onclick='visibility_checkbox_action(this);'>Elevation</label><br>			
 				<label><input type="checkbox" id="chkbx_text" value="point_info" checked onclick='visibility_checkbox_action(this);'>Global infos</label><br>
 				<label><input type="checkbox" id="chkbx_zoom_control" value="zoom_control" checked onclick='visibility_checkbox_action(this);'>Zoom control</label><br>
@@ -71,13 +69,12 @@
 		</div>
 		<div id="map"></div>
 		<div id="elevation" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
-		<div id="speed_gauge" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
-		<div id="vario" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
 		<div id="point_info" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)">
-				<div>time&nbsp;</div><div id="point_info_time">__:__:__</div>
+				<div>duration&nbsp;</div><div id="point_info_time">__:__:__</div>
 				<div>elevation (gps)&nbsp;</div><div id="point_info_elevation_gps">----</div>
 				<div>terrain&nbsp;</div><div id="point_info_terrain">----</div>
-				<div>elevation (pressure)&nbsp;</div><div id="point_info_elevation_pressure">----</div>
+				<div>speed&nbsp;</div><div id="point_info_speed">----</div>
+				<div>vario&nbsp;</div><div id="point_info_vario">----</div>
 				<div>distance&nbsp;</div><div id="point_info_distance">----</div>
 				<div>finesse&nbsp;</div><div id="point_info_finesse">----</div>
 				<div>bearing&nbsp;</div><div id="point_info_bearing">----</div>