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

Merge pull request #3 from terribl/master

Browse source 
New settings div
This commit is contained in:
Brian Davenport 2013-05-21 12:36:21 -07:00
parent 8e23983c86 a1d4a9f320
commit 05c9ebbb76
3 changed files with 79 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public_html/gmap.html
View file

@ -13,12 +13,17 @@
<div id="map_canvas" style="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 id="header">Dump1090 - <span id="utcTime">00:00:00</span> UTC</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>
<div id="tabinfo"></div> <div id="tabinfo"></div>
</div> </div>
<div id="info_footer"><a href="#" onClick="resetMap();">Reset Map</a></div> <div id="info_settings">[<a href="#" onClick="toggleSettings();">Settings</a>]</div>
<div id="info_settings_area">
<h2>Settings</h2>
<input type="button" value="Reset Map" onClick="resetMap();toggleSettings();">
<input type="button" value="OK" style="position:absolute;bottom:0;right:2px;" onClick="toggleSettings();">
</div>
</div> </div>
</body> </body>
</html> </html>

39
public_html/script.js
View file

@ -363,17 +363,25 @@ function printTime() {
} }
} }
function placeFooter() { function placeSettings() {
var windHeight = $(window).height(); // Settings link
var footerHeight = $('#info_footer').height(); var marginLeft = $('#header').width() - $('#info_settings').width();
var offset = parseInt(windHeight) - parseInt(footerHeight); $('#info_settings').css('left', marginLeft);
$('#info_settings').css('top', parseInt($('#utcTime').offset().top));
var footerWidth = parseInt($('#info_footer').width()); // Settings area
var infoWidth = parseInt($('#info').width()); $('#info_settings_area').css('top', parseInt($('#geninfo').offset().top));
var marginLeft = parseInt((infoWidth / 2) - (footerWidth / 2)); $('#info_settings_area').css('left', 5);
$('#info_settings_area').css('width', parseInt($('#info').width() - 40));
$('#info_footer').css('top', offset); }
$('#info_footer').css('margin-left', marginLeft);
function toggleSettings() {
if ($('#info_settings_area').css('display') != 'none') {
$('#info_settings_area').hide(350);
} else {
// Open settings
$('#info_settings_area').show(350);
}
} }
function resetMap() { function resetMap() {
@ -381,7 +389,8 @@ function resetMap() {
localStorage['CenterLon'] = 9.0; localStorage['CenterLon'] = 9.0;
localStorage['ZoomLvl'] = 5; localStorage['ZoomLvl'] = 5;
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;
refreshSelectedInfo(); refreshSelectedInfo();
} }
@ -413,14 +422,14 @@ function initialize() {
maxZoom: 18 maxZoom: 18
})); }));
// show footer at info-area // show settings at info-area
$(function(){ $(function(){
$(window).resize(function(e){ $(window).resize(function(e){
placeFooter(); placeSettings();
}); });
placeFooter(); placeSettings();
// hide it before it's positioned // hide it before it's positioned
$('#info_footer').css('display','inline'); $('#info_settings').css('display','inline');
}); });
// Listener for newly created Map // Listener for newly created Map

77
public_html/style.css
View file

@ -1,49 +1,68 @@
html { height: 100%; } html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font-size: small;} body { height: 100%; margin: 0; padding: 0; font-size: small;}
a { color: blue; } a { color: blue; }
#map_canvas { #map_canvas {
height: 100%; height: 100%;
margin-right:390px; margin-right: 390px;
} }
#info { #info {
position: absolute; position: absolute;
width:390px; 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, Sans-serif, Arial;
} }
#info div { #info div {
padding:0px; padding: 0px;
padding-left:10px; padding-left: 10px;
padding-right:10px; padding-right: 10px;
margin:0px; margin: 0px;
} }
#info div h1 { #info div h1 {
margin-top:10px; margin-top: 10px;
font-size:16px; font-size: 16px;
} }
#info_footer {
position: absolute; #info div h2 {
display: none; margin-top: 10px;
text-align: center; font-size: 14px;
padding:0px;
margin:0px;
} }
#info_settings {
position: absolute;
display: none;
}
#info_settings_area {
position: absolute;
display: none;
background-color: white;
border: 1px solid gray;
}
#tabinfo{ #tabinfo{
height: 400px; height: 400px;
overflow-y: auto; overflow-y: auto;
} }
#tableinfo { #tableinfo {
font-size: x-small; font-size: x-small;
font-family: monospace; font-family: monospace;
} }
#tableinforow { #tableinforow {
cursor: pointer; cursor: pointer;
} }
#tableinforow .bold { #tableinforow .bold {
font-weight:bold; font-weight:bold;
} }