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

Merge pull request #3 from terribl/master

Browse source 
Web client
This commit is contained in:
MalcolmRobb 2013-05-14 14:20:06 -07:00
parent df4a24bf14 7b99ad5f6c
commit 7cff495346
5 changed files with 262 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.gitignore vendored
View file

@ -4,5 +4,6 @@ testfiles/*.bin
misc misc
frames.js frames.js
.*.swp .*.swp
~* *~
*.rej
*.orig

14
dump1090.c
View file

@ -3623,6 +3623,8 @@ char *aircraftsToJson(int *len) {
p += l; buflen -= l; p += l; buflen -= l;
while(a) { while(a) {
int altitude = a->altitude, speed = a->speed; int altitude = a->altitude, speed = a->speed;
int position = 0;
int track = 0;
/* Convert units to metric if --metric was specified. */ /* Convert units to metric if --metric was specified. */
if (Modes.metric) { if (Modes.metric) {
@ -3630,11 +3632,19 @@ char *aircraftsToJson(int *len) {
speed = (int) (speed * 1.852); 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, l = snprintf(p,buflen,
"{\"hex\":\"%06x\", \"squawk\":\"%04x\", \"flight\":\"%s\", \"lat\":%f, " "{\"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", "\"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)); a->speed, a->messages, (int)(now - a->seen));
p += l; buflen -= l; p += l; buflen -= l;

3
public_html/gmap.html
View file

@ -10,7 +10,7 @@
<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" style="width:80%; height:100%"></div> <div id="map_canvas" style="height:100%"></div>
<div id="info"> <div id="info">
<div> <div>
<h1>Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1> <h1>Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1>
@ -22,3 +22,4 @@
</div> </div>
</body> </body>
</html> </html>

215
public_html/script.js
View file

@ -11,108 +11,199 @@ if (localStorage['CenterLat']) { CenterLat = Number(localStorage['CenterLat']);
if (localStorage['CenterLon']) { CenterLon = Number(localStorage['CenterLon']); } if (localStorage['CenterLon']) { CenterLon = Number(localStorage['CenterLon']); }
if (localStorage['ZoomLvl']) { ZoomLvl = Number(localStorage['ZoomLvl']); } 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 r = 255, g = 255, b = 0;
var maxalt = 40000; // Max altitude in the average case var maxalt = 40000; // Max altitude in the average case
var invalt = maxalt-plane.altitude; var invalt = 0;
var selected = (Selected == plane.hex);
// 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; if (invalt < 0) invalt = 0;
b = parseInt(255/maxalt*invalt); b = parseInt(255/maxalt*invalt);
return { return {
strokeWeight: (selected ? 2 : 1), strokeWeight: (selected ? 2 : 1),
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5, scale: 5,
fillColor: 'rgb('+r+','+g+','+b+')', fillColor: 'rgb('+r+','+g+','+b+')',
fillOpacity: 0.9, fillOpacity: 0.9,
rotation: plane.track rotation: track
}; };
} }
function selectPlane() { /* Gets hex code of selected plane as string or nothing. *
if (!Planes[this.planehex]) return; * Select not valid ICAO24 (hex) address to clear selection. */
function selectPlane(selectedPlane) {
if (selectedPlane.length) this.planehex = selectedPlane;
// Deselect planes
if (!Planes[this.planehex]) {
if (Planes[Selected].marker) {
Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected], true));
}
Selected = null;
refreshSelectedInfo();
refreshTableInfo();
return;
}
var old = Selected; var old = Selected;
Selected = this.planehex; Selected = this.planehex;
if (Planes[old]) {
/* Remove the highlight in the previously selected plane. */ if (Planes[old] && Planes[old].validposition) {
// 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();
} }
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() {
var i = document.getElementById('selinfo'); var i = document.getElementById('selinfo');
var p = Planes[Selected]; var p = Planes[Selected];
if (!p) return; // If no plane is selected
var html = 'ICAO: '+p.hex+'<br>'; if (!p) {
if (p.flight.length) { p = {};
html += '<b>'+p.flight+'</b><br>'; 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<br>';
html += 'Speed: '+p.speed+' knots<br>';
html += 'Coordinates: '+p.lat+', '+p.lon+'<br>';
html += 'Messages: '+p.messages+'<br>';
html += 'Seen: '+p.seen+' sec<br>';
i.innerHTML = html;
}
function refreshTableInfo() { var html = '<table id="selectedinfo">';
var i = document.getElementById('tabinfo'); html += '<tr><td colspan=2><b>'+p.flight+'&nbsp;</b></td></tr>';
html += '<tr><td>ICAO:</td><td>'+p.hex+'</td></tr>';
var html = '<table id="tableinfo" width="100%">'; if (p.squawk != "0000") {
html += '<thead style="background-color: #CCCCCC;"><td>Flight</td><td align="right">Altitude</td><td align="center">Speed</td><td align="center">Track</td><td>Lat</td><td>Long</td><td>Seen</td><td>Msgs</td></thead>'; html += '<tr><td>Squawk:</td><td>'+p.squawk+'</td></tr>';
for (var p in Planes) {
if (p == Selected) {
html += '<tr style="background-color: #F0F0F0;">';
} else { } else {
html += '<tr>'; html += '<tr><td>Squawk:</td><td>n/a</td></tr>';
} }
html += '<td>' + Planes[p].flight + '</td>'; html += '<tr><td>Altitude:</td><td>'+p.altitude+' feet</td></tr>';
html += '<td align="right">' + Planes[p].altitude + '</td>'; html += '<tr><td>Speed:</td><td>'+p.speed+' knots</td></tr>';
html += '<td align="center">' + Planes[p].speed + '</td>'; if (p.validposition) {
html += '<td align="center">' + Planes[p].track + '</td>'; html += '<tr><td>Coordinates:</td><td>'+p.lat+', '+p.lon+'</td></tr>';
html += '<td>' + Planes[p].lat + '</td>'; } else {
html += '<td>' + Planes[p].lon + '</td>'; html += '<tr><td>Coordinates:</td><td>n/a</td></tr>';
html += '<td align="center">' + Planes[p].seen + '</td>';
html += '<td align="center">' + Planes[p].messages + '</td>';
html += '</tr>';
} }
html += '<tr><td>Messages:</td><td>'+p.messages+'</td></tr>';
html += '<tr><td>Seen:</td><td>'+p.seen+' sec</td></tr>';
html += '</table>'; html += '</table>';
i.innerHTML = html; i.innerHTML = html;
} }
function refreshTableInfo() {
var html = '<table id="tableinfo" width="100%">';
html += '<thead style="background-color: #CCCCCC;">';
html += '<td>hex</td><td>Flight</td><td align="right">Squawk</td><td align="right">Altitude</td>';
html += '<td align="right">Speed</td><td align="right">Track</td>';
html += '<td align="right">Msgs</td><td align="right">Seen</td></thead>';
for (var p in Planes) {
var specialStyle = "";
if (p == Selected) {
html += '<tr id="tableinforow" style="background-color: #E0E0E0;">';
} else {
html += '<tr id="tableinforow">';
}
if (Planes[p].validposition) {
specialStyle = 'bold';
}
html += '<td class="' + specialStyle + '">' + Planes[p].hex + '</td>';
html += '<td class="' + specialStyle + '">' + Planes[p].flight + '</td>';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].squawk + '</td>';
html += '<td class="' + specialStyle + '" align="right">' + Planes[p].altitude + '</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 += '</table>';
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() { 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);
if (plane.lat != 0 && plane.lon != 0) { // Set the marker to null, for now
// Show only planes with position
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 has valid position, we should make a marker for it
if (plane.validposition) {
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;
@ -121,9 +212,17 @@ function fetchData() {
myplane.flight = plane.flight; myplane.flight = plane.flight;
myplane.seen = plane.seen; myplane.seen = plane.seen;
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.validposition) {
// 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),
@ -132,32 +231,41 @@ 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.validposition) {
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];
} }
} }
refreshTableInfo() ; refreshTableInfo();
refreshSelectedInfo();
}); });
} }
@ -200,7 +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 initialize() { function initialize() {
@ -250,6 +358,15 @@ function initialize() {
localStorage['ZoomLvl'] = Map.getZoom(); localStorage['ZoomLvl'] = Map.getZoom();
}); });
google.maps.event.addListener(Map, 'click', function() {
if (Selected) {
selectPlane("xyzxyz"); // Select not valid ICAO24 (hex) address to clear selection.
}
Selected = null;
refreshSelectedInfo();
refreshTableInfo();
});
// Setup our timer to poll from the server. // Setup our timer to poll from the server.
window.setInterval(function() { window.setInterval(function() {
fetchData(); fetchData();
@ -260,4 +377,8 @@ function initialize() {
window.setInterval(function() { window.setInterval(function() {
printTime(); printTime();
}, 250); }, 250);
refreshGeneralInfo();
refreshSelectedInfo();
refreshTableInfo();
} }

13
public_html/style.css
View file

@ -1,9 +1,12 @@
html { height: 100% } html { height: 100% }
body { height: 100%; margin: 0; padding: 0 } body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% } #map_canvas {
height: 100%;
margin-right:390px;
}
#info { #info {
position: absolute; position: absolute;
width:20%; width:390px;
height:100%; height:100%;
bottom:0px; bottom:0px;
right:0px; right:0px;
@ -36,4 +39,10 @@ margin:0px;
font-size: x-small; font-size: x-small;
font-family: monospace; font-family: monospace;
} }
#tableinforow {
cursor: pointer;
}
#tableinforow .bold {
font-weight:bold;
}