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
frames.js
.*.swp
~*
*~
*.rej
*.orig

14
dump1090.c
View file

@ -3623,6 +3623,8 @@ 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) {
@ -3630,11 +3632,19 @@ char *aircraftsToJson(int *len) {
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;

3
public_html/gmap.html
View file

@ -10,7 +10,7 @@
<script type="text/javascript" src="script.js"></script>
</head>
<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>
<h1>Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1>
@ -22,3 +22,4 @@
</div>
</body>
</html>

213
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['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
};
}
function selectPlane() {
if (!Planes[this.planehex]) return;
/* 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;
// 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;
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]));
}
if (Planes[Selected].validposition) {
Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected]));
}
refreshSelectedInfo();
refreshTableInfo();
}
function refreshGeneralInfo() {
var i = document.getElementById('geninfo');
i.innerHTML = PlanesOnGrid + ' planes on grid.<br>';
i.innerHTML += PlanesOnMap + ' planes on map.';
i.innerHTML = PlanesOnMap + ' planes on map.<br>';
i.innerHTML += PlanesOnGrid + ' planes on grid.';
}
function refreshSelectedInfo() {
var i = document.getElementById('selinfo');
var p = Planes[Selected];
if (!p) return;
var html = 'ICAO: '+p.hex+'<br>';
if (p.flight.length) {
html += '<b>'+p.flight+'</b><br>';
}
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;
// If no plane is selected
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";
}
function refreshTableInfo() {
var i = document.getElementById('tabinfo');
var html = '<table id="tableinfo" width="100%">';
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>';
for (var p in Planes) {
if (p == Selected) {
html += '<tr style="background-color: #F0F0F0;">';
var html = '<table id="selectedinfo">';
html += '<tr><td colspan=2><b>'+p.flight+'&nbsp;</b></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>';
} else {
html += '<tr>';
html += '<tr><td>Squawk:</td><td>n/a</td></tr>';
}
html += '<td>' + Planes[p].flight + '</td>';
html += '<td align="right">' + Planes[p].altitude + '</td>';
html += '<td align="center">' + Planes[p].speed + '</td>';
html += '<td align="center">' + Planes[p].track + '</td>';
html += '<td>' + Planes[p].lat + '</td>';
html += '<td>' + Planes[p].lon + '</td>';
html += '<td align="center">' + Planes[p].seen + '</td>';
html += '<td align="center">' + Planes[p].messages + '</td>';
html += '</tr>';
html += '<tr><td>Altitude:</td><td>'+p.altitude+' feet</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>';
} else {
html += '<tr><td>Coordinates:</td><td>n/a</td></tr>';
}
html += '<tr><td>Messages:</td><td>'+p.messages+'</td></tr>';
html += '<tr><td>Seen:</td><td>'+p.seen+' sec</td></tr>';
html += '</table>';
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() {
$.getJSON('data.json', function(data) {
// Planes that are still with us, and set map count to 0
var stillhere = {}
PlanesOnMap = 0;
// Loop through all the planes in the data packet
for (var j=0; j < data.length; j++) {
// 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);
if (plane.lat != 0 && plane.lon != 0) {
// Show only planes with position
// Set the marker to null, for now
var marker = null;
PlanesOnMap++;
// Either update the data or add it
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];
// 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();
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;
@ -121,9 +212,17 @@ function fetchData() {
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.validposition) {
// Add new plane to map
marker = new google.maps.Marker({
position: new google.maps.LatLng(plane.lat, plane.lon),
@ -132,32 +231,41 @@ function fetchData() {
});
plane.marker = marker;
marker.planehex = plane.hex;
Planes[plane.hex] = plane;
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.validposition) {
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();
});
}
@ -200,7 +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 = '';
refreshSelectedInfo();
}
function initialize() {
@ -250,6 +358,15 @@ function initialize() {
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.
window.setInterval(function() {
fetchData();
@ -260,4 +377,8 @@ function initialize() {
window.setInterval(function() {
printTime();
}, 250);
refreshGeneralInfo();
refreshSelectedInfo();
refreshTableInfo();
}

13
public_html/style.css
View file

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