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

Some map view changes

Browse source 
modified:   public_html/gmap.html
	modified:   public_html/script.js
	modified:   public_html/style.css
This commit is contained in:
terribl 2013-05-11 17:04:23 +03:00
parent bf4ccaca06
commit e6080e259f
3 changed files with 104 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public_html/gmap.html
View file

@ -10,15 +10,14 @@
<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"></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 <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>

99
public_html/script.js
View file

@ -29,7 +29,8 @@ function getIconForPlane(plane) {
}; };
} }
function selectPlane() { function selectPlane(selectedPlane) {
if (selectedPlane.length) this.planehex = selectedPlane;
if (!Planes[this.planehex]) return; if (!Planes[this.planehex]) return;
var old = Selected; var old = Selected;
Selected = this.planehex; Selected = this.planehex;
@ -38,7 +39,9 @@ function selectPlane() {
Planes[old].marker.setIcon(getIconForPlane(Planes[old])); Planes[old].marker.setIcon(getIconForPlane(Planes[old]));
} }
Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected])); Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected]));
refreshSelectedInfo(); refreshSelectedInfo();
refreshTableInfo();
} }
function refreshGeneralInfo() { function refreshGeneralInfo() {
@ -52,16 +55,29 @@ function refreshSelectedInfo() {
var i = document.getElementById('selinfo'); var i = document.getElementById('selinfo');
var p = Planes[Selected]; var p = Planes[Selected];
if (!p) return; if (!p) {
var html = 'ICAO: '+p.hex+'<br>'; p = {};
if (p.flight.length) { p.flight = "";
html += '<b>'+p.flight+'</b><br>'; 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>'; var html = '<table id="selectedinfo">';
html += 'Coordinates: '+p.lat+', '+p.lon+'<br>'; html += '<tr><td colspan=2><b>'+p.flight+'&nbsp;</b></td></tr>';
html += 'Messages: '+p.messages+'<br>'; html += '<tr><td>ICAO:</td><td>'+p.hex+'</td></tr>';
html += 'Seen: '+p.seen+' sec<br>'; html += '<tr><td>Squawk:</td><td>'+p.squawk+'</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>Coordinates:</td><td>'+p.lat+', '+p.lon+'</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; i.innerHTML = html;
} }
@ -69,21 +85,23 @@ function refreshTableInfo() {
var i = document.getElementById('tabinfo'); var i = document.getElementById('tabinfo');
var html = '<table id="tableinfo" width="100%">'; 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>'; html += '<thead style="background-color: #CCCCCC;">';
html += '<td>Flight</td><td>Squawk</td><td align="right">Altitude</td>';
html += '<td align="center">Speed</td><td align="center">Track</td><td>Seen</td>';
html += '<td>Msgs</td></thead>';
for (var p in Planes) { for (var p in Planes) {
if (p == Selected) { if (p == Selected) {
html += '<tr style="background-color: #F0F0F0;">'; html += '<tr style="background-color: #E0E0E0;">';
} else { } else {
html += '<tr>'; html += '<tr id="tableinforow" onClick="selectPlane(\''+p+'\');">';
} }
html += '<td>' + Planes[p].flight + '</td>'; html += '<td>' + Planes[p].flight + '</td>';
html += '<td align="right">' + Planes[p].squawk + '</td>';
html += '<td align="right">' + Planes[p].altitude + '</td>'; html += '<td align="right">' + Planes[p].altitude + '</td>';
html += '<td align="center">' + Planes[p].speed + '</td>'; html += '<td align="right">' + Planes[p].speed + '</td>';
html += '<td align="center">' + Planes[p].track + '</td>'; html += '<td align="right">' + Planes[p].track + '</td>';
html += '<td>' + Planes[p].lat + '</td>'; html += '<td align="right">' + Planes[p].seen + '</td>';
html += '<td>' + Planes[p].lon + '</td>'; html += '<td align="right">' + Planes[p].messages + '</td>';
html += '<td align="center">' + Planes[p].seen + '</td>';
html += '<td align="center">' + Planes[p].messages + '</td>';
html += '</tr>'; html += '</tr>';
} }
html += '</table>'; html += '</table>';
@ -120,6 +138,7 @@ 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;
if (myplane.hex == Selected) if (myplane.hex == Selected)
refreshSelectedInfo(); refreshSelectedInfo();
@ -157,7 +176,6 @@ function fetchData() {
} }
refreshTableInfo() ; 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() { function resetMap() {
localStorage['CenterLat'] = 45.0; localStorage['CenterLat'] = 45.0;
localStorage['CenterLon'] = 9.0; localStorage['CenterLon'] = 9.0;
@ -203,6 +208,13 @@ function resetMap() {
document.getElementById('selinfo').innerHTML = ''; 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() { function initialize() {
var mapTypeIds = []; var mapTypeIds = [];
for(var type in google.maps.MapTypeId) { for(var type in google.maps.MapTypeId) {
@ -230,14 +242,8 @@ function initialize() {
maxZoom: 18 maxZoom: 18
})); }));
// show footer at info-area $(window).resize(function(e){
$(function(){ resizeMap();
$(window).resize(function(e){
placeFooter();
});
placeFooter();
// hide it before it's positioned
$('#info_footer').css('display','inline');
}); });
// Listener for newly created Map // Listener for newly created Map
@ -250,6 +256,13 @@ function initialize() {
localStorage['ZoomLvl'] = Map.getZoom(); 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. // Setup our timer to poll from the server.
window.setInterval(function() { window.setInterval(function() {
fetchData(); fetchData();
@ -260,4 +273,8 @@ function initialize() {
window.setInterval(function() { window.setInterval(function() {
printTime(); printTime();
}, 250); }, 250);
refreshGeneralInfo();
refreshSelectedInfo();
resizeMap();
} }

79
public_html/style.css
View file

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