Added optional range rings.

chasemapper/config.py

@@ -31,7 +31,15 @@ default_config = {
     'pred_desc_rate': 6.0,
     'pred_burst': 28000,
     'show_abort': True, # Show a prediction of an 'abort' paths (i.e. if the balloon bursts *now*)
-    'pred_update_rate': 15 # Update predictor every 15 seconds.
+    'pred_update_rate': 15, # Update predictor every 15 seconds.
+
+    # Range Rings
+    'range_rings_enabled': False,
+    'range_ring_quantity': 5,
+    'range_ring_spacing': 1000,
+    'range_ring_weight': 1.5,
+    'range_ring_color': 'red',
+    'range_ring_custom_color': '#FF0000'
     }
 
 
@@ -73,6 +81,14 @@ def parse_config_file(filename):
 	chase_config['pred_gfs_directory'] = config.get('predictor', 'gfs_directory')
 	chase_config['pred_model_download'] = config.get('predictor', 'model_download')
 
+	# Range Ring Settings
+	chase_config['range_rings_enabled'] = config.getboolean('range_rings', 'range_rings_enabled')
+	chase_config['range_ring_quantity'] = config.getint('range_rings', 'range_ring_quantity')
+	chase_config['range_ring_spacing'] = config.getint('range_rings', 'range_ring_spacing')
+	chase_config['range_ring_weight'] = config.getfloat('range_rings', 'range_ring_weight')
+	chase_config['range_ring_color'] = config.get('range_rings', 'range_ring_color')
+	chase_config['range_ring_custom_color'] = config.get('range_rings', 'range_ring_custom_color')
+
 	# Offline Map Settings
 	chase_config['tile_server_enabled'] = config.getboolean('offline_maps', 'tile_server_enabled')
 	chase_config['tile_server_path'] = config.get('offline_maps', 'tile_server_path')

horusmapper.cfg.example

@@ -141,3 +141,24 @@ habitat_call = N0CALL
 habitat_update_rate = 30
 
 
+#
+# Range Rings
+#
+[range_rings]
+range_rings_enabled = False
+
+# Number of range rings to display. The first ring starts at the spacing set below.
+range_ring_quantity = 5
+
+# Spacing between rings, in metres.
+range_ring_spacing = 1000
+
+# Weight of the ring, in pixels.
+range_ring_weight = 1.5
+
+# Color of the range rings.
+# Valid options are: red, black, blue, green, custom
+range_ring_color = red
+
+# Custom range ring color, in hexadecimal #RRGGBB
+range_ring_custom_color = #FF0000

static/js/balloon.js

@@ -164,7 +164,10 @@ function handleTelemetry(data){
         chase_car_position.latest_data = data.position;
         chase_car_position.heading = data.heading; // degrees true
         chase_car_position.speed = data.speed; // m/s
-        // TODO: Update car marker.
+
+        // Update range rings, if they are enabled.
+        recenterRangeRings(data.position);
+
         if (chase_car_position.marker == 'NONE'){
             // Create marker!
             chase_car_position.marker = L.marker(chase_car_position.latest_data,{title:"Chase Car", icon: carIcon, rotationOrigin: "center center"})

static/js/car.js

@@ -0,0 +1,110 @@
+//
+//   Project Horus - Browser-Based Chase Mapper - Car Position
+//
+//   Copyright (C) 2019  Mark Jessop <vk5qi@rfhead.net>
+//   Released under GNU GPL v3 or later
+//
+
+var range_rings = [];
+var range_rings_on = false;
+
+
+function destroyRangeRings(){
+	// Remove each range ring from the map.
+	range_rings.forEach(function(element){
+		element.remove();
+	});
+	// Clear the range ring array.
+	range_rings = [];
+	range_rings_on = false;
+}
+
+
+function createRangeRings(position){
+	var _ring_quantity = parseInt($('#ringQuantity').val());
+	var _ring_weight = parseFloat($('#ringWeight').val());
+	var _ring_spacing = parseFloat($('#ringSpacing').val());
+	var _ring_color = $('#ringColorSelect').val();
+	var _ring_custom_color = $('#ringCustomColor').val();
+
+	var _radius = _ring_spacing;
+	var _color = "#FF0000";
+
+	if(_ring_color == "red"){
+		_color = "#FF0000";
+	} else if (_ring_color == "black"){
+		_color = "#000000";
+	} else if (_ring_color == "blue"){
+		_color = "#0000FF";
+	} else if (_ring_color == "green"){
+		_color = "#00FF00";
+	} else if (_ring_color == "custom"){
+		_color = _ring_custom_color;
+	}
+
+	for(var i=0; i<_ring_quantity; i++){
+		var _ring = L.circle(position, {
+			fill: false,
+			color: _color,
+			radius: _radius,
+			weight: _ring_weight,
+			opacity: 0.7
+		}).addTo(map);
+		range_rings.push(_ring);
+
+		_radius += _ring_spacing;
+	}
+
+	range_rings_on = true;
+
+}
+
+
+function recenterRangeRings(position){
+
+	if (document.getElementById("rangeRingsEnabled").checked && (range_rings_on == false)){
+		// We have rings enabled, but haven't been able to create them yet.
+		// Create them.
+		updateRangeRings();
+		return;
+	} else {
+		// Otherwise, just update the centre position of each ring.
+		range_rings.forEach(function(element){
+			element.setLatLng(position);
+		});
+	}
+}
+
+
+function updateRangeRings(){
+
+	// Grab the range ring settings.
+	var _ring_enabled = document.getElementById("rangeRingsEnabled").checked;
+
+	// Check if we actually have a chase car position to work with.
+	var _position = chase_car_position.latest_data;
+
+	if (_position.length == 0){
+		// No position available yet. Don't do anything.
+		return;
+	}
+	// Otherwise, it looks like we have a position.
+
+	if ((_ring_enabled == true) && (range_rings_on == false)){
+		// The user had just enabled the range rings, so we need to create them.
+		createRangeRings(_position);
+
+
+	} else if ((_ring_enabled == false) && (range_rings_on == true)){
+		// The user has disabled the range rings, so we remove them from the map.
+		destroyRangeRings();
+
+	} else {
+		// Some other parameter has been changed.
+		// Destroy, then re-create the range rings.
+		destroyRangeRings();
+		createRangeRings(_position);
+
+	}
+
+}

static/js/settings.js

@@ -48,6 +48,15 @@ function serverSettingsUpdate(data){
     $("#habitatCall").val(chase_config.habitat_call);
     $("#abortPredictionEnabled").prop('checked', chase_config.show_abort);
 
+    // Range ring settings.
+    $('#ringQuantity').val(chase_config.range_ring_quantity.toFixed(0));
+    $('#ringSpacing').val(chase_config.range_ring_spacing.toFixed(0));
+    $('#ringWeight').val(chase_config.range_ring_weight.toFixed(1));
+    $('#ringColorSelect').val(chase_config.range_ring_color);
+    $('#ringCustomColor').val(chase_config.range_ring_custom_color);
+    $('#rangeRingsEnabled').prop('checked', chase_config.range_rings_enabled);
+
+
     // Clear and populate the profile selection.
     $('#profileSelect').children('option:not(:first)').remove();
 

templates/index.html

@@ -38,6 +38,7 @@
     <script src="{{ url_for('static', filename='js/settings.js') }}"></script>
     <script src="{{ url_for('static', filename='js/balloon.js') }}"></script>
     <script src="{{ url_for('static', filename='js/predictions.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/car.js') }}"></script>
 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
@@ -137,6 +138,23 @@
                 clientSettingsUpdate();
             });
 
+            // Handlers for range ring settings.
+            $("#ringQuantity").change(function(){
+                updateRangeRings();
+            });
+            $("#ringSpacing").change(function(){
+                updateRangeRings();
+            });
+            $("#ringWeight").change(function(){
+                updateRangeRings();
+            });
+            $("#ringColorSelect").change(function(){
+                updateRangeRings();
+            });
+            $("#ringCustomColor").change(function(){
+                updateRangeRings();
+            });
+
 
             // Changes to the telemetry source profile selection works a bit differently, as we 
             // need to do a fair bit of work on the server when these occur. These have a dedicated
@@ -481,6 +499,7 @@
             <ul role="tablist">
                 <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
                 <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
+                <li><a href="#car-settings" role="tab"><i class="fa fa-car"></i></a></li>
                 <li><a href="#df-settings" role="tab"><i class="fa fa-compass"></i></a></li>
             </ul>
         </div>
@@ -540,7 +559,24 @@
                     <b>Update Rate</b><input type="text" class="paramEntry" id="predUpdateRate"><br/>
                 </div>
                 </hr>
-                <h3>Habitat</h3>
+                </hr>
+                <h3>Other</h3>
+                <div class="paramRow">
+                    <button type="button" class="paramSelector" id="clearPayloadData">Clear Payload Data</button></br>
+                </div>
+                <div class="paramRow">
+                    <button type="button" class="paramSelector" id="clearCarData">Clear Chase-Car Track</button></br>
+                </div>
+            
+            </div>
+
+            <div class="sidebar-pane" id="car-settings">
+                <h1 class="sidebar-header">
+                    Car Settings
+                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
+                </h1>
+
+                <h3>Habitat Chase Car</h3>
                 <div class="paramRow">
                     <b>Show Nearby Chase-Cars:</b> <input type="checkbox" class="paramSelector" id="showOtherCars" onclick="show_habitat_vehicles();">
                 </div>
@@ -553,14 +589,35 @@
                 <div class="paramRow">
                     <b>Update Rate (seconds):</b><input type="text" class="paramEntry" id="habitatUpdateRate"><br/>
                 </div>
-                </hr>
+
-                <h3>Other</h3>
+                <h3>Range Rings</h3>
                 <div class="paramRow">
-                    <button type="button" class="paramSelector" id="clearPayloadData">Clear Payload Data</button></br>
+                    <b>Enable Range Rings</b> <input type="checkbox" class="paramSelector" id="rangeRingsEnabled" onclick='updateRangeRings();'>
                 </div>
                 <div class="paramRow">
-                    <button type="button" class="paramSelector" id="clearCarData">Clear Chase-Car Track</button></br>
+                    <b>Ring Qty</b><input type="text" class="paramEntry" id="ringQuantity" value="5"><br/>
                 </div>
+                <div class="paramRow">
+                    <b>Ring Spacing (m)</b><input type="text" class="paramEntry" id="ringSpacing" value="1000"><br/>
+                </div>
+                <div class="paramRow">
+                    <b>Ring Weight (px)</b><input type="text" class="paramEntry" id="ringWeight" value="2"><br/>
+                </div>
+                <div class="paramRow">
+                    <b>Ring Color</b>
+                    <select class="paramSelector" id="ringColorSelect" name="ringColorSelect">
+                    <option value='red'>Red</option>
+                    <option value='black'>Black</option>
+                    <option value='green'>Green</option>
+                    <option value='blue'>Blue</option>
+                    <option value='custom'>Custom</option>
+                    </select>
+                    <br/>
+                </div>
+                <div class="paramRow">
+                    <b>Custom Color</b><input type="text" class="paramEntry" id="ringCustomColor" value="#FF0000"><br/>
+                </div>
+
 
             </div>