Splitted gmap.html to multiple files in new 'public_html'-directory.

Changes to 'dump1090.c'-file made accordingly.

	modified:   .gitignore
	modified:   dump1090.c
	deleted:    gmap.html
	new file:   public_html/gmap.html
	new file:   public_html/script.js
	new file:   public_html/style.css
This commit is contained in:
terribl 2013-05-09 17:59:26 +03:00
parent 71ace95fd4
commit 6968bf92a6
6 changed files with 304 additions and 218 deletions

2
.gitignore vendored
View file

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

View file

@ -3067,22 +3067,22 @@ char *aircraftsToJson(int *len) {
speed = (int) (speed * 1.852);
}
if (a->lat != 0 && a->lon != 0) {
l = snprintf(p,buflen,
"{\"hex\":\"%06x\", \"flight\":\"%s\", \"lat\":%f, "
"\"lon\":%f, \"altitude\":%d, \"track\":%d, "
"\"speed\":%d},\n",
a->addr, a->flight, a->lat, a->lon, a->altitude, a->track,
a->speed);
p += l; buflen -= l;
/* Resize if needed. */
if (buflen < 256) {
int used = p-buf;
buflen += 1024; /* Our increment. */
buf = (char *) realloc(buf,used+buflen);
p = buf+used;
}
l = snprintf(p,buflen,
"{\"hex\":\"%06x\", \"squawk\":\"%04x\", \"flight\":\"%s\", \"lat\":%f, "
"\"lon\":%f, \"altitude\":%d, \"track\":%d, "
"\"speed\":%d},\n",
a->addr, a->modeA, a->flight, a->lat, a->lon, a->altitude, a->track,
a->speed);
p += l; buflen -= l;
/* Resize if needed. */
if (buflen < 256) {
int used = p-buf;
buflen += 1024; // Our increment.
buf = (char *) realloc(buf,used+buflen);
p = buf+used;
}
a = a->next;
}
/* Remove the final comma if any, and closes the json array. */
@ -3099,7 +3099,9 @@ char *aircraftsToJson(int *len) {
}
#define MODES_CONTENT_TYPE_HTML "text/html;charset=utf-8"
#define MODES_CONTENT_TYPE_CSS "text/css;charset=utf-8"
#define MODES_CONTENT_TYPE_JSON "application/json;charset=utf-8"
#define MODES_CONTENT_TYPE_JS "application/javascript;charset=utf-8"
/* Get an HTTP request header and write the response to the client.
* Again here we assume that the socket buffer is enough without doing
@ -3112,22 +3114,23 @@ int handleHTTPRequest(struct client *c) {
int clen, hdrlen;
int httpver, keepalive;
char *p, *url, *content;
char *ctype;
char ctype[48];
char getFile[1024];
if (Modes.debug & MODES_DEBUG_NET)
printf("\nHTTP request: %s\n", c->buf);
/* Minimally parse the request. */
// Minimally parse the request.
httpver = (strstr(c->buf, "HTTP/1.1") != NULL) ? 11 : 10;
if (httpver == 10) {
/* HTTP 1.0 defaults to close, unless otherwise specified. */
// HTTP 1.0 defaults to close, unless otherwise specified.
keepalive = strstr(c->buf, "Connection: keep-alive") != NULL;
} else if (httpver == 11) {
/* HTTP 1.1 defaults to keep-alive, unless close is specified. */
// HTTP 1.1 defaults to keep-alive, unless close is specified.
keepalive = strstr(c->buf, "Connection: close") == NULL;
}
/* Identify he URL. */
// Identify he URL.
p = strchr(c->buf,' ');
if (!p) return 1; /* There should be the method and a space... */
url = ++p; /* Now this should point to the requested URL. */
@ -3140,34 +3143,51 @@ int handleHTTPRequest(struct client *c) {
printf("HTTP requested URL: %s\n\n", url);
}
if (strlen(url) < 2) {
snprintf(getFile, sizeof getFile, "./public_html/gmap.html"); // Default file
} else {
snprintf(getFile, sizeof getFile, "./public_html%s", url);
}
/* Select the content to send, we have just two so far:
* "/" -> Our google map application.
* "/data.json" -> Our ajax request to update planes. */
if (strstr(url, "/data.json")) {
content = aircraftsToJson(&clen);
ctype = MODES_CONTENT_TYPE_JSON;
//snprintf(ctype, sizeof ctype, MODES_CONTENT_TYPE_JSON);
} else {
struct stat sbuf;
int fd = -1;
if (stat("gmap.html",&sbuf) != -1 &&
(fd = open("gmap.html",O_RDONLY)) != -1)
{
if (stat(getFile, &sbuf) != -1 && (fd = open(getFile, O_RDONLY)) != -1) {
content = (char *) malloc(sbuf.st_size);
if (read(fd,content,sbuf.st_size) == -1) {
snprintf(content,sbuf.st_size,"Error reading from file: %s",
strerror(errno));
if (read(fd, content, sbuf.st_size) == -1) {
snprintf(content, sbuf.st_size, "Error reading from file: %s", strerror(errno));
}
clen = sbuf.st_size;
} else {
char buf[128];
clen = snprintf(buf,sizeof(buf),"Error opening HTML file: %s",
strerror(errno));
clen = snprintf(buf,sizeof(buf),"Error opening HTML file: %s", strerror(errno));
content = strdup(buf);
}
if (fd != -1) close(fd);
ctype = MODES_CONTENT_TYPE_HTML;
if (fd != -1) {
close(fd);
}
}
// Get file extension and content type
snprintf(ctype, sizeof ctype, MODES_CONTENT_TYPE_HTML); // Default content type
char *ext = strrchr(getFile, '.');
if (strlen(ext) > 0) {
if (strstr(ext, ".json")) {
snprintf(ctype, sizeof ctype, MODES_CONTENT_TYPE_JSON);
} else if (strstr(ext, ".css")) {
snprintf(ctype, sizeof ctype, MODES_CONTENT_TYPE_CSS);
} else if (strstr(ext, ".js")) {
snprintf(ctype, sizeof ctype, MODES_CONTENT_TYPE_JS);
}
}
/* Create the header and send the reply. */
@ -3182,13 +3202,12 @@ int handleHTTPRequest(struct client *c) {
keepalive ? "keep-alive" : "close",
clen);
if (Modes.debug & MODES_DEBUG_NET)
if (Modes.debug & MODES_DEBUG_NET) {
printf("HTTP Reply header:\n%s", hdr);
}
/* Send header and content. */
if (write(c->fd, hdr, hdrlen) == -1 ||
write(c->fd, content, clen) == -1)
{
// Send header and content.
if (write(c->fd, hdr, hdrlen) == -1 || write(c->fd, content, clen) == -1) {
free(content);
return 1;
}

180
gmap.html
View file

@ -1,180 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
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;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
Map=null;
CenterLat=45.0;
CenterLon=9.0;
Planes={};
NumPlanes = 0;
Selected=null
function getIconForPlane(plane) {
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);
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
};
}
function selectPlane() {
if (!Planes[this.planehex]) return;
var old = Selected;
Selected = this.planehex;
if (Planes[old]) {
/* Remove the highlight in the previously selected plane. */
Planes[old].marker.setIcon(getIconForPlane(Planes[old]));
}
Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected]));
refreshSelectedInfo();
}
function refreshGeneralInfo() {
var i = document.getElementById('geninfo');
i.innerHTML = NumPlanes+' planes on screen.';
}
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>';
i.innerHTML = html;
}
function fetchData() {
$.getJSON('/data.json', function(data) {
var stillhere = {}
for (var j=0; j < data.length; j++) {
var plane = data[j];
var marker = null;
stillhere[plane.hex] = true;
plane.flight = $.trim(plane.flight);
if (Planes[plane.hex]) {
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;
if (myplane.hex == Selected)
refreshSelectedInfo();
} else {
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;
/* 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+')')
}
NumPlanes = data.length;
/* Remove idle planes. */
for (var p in Planes) {
if (!stillhere[p]) {
Planes[p].marker.setMap(null);
delete Planes[p];
}
}
});
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(CenterLat, CenterLon),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
/* Setup our timer to poll from the server. */
window.setInterval(function() {
fetchData();
refreshGeneralInfo();
}, 1000);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:100%"></div>
<div id="info">
<div>
<h1>Dump1090</h1>
<p id="geninfo"></p>
<p id="selinfo">Click on a plane for info.</p>
</div>
</div>
</body>
</html>

23
public_html/gmap.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:100%"></div>
<div id="info">
<div>
<h1>Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1>
<p id="geninfo"></p>
<p id="selinfo">Click on a plane for info.</p>
</div>
<div id="info_footer"><a href="#" onClick="resetMap();">Reset Map</a></div>
</div>
</body>
</html>

188
public_html/script.js Normal file
View file

@ -0,0 +1,188 @@
Map = null;
CenterLat = 45.0;
CenterLon = 9.0;
ZoomLvl = 5;
Planes={};
NumPlanes = 0;
Selected=null
if (localStorage['CenterLat']) { CenterLat = Number(localStorage['CenterLat']); }
if (localStorage['CenterLon']) { CenterLon = Number(localStorage['CenterLon']); }
if (localStorage['ZoomLvl']) { ZoomLvl = Number(localStorage['ZoomLvl']); }
function getIconForPlane(plane) {
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);
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
};
}
function selectPlane() {
if (!Planes[this.planehex]) return;
var old = Selected;
Selected = this.planehex;
if (Planes[old]) {
/* Remove the highlight in the previously selected plane. */
Planes[old].marker.setIcon(getIconForPlane(Planes[old]));
}
Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected]));
refreshSelectedInfo();
}
function refreshGeneralInfo() {
var i = document.getElementById('geninfo');
i.innerHTML = NumPlanes+' planes on screen.';
}
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>';
i.innerHTML = html;
}
function fetchData() {
$.getJSON('/data.json', function(data) {
var stillhere = {}
for (var j=0; j < data.length; j++) {
var plane = data[j];
var marker = null;
stillhere[plane.hex] = true;
plane.flight = $.trim(plane.flight);
if (Planes[plane.hex]) {
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;
if (myplane.hex == Selected)
refreshSelectedInfo();
} else {
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;
/* 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+')')
}
NumPlanes = data.length;
/* Remove idle planes. */
for (var p in Planes) {
if (!stillhere[p]) {
Planes[p].marker.setMap(null);
delete Planes[p];
}
}
});
}
function checkTime(i) {
if (i < 10) {
return "0" + i;
}
return i;
}
function printTime() {
var currentTime = new Date();
var hours = checkTime(currentTime.getUTCHours());
var minutes = checkTime(currentTime.getUTCMinutes());
var seconds = checkTime(currentTime.getUTCSeconds());
if (document.getElementById) {
document.getElementById('utcTime').innerHTML =
hours + ":" + minutes + ":" + seconds;
}
}
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 initialize() {
var mapOptions = {
center: new google.maps.LatLng(CenterLat, CenterLon),
zoom: ZoomLvl,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// 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
google.maps.event.addListener(Map, 'center_changed', function() {
localStorage['CenterLat'] = Map.getCenter().lat();
localStorage['CenterLon'] = Map.getCenter().lng();
});
google.maps.event.addListener(Map, 'zoom_changed', function() {
localStorage['ZoomLvl'] = Map.getZoom();
});
// Setup our timer to poll from the server.
window.setInterval(function() {
fetchData();
refreshGeneralInfo();
}, 1000);
// Faster timer, smoother things
window.setInterval(function() {
printTime();
}, 250);
}

34
public_html/style.css Normal file
View file

@ -0,0 +1,34 @@
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;
}