[frontend] merge upstream pull request

bilde2910/Hauk#173 Support multiple distinct track colors
warren-bank · Feb 16, 2023 · 2d9e537 · 2d9e537
1 parent 7590d1c
commit 2d9e537
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/backend-php/dynamic.js.php b/backend-php/dynamic.js.php
@@ -13,7 +13,7 @@
 var MAX_ZOOM = <?php echo json_encode(getConfig("max_zoom")); ?>;
 var MAX_POINTS = <?php echo json_encode(getConfig("max_shown_pts")); ?>;
 var VELOCITY_DELTA_TIME = <?php echo json_encode(getConfig("v_data_points")); ?>;
-var TRAIL_COLOR = <?php echo json_encode(getConfig("trail_color")); ?>;
+var TRAIL_COLORS = <?php echo json_encode(getConfig("trail_colors")); ?>;
 var VELOCITY_UNIT = <?php echo json_encode(getConfig("velocity_unit")); ?>;
 var OFFLINE_TIMEOUT = <?php echo json_encode(getConfig("offline_timeout")); ?>;
 var REQUEST_TIMEOUT = <?php echo json_encode(getConfig("request_timeout")); ?>;
diff --git a/backend-php/include/config-sample.php b/backend-php/include/config-sample.php
@@ -267,8 +267,8 @@
 // Number of seconds of data that should be used to calculate velocity.
 "v_data_points"     => 2,
 
-// The color of the marker trails. HTML color name or #rrggbb hex color code.
-"trail_color"       => '#d80037',
+// The colors of the marker trails. An array of HTML color names or #rrggbb hex color codes.
+"trail_colors"      => ['#d80037', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'],
 
 // The unit of measurement of velocity. Valid are:
 // KILOMETERS_PER_HOUR, MILES_PER_HOUR, METERS_PER_SECOND

diff --git a/backend-php/include/inc.php b/backend-php/include/inc.php
@@ -147,7 +147,7 @@
     "max_cached_pts"        => 3,
     "max_shown_pts"         => 100,
     "v_data_points"         => 2,
-    "trail_color"           => '#d80037',
+    "trail_colors"          => ['#d80037', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'],
     "velocity_unit"         => KILOMETERS_PER_HOUR,
     "public_url"            => 'https://example.com/'
 

diff --git a/frontend/main.js b/frontend/main.js
@@ -743,7 +743,7 @@ function processUpdate(data, init) {
                 } else {
                     // If there is a marker, draw a line from its last location
                     // instead and move the marker.
-                    line = L.polyline([shares[user].marker.getLatLng(), [lat, lon]], {color: TRAIL_COLOR}).addTo(markerLayer);
+                    line = L.polyline([shares[user].marker.getLatLng(), [lat, lon]], {color: getTrackColor(user)}).addTo(markerLayer);
                     shares[user].marker.setLatLng([lat, lon]);
                 }
                 // Draw an accuracy circle if GPS accuracy was provided by the
@@ -906,6 +906,18 @@ function processUpdate(data, init) {
     }
 }
 
+var currColorIndex = 0;
+// Gets a new color from TRAIL_COLORS array for each new user of the share
+function getTrackColor(user) {
+    var trackColor = shares[user].color;
+    if (!trackColor) {
+        trackColor = TRAIL_COLORS[currColorIndex];
+        shares[user].color = trackColor;
+        currColorIndex=(currColorIndex+1) % TRAIL_COLORS.length;
+    }
+    return trackColor;
+}
+
 // Calculates the distance between two points on a sphere using the Haversine
 // algorithm.
 function distance(from, to) {