Use dynamic recoloring for balloons, targets, cars, payloads, parachutes

js/tracker.js

@@ -74,8 +74,7 @@ var manual_pan = false;
 
 var car_index = 0;
 var car_colors = ["blue", "red", "green", "yellow", "teal", "purple"];
-var balloon_colors_name = ["red", "blue", "green", "purple", "orange", "cyan"];
-var balloon_colors = ["#f00", "blue", "green", "#c700e6", "#ff8a0f", "#0fffca"];
+var balloon_colors = ["red", "blue", "lime", "magenta", "#ffb300", "#00ffff"];
 
 var nyan_color_index = 0;
 var nyan_colors = ['nyan', 'nyan-coin', 'nyan-mon', 'nyan-pirate', 'nyan-cool', 'nyan-tothemax', 'nyan-pumpkin', 'nyan-afro', 'nyan-coin', 'nyan-mummy'];
@@ -2334,6 +2333,20 @@ function drawLaunchPrediction(vcallsign) {
     vehicle.prediction_launch_polyline.path_length = path_length;
 }
 
+// Takes in an SVG for a balloon, parachute, target, car, etc and sets a dynamic-color
+// variable which that SVG can use to recolor any relevant elements.
+// See balloon.svg, target.svg, etc for examples
+function recolorSVG(svg_path, color) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', svg_path, false);
+    xhr.send();
+
+    const parser = new DOMParser();
+    const svgDocument = parser.parseFromString(xhr.responseText, 'image/svg+xml');
+    svgDocument.documentElement.style.setProperty("--dynamic-color", color);
+    return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgDocument.documentElement.outerHTML);
+  }
+
 function redrawPrediction(vcallsign) {
     var vehicle = vehicles[vcallsign];
 	var data = vehicle.prediction.data;
@@ -2393,7 +2406,7 @@ function redrawPrediction(vcallsign) {
     if(vehicle.prediction_target) {
         vehicle.prediction_target.setLatLng(latlng);
     } else {
-        image_src = host_url + markers_url + "target-" + balloon_colors_name[vehicle.color_index] + ".png";
+        image_src = recolorSVG(host_url + markers_url + "target.svg", balloon_colors[vehicle.color_index]);
         predictionIcon = new L.icon({
             iconUrl: image_src,
             iconSize: [20,20],
@@ -3023,7 +3036,7 @@ function addPosition(position) {
         if(vcallsign.search(/(chase)/i) != -1) {
             vehicle_type = "car";
             color_index = car_index++ % car_colors.length;
-            image_src = host_url + markers_url + "car-" + car_colors[color_index] + ".png";
+            image_src = recolorSVG(host_url + markers_url + "car.svg", car_colors[color_index]);
             image_src_size = [55,25];
             image_src_offset = [0,-25];
 
@@ -3096,9 +3109,7 @@ function addPosition(position) {
                 // All the balloon are red.
                 color_index = 0;
             }
-
-            image_src = host_url + markers_url + "balloon-" +
-                        ((vcallsign == "PIE") ? "rpi" : balloon_colors_name[color_index]) + ".png";
+            image_src = recolorSVG(host_url + markers_url + "balloon.svg", balloon_colors[color_index]);
             image_src_size = [46,84];
             image_src_offset = [-35,-46];
 
@@ -3143,7 +3154,7 @@ function addPosition(position) {
             };
 
             marker.shadow = marker_shadow;
-            marker.balloonColor = (vcallsign == "PIE") ? "rpi" : balloon_colors_name[color_index];
+            marker.balloonColor = (vcallsign == "PIE") ? "rpi" : balloon_colors[color_index];
             marker.mode = 'balloon';
             marker.setMode = function(mode) {
                 if(this.mode == mode) return;
@@ -3156,9 +3167,9 @@ function addPosition(position) {
                     map.removeLayer(vehicle.subhorizon_circle);
                     map.removeLayer(vehicle.horizon_circle_title);
                     map.removeLayer(vehicle.subhorizon_circle_title);
-
+                    img_src = recolorSVG(host_url + markers_url + "payload.svg", this.balloonColor);
                     img = new L.icon ({
-                        iconUrl: host_url + markers_url + "payload-" + this.balloonColor + ".png",
+                        iconUrl: img_src,
                         iconSize: [17,18],
                         iconAnchor: [8,14],
                         tooltipAnchor: [0,-20],
@@ -3174,15 +3185,17 @@ function addPosition(position) {
                     }
 
                     if(mode == "parachute") {
+                        img_src = recolorSVG(host_url + markers_url + "parachute.svg", this.balloonColor);
                         img = new L.icon ({
-                            iconUrl: host_url + markers_url + "parachute-" + this.balloonColor + ".png",
+                            iconUrl: img_src,
                             iconSize: [46,84],
                             tooltipAnchor: [0,-98],
                             iconAnchor: [23,90],
                         });
                     } else {
+                        img_src = recolorSVG(host_url + markers_url + "balloon.svg", this.balloonColor);
                         img = new L.icon ({
-                            iconUrl: host_url + markers_url + "balloon-" + this.balloonColor + ".png",
+                            iconUrl: img_src,
                             iconSize: [46,84],
                             tooltipAnchor: [0,-98],
                             iconAnchor: [23,90],