From 72142fac840d31be714a93d56adc91e4f582bf94 Mon Sep 17 00:00:00 2001 From: terribl Date: Tue, 14 May 2013 12:55:16 +0300 Subject: [PATCH] Combined effort and code from bdavenport and me. Added quite a lot of new things this time - see modified files or just be brave and try :) modified: public_html/gmap.html modified: public_html/script.js modified: public_html/style.css --- public_html/gmap.html | 9 +- public_html/script.js | 258 +++++++++++++++++++++++++++--------------- public_html/style.css | 64 ++++++----- 3 files changed, 202 insertions(+), 129 deletions(-) diff --git a/public_html/gmap.html b/public_html/gmap.html index 07935c0..b26217b 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -10,17 +10,16 @@ -
+
-

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

+

Dump1090 - 00:00:00 UTC

Click on a plane for info.

+
+ diff --git a/public_html/script.js b/public_html/script.js index eab9f48..a2af763 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -45,9 +45,11 @@ function getIconForPlane(plane, deselect) { function selectPlane(selectedPlane) { if (selectedPlane.length) this.planehex = selectedPlane; - // Deselect all planes + // Deselect planes if (!Planes[this.planehex]) { - Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected], true)); + if (Planes[Selected].marker) { + Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected], true)); + } Selected = null; refreshSelectedInfo(); refreshTableInfo(); @@ -57,11 +59,14 @@ function selectPlane(selectedPlane) { var old = Selected; Selected = this.planehex; - if (Planes[old]) { + if (Planes[old] && Planes[old].validposition) { // Remove the highlight in the previously selected plane. Planes[old].marker.setIcon(getIconForPlane(Planes[old])); } - Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected])); + + if (Planes[Selected].validposition) { + Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected])); + } refreshSelectedInfo(); refreshTableInfo(); @@ -70,8 +75,8 @@ function selectPlane(selectedPlane) { function refreshGeneralInfo() { var i = document.getElementById('geninfo'); - i.innerHTML = PlanesOnGrid + ' planes on grid.
'; - i.innerHTML += PlanesOnMap + ' planes on map.'; + i.innerHTML += PlanesOnMap + ' planes on map.
'; + i.innerHTML = PlanesOnGrid + ' planes on grid.'; } function refreshSelectedInfo() { @@ -95,10 +100,18 @@ function refreshSelectedInfo() { var html = ''; html += ''; html += ''; - html += ''; + if (p.squawk != "0000") { + html += ''; + } else { + html += ''; + } html += ''; html += ''; - html += ''; + if (p.validposition) { + html += ''; + } else { + html += ''; + } html += ''; html += ''; html += '
'+p.flight+' 
ICAO:'+p.hex+'
Squawk:'+p.squawk+'
Squawk:'+p.squawk+'
Squawk:n/a
Altitude:'+p.altitude+' feet
Speed:'+p.speed+' knots
Coordinates:'+p.lat+', '+p.lon+'
Coordinates:'+p.lat+', '+p.lon+'
Coordinates:n/a
Messages:'+p.messages+'
Seen:'+p.seen+' sec
'; @@ -112,19 +125,23 @@ function refreshTableInfo() { html += 'SpeedTrack'; html += 'MsgsSeen'; for (var p in Planes) { + var specialStyle = ""; if (p == Selected) { html += ''; } else { html += ''; } - html += '' + Planes[p].hex + ''; - html += '' + Planes[p].flight + ''; - html += '' + Planes[p].squawk + ''; - html += '' + Planes[p].altitude + ''; - html += '' + Planes[p].speed + ''; - html += '' + Planes[p].track + ''; - html += '' + Planes[p].messages + ''; - html += '' + Planes[p].seen + ''; + if (Planes[p].validposition) { + specialStyle = 'bold'; + } + html += '' + Planes[p].hex + ''; + html += '' + Planes[p].flight + ''; + html += '' + Planes[p].squawk + ''; + html += '' + Planes[p].altitude + ''; + html += '' + Planes[p].speed + ''; + html += '' + Planes[p].track + ''; + html += '' + Planes[p].messages + ''; + html += '' + Planes[p].seen + ''; html += ''; } html += ''; @@ -139,75 +156,117 @@ function refreshTableInfo() { } function fetchData() { - $.getJSON('data.json', function(data) { - var stillhere = {} - PlanesOnMap = 0; - - for (var j=0; j < data.length; j++) { - var plane = data[j]; - stillhere[plane.hex] = true; - plane.flight = $.trim(plane.flight); - - // Show only planes with position - if (plane.validposition == 1) { - var marker = null; - PlanesOnMap++; - - if (Planes[plane.hex]) { - // Move and refresh old plane on map - var myplane = Planes[plane.hex]; - marker = myplane.marker; - var icon = marker.getIcon(); - var newpos = new google.maps.LatLng(plane.lat, plane.lon); - marker.setPosition(newpos); - marker.setIcon(getIconForPlane(plane)); - myplane.altitude = plane.altitude; - myplane.speed = plane.speed; - myplane.lat = plane.lat; - myplane.lon = plane.lon; - myplane.track = plane.track; - myplane.flight = plane.flight; - myplane.seen = plane.seen; - myplane.squawk = plane.squawk; - myplane.messages = plane.messages; - if (myplane.hex == Selected) - refreshSelectedInfo(); - } else { - // Add new plane to map - marker = new google.maps.Marker({ - position: new google.maps.LatLng(plane.lat, plane.lon), - map: Map, - icon: getIconForPlane(plane) - }); - plane.marker = marker; - marker.planehex = plane.hex; - Planes[plane.hex] = plane; + $.getJSON('data.json', function(data) { + // Planes that are still with us, and set map count to 0 + var stillhere = {} + PlanesOnMap = 0; - // Trap clicks for this marker. - google.maps.event.addListener(marker, 'click', selectPlane); - } - - if (plane.flight.length == 0) { - marker.setTitle(plane.hex) - } else { - marker.setTitle(plane.flight+' ('+plane.hex+')') - } - } - } + // Loop through all the planes in the data packet + for (var j=0; j < data.length; j++) { - PlanesOnGrid = data.length; - - /* Remove idle planes. */ - for (var p in Planes) { - if (!stillhere[p]) { - Planes[p].marker.setMap(null); - delete Planes[p]; - } - } - - refreshTableInfo(); - refreshSelectedInfo(); - }); + // Set plane to be this particular plane in the data set + var plane = data[j]; + // Add to the still here list + stillhere[plane.hex] = true; + plane.flight = $.trim(plane.flight); + + // Set the marker to null, for now + var marker = null; + + // Either update the data or add it + if (Planes[plane.hex]) { + // Declare our plane that we are working with from our old data set + var myplane = Planes[plane.hex]; + + // If the lat/long is not 0, we should make a marker for it + if (plane.lat != 0 && plane.lon != 0) { + if (myplane.marker != null) { + marker = myplane.marker; + var icon = marker.getIcon(); + var newpos = new google.maps.LatLng(plane.lat, plane.lon); + marker.setPosition(newpos); + marker.setIcon(getIconForPlane(plane)); + PlanesOnMap++; + } else { + // Add new plane to map, dont ask me why this is needed here now... + marker = new google.maps.Marker({ + position: new google.maps.LatLng(plane.lat, plane.lon), + map: Map, + icon: getIconForPlane(plane) + }); + myplane.marker = marker; + marker.planehex = plane.hex; + PlanesOnMap++; + + // Trap clicks for this marker. + google.maps.event.addListener(marker, 'click', selectPlane); + } + } + + // Update all the other information + myplane.altitude = plane.altitude; + myplane.speed = plane.speed; + myplane.lat = plane.lat; + myplane.lon = plane.lon; + myplane.track = plane.track; + myplane.flight = plane.flight; + myplane.seen = plane.seen; + myplane.messages = plane.messages; + myplane.squawk = plane.squawk; + myplane.validposition = plane.validposition; + myplane.validtrack = plane.validtrack; + + // If this is a selected plane, refresh its data outside of the table + if (myplane.hex == Selected) + refreshSelectedInfo(); + } else { + // This is a new plane + // Do we have a lat/long that is not 0? + if (plane.lat != 0 && plane.lon != 0) { + // Add new plane to map + marker = new google.maps.Marker({ + position: new google.maps.LatLng(plane.lat, plane.lon), + map: Map, + icon: getIconForPlane(plane) + }); + plane.marker = marker; + marker.planehex = plane.hex; + PlanesOnMap++; + + // Trap clicks for this marker. + google.maps.event.addListener(marker, 'click', selectPlane); + } + + // Copy the plane into Planes + Planes[plane.hex] = plane; + } + + // If we have lat/long, we must have a marker, so lets set the marker title + if (plane.lat != 0 && plane.lon != 0) { + if (plane.flight.length == 0) { + marker.setTitle(plane.hex) + } else { + marker.setTitle(plane.flight+' ('+plane.hex+')') + } + } + + } + + // How many planes have we heard from? + PlanesOnGrid = data.length; + + /* Remove idle planes. */ + for (var p in Planes) { + if (!stillhere[p]) { + if (Planes[p].marker != null) + Planes[p].marker.setMap(null); + delete Planes[p]; + } + } + + refreshTableInfo(); + refreshSelectedInfo(); + }); } function checkTime(i) { @@ -229,6 +288,19 @@ function printTime() { } } +function placeFooter() { + var windHeight = $(window).height(); + var footerHeight = $('#info_footer').height(); + var offset = parseInt(windHeight) - parseInt(footerHeight); + + var footerWidth = parseInt($('#info_footer').width()); + var infoWidth = parseInt($('#info').width()); + var marginLeft = parseInt((infoWidth / 2) - (footerWidth / 2)); + + $('#info_footer').css('top', offset); + $('#info_footer').css('margin-left', marginLeft); +} + function resetMap() { localStorage['CenterLat'] = 45.0; localStorage['CenterLon'] = 9.0; @@ -236,14 +308,7 @@ function resetMap() { Map.setZoom(parseInt(localStorage['ZoomLvl'])); Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']), parseInt(localStorage['CenterLon']))); Selected = null; - document.getElementById('selinfo').innerHTML = ''; -} - -function resizeMap() { - var windWidth = parseInt($(window).width()); - var infoWidth = parseInt($('#info').width()); - var mapWidth = windWidth - infoWidth; - $('#map_canvas').css('width', mapWidth); + refreshSelectedInfo(); } function initialize() { @@ -273,8 +338,14 @@ function initialize() { maxZoom: 18 })); - $(window).resize(function(e){ - resizeMap(); + // show footer at info-area + $(function(){ + $(window).resize(function(e){ + placeFooter(); + }); + placeFooter(); + // hide it before it's positioned + $('#info_footer').css('display','inline'); }); // Listener for newly created Map @@ -310,5 +381,4 @@ function initialize() { refreshGeneralInfo(); refreshSelectedInfo(); refreshTableInfo(); - resizeMap(); } diff --git a/public_html/style.css b/public_html/style.css index 3af14ff..7296a9e 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -1,44 +1,48 @@ -html { height: 100%; } -body { height: 100%; margin: 0; padding: 0; } - -#map_canvas { - height: 100%; +html { height: 100% } +body { height: 100%; margin: 0; padding: 0 } +#map_canvas { +height: 100%; +margin-right:390px; } - #info { - position: absolute; - width: 300px; - height: 100%; - bottom: 0px; - right: 0px; - top: 0px; - background-color: white; - border-left: 1px #666 solid; - font-family: Helvetica; +position: absolute; +width:390px; +height:100%; +bottom:0px; +right:0px; +top:0px; +background-color: white; +border-left:1px #666 solid; +font-family:Helvetica; } - #info div { - padding: 0px; - padding-left: 10px; - margin:0px; +padding:0px; +padding-left:10px; +margin:0px; } - #info div h1 { - margin-top: 10px; - font-size: 16px; +margin-top:10px; +font-size:16px; } - #info div p { - font-size: 14px; - color: #333; +font-size:14px; +color:#333; +} +#info_footer { +position: absolute; +display: none; +text-align: center; +padding:0px; +margin:0px; } - #tableinfo { - font-size: x-small; - font-family: monospace; +font-size: x-small; +font-family: monospace; } - #tableinforow { - cursor: pointer; +cursor: pointer; +} +#tableinforow .bold { +font-weight:bold; }