Merge branch 'range_rings' into dev

public_html/config.js

@@ -97,6 +97,9 @@ OutlineMlatColor = '#4040FF';
 SiteCircles = true; // true to show circles (only shown if the center marker is shown)
 // In miles, nautical miles, or km (depending settings value 'DisplayUnits')
 SiteCirclesDistances = new Array(100,150,200);
+DefaultSiteCirclesCount = 3;
+DefaultSiteCirclesBaseDistance = 100;
+DefaultSiteCirclesInterval = 50;
 
 // Controls page title, righthand pane when nothing is selected
 PageName = "PiAware SkyAware";

public_html/index.html

@@ -150,6 +150,26 @@
 						<div class="settingsText">Group by Data Type</div>
 					</div>
 				</div>
+				<div id="range_ring_column" class="settingsOptionContainer">
+					<div class="infoBlockTitleText">Range Rings</div>
+				<form id="range_ring_form">
+					<div class="rangeOptions">
+						<label><span>Ring Count: </span></label>
+						<input id="range_ring_count" name="ringCount" type="text" class="rangeRingsInput" maxlength="1">
+					</div>
+					<div class="rangeOptions">
+						<label><span >Base Distance: </span></label>
+						<input id="range_ring_base" name="baseRing" type="text" class="rangeRingsInput" maxlength="3">
+					</div>
+					<div class="rangeOptions">
+						<label><span>Distance Interval:</span></label>
+						<input id="range_ring_interval" name="ringInterval" type="text" class="rangeRingsInput" maxlength="3">
+					</div>
+					<div class="set_range_rings_button">
+						<button id="range_rings_button" type="button">Set Range Rings</button>
+					</div>
+				</form>
+				</div>
 			</div>
 
 			<div id="map_container">

public_html/script.js

@@ -24,7 +24,7 @@ var SpecialSquawks = {
 };
 
 // Get current map settings
-var CenterLat, CenterLon, ZoomLvl, MapType;
+var CenterLat, CenterLon, ZoomLvl, MapType, SiteCirclesCount, SiteCirclesBaseDistance, SiteCirclesInterval;
 
 var Dump1090Version = "unknown version";
 var RefreshInterval = 1000;
@@ -263,6 +263,7 @@ function initialize() {
 
         // Set initial element visibility
         $("#show_map_button").hide();
+        $("#range_ring_column").hide();
         setColumnVisibility();
 
         // Initialize other controls
@@ -721,6 +722,31 @@ function initialize_map() {
                 feature.setStyle(markerStyle);
                 StaticFeatures.push(feature);
 
+		$('#range_ring_column').show();
+
+                setRangeRings();
+
+                $('#range_rings_button').click(onSetRangeRings);
+                $("#range_ring_form").validate({
+                    errorPlacement: function(error, element) {
+                        return true;
+                    },
+                    rules: {
+                        ringCount: {
+                            number: true,
+		            min: 0
+                        },
+                        baseRing: {
+                            number: true,
+                            min: 0
+                        },
+                        ringInterval: {
+                            number: true,
+                            min: 0
+                        }
+                    }
+                });
+
                 if (SiteCircles) {
                     createSiteCircleFeatures();
                 }
@@ -807,8 +833,8 @@ function createSiteCircleFeatures() {
         conversionFactor = 1609.0;
     }
 
-    for (var i=0; i < SiteCirclesDistances.length; ++i) {
+    for (var i=0; i < SiteCirclesCount; ++i) {
-            var distance = SiteCirclesDistances[i] * conversionFactor;
+	    var distance = (SiteCirclesBaseDistance + (SiteCirclesInterval * i)) * conversionFactor;
             var circle = make_geodesic_circle(SitePosition, distance, 360);
             circle.transform('EPSG:4326', 'EPSG:3857');
             var feature = new ol.Feature(circle);
@@ -1531,6 +1557,13 @@ function resetMap() {
         localStorage['CenterLon'] = CenterLon = DefaultCenterLon;
         localStorage['ZoomLvl']   = ZoomLvl = DefaultZoomLvl;
 
+        // Reset to default range rings
+        localStorage['SiteCirclesCount'] = SiteCirclesCount = DefaultSiteCirclesCount;
+        localStorage['SiteCirclesBaseDistance'] = SiteCirclesBaseDistance = DefaultSiteCirclesBaseDistance;
+        localStorage['SiteCirclesInterval'] = SiteCirclesInterval = DefaultSiteCirclesInterval;
+        setRangeRings();
+        createSiteCircleFeatures();
+
         // Set and refresh
         OLMap.getView().setZoom(ZoomLvl);
 	OLMap.getView().setCenter(ol.proj.fromLonLat([CenterLon, CenterLat]));
@@ -1933,3 +1966,27 @@ function updatePiAwareOrFlightFeeder() {
 	}
 	refreshPageTitle();
 }
+
+// Set range ring globals and populate form values
+function setRangeRings() {
+        SiteCirclesCount = Number(localStorage['SiteCirclesCount']) || DefaultSiteCirclesCount;
+        SiteCirclesBaseDistance = Number(localStorage['SiteCirclesBaseDistance']) || DefaultSiteCirclesBaseDistance;
+        SiteCirclesInterval = Number(localStorage['SiteCirclesInterval']) || DefaultSiteCirclesInterval;
+
+	// Populate text fields with current values
+        $('#range_ring_count').val(SiteCirclesCount);
+        $('#range_ring_base').val(SiteCirclesBaseDistance);
+        $('#range_ring_interval').val(SiteCirclesInterval);
+}
+
+// redraw range rings with form values
+function onSetRangeRings() {
+	// Save state to localStorage
+	localStorage.setItem('SiteCirclesCount', parseFloat($("#range_ring_count").val().trim()));
+	localStorage.setItem('SiteCirclesBaseDistance', parseFloat($("#range_ring_base").val().trim()));
+	localStorage.setItem('SiteCirclesInterval', parseFloat($("#range_ring_interval").val().trim()));
+
+	setRangeRings();
+
+	createSiteCircleFeatures();
+}

public_html/style.css

@@ -260,6 +260,21 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
     width: 50px;
 }
 
+.rangeRingsInput {
+    width: 30px;
+    float: right;
+}
+
+.rangeOptions {
+	width: 170px;
+	padding-top: 8px;
+	text-indent: 10px;
+}
+
+.set_range_rings_button {
+	padding-top: 8px;
+}
+
 select.error, textarea.error, input.error {
     color: #FF0000;
 }