From 8b5c74ded83e48848125c61103e28f9bf22d6db0 Mon Sep 17 00:00:00 2001 From: Brian Davenport Date: Fri, 24 May 2013 02:15:37 +0000 Subject: [PATCH] Split into multiple JS files, Selecting planes now works, Started work on settings window, Created extension.js, an area for new ideas to be tested or loaded out of. --- public_html/config.js | 16 +++ public_html/extension.js | 19 +++ public_html/gmap.html | 8 +- public_html/planeObject.js | 222 +++++++++++++++++++++++++++++++++++ public_html/script.js | 234 ++++--------------------------------- public_html/style.css | 2 + 6 files changed, 288 insertions(+), 213 deletions(-) create mode 100644 public_html/config.js create mode 100644 public_html/extension.js create mode 100644 public_html/planeObject.js diff --git a/public_html/config.js b/public_html/config.js new file mode 100644 index 0000000..85b5836 --- /dev/null +++ b/public_html/config.js @@ -0,0 +1,16 @@ +// ---------------------------------------------------- +// +// This file is to configure the configurable settings +// +// ---------------------------------------------------- + +// The Latitude and Longitude in decimal format +var CenterLat = 35.21928; +var CenterLon = -80.94406; + +// The google maps zoom level, 0 - 16, lower is further out +var ZoomLvl = 9; + +// The default marker color +var MarkerColor = "rgb(127, 127, 127)"; +var SelectedColor = "rgb(225, 225, 225)" diff --git a/public_html/extension.js b/public_html/extension.js new file mode 100644 index 0000000..f71fe17 --- /dev/null +++ b/public_html/extension.js @@ -0,0 +1,19 @@ +// ----------------------------------------------------- +// +// This file is so users can modify how the page acts +// without diving to deep in the code. This way we can +// also try out or hold custom code for ourselves and +// not check it into the repo. +// +// There is a div id'ed as plane_extension for use with +// this javascript file. +// ----------------------------------------------------- + +function extendedInitalize() { + // Write your initalization here + // Gets called just before the 1-sec function call loop is setup +} + +function extendedPulse() { + // This will get called every second after all the main functions +} diff --git a/public_html/gmap.html b/public_html/gmap.html index 0322c5a..ff359ad 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -1,14 +1,16 @@ + - + + + -
@@ -32,7 +34,7 @@
-
+
diff --git a/public_html/planeObject.js b/public_html/planeObject.js new file mode 100644 index 0000000..4d2a923 --- /dev/null +++ b/public_html/planeObject.js @@ -0,0 +1,222 @@ +var planeObject = { + oldlat : null, + oldlon : null, + oldalt : null, + + // Basic location information + altitude : null, + speed : null, + track : null, + latitude : null, + longitude : null, + + // Info about the plane + flight : null, + squawk : null, + icao : null, + is_selected : false, + + // Data packet numbers + messages : null, + seen : null, + + // Vaild... + vPosition : false, + vTrack : false, + + // GMap Details + marker : null, + markerColor : MarkerColor, + lines : [], + trackdata : new Array(), + trackline : new Array(), + + // When was this last updated? + updated : null, + reapable : false, + + // Appends data to the running track so we can get a visual tail on the plane + // Only useful for a long running browser session. + funcAddToTrack : function(){ + // TODO: Write this function out + this.trackdata.push([this.latitude, this.longitude, this.altitude, this.track, this.speed]); + this.trackline.push(new google.maps.LatLng(this.latitude, this.longitude)); + }, + + // This is to remove the line from the screen if we deselect the plane + funcClearLine : function() { + console.log("Clearing line for: " + this.icao); + if (this.line) { + this.line.setMap(null); + this.line = null; + } + }, + + // Should create an icon for us to use on the map... + funcGetIcon : function() { + // If this marker is selected we should make it lighter than the rest. + if (this.is_selected == true) { + this.markerColor = SelectedColor; + } + + // If the squawk code is one of the international emergency codes, + // match the info window alert color. + if (this.squawk == 7500) { + this.markerColor = "rgb(255, 85, 85)"; + } + if (this.squawk == 7600) { + this.markerColor = "rgb(0, 255, 255)"; + } + if (this.squawk == 7700) { + this.markerColor = "rgb(255, 255, 0)"; + } + + // If we have not overwritten color by now, an extension still could but + // just keep on trucking. :) + + return { + strokeWeight: (this.is_selected ? 2 : 1), + path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, + scale: 5, + fillColor: this.markerColor, + fillOpacity: 0.9, + rotation: this.track + }; + }, + + // TODO: Trigger actions of a selecting a plane + funcSelectPlane : function(selectedPlane){ + selectPlaneByHex(this.icao); + }, + + // Update our data + funcUpdateData : function(data){ + // So we can find out if we moved + var oldlat = this.latitude; + var oldlon = this.longitude; + var oldalt = this.altitude; + + // Update all of our data + this.updated = new Date().getTime(); + this.altitude = data.altitude; + this.speed = data.speed; + this.track = data.track; + this.latitude = data.lat; + this.longitude = data.lon; + this.flight = data.flight; + this.squawk = data.squawk; + this.icao = data.hex; + this.messages = data.messages; + this.seen = data.seen; + + // If no packet in over 58 seconds, consider the plane reapable + // This way we can hold it, but not show it just in case the plane comes back + if (this.seen > 58) { + this.reapable = true; + if (this.marker) { + this.marker.setMap(null); + this.marker = null; + } + if (this.line) { + this.line.setMap(null); + this.line = null; + } + if (SelectedPlane == this.icao) { + if (this.is_selected) { + this.is_selected = false; + } + SelectedPlane = null; + } + } else { + if (this.reapable == true) { + console.log(this.icao + ' has come back into range before the reaper!'); + } + this.reapable = false; + } + + // Is the position valid? + if ((data.validposition == 1) && (this.reapable == false)) { + this.vPosition = true; + + // Detech if the plane has moved + changeLat = false; + changeLon = false; + changeAlt = false; + if (oldlat != this.latitude) { + changeLat = true; + } + if (oldlon != this.longitude) { + changeLon = true; + } + if (oldalt != this.altitude) { + changeAlt = true; + } + // Right now we only care about lat/long, if alt is updated only, oh well + if ((changeLat == true) || (changeLon == true)) { + this.funcAddToTrack(); + if (this.is_selected) { + this.line = this.funcUpdateLines(); + } + } + this.marker = this.funcUpdateMarker(); + PlanesOnMap++; + } else { + this.vPosition = false; + } + + // Do we have a valid track for the plane? + if (data.validtrack == 1) + this.vTrack = true; + else + this.vTrack = false; + }, + + // Update our marker on the map + funcUpdateMarker: function() { + if (this.marker) { + this.marker.setPosition(new google.maps.LatLng(this.latitude, this.longitude)); + this.marker.setIcon(this.funcGetIcon()); + } else { + this.marker = new google.maps.Marker({ + position: new google.maps.LatLng(this.latitude, this.longitude), + map: GoogleMap, + icon: this.funcGetIcon(), + visable: true, + }); + + // This is so we can match icao address + this.marker.icao = this.icao; + + // Trap clicks for this marker. + google.maps.event.addListener(this.marker, 'click', this.funcSelectPlane); + } + + // Setting the marker title + if (this.flight.length == 0) { + this.marker.setTitle(this.hex); + } else { + this.marker.setTitle(this.flight+' ('+this.icao+')'); + } + return this.marker; + }, + + // Update our planes tail line, + // TODO: Make this multi colored based on options + // altitude (default) or speed + funcUpdateLines: function() { + if (this.line) { + var path = this.line.getPath(); + path.push(new google.maps.LatLng(this.latitude, this.longitude)); + } else { + console.log("Starting new line"); + this.line = new google.maps.Polyline({ + strokeColor: '#000000', + strokeOpacity: 1.0, + strokeWeight: 3, + map: GoogleMap, + path: this.trackline, + }); + } + return this.line; + }, +}; diff --git a/public_html/script.js b/public_html/script.js index dfc1101..d06266c 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -1,221 +1,16 @@ // Define our global variables var GoogleMap = null; -var CenterLat = 35.21928; -var CenterLon = -80.94406; -var ZoomLvl = 9; var Planes = {}; var PlanesOnMap = 0; var PlanesOnTable = 0; var PlanesToReap = 0; var SelectedPlane = null; -var planeObject = null; var iSortCol=-1; var bSortASC=true; var bDefaultSortASC=true; var iDefaultSortCol=3; -planeObject = { - oldlat : null, - oldlon : null, - oldalt : null, - - // Basic location information - altitude : null, - speed : null, - track : null, - latitude : null, - longitude : null, - - // Info about the plane - flight : null, - squawk : null, - icao : null, - - // Data packet numbers - messages : null, - seen : null, - - // Vaild... - vPosition : false, - vTrack : false, - - // GMap Details - marker : null, - lines : [], - trackdata : new Array(), - trackline : new Array(), - - // When was this last updated? - updated : null, - reapable : false, - - // Appends data to the running track so we can get a visual tail on the plane - // Only useful for a long running browser session. - funcAddToTrack : function(){ - // TODO: Write this function out - this.trackdata.push([this.latitude, this.longitude, this.altitude, this.track, this.speed]); - this.trackline.push(new google.maps.LatLng(this.latitude, this.longitude)); - }, - - // This is to remove the line from the screen if we deselect the plane - funcClearLine : function() { - console.log("Clearing line for: " + this.icao); - if (this.line) { - this.line.setMap(null); - this.line = null; - } - }, - - // Should create an icon for us to use on the map... - funcGetIcon : function() { - var selected = false; - var r = 255, g = 255, b = 0; - - return { - strokeWeight: (selected ? 2 : 1), - path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, - scale: 5, - fillColor: 'rgb('+r+','+g+','+b+')', - fillOpacity: 0.9, - rotation: this.track - }; - }, - - // TODO: Trigger actions of a selecting a plane - funcSelectPlane : function(selectedPlane){ - selectPlaneByHex(this.icao); - }, - - // Update our data - funcUpdateData : function(data){ - // So we can find out if we moved - var oldlat = this.latitude; - var oldlon = this.longitude; - var oldalt = this.altitude; - - // Update all of our data - this.updated = new Date().getTime(); - this.altitude = data.altitude; - this.speed = data.speed; - this.track = data.track; - this.latitude = data.lat; - this.longitude = data.lon; - this.flight = data.flight; - this.squawk = data.squawk; - this.icao = data.hex; - this.messages = data.messages; - this.seen = data.seen; - - // If no packet in over 58 seconds, consider the plane reapable - // This way we can hold it, but not show it just in case the plane comes back - if (this.seen > 58) { - this.reapable = true; - if (this.marker) { - this.marker.setMap(null); - this.marker = null; - } - if (this.line) { - this.line.setMap(null); - this.line = null; - } - if (SelectedPlane == this.icao) { - SelectedPlane = null; - } - } else { - if (this.reapable == true) { - console.log(this.icao + ' has come back into range before the reaper!'); - } - this.reapable = false; - } - - // Is the position valid? - if ((data.validposition == 1) && (this.reapable == false)) { - this.vPosition = true; - - // Detech if the plane has moved - changeLat = false; - changeLon = false; - changeAlt = false; - if (oldlat != this.latitude) { - changeLat = true; - } - if (oldlon != this.longitude) { - changeLon = true; - } - if (oldalt != this.altitude) { - changeAlt = true; - } - // Right now we only care about lat/long, if alt is updated only, oh well - if ((changeLat == true) || (changeLon == true)) { - this.funcAddToTrack(); - if (this.icao == SelectedPlane) { - this.line = this.funcUpdateLines(); - } - } - this.marker = this.funcUpdateMarker(); - PlanesOnMap++; - } else { - this.vPosition = false; - } - - // Do we have a valid track for the plane? - if (data.validtrack == 1) - this.vTrack = true; - else - this.vTrack = false; - }, - - // Update our marker on the map - funcUpdateMarker: function() { - if (this.marker) { - this.marker.setPosition(new google.maps.LatLng(this.latitude, this.longitude)); - this.marker.setIcon(this.funcGetIcon()); - } else { - this.marker = new google.maps.Marker({ - position: new google.maps.LatLng(this.latitude, this.longitude), - map: GoogleMap, - icon: this.funcGetIcon(), - visable: true, - }); - - // This is so we can match icao address - this.marker.icao = this.icao; - - // Trap clicks for this marker. - google.maps.event.addListener(this.marker, 'click', this.funcSelectPlane); - } - - // Setting the marker title - if (this.flight.length == 0) { - this.marker.setTitle(this.hex); - } else { - this.marker.setTitle(this.flight+' ('+this.icao+')'); - } - return this.marker; - }, - - // Update our planes tail line, - // TODO: Make this multi colored based on options - // altitude (default) or speed - funcUpdateLines: function() { - if (this.line) { - var path = this.line.getPath(); - path.push(new google.maps.LatLng(this.latitude, this.longitude)); - } else { - console.log("Starting new line"); - this.line = new google.maps.Polyline({ - strokeColor: '#000000', - strokeOpacity: 1.0, - strokeWeight: 3, - map: GoogleMap, - path: this.trackline, - }); - } - return this.line; - }, -}; - function fetchData() { $.getJSON('/dump1090/data.json', function(data) { PlanesOnMap = 0 @@ -342,12 +137,16 @@ function initialize() { GoogleMap.mapTypes.set("dark_map", styledMap); + // Did our crafty user need some setup? + extendedInitalize(); + // Setup our timer to poll from the server. window.setInterval(function() { fetchData(); refreshTableInfo(); refreshSelected() reaper(); + extendedPulse(); }, 1000); // Faster timer, smoother things @@ -378,8 +177,9 @@ function reaper() { } // Refresh the detail window about the plane +// TODO: Find out why when deselecting it sticks function refreshSelected() { - if ((SelectedPlane != "ICAO") && (SelectedPlane != null)) { + if (( SelectedPlane != "ICAO") && (SelectedPlane != null)) { var selected = Planes[SelectedPlane]; if (selected.flight == "") { selected.flight="N/A (" + selected.icao + ")"; @@ -574,12 +374,26 @@ function sortTable(szTableID,iCol) { } function selectPlaneByHex(hex) { + // If SelectedPlane has something in it, clear out the selected if (SelectedPlane != null) { + Planes[SelectedPlane].is_selected = false; Planes[SelectedPlane].funcClearLine(); - } - SelectedPlane = hex; - if (Planes[SelectedPlane].marker) { - Planes[SelectedPlane].funcUpdateLines(); + Planes[SelectedPlane].markerColor = MarkerColor; + // If the selected has a marker, make it not stand out + if (Planes[SelectedPlane].marker) { + Planes[SelectedPlane].marker.setIcon(Planes[SelectedPlane].funcGetIcon()); + } } + // If we are clicking the same plane, we are deselected it. + if (String(SelectedPlane) != String(hex)) { + // Assign the new selected + SelectedPlane = hex; + Planes[SelectedPlane].is_selected = true; + // If the selected has a marker, make it stand out + if (Planes[SelectedPlane].marker) { + Planes[SelectedPlane].funcUpdateLines(); + Planes[SelectedPlane].marker.setIcon(Planes[SelectedPlane].funcGetIcon()); + } + } } diff --git a/public_html/style.css b/public_html/style.css index f43b968..459903b 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -15,3 +15,5 @@ div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: #selectedinfotitle { font-size: larger; } #selectedinfo { font-size: small; } + +.notvisable { visable: none; }