AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Combined effort and code from bdavenport and me.

Browse source 
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
This commit is contained in:
terribl 2013-05-14 12:55:16 +03:00
parent 9ea6f3e8e2
commit 72142fac84
3 changed files with 202 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public_html/gmap.html
View file

@ -10,17 +10,16 @@
<script type="text/javascript" src="script.js"></script> <script type="text/javascript" src="script.js"></script>
</head> </head>
<body onload="initialize()"> <body onload="initialize()">
<div id="map_canvas"></div> <div id="map_canvas" style="height:100%"></div>
<div id="info"> <div id="info">
<div> <div>
<h1> <h1>Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1>
Dump1090 - <span id="utcTime">00:00:00</span> UTC
<a href="#" onClick="resetMap();">Reset Map</a>
</h1>
<p id="geninfo"></p> <p id="geninfo"></p>
<p id="selinfo">Click on a plane for info.</p> <p id="selinfo">Click on a plane for info.</p>
<p id="tabinfo"></p> <p id="tabinfo"></p>
</div> </div>
<div id="info_footer"><a href="#" onClick="resetMap();">Reset Map</a></div>
</div> </div>
</body> </body>
</html> </html>

126
public_html/script.js
View file

@ -45,9 +45,11 @@ function getIconForPlane(plane, deselect) {
function selectPlane(selectedPlane) { function selectPlane(selectedPlane) {
if (selectedPlane.length) this.planehex = selectedPlane; if (selectedPlane.length) this.planehex = selectedPlane;
// Deselect all planes // Deselect planes
if (!Planes[this.planehex]) { if (!Planes[this.planehex]) {
if (Planes[Selected].marker) {
Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected], true)); Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected], true));
}
Selected = null; Selected = null;
refreshSelectedInfo(); refreshSelectedInfo();
refreshTableInfo(); refreshTableInfo();
@ -57,11 +59,14 @@ function selectPlane(selectedPlane) {
var old = Selected; var old = Selected;
Selected = this.planehex; Selected = this.planehex;
if (Planes[old]) { if (Planes[old] && Planes[old].validposition) {
// Remove the highlight in the previously selected plane. // Remove the highlight in the previously selected plane.
Planes[old].marker.setIcon(getIconForPlane(Planes[old])); Planes[old].marker.setIcon(getIconForPlane(Planes[old]));
} }
if (Planes[Selected].validposition) {
Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected])); Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected]));
}
refreshSelectedInfo(); refreshSelectedInfo();
refreshTableInfo(); refreshTableInfo();
@ -70,8 +75,8 @@ function selectPlane(selectedPlane) {
function refreshGeneralInfo() { function refreshGeneralInfo() {
var i = document.getElementById('geninfo'); var i = document.getElementById('geninfo');
i.innerHTML = PlanesOnGrid + ' planes on grid.<br>'; i.innerHTML += PlanesOnMap + ' planes on map.<br>';
i.innerHTML += PlanesOnMap + ' planes on map.'; i.innerHTML = PlanesOnGrid + ' planes on grid.';
} }
function refreshSelectedInfo() { function refreshSelectedInfo() {
@ -95,10 +100,18 @@ function refreshSelectedInfo() {
var html = '<table id="selectedinfo">'; var html = '<table id="selectedinfo">';
html += '<tr><td colspan=2><b>'+p.flight+'&nbsp;</b></td></tr>'; html += '<tr><td colspan=2><b>'+p.flight+'&nbsp;</b></td></tr>';
html += '<tr><td>ICAO:</td><td>'+p.hex+'</td></tr>'; html += '<tr><td>ICAO:</td><td>'+p.hex+'</td></tr>';
if (p.squawk != "0000") {
html += '<tr><td>Squawk:</td><td>'+p.squawk+'</td></tr>'; html += '<tr><td>Squawk:</td><td>'+p.squawk+'</td></tr>';
} else {
html += '<tr><td>Squawk:</td><td>n/a</td></tr>';
}
html += '<tr><td>Altitude:</td><td>'+p.altitude+' feet</td></tr>'; html += '<tr><td>Altitude:</td><td>'+p.altitude+' feet</td></tr>';
html += '<tr><td>Speed:</td><td>'+p.speed+' knots</td></tr>'; html += '<tr><td>Speed:</td><td>'+p.speed+' knots</td></tr>';
if (p.validposition) {
html += '<tr><td>Coordinates:</td><td>'+p.lat+', '+p.lon+'</td></tr>'; html += '<tr><td>Coordinates:</td><td>'+p.lat+', '+p.lon+'</td></tr>';
} else {
html += '<tr><td>Coordinates:</td><td>n/a</td></tr>';
}
html += '<tr><td>Messages:</td><td>'+p.messages+'</td></tr>'; html += '<tr><td>Messages:</td><td>'+p.messages+'</td></tr>';
html += '<tr><td>Seen:</td><td>'+p.seen+' sec</td></tr>'; html += '<tr><td>Seen:</td><td>'+p.seen+' sec</td></tr>';
html += '</table>'; html += '</table>';
@ -112,19 +125,23 @@ function refreshTableInfo() {
html += '<td align="right">Speed</td><td align="right">Track</td>'; html += '<td align="right">Speed</td><td align="right">Track</td>';
html += '<td align="right">Msgs</td><td align="right">Seen</td></thead>'; html += '<td align="right">Msgs</td><td align="right">Seen</td></thead>';
for (var p in Planes) { for (var p in Planes) {
var specialStyle = "";
if (p == Selected) { if (p == Selected) {
html += '<tr id="tableinforow" style="background-color: #E0E0E0;">'; html += '<tr id="tableinforow" style="background-color: #E0E0E0;">';
} else { } else {
html += '<tr id="tableinforow">'; html += '<tr id="tableinforow">';
} }
html += '<td>' + Planes[p].hex + '</td>'; if (Planes[p].validposition) {
html += '<td>' + Planes[p].flight + '</td>'; specialStyle = 'bold';
html += '<td align="right">' + Planes[p].squawk + '</td>'; }
html += '<td align="right">' + Planes[p].altitude + '</td>'; html += '<td class="' + specialStyle + '">' + Planes[p].hex + '</td>';
html += '<td align="right">' + Planes[p].speed + '</td>'; html += '<td class="' + specialStyle + '">' + Planes[p].flight + '</td>';
html += '<td align="right">' + Planes[p].track + '</td>'; html += '<td class="' + specialStyle + '" align="right">' + Planes[p].squawk + '</td>';
html += '<td align="right">' + Planes[p].messages + '</td>'; html += '<td class="' + specialStyle + '" align="right">' + Planes[p].altitude + '</td>';
html += '<td align="right">' + Planes[p].seen + '</td>'; html += '<td class="' + specialStyle + '" align="right">' + Planes[p].speed + '</td>';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].track + '</td>';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].messages + '</td>';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].seen + '</td>';
html += '</tr>'; html += '</tr>';
} }
html += '</table>'; html += '</table>';
@ -140,27 +157,53 @@ function refreshTableInfo() {
function fetchData() { function fetchData() {
$.getJSON('data.json', function(data) { $.getJSON('data.json', function(data) {
// Planes that are still with us, and set map count to 0
var stillhere = {} var stillhere = {}
PlanesOnMap = 0; PlanesOnMap = 0;
// Loop through all the planes in the data packet
for (var j=0; j < data.length; j++) { for (var j=0; j < data.length; j++) {
// Set plane to be this particular plane in the data set
var plane = data[j]; var plane = data[j];
// Add to the still here list
stillhere[plane.hex] = true; stillhere[plane.hex] = true;
plane.flight = $.trim(plane.flight); plane.flight = $.trim(plane.flight);
// Show only planes with position // Set the marker to null, for now
if (plane.validposition == 1) {
var marker = null; var marker = null;
PlanesOnMap++;
// Either update the data or add it
if (Planes[plane.hex]) { if (Planes[plane.hex]) {
// Move and refresh old plane on map // Declare our plane that we are working with from our old data set
var myplane = Planes[plane.hex]; 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; marker = myplane.marker;
var icon = marker.getIcon(); var icon = marker.getIcon();
var newpos = new google.maps.LatLng(plane.lat, plane.lon); var newpos = new google.maps.LatLng(plane.lat, plane.lon);
marker.setPosition(newpos); marker.setPosition(newpos);
marker.setIcon(getIconForPlane(plane)); 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.altitude = plane.altitude;
myplane.speed = plane.speed; myplane.speed = plane.speed;
myplane.lat = plane.lat; myplane.lat = plane.lat;
@ -168,11 +211,18 @@ function fetchData() {
myplane.track = plane.track; myplane.track = plane.track;
myplane.flight = plane.flight; myplane.flight = plane.flight;
myplane.seen = plane.seen; myplane.seen = plane.seen;
myplane.squawk = plane.squawk;
myplane.messages = plane.messages; 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) if (myplane.hex == Selected)
refreshSelectedInfo(); refreshSelectedInfo();
} else { } 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 // Add new plane to map
marker = new google.maps.Marker({ marker = new google.maps.Marker({
position: new google.maps.LatLng(plane.lat, plane.lon), position: new google.maps.LatLng(plane.lat, plane.lon),
@ -181,25 +231,34 @@ function fetchData() {
}); });
plane.marker = marker; plane.marker = marker;
marker.planehex = plane.hex; marker.planehex = plane.hex;
Planes[plane.hex] = plane; PlanesOnMap++;
// Trap clicks for this marker. // Trap clicks for this marker.
google.maps.event.addListener(marker, 'click', selectPlane); 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) { if (plane.flight.length == 0) {
marker.setTitle(plane.hex) marker.setTitle(plane.hex)
} else { } else {
marker.setTitle(plane.flight+' ('+plane.hex+')') marker.setTitle(plane.flight+' ('+plane.hex+')')
} }
} }
} }
// How many planes have we heard from?
PlanesOnGrid = data.length; PlanesOnGrid = data.length;
/* Remove idle planes. */ /* Remove idle planes. */
for (var p in Planes) { for (var p in Planes) {
if (!stillhere[p]) { if (!stillhere[p]) {
if (Planes[p].marker != null)
Planes[p].marker.setMap(null); Planes[p].marker.setMap(null);
delete Planes[p]; delete Planes[p];
} }
@ -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() { function resetMap() {
localStorage['CenterLat'] = 45.0; localStorage['CenterLat'] = 45.0;
localStorage['CenterLon'] = 9.0; localStorage['CenterLon'] = 9.0;
@ -236,14 +308,7 @@ function resetMap() {
Map.setZoom(parseInt(localStorage['ZoomLvl'])); Map.setZoom(parseInt(localStorage['ZoomLvl']));
Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']), parseInt(localStorage['CenterLon']))); Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']), parseInt(localStorage['CenterLon'])));
Selected = null; Selected = null;
document.getElementById('selinfo').innerHTML = ''; refreshSelectedInfo();
}
function resizeMap() {
var windWidth = parseInt($(window).width());
var infoWidth = parseInt($('#info').width());
var mapWidth = windWidth - infoWidth;
$('#map_canvas').css('width', mapWidth);
} }
function initialize() { function initialize() {
@ -273,8 +338,14 @@ function initialize() {
maxZoom: 18 maxZoom: 18
})); }));
// show footer at info-area
$(function(){
$(window).resize(function(e){ $(window).resize(function(e){
resizeMap(); placeFooter();
});
placeFooter();
// hide it before it's positioned
$('#info_footer').css('display','inline');
}); });
// Listener for newly created Map // Listener for newly created Map
@ -310,5 +381,4 @@ function initialize() {
refreshGeneralInfo(); refreshGeneralInfo();
refreshSelectedInfo(); refreshSelectedInfo();
refreshTableInfo(); refreshTableInfo();
resizeMap();
} }

62
public_html/style.css
View file

@ -1,44 +1,48 @@
html { height: 100%; } html { height: 100% }
body { height: 100%; margin: 0; padding: 0; } body { height: 100%; margin: 0; padding: 0 }
#map_canvas { #map_canvas {
height: 100%; height: 100%;
margin-right:390px;
} }
#info { #info {
position: absolute; position: absolute;
width: 300px; width:390px;
height: 100%; height:100%;
bottom: 0px; bottom:0px;
right: 0px; right:0px;
top: 0px; top:0px;
background-color: white; background-color: white;
border-left: 1px #666 solid; border-left:1px #666 solid;
font-family: Helvetica; font-family:Helvetica;
} }
#info div { #info div {
padding: 0px; padding:0px;
padding-left: 10px; padding-left:10px;
margin:0px; margin:0px;
} }
#info div h1 { #info div h1 {
margin-top: 10px; margin-top:10px;
font-size: 16px; font-size:16px;
} }
#info div p { #info div p {
font-size: 14px; font-size:14px;
color: #333; color:#333;
}
#info_footer {
position: absolute;
display: none;
text-align: center;
padding:0px;
margin:0px;
} }
#tableinfo { #tableinfo {
font-size: x-small; font-size: x-small;
font-family: monospace; font-family: monospace;
} }
#tableinforow { #tableinforow {
cursor: pointer; cursor: pointer;
}
#tableinforow .bold {
font-weight:bold;
} }