diff --git a/public_html/gmap.html b/public_html/gmap.html index 9d41c9f..07935c0 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -13,7 +13,10 @@
-

Dump1090 - 00:00:00 UTC Reset Map

+

+ Dump1090 - 00:00:00 UTC + Reset Map +

Click on a plane for info.

diff --git a/public_html/script.js b/public_html/script.js index cb04863..eab9f48 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -11,31 +11,54 @@ if (localStorage['CenterLat']) { CenterLat = Number(localStorage['CenterLat']); if (localStorage['CenterLon']) { CenterLon = Number(localStorage['CenterLon']); } if (localStorage['ZoomLvl']) { ZoomLvl = Number(localStorage['ZoomLvl']); } -function getIconForPlane(plane) { +function getIconForPlane(plane, deselect) { + var selected = false; + var track = 0; var r = 255, g = 255, b = 0; var maxalt = 40000; // Max altitude in the average case - var invalt = maxalt-plane.altitude; - var selected = (Selected == plane.hex); - + var invalt = 0; + + // If there is plane object + if (plane) { + invalt = maxalt-plane.altitude; + if (Selected == plane.hex && !deselect) { + selected = true; + } + track = plane.track; + } + if (invalt < 0) invalt = 0; b = parseInt(255/maxalt*invalt); + return { strokeWeight: (selected ? 2 : 1), path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 5, fillColor: 'rgb('+r+','+g+','+b+')', fillOpacity: 0.9, - rotation: plane.track + rotation: track }; } +/* Gets hex code of selected plane as string or nothing. * + * Select not valid ICAO24 (hex) address to clear selection. */ function selectPlane(selectedPlane) { if (selectedPlane.length) this.planehex = selectedPlane; - if (!Planes[this.planehex]) return; + + // Deselect all planes + if (!Planes[this.planehex]) { + Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected], true)); + Selected = null; + refreshSelectedInfo(); + refreshTableInfo(); + return; + } + var old = Selected; Selected = this.planehex; + if (Planes[old]) { - /* Remove the highlight in the previously selected plane. */ + // Remove the highlight in the previously selected plane. Planes[old].marker.setIcon(getIconForPlane(Planes[old])); } Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected])); @@ -55,6 +78,7 @@ function refreshSelectedInfo() { var i = document.getElementById('selinfo'); var p = Planes[Selected]; + // If no plane is selected if (!p) { p = {}; p.flight = ""; @@ -82,30 +106,36 @@ function refreshSelectedInfo() { } function refreshTableInfo() { - var i = document.getElementById('tabinfo'); - var html = ''; html += ''; - html += ''; - html += ''; - html += ''; + html += ''; + html += ''; + html += ''; for (var p in Planes) { if (p == Selected) { - html += ''; + html += ''; } else { - html += ''; + html += ''; } + html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; - html += ''; html += ''; + html += ''; html += ''; } html += '
FlightSquawkAltitudeSpeedTrackSeenMsgs
hexFlightSquawkAltitudeSpeedTrackMsgsSeen
' + Planes[p].hex + '' + Planes[p].flight + '' + Planes[p].squawk + '' + Planes[p].altitude + '' + Planes[p].speed + '' + Planes[p].track + '' + Planes[p].seen + '' + Planes[p].messages + '' + Planes[p].seen + '
'; - i.innerHTML = html; + + document.getElementById('tabinfo').innerHTML = html; + + // Click event for table - lags sometimes for some reason? + $('#tableinfo').find('tr').click( function(){ + var hex = $(this).find('td:first').text(); + selectPlane(hex); + }); } function fetchData() { @@ -258,7 +288,9 @@ function initialize() { }); google.maps.event.addListener(Map, 'click', function() { - selectPlane("xyzxyz"); // Select not valid ICAO24 address to clear selection. + if (Selected) { + selectPlane("xyzxyz"); // Select not valid ICAO24 (hex) address to clear selection. + } Selected = null; refreshSelectedInfo(); refreshTableInfo(); @@ -277,5 +309,6 @@ function initialize() { refreshGeneralInfo(); refreshSelectedInfo(); + refreshTableInfo(); resizeMap(); } diff --git a/public_html/style.css b/public_html/style.css index 1226b04..3af14ff 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -38,7 +38,7 @@ body { height: 100%; margin: 0; padding: 0; } font-family: monospace; } -#tabinfo { +#tableinforow { cursor: pointer; }