From f59e82aee9806f87e84ad3d35b7b214b0c14b1cb Mon Sep 17 00:00:00 2001 From: terribl Date: Fri, 10 May 2013 12:58:24 +0300 Subject: [PATCH 1/9] fix .gitignore file --- .gitignore | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 90a0967..7db17bb 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,4 @@ testfiles/*.bin misc frames.js .*.swp -~* - +*~ From bf4ccaca062a944b8eb5ccc138990b8bf39f5aae Mon Sep 17 00:00:00 2001 From: terribl Date: Sat, 11 May 2013 13:15:09 +0300 Subject: [PATCH 2/9] bdavenports .diff-file --- .gitignore | 2 ++ public_html/gmap.html | 1 + public_html/script.js | 53 ++++++++++++++++++++++++++++++++++++++++--- public_html/style.css | 5 ++++ 4 files changed, 58 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 7db17bb..bba68c8 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ misc frames.js .*.swp *~ +*.rej +*.orig diff --git a/public_html/gmap.html b/public_html/gmap.html index e7f2ffb..4f086d9 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -16,6 +16,7 @@

Dump1090 - 00:00:00 UTC

Click on a plane for info.

+

diff --git a/public_html/script.js b/public_html/script.js index 1666f64..4fdb03e 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -43,7 +43,7 @@ function selectPlane() { function refreshGeneralInfo() { var i = document.getElementById('geninfo'); - + i.innerHTML = PlanesOnGrid + ' planes on grid.
'; i.innerHTML += PlanesOnMap + ' planes on map.'; } @@ -65,8 +65,33 @@ function refreshSelectedInfo() { i.innerHTML = html; } +function refreshTableInfo() { + var i = document.getElementById('tabinfo'); + + var html = ''; + html += ''; + for (var p in Planes) { + if (p == Selected) { + html += ''; + } else { + html += ''; + } + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + } + html += '
FlightAltitudeSpeedTrackLatLongSeenMsgs
' + Planes[p].flight + '' + Planes[p].altitude + '' + Planes[p].speed + '' + Planes[p].track + '' + Planes[p].lat + '' + Planes[p].lon + '' + Planes[p].seen + '' + Planes[p].messages + '
'; + i.innerHTML = html; +} + function fetchData() { - $.getJSON('/data.json', function(data) { + $.getJSON('data.json', function(data) { var stillhere = {} PlanesOnMap = 0; @@ -130,6 +155,9 @@ function fetchData() { delete Planes[p]; } } + + refreshTableInfo() ; + }); } @@ -176,12 +204,31 @@ function resetMap() { } function initialize() { + var mapTypeIds = []; + for(var type in google.maps.MapTypeId) { + mapTypeIds.push(google.maps.MapTypeId[type]); + } + mapTypeIds.push("OSM"); + var mapOptions = { center: new google.maps.LatLng(CenterLat, CenterLon), zoom: ZoomLvl, - mapTypeId: google.maps.MapTypeId.ROADMAP + mapTypeId: google.maps.MapTypeId.ROADMAP, + mapTypeControlOptions: { + mapTypeIds: mapTypeIds, + } }; Map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); + + //Define OSM map type pointing at the OpenStreetMap tile server + Map.mapTypes.set("OSM", new google.maps.ImageMapType({ + getTileUrl: function(coord, zoom) { + return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"; + }, + tileSize: new google.maps.Size(256, 256), + name: "OpenStreetMap", + maxZoom: 18 + })); // show footer at info-area $(function(){ diff --git a/public_html/style.css b/public_html/style.css index 8c58273..86c8576 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -32,3 +32,8 @@ text-align: center; padding:0px; margin:0px; } +#tableinfo { +font-size: x-small; +font-family: monospace; +} + From e6080e259fd6c37c548d8ea5c086b2be28c6aa75 Mon Sep 17 00:00:00 2001 From: terribl Date: Sat, 11 May 2013 17:04:23 +0300 Subject: [PATCH 3/9] Some map view changes modified: public_html/gmap.html modified: public_html/script.js modified: public_html/style.css --- public_html/gmap.html | 5 +- public_html/script.js | 103 ++++++++++++++++++++++++------------------ public_html/style.css | 79 +++++++++++++++++--------------- 3 files changed, 104 insertions(+), 83 deletions(-) diff --git a/public_html/gmap.html b/public_html/gmap.html index 4f086d9..9d41c9f 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -10,15 +10,14 @@ -
+
-

Dump1090 - 00:00:00 UTC

+

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 4fdb03e..42db4b8 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -29,7 +29,8 @@ function getIconForPlane(plane) { }; } -function selectPlane() { +function selectPlane(selectedPlane) { + if (selectedPlane.length) this.planehex = selectedPlane; if (!Planes[this.planehex]) return; var old = Selected; Selected = this.planehex; @@ -38,7 +39,9 @@ function selectPlane() { Planes[old].marker.setIcon(getIconForPlane(Planes[old])); } Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected])); + refreshSelectedInfo(); + refreshTableInfo(); } function refreshGeneralInfo() { @@ -51,17 +54,30 @@ function refreshGeneralInfo() { function refreshSelectedInfo() { var i = document.getElementById('selinfo'); var p = Planes[Selected]; - - if (!p) return; - var html = 'ICAO: '+p.hex+'
'; - if (p.flight.length) { - html += ''+p.flight+'
'; + + if (!p) { + p = {}; + p.flight = ""; + p.hex = ""; + p.squawk = ""; + p.altitude = "0"; + p.speed = "0"; + p.lat = "lat"; + p.lon = "lon"; + p.messages = "0"; + p.seen = "0"; } - html += 'Altitude: '+p.altitude+' feet
'; - html += 'Speed: '+p.speed+' knots
'; - html += 'Coordinates: '+p.lat+', '+p.lon+'
'; - html += 'Messages: '+p.messages+'
'; - html += 'Seen: '+p.seen+' sec
'; + + var html = ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += '
'+p.flight+' 
ICAO:'+p.hex+'
Squawk:'+p.squawk+'
Altitude:'+p.altitude+' feet
Speed:'+p.speed+' knots
Coordinates:'+p.lat+', '+p.lon+'
Messages:'+p.messages+'
Seen:'+p.seen+' sec
'; i.innerHTML = html; } @@ -69,21 +85,23 @@ function refreshTableInfo() { var i = document.getElementById('tabinfo'); var 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 += ''; + html += ''; + html += ''; html += ''; } html += '
FlightAltitudeSpeedTrackLatLongSeenMsgs
FlightSquawkAltitudeSpeedTrackSeenMsgs
' + Planes[p].flight + '' + Planes[p].squawk + '' + Planes[p].altitude + '' + Planes[p].speed + '' + Planes[p].track + '' + Planes[p].lat + '' + Planes[p].lon + '' + Planes[p].seen + '' + Planes[p].messages + '' + Planes[p].speed + '' + Planes[p].track + '' + Planes[p].seen + '' + Planes[p].messages + '
'; @@ -120,6 +138,7 @@ function fetchData() { 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(); @@ -155,9 +174,8 @@ function fetchData() { delete Planes[p]; } } - + refreshTableInfo() ; - }); } @@ -180,19 +198,6 @@ 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; @@ -203,6 +208,13 @@ function resetMap() { 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); +} + function initialize() { var mapTypeIds = []; for(var type in google.maps.MapTypeId) { @@ -230,14 +242,8 @@ function initialize() { maxZoom: 18 })); - // show footer at info-area - $(function(){ - $(window).resize(function(e){ - placeFooter(); - }); - placeFooter(); - // hide it before it's positioned - $('#info_footer').css('display','inline'); + $(window).resize(function(e){ + resizeMap(); }); // Listener for newly created Map @@ -249,6 +255,13 @@ function initialize() { google.maps.event.addListener(Map, 'zoom_changed', function() { localStorage['ZoomLvl'] = Map.getZoom(); }); + + google.maps.event.addListener(Map, 'click', function() { + selectPlane("xyzxyz"); // Select not valid ICAO24 address to clear selection. + Selected = null; + refreshSelectedInfo(); + refreshTableInfo(); + }); // Setup our timer to poll from the server. window.setInterval(function() { @@ -260,4 +273,8 @@ function initialize() { window.setInterval(function() { printTime(); }, 250); + + refreshGeneralInfo(); + refreshSelectedInfo(); + resizeMap(); } diff --git a/public_html/style.css b/public_html/style.css index 86c8576..1226b04 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -1,39 +1,44 @@ -html { height: 100% } -body { height: 100%; margin: 0; padding: 0 } -#map_canvas { height: 100% } -#info { -position: absolute; -width:20%; -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; -} -#info div h1 { -margin-top:10px; -font-size:16px; -} -#info div p { -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; +html { height: 100%; } +body { height: 100%; margin: 0; padding: 0; } + +#map_canvas { + height: 100%; +} + +#info { + position: absolute; + width: 300px; + 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; +} + +#info div h1 { + margin-top: 10px; + font-size: 16px; +} + +#info div p { + font-size: 14px; + color: #333; +} + +#tableinfo { + font-size: x-small; + font-family: monospace; +} + +#tabinfo { + cursor: pointer; } From e65e873c135ebfeb59980680683fca4b6926b19a Mon Sep 17 00:00:00 2001 From: terribl Date: Sat, 11 May 2013 23:36:11 +0300 Subject: [PATCH 4/9] Added flags to json for valid position and heading As MalcolmRobb suggested. modified: dump1090.c modified: public_html/script.js --- dump1090.c | 16 +++++++++++++--- public_html/script.js | 7 ++++--- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/dump1090.c b/dump1090.c index c32e6b2..9f00840 100644 --- a/dump1090.c +++ b/dump1090.c @@ -3323,18 +3323,28 @@ char *aircraftsToJson(int *len) { p += l; buflen -= l; while(a) { int altitude = a->altitude, speed = a->speed; - + int position = 0; + int track = 0; + /* Convert units to metric if --metric was specified. */ if (Modes.metric) { altitude = (int) (altitude / 3.2828); speed = (int) (speed * 1.852); } + if (a->bFlags & MODES_ACFLAGS_LATLON_VALID) { + position = 1; + } + + if (a->bFlags & MODES_ACFLAGS_HEADING_VALID) { + track = 1; + } + l = snprintf(p,buflen, "{\"hex\":\"%06x\", \"squawk\":\"%04x\", \"flight\":\"%s\", \"lat\":%f, " - "\"lon\":%f, \"altitude\":%d, \"track\":%d, " + "\"lon\":%f, \"validposition\":%d, \"altitude\":%d, \"track\":%d, \"validtrack\":%d," "\"speed\":%d, \"messages\":%ld, \"seen\":%d},\n", - a->addr, a->modeA, a->flight, a->lat, a->lon, a->altitude, a->track, + a->addr, a->modeA, a->flight, a->lat, a->lon, position, a->altitude, a->track, track, a->speed, a->messages, (int)(now - a->seen)); p += l; buflen -= l; diff --git a/public_html/script.js b/public_html/script.js index 42db4b8..9168c19 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -118,8 +118,8 @@ function fetchData() { stillhere[plane.hex] = true; plane.flight = $.trim(plane.flight); - if (plane.lat != 0 && plane.lon != 0) { - // Show only planes with position + // Show only planes with position + if (plane.validposition == 1) { var marker = null; PlanesOnMap++; @@ -175,7 +175,8 @@ function fetchData() { } } - refreshTableInfo() ; + refreshTableInfo(); + refreshSelectedInfo(); }); } From 78f565cb4f7f9354722c5a2f21adef29951680ba Mon Sep 17 00:00:00 2001 From: terribl Date: Sun, 12 May 2013 09:37:17 +0300 Subject: [PATCH 5/9] Really minor tweaks --- public_html/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index 9168c19..cb04863 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -86,9 +86,9 @@ function refreshTableInfo() { var html = ''; html += ''; - html += ''; - html += ''; - html += ''; + html += ''; + html += ''; + html += ''; for (var p in Planes) { if (p == Selected) { html += ''; From 6f228b9c88c615c6c51ab8a13072759cbac25b28 Mon Sep 17 00:00:00 2001 From: terribl Date: Sun, 12 May 2013 09:53:07 +0300 Subject: [PATCH 6/9] Upstream merge finalized --- public_html/script.js | 25 ------------------------- public_html/style.css | 5 ----- 2 files changed, 30 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index 3662f68..cb04863 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -108,31 +108,6 @@ function refreshTableInfo() { i.innerHTML = html; } -function refreshTableInfo() { - var i = document.getElementById('tabinfo'); - - var html = '
FlightSquawkAltitudeSpeedTrackSeenMsgs
FlightSquawkAltitudeSpeedTrackSeenMsgs
'; - html += ''; - for (var p in Planes) { - if (p == Selected) { - html += ''; - } else { - html += ''; - } - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - } - html += '
FlightAltitudeSpeedTrackLatLongSeenMsgs
' + Planes[p].flight + '' + Planes[p].altitude + '' + Planes[p].speed + '' + Planes[p].track + '' + Planes[p].lat + '' + Planes[p].lon + '' + Planes[p].seen + '' + Planes[p].messages + '
'; - i.innerHTML = html; -} - function fetchData() { $.getJSON('data.json', function(data) { var stillhere = {} diff --git a/public_html/style.css b/public_html/style.css index 26837fc..1226b04 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -42,8 +42,3 @@ body { height: 100%; margin: 0; padding: 0; } cursor: pointer; } -#tableinfo { -font-size: x-small; -font-family: monospace; -} - From ae69cd5d48e70b576d4473abaa4f00ce080c0016 Mon Sep 17 00:00:00 2001 From: terribl Date: Sun, 12 May 2013 15:15:18 +0300 Subject: [PATCH 7/9] Web view JavaScript modifications. modified: public_html/gmap.html modified: public_html/script.js modified: public_html/style.css --- public_html/gmap.html | 5 +++- public_html/script.js | 67 ++++++++++++++++++++++++++++++++----------- public_html/style.css | 2 +- 3 files changed, 55 insertions(+), 19 deletions(-) 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; } From 72142fac840d31be714a93d56adc91e4f582bf94 Mon Sep 17 00:00:00 2001 From: terribl Date: Tue, 14 May 2013 12:55:16 +0300 Subject: [PATCH 8/9] 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; } From 7b99ad5f6cea9ddbbbdbe9ba8ab4078433c6a11a Mon Sep 17 00:00:00 2001 From: terribl Date: Tue, 14 May 2013 13:04:31 +0300 Subject: [PATCH 9/9] Few bugs --- public_html/script.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public_html/script.js b/public_html/script.js index a2af763..e78d9b2 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -75,8 +75,8 @@ function selectPlane(selectedPlane) { function refreshGeneralInfo() { var i = document.getElementById('geninfo'); - i.innerHTML += PlanesOnMap + ' planes on map.
'; - i.innerHTML = PlanesOnGrid + ' planes on grid.'; + i.innerHTML = PlanesOnMap + ' planes on map.
'; + i.innerHTML += PlanesOnGrid + ' planes on grid.'; } function refreshSelectedInfo() { @@ -178,8 +178,8 @@ function fetchData() { // 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 the has valid position, we should make a marker for it + if (plane.validposition) { if (myplane.marker != null) { marker = myplane.marker; var icon = marker.getIcon(); @@ -222,7 +222,7 @@ function fetchData() { } else { // This is a new plane // Do we have a lat/long that is not 0? - if (plane.lat != 0 && plane.lon != 0) { + if (plane.validposition) { // Add new plane to map marker = new google.maps.Marker({ position: new google.maps.LatLng(plane.lat, plane.lon), @@ -242,7 +242,7 @@ function fetchData() { } // 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.validposition) { if (plane.flight.length == 0) { marker.setTitle(plane.hex) } else {