From c71c39b0d709de9ec09ca3317b3dda1c954013ef Mon Sep 17 00:00:00 2001 From: Eric Tran Date: Fri, 28 Feb 2020 20:54:22 +0000 Subject: [PATCH 1/6] Customizable range rings UI --- public_html/index.html | 20 ++++++++++++++++++++ public_html/style.css | 15 +++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/public_html/index.html b/public_html/index.html index 2c5aad8..65e1abc 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -150,6 +150,26 @@
Group by Data Type
+
+
Range Rings
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
diff --git a/public_html/style.css b/public_html/style.css index 6f3e020..0a3481d 100644 --- a/public_html/style.css +++ b/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-bottom: 5px; + text-indent: 10px; +} + +.set_range_rings_button { + padding-top: 5px; +} + select.error, textarea.error, input.error { color: #FF0000; } From 08a326eb7ca9bc9fdd36dd315927b6077d2d194c Mon Sep 17 00:00:00 2001 From: Eric Tran Date: Sun, 1 Mar 2020 17:20:53 +0000 Subject: [PATCH 2/6] JS code to handle custom range rings in SkyAware --- public_html/config.js | 3 +++ public_html/index.html | 2 +- public_html/script.js | 47 +++++++++++++++++++++++++++++++++++++++--- 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/public_html/config.js b/public_html/config.js index b9be157..da7a756 100644 --- a/public_html/config.js +++ b/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"; diff --git a/public_html/index.html b/public_html/index.html index 65e1abc..a3ec4d0 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -167,7 +167,7 @@
- +
diff --git a/public_html/script.js b/public_html/script.js index c2c3342..b596e10 100644 --- a/public_html/script.js +++ b/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; @@ -297,6 +297,27 @@ function initialize() { $("#altitude_filter_reset_button").click(onResetAltitudeFilter); + $('#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 + } + } + }); + $('#settingsCog').on('click', function() { $('#settings_infoblock').toggle(); }); @@ -508,6 +529,9 @@ function initialize_map() { CenterLat = Number(localStorage['CenterLat']) || DefaultCenterLat; CenterLon = Number(localStorage['CenterLon']) || DefaultCenterLon; ZoomLvl = Number(localStorage['ZoomLvl']) || DefaultZoomLvl; + SiteCirclesCount = Number(localStorage['SiteCirclesCount']) || DefaultSiteCirclesCount; + SiteCirclesBaseDistance = Number(localStorage['SiteCirclesBaseDistance']) || DefaultSiteCirclesBaseDistance; + SiteCirclesInterval = Number(localStorage['SiteCirclesInterval']) || DefaultSiteCirclesInterval; MapType = localStorage['MapType']; // Set SitePosition, initialize sorting @@ -809,8 +833,8 @@ function createSiteCircleFeatures() { conversionFactor = 1609.0; } - for (var i=0; i < SiteCirclesDistances.length; ++i) { - var distance = SiteCirclesDistances[i] * conversionFactor; + for (var i=0; i < SiteCirclesCount; ++i) { + 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); @@ -1493,6 +1517,9 @@ function resetMap() { localStorage['CenterLat'] = CenterLat = DefaultCenterLat; localStorage['CenterLon'] = CenterLon = DefaultCenterLon; localStorage['ZoomLvl'] = ZoomLvl = DefaultZoomLvl; + localStorage['SiteCirclesCount'] = SiteCirclesCount = DefaultSiteCirclesCount; + localStorage['SiteCirclesBaseDistance'] = SiteCirclesBaseDistance = DefaultSiteCirclesBaseDistance; + localStorage['SiteCirclesInterval'] = SiteCirclesInterval = DefaultSiteCirclesInterval; // Set and refresh OLMap.getView().setZoom(ZoomLvl); @@ -1889,3 +1916,17 @@ function updatePiAwareOrFlightFeeder() { } refreshPageTitle(); } + +// redraw range rings with form values +function onSetRangeRings() { + SiteCirclesCount = parseFloat($("#range_ring_count").val().trim()); + SiteCirclesBaseDistance = parseFloat($("#range_ring_base").val().trim()); + SiteCirclesInterval = parseFloat($("#range_ring_interval").val().trim()); + + // Save state to localStorage + localStorage.setItem('SiteCirclesCount', SiteCirclesCount); + localStorage.setItem('SiteCirclesBaseDistance', SiteCirclesBaseDistance); + localStorage.setItem('SiteCirclesInterval', SiteCirclesInterval); + + createSiteCircleFeatures(); +} From 8bb95e99566d097a26f41e7ea899b38cda0ce6ba Mon Sep 17 00:00:00 2001 From: Eric Tran Date: Mon, 2 Mar 2020 17:40:42 +0000 Subject: [PATCH 3/6] Put range ring initialization work into a function and populate text fields with currently set values --- public_html/script.js | 57 ++++++++++++++++++++++++++----------------- 1 file changed, 34 insertions(+), 23 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index b596e10..379b41a 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -297,26 +297,7 @@ function initialize() { $("#altitude_filter_reset_button").click(onResetAltitudeFilter); - $('#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 - } - } - }); + initializeRangeRings(); $('#settingsCog').on('click', function() { $('#settings_infoblock').toggle(); @@ -529,9 +510,6 @@ function initialize_map() { CenterLat = Number(localStorage['CenterLat']) || DefaultCenterLat; CenterLon = Number(localStorage['CenterLon']) || DefaultCenterLon; ZoomLvl = Number(localStorage['ZoomLvl']) || DefaultZoomLvl; - SiteCirclesCount = Number(localStorage['SiteCirclesCount']) || DefaultSiteCirclesCount; - SiteCirclesBaseDistance = Number(localStorage['SiteCirclesBaseDistance']) || DefaultSiteCirclesBaseDistance; - SiteCirclesInterval = Number(localStorage['SiteCirclesInterval']) || DefaultSiteCirclesInterval; MapType = localStorage['MapType']; // Set SitePosition, initialize sorting @@ -1917,6 +1895,39 @@ function updatePiAwareOrFlightFeeder() { refreshPageTitle(); } +// Setup custom range rings +function initializeRangeRings() { + 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); + + $('#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 + } + } + }); +} + // redraw range rings with form values function onSetRangeRings() { SiteCirclesCount = parseFloat($("#range_ring_count").val().trim()); From f13b96dc6bb98e73bcd7862fb65b37fcaa4707a1 Mon Sep 17 00:00:00 2001 From: Eric Tran Date: Mon, 2 Mar 2020 19:19:57 +0000 Subject: [PATCH 4/6] Refactor and reset range rings properly --- public_html/script.js | 66 ++++++++++++++++++++++--------------------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index 379b41a..e0af58f 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -297,7 +297,28 @@ function initialize() { $("#altitude_filter_reset_button").click(onResetAltitudeFilter); - initializeRangeRings(); + 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 + } + } + }); $('#settingsCog').on('click', function() { $('#settings_infoblock').toggle(); @@ -1495,9 +1516,13 @@ function resetMap() { localStorage['CenterLat'] = CenterLat = DefaultCenterLat; 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); @@ -1895,49 +1920,26 @@ function updatePiAwareOrFlightFeeder() { refreshPageTitle(); } -// Setup custom range rings -function initializeRangeRings() { +// 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_count').val(SiteCirclesCount); $('#range_ring_base').val(SiteCirclesBaseDistance); $('#range_ring_interval').val(SiteCirclesInterval); - - $('#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 - } - } - }); } // redraw range rings with form values function onSetRangeRings() { - SiteCirclesCount = parseFloat($("#range_ring_count").val().trim()); - SiteCirclesBaseDistance = parseFloat($("#range_ring_base").val().trim()); - SiteCirclesInterval = parseFloat($("#range_ring_interval").val().trim()); - // Save state to localStorage - localStorage.setItem('SiteCirclesCount', SiteCirclesCount); - localStorage.setItem('SiteCirclesBaseDistance', SiteCirclesBaseDistance); - localStorage.setItem('SiteCirclesInterval', SiteCirclesInterval); + 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(); } From 888e7de16d183c96a568adb81e7963433a259581 Mon Sep 17 00:00:00 2001 From: Eric Tran Date: Mon, 2 Mar 2020 19:57:28 +0000 Subject: [PATCH 5/6] Text formatting --- public_html/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public_html/index.html b/public_html/index.html index a3ec4d0..f5a6a50 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -155,15 +155,15 @@
- +
- +
- +
From bfc45dc81d44329535c50e4cf6fb805879ad2f04 Mon Sep 17 00:00:00 2001 From: Eric Tran Date: Mon, 2 Mar 2020 20:48:45 +0000 Subject: [PATCH 6/6] Handle cases where location is not set --- public_html/index.html | 4 ++-- public_html/script.js | 51 ++++++++++++++++++++++-------------------- public_html/style.css | 4 ++-- 3 files changed, 31 insertions(+), 28 deletions(-) diff --git a/public_html/index.html b/public_html/index.html index f5a6a50..d5c5712 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -150,9 +150,8 @@
Group by Data Type
-
+
Range Rings
-
@@ -170,6 +169,7 @@
+
diff --git a/public_html/script.js b/public_html/script.js index e0af58f..dff02cd 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -263,6 +263,7 @@ function initialize() { // Set initial element visibility $("#show_map_button").hide(); + $("#range_ring_column").hide(); setColumnVisibility(); // Initialize other controls @@ -297,29 +298,6 @@ function initialize() { $("#altitude_filter_reset_button").click(onResetAltitudeFilter); - 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 - } - } - }); - $('#settingsCog').on('click', function() { $('#settings_infoblock').toggle(); }); @@ -745,7 +723,32 @@ function initialize_map() { var feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(SitePosition))); 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(); } diff --git a/public_html/style.css b/public_html/style.css index 0a3481d..feaad14 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -267,12 +267,12 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right: .rangeOptions { width: 170px; - padding-bottom: 5px; + padding-top: 8px; text-indent: 10px; } .set_range_rings_button { - padding-top: 5px; + padding-top: 8px; } select.error, textarea.error, input.error {