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

Merge pull request #7 from drakeapps/master

Browse source 
Update design and use SkyView branding
This commit is contained in:
Oliver Jowett 2017-03-22 22:26:20 +00:00 committed by GitHub
parent 17c3a3fb6b 84383e2209
commit d790600a86
45 changed files with 1537 additions and 582 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public_html/config.js
View file

@ -102,7 +102,7 @@ SiteCirclesDistances = new Array(100,150,200);
ShowClocks = false; ShowClocks = false;
// Controls page title, righthand pane when nothing is selected // Controls page title, righthand pane when nothing is selected
PageName = "FlightAware dump1090"; PageName = "PiAware Skyview";
// Show country flags by ICAO addresses? // Show country flags by ICAO addresses?
ShowFlags = true; ShowFlags = true;

16
public_html/formatter.js
View file

@ -6,7 +6,7 @@ var DEGREES='\u00b0'
var UP_TRIANGLE='\u25b2'; // U+25B2 BLACK UP-POINTING TRIANGLE var UP_TRIANGLE='\u25b2'; // U+25B2 BLACK UP-POINTING TRIANGLE
var DOWN_TRIANGLE='\u25bc'; // U+25BC BLACK DOWN-POINTING TRIANGLE var DOWN_TRIANGLE='\u25bc'; // U+25BC BLACK DOWN-POINTING TRIANGLE
var TrackDirections = ["North","Northeast","East","Southeast","South","Southwest","West","Northwest"]; var TrackDirections = ["North","NE","East","SE","South","SW","West","NW"];
var UnitLabels = { var UnitLabels = {
'altitude': { metric: "m", imperial: "ft", nautical: "ft"}, 'altitude': { metric: "m", imperial: "ft", nautical: "ft"},
@ -31,7 +31,7 @@ function format_track_brief(track) {
return ""; return "";
} }
return Math.round(track); return Math.round(track) + DEGREES;
} }
// track in degrees (0..359) // track in degrees (0..359)
@ -54,7 +54,7 @@ function format_altitude_brief(alt, vr, displayUnits) {
return "ground"; return "ground";
} }
alt_text = Math.round(convert_altitude(alt, displayUnits)) + NBSP; alt_text = Math.round(convert_altitude(alt, displayUnits)).toLocaleString() + NBSP;
// Vertical Rate Triangle // Vertical Rate Triangle
var verticalRateTriangle = "<span class=\"verticalRateTriangle\">"; var verticalRateTriangle = "<span class=\"verticalRateTriangle\">";
@ -80,7 +80,7 @@ function format_altitude_long(alt, vr, displayUnits) {
return "on ground"; return "on ground";
} }
alt_text = Math.round(convert_altitude(alt, displayUnits)) + NBSP + get_unit_label("altitude", displayUnits); alt_text = Math.round(convert_altitude(alt, displayUnits)).toLocaleString() + NBSP + get_unit_label("altitude", displayUnits);
if (vr > 128) { if (vr > 128) {
return UP_TRIANGLE + NBSP + alt_text; return UP_TRIANGLE + NBSP + alt_text;
@ -142,12 +142,16 @@ function format_distance_brief(dist, displayUnits) {
} }
// dist in meters // dist in meters
function format_distance_long(dist, displayUnits) { function format_distance_long(dist, displayUnits, fixed) {
if (dist === null) { if (dist === null) {
return "n/a"; return "n/a";
} }
var dist_text = convert_distance(dist, displayUnits).toFixed(1) + NBSP + get_unit_label("distance", displayUnits); if (typeof fixed === 'undefined') {
fixed = 1;
}
var dist_text = convert_distance(dist, displayUnits).toFixed(fixed) + NBSP + get_unit_label("distance", displayUnits);
return dist_text; return dist_text;
} }

1
public_html/images/alt_legend_feet.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

1
public_html/images/alt_legend_meters.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public_html/images/box-checked.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 197 B

BIN
public_html/images/box-checked@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 292 B

BIN
public_html/images/box-checked@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 325 B

BIN
public_html/images/box-empty.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 182 B

BIN
public_html/images/box-empty@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 232 B

BIN
public_html/images/box-empty@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 281 B

BIN
public_html/images/close-settings.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 482 B

BIN
public_html/images/close-settings@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 874 B

BIN
public_html/images/close-settings@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public_html/images/column-adjust.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 329 B

BIN
public_html/images/column-adjust@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 494 B

BIN
public_html/images/column-adjust@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 629 B

BIN
public_html/images/fa_logo_color.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public_html/images/fa_logo_color@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public_html/images/fa_logo_color@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
public_html/images/ff-sv-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public_html/images/ff-sv-logo@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public_html/images/ff-sv-logo@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
public_html/images/map-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 700 B

BIN
public_html/images/map-icon@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public_html/images/map-icon@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public_html/images/pa-sv-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public_html/images/pa-sv-logo@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public_html/images/pa-sv-logo@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
public_html/images/settings-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 485 B

BIN
public_html/images/settings-icon@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 805 B

BIN
public_html/images/settings-icon@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public_html/images/table-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 699 B

BIN
public_html/images/table-icon@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 914 B

BIN
public_html/images/table-icon@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public_html/images/zoom-in.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 439 B

BIN
public_html/images/zoom-in@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 705 B

BIN
public_html/images/zoom-in@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 917 B

BIN
public_html/images/zoom-out.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 379 B

BIN
public_html/images/zoom-out@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 598 B

BIN
public_html/images/zoom-out@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 834 B

303
public_html/index.html
View file

@ -23,7 +23,7 @@
<script type="text/javascript" src="flags.js"></script> <script type="text/javascript" src="flags.js"></script>
<script type="text/javascript" src="layers.js"></script> <script type="text/javascript" src="layers.js"></script>
<script type="text/javascript" src="script.js"></script> <script type="text/javascript" src="script.js"></script>
<title>FlightAware dump1090</title> <title>PiAware Skyview</title>
</head> </head>
<body onload="initialize()"> <body onload="initialize()">
@ -46,66 +46,209 @@
<input type="hidden" name="submit" value="submit"> <input type="hidden" name="submit" value="submit">
</form> </form>
<div id="header" class="infoHeading">
<div class="logoContainer">
<a href="http://flightaware.com/" target="_blank"><img src="images/fa_logo_color.png" alt="FlightAware" class="flightawareLogo" srcset="images/fa_logo_color.png 1x, images/fa_logo_color@2x.png 2x, images/fa_logo_color@3x.png 3x"></a>
<img src="images/pa-sv-logo.png" alt="PiAware SkyView" class="adsbLogo piAwareLogo" srcset="images/pa-sv-logo.png 1x, images/pa-sv-logo@2x.png 2x, images/pa-sv-logo@3x.png 3x">
<img src="images/ff-sv-logo.png" alt="FlightFeeder SkyView" class="adsbLogo flightfeederLogo" srcset="images/ff-sv-logo.png 1x, images/ff-sv-logo@2x.png 2x, images/ff-sv-logo@3x.png 3x" style="display: none;">
</div>
<div class="buttonContainer">
<div class="dateTime" id="clock_div"></div>
<div class="button buttonHeader" onclick="resetMap();"><span class="buttonText">Reset Map</span></div>
<div class="button buttonHeader" onclick="selectAllPlanes();"><span class="buttonText">Show All Tracks</span></div>
<div class="button buttonHeader" onclick="deselectAllPlanes();"><span class="buttonText">Hide All Tracks</span></div>
</div>
<div class="settingsContainer"><img src="images/settings-icon.png" id="settingsCog" srcset="images/settings-icon.png 1x, images/settings-icon@2x.png 2x, images/settings-icon@3x.png 3x"></div>
</div>
<div id="layout_container"> <div id="layout_container">
<div id="selected_infoblock" class="hidden"> <div id="selected_infoblock" class="hidden">
<table style="width: 100%"> <div class="highlightedTitle">
<tr class="infoblock_heading"> <span id="selected_flightaware_link" class="link rightLink"></span>
<td colspan="2"> <span class="identLarge"><span id="selected_callsign">n/a</span></span>
<b> <span class="identSmall"><span id="selected_icao">n/a</span></span>
<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span> </div>
</b> <div class="highlightedInfo">
<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">&#x21D2;</span> <div class="infoBlockTopSection">
<div class="infoRow removePadding">
<span id="selected_flag"> <div class="infoHeading infoRowFluid">Registration: </div>
<img style="width: 20px; height=12px" src="about:blank" alt="Flag"> <div class="infoData infoRowFluid"><span id="selected_registration">n/a</span></div>
</span> </div>
<div class="infoRow removePadding">
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;"> <div class="infoHeading infoRowFluid">Country of registration: </div>
<span id="selected_icao"></span> <div class="infoData infoRowFluid"><span id="selected_country">n/a</span></div>
</a> </div>
<span id="selected_registration"></span> </div>
<div class="infoBlock45pxSection lightGreyBackground">
<div class="infoHeading infoRowFluid fourColumnSection1">
Aircraft Type:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_icaotype"></span> <span id="selected_icaotype"></span>
<span id="selected_emergency"></span> </div>
<span id="selected_flightaware_link"></span> <div class="infoHeading infoRowFluid fourColumnSection3">
</td> Source:
</tr> </div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_source"></span>
</div>
</div>
<div class="infoBlockSection">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">
Squawk:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_squawk"></span>
</div>
<div class="infoHeading infoRowFluid fourColumnSection3">
Speed:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_speed">n/a</span>
</div>
</div>
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">
Altitude:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_altitude"></span>
</div>
<div class="infoHeading infoRowFluid fourColumnSection3">
Distance:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_sitedist">n/a</span>
</div>
</div>
</div>
<div class="infoBlockSection lightGreyBackground">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">
Heading:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_track">n/a</span>
</div>
<div class="infoHeading infoRowFluid fourColumnSection3">
Position:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_position">n/a</span>
</div>
</div>
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">
Vertical Rate:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_vertical_rate">n/a</span>
</div>
<div class="infoHeading infoRowFluid fourColumnSection3">
Last Seen:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_seen">n/a</span>
</div>
</div>
</div>
<div class="infoBlockSection">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">
Messages:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_message_count">n/a</span>
</div>
<div class="infoHeading infoRowFluid fourColumnSection3">
RSSI:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_rssi">n/a</span>
</div>
</div>
</div>
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;" class="link rightLink">
AirFrames.org
</a>
<span id="selected_photo_link" class="link"></span>
</div>
<tr id="infoblock_country" class="infoblock_body">
<td colspan="2">Country of registration: <span id="selected_country">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
<td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
</tr>
<tr class="infoblock_body">
<td>Speed: <span id="selected_speed">n/a</span></td>
<td>RSSI: <span id="selected_rssi">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td>Vertical rate: <span id="selected_vertical_rate">n/a</span></td>
<td>Messages: <span id="selected_message_count">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td>Track: <span id="selected_track">n/a</span></td>
<td>Last seen: <span id="selected_seen">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td colspan="2">Position: <span id="selected_position">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td colspan="2"><span id="selected_photo_link"></span></td>
</tr>
</table>
</div> <!-- selected_infoblock --> </div> <!-- selected_infoblock -->
<div id="highlighted_infoblock">
<div class="highlightedTitle">
<span class="identLarge"><span id="highlighted_callsign">n/a</span></span>
<span class="identSmall"><span id="highlighted_icao">n/a</span></span>
</div>
<div class="highlightedInfo">
<div class="infoRow">
<div class="infoHeading infoRowTitle">Aircraft Type: </div>
<div class="infoData infoRowContent"><span id="higlighted_icaotype">n/a</span></div>
</div>
<div class="infoRow">
<div class="infoHeading infoRowTitle">Altitude: </div>
<div class="infoData infoRowContent"><span id="highlighted_altitude">n/a</span></div>
</div>
<div class="infoRow">
<div class="infoHeading infoRowTitle">Speed: </div>
<div class="infoData infoRowContent"><span id="highlighted_speed">n/a</span></div>
</div>
</div>
</div>
<div id="settings_infoblock">
<div id="settings_close" class="settingsCloseBox"></div>
<div class="settingsColumn">
<div class="settingsOptionContainer">
<div class="infoBlockTitleText">Overlay Toggles</div>
</div>
<div class="settingsOptionContainer">
<div class="settingsCheckbox" id="nexrad_checkbox"></div>
<div class="settingsText">NEXRAD Weather</div>
</div>
<div class="settingsOptionContainer">
<div class="settingsCheckbox" id="sitepos_checkbox"></div>
<div class="settingsText">Site Position and Range Rings</div>
</div>
<div class="settingsOptionContainer">
<div class="settingsCheckbox" id="actrail_checkbox"></div>
<div class="settingsText">Selected Aircraft Trail</div>
</div>
<div class="settingsOptionContainer">
<div class="settingsCheckbox" id="acpositions_checkbox"></div>
<div class="settingsText">Aircraft Positions</div>
</div>
<div class="settingsOptionContainer" id="altitude_chart_container">
<div class="settingsCheckbox" id="altitude_checkbox"></div>
<div class="settingsText">Altitude Chart</div>
</div>
</div>
<div class="settingsColumn">
<div class="settingsOptionContainer">
<div class="infoBlockTitleText">View Toggles</div>
</div>
<div class="settingsOptionContainer">
<div class="settingsCheckbox" id="blockedmlat_filter"></div>
<div class="settingsText">Show Anonymous MLAT Tracks</div>
</div>
<div class="settingsOptionContainer">
<div class="settingsCheckbox" id="groundvehicle_filter"></div>
<div class="settingsText">Show Ground Vehicles and Other Non-Aircraft Positions</div>
</div>
<div class="settingsOptionContainer">
<div class="settingsCheckbox" id="selectall_checkbox"></div>
<div class="settingsText">All Aircraft Trails</div>
</div>
<div class="settingsOptionContainer">
<div class="settingsCheckbox" id="grouptype_checkbox"></div>
<div class="settingsText">Group by Data Type</div>
</div>
</div>
</div>
<div id="map_container"> <div id="map_container">
<div id="map_canvas"></div> <div id="map_canvas"></div>
<div id="toggle_sidebar_control" class="ol-unselectable ol-control"> <div id="toggle_sidebar_control" class="ol-unselectable ol-control">
@ -114,6 +257,9 @@
<div id="expand_sidebar_control" class="ol-unselectable ol-control"> <div id="expand_sidebar_control" class="ol-unselectable ol-control">
<button id="expand_sidebar_button" title="Expand Sidebar"></button> <button id="expand_sidebar_button" title="Expand Sidebar"></button>
</div> </div>
<div id="altitude_chart" class="ol-unselectable ol-control altitudeFeet">
<button id="altitude_chart_button"></button>
</div>
</div> </div>
<div id="sidebar_container"> <div id="sidebar_container">
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div> <div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
@ -123,40 +269,27 @@
<table style="width: 100%"> <table style="width: 100%">
<tr class="infoblock_heading"> <tr class="infoblock_heading">
<td> <td>
<b id="infoblock_name">FlightAware dump1090</b> <div class="button buttonTable" id="show_map_button"><span class="buttonText">Show Map</span></div>
</td>
<td>
<span id="show_map_button" class="sidebarButton pointer">Show Map</span>
</td> </td>
<td style="text-align: right"> <td style="text-align: right">
<a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a> <a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a>
</td> </td>
</tr> </tr>
<tr> <tr class="infoblock_body">
<td colspan="2"> <td><span class="infoBlockTitleText">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td>
<div id="sudo_buttons"> <td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td>
<span class="sidebarButton pointer" onclick="resetMap();">Reset Map</span>
<span class="sidebarButton pointer" onclick="selectAllPlanes();">Select All</span>
<span class="sidebarButton pointer" onclick="deselectAllPlanes();">Select None</span>
</div>
</td>
</tr> </tr>
<tr class="infoblock_body"> <tr class="infoblock_body">
<td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td> <td><span class="infoBlockTitleText">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td>
<td>Messages: <span id="dump1090_message_rate">n/a</span>/sec</td> <td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td>
</tr>
<tr class="infoblock_body">
<td>(with positions): <span id="dump1090_total_ac_positions">n/a</span></td>
<td>History: <span id="dump1090_total_history">n/a</span> positions</td>
</tr> </tr>
</table> </table>
</div> <!-- dump1090_infoblock --> </div> <!-- dump1090_infoblock -->
<div id="units_container"> <div id="units_container">
<label for="units_selector">Units:</label> <label for="units_selector"><span class="infoBlockTitleText">Units:</span></label>
<select name="units_selector" id="units_selector"> <select name="units_selector" id="units_selector">
<option value="nautical">Aeronautical</option> <option value="nautical">Aeronautical</option>
<option value="metric">Metric</option> <option value="metric">Metric</option>
@ -165,7 +298,7 @@
</div> </div>
<form id="altitude_filter_form"> <form id="altitude_filter_form">
<label>Filter by altitude:</label> <label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5"> <input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
<label for="minAltitude" class="altitudeUnit"></label> <label for="minAltitude" class="altitudeUnit"></label>
<span> to </span> <span> to </span>
@ -189,15 +322,15 @@
<td id="speed" onclick="sortBySpeed();">Speed (<span class="speedUnit"></span>)</td> <td id="speed" onclick="sortBySpeed();">Speed (<span class="speedUnit"></span>)</td>
<td id="vert_rate" onclick="sortByVerticalRate();">Vertical Rate (<span class="verticalRateUnit"></span>)</td> <td id="vert_rate" onclick="sortByVerticalRate();">Vertical Rate (<span class="verticalRateUnit"></span>)</td>
<td id="distance" onclick="sortByDistance();">Distance (<span class="distanceUnit"></span>)</td> <td id="distance" onclick="sortByDistance();">Distance (<span class="distanceUnit"></span>)</td>
<td id="track" onclick="sortByTrack();">Track</td> <td id="track" onclick="sortByTrack();">Heading</td>
<td id="msgs" onclick="sortByMsgs();">Msgs</td> <td id="msgs" onclick="sortByMsgs();">Msgs</td>
<td id="seen" onclick="sortBySeen();">Age</td> <td id="seen" onclick="sortBySeen();">Age</td>
<td id="rssi" onclick="sortByRssi();">RSSI</td> <td id="rssi" onclick="sortByRssi();">RSSI</td>
<td id="lat" onclick="sortByLatitude();">Latitude</td> <td id="lat" onclick="sortByLatitude();">Latitude</td>
<td id="lon" onclick="sortByLongitude();">Longitude</td> <td id="lon" onclick="sortByLongitude();">Longitude</td>
<td id="data_source" onclick="sortByDataSource();">Data Source</td> <td id="data_source" onclick="sortByDataSource();">Data Source</td>
<td id="airframes_mode_s_link">Airframes.org Link</td> <td id="airframes_mode_s_link">Airframes.org</td>
<td id="flightaware_mode_s_link">FlightAware Link</td> <td id="flightaware_mode_s_link">FlightAware</td>
<td id="flightaware_photo_link">Photos</td> <td id="flightaware_photo_link">Photos</td>
</tr> </tr>
</thead> </thead>
@ -226,6 +359,16 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="legend">
<div class="legendBox vPosition"></div>
<div class="legendTitle">ADS-B</div>
<div class="legendBox mlat"></div>
<div class="legendTitle">MLAT</div>
<div class="legendBox other"></div>
<div class="legendTitle">Other</div>
<div class="legendBox tisb"></div>
<div class="legendTitle">TIS-B</div>
</div>
</div> <!-- planes_table --> </div> <!-- planes_table -->
</div> <!-- sidebar_canvas --> </div> <!-- sidebar_canvas -->

475
public_html/markers.js
View file

File diff suppressed because one or more lines are too long

168
public_html/planeObject.js
View file

@ -86,6 +86,20 @@ PlaneObject.prototype.isFiltered = function() {
return planeAltitude < this.filter.minAltitude || planeAltitude > this.filter.maxAltitude; return planeAltitude < this.filter.minAltitude || planeAltitude > this.filter.maxAltitude;
} }
// filter out ground vehicles
if (typeof this.filter.groundVehicles !== 'undefined' && this.filter.groundVehicles === 'filtered') {
if (typeof this.category === 'string' && this.category.startsWith('C')) {
return true;
}
}
// filter out blocked MLAT flights
if (typeof this.filter.blockedMLAT !== 'undefined' && this.filter.blockedMLAT === 'filtered') {
if (typeof this.icao === 'string' && this.icao.startsWith('~')) {
return true;
}
}
return false; return false;
} }
@ -115,7 +129,8 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
head_update: this.last_position_time, head_update: this.last_position_time,
tail_update: this.last_position_time, tail_update: this.last_position_time,
estimated: false, estimated: false,
ground: (this.altitude === "ground") ground: (this.altitude === "ground"),
altitude: this.altitude
}; };
this.track_linesegs.push(newseg); this.track_linesegs.push(newseg);
this.history_size ++; this.history_size ++;
@ -137,6 +152,7 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
this.track_linesegs.push({ fixed: new ol.geom.LineString([projPrev, projHere]), this.track_linesegs.push({ fixed: new ol.geom.LineString([projPrev, projHere]),
feature: null, feature: null,
head_update: this.last_position_time, head_update: this.last_position_time,
altitude: 0,
estimated: true }); estimated: true });
this.history_size += 2; this.history_size += 2;
} else { } else {
@ -157,14 +173,15 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
head_update: this.last_position_time, head_update: this.last_position_time,
tail_update: this.last_position_time, tail_update: this.last_position_time,
estimated: false, estimated: false,
ground: (this.altitude === "ground") }; ground: (this.altitude === "ground"),
altitude: this.altitude };
this.track_linesegs.push(lastseg); this.track_linesegs.push(lastseg);
this.history_size ++; this.history_size ++;
// continue // continue
} }
if ( (lastseg.ground && this.altitude !== "ground") || if ( (lastseg.ground && this.altitude !== "ground") ||
(!lastseg.ground && this.altitude === "ground") ) { (!lastseg.ground && this.altitude === "ground") || this.altitude !== lastseg.altitude ) {
//console.log(this.icao + " ground state changed"); //console.log(this.icao + " ground state changed");
// Create a new segment as the ground state changed. // Create a new segment as the ground state changed.
// assume the state changed halfway between the two points // assume the state changed halfway between the two points
@ -176,6 +193,7 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
head_update: this.last_position_time, head_update: this.last_position_time,
tail_update: this.last_position_time, tail_update: this.last_position_time,
estimated: false, estimated: false,
altitude: this.altitude,
ground: (this.altitude === "ground") }); ground: (this.altitude === "ground") });
this.history_size += 3; this.history_size += 3;
return true; return true;
@ -236,33 +254,11 @@ PlaneObject.prototype.getMarkerColor = function() {
var h, s, l; var h, s, l;
if (this.altitude === null) { var colorArr = this.getAltitudeColor();
h = ColorByAlt.unknown.h;
s = ColorByAlt.unknown.s;
l = ColorByAlt.unknown.l;
} else if (this.altitude === "ground") {
h = ColorByAlt.ground.h;
s = ColorByAlt.ground.s;
l = ColorByAlt.ground.l;
} else {
s = ColorByAlt.air.s;
l = ColorByAlt.air.l;
// find the pair of points the current altitude lies between, h = colorArr[0];
// and interpolate the hue between those points s = colorArr[1];
var hpoints = ColorByAlt.air.h; l = colorArr[2];
h = hpoints[0].val;
for (var i = hpoints.length-1; i >= 0; --i) {
if (this.altitude > hpoints[i].alt) {
if (i == hpoints.length-1) {
h = hpoints[i].val;
} else {
h = hpoints[i].val + (hpoints[i+1].val - hpoints[i].val) * (this.altitude - hpoints[i].alt) / (hpoints[i+1].alt - hpoints[i].alt)
}
break;
}
}
}
// If we have not seen a recent position update, change color // If we have not seen a recent position update, change color
if (this.seen_pos > 15) { if (this.seen_pos > 15) {
@ -300,71 +296,91 @@ PlaneObject.prototype.getMarkerColor = function() {
return 'hsl(' + (h/5).toFixed(0)*5 + ',' + (s/5).toFixed(0)*5 + '%,' + (l/5).toFixed(0)*5 + '%)' return 'hsl(' + (h/5).toFixed(0)*5 + ',' + (s/5).toFixed(0)*5 + '%,' + (l/5).toFixed(0)*5 + '%)'
} }
PlaneObject.prototype.getAltitudeColor = function(altitude) {
var h, s, l;
if (typeof altitude === 'undefined') {
altitude = this.altitude;
}
if (altitude === null) {
h = ColorByAlt.unknown.h;
s = ColorByAlt.unknown.s;
l = ColorByAlt.unknown.l;
} else if (this.altitude === "ground") {
h = ColorByAlt.ground.h;
s = ColorByAlt.ground.s;
l = ColorByAlt.ground.l;
} else {
s = ColorByAlt.air.s;
l = ColorByAlt.air.l;
// find the pair of points the current altitude lies between,
// and interpolate the hue between those points
var hpoints = ColorByAlt.air.h;
h = hpoints[0].val;
for (var i = hpoints.length-1; i >= 0; --i) {
if (altitude > hpoints[i].alt) {
if (i == hpoints.length-1) {
h = hpoints[i].val;
} else {
h = hpoints[i].val + (hpoints[i+1].val - hpoints[i].val) * (altitude - hpoints[i].alt) / (hpoints[i+1].alt - hpoints[i].alt)
}
break;
}
}
}
if (h < 0) {
h = (h % 360) + 360;
} else if (h >= 360) {
h = h % 360;
}
if (s < 5) s = 5;
else if (s > 95) s = 95;
if (l < 5) l = 5;
else if (l > 95) l = 95;
return [h, s, l];
}
PlaneObject.prototype.updateIcon = function() { PlaneObject.prototype.updateIcon = function() {
var scaleFactor = Math.max(0.2, Math.min(1.2, 0.15 * Math.pow(1.25, ZoomLvl))).toFixed(1); var scaleFactor = Math.max(0.2, Math.min(1.2, 0.15 * Math.pow(1.25, ZoomLvl))).toFixed(1);
var col = this.getMarkerColor(); var col = this.getMarkerColor();
var opacity = 1.0; var opacity = 1.0;
var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor); var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor);
var add_stroke = (this.selected && !SelectedAllPlanes) ? ' stroke="black" stroke-width="1px"' : '';
var baseMarker = getBaseMarker(this.category, this.icaotype, this.typeDescription, this.wtc); var baseMarker = getBaseMarker(this.category, this.icaotype, this.typeDescription, this.wtc);
var weight = ((this.selected && !SelectedAllPlanes ? 2 : 1) / baseMarker.scale / scaleFactor).toFixed(1);
var rotation = (this.track === null ? 0 : this.track); var rotation = (this.track === null ? 0 : this.track);
var transparentBorderWidth = (32 / baseMarker.scale / scaleFactor).toFixed(1); //var transparentBorderWidth = (32 / baseMarker.scale / scaleFactor).toFixed(1);
var svgKey = col + '!' + outline + '!' + baseMarker.key + '!' + weight + "!" + scaleFactor; var svgKey = col + '!' + outline + '!' + baseMarker.svg + '!' + add_stroke + "!" + scaleFactor;
var styleKey = opacity + '!' + rotation; var styleKey = opacity + '!' + rotation;
if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) { if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) {
//console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey); //console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey);
var icon = new ol.style.Icon({ var icon = new ol.style.Icon({
anchor: baseMarker.anchor, anchor: [0.5, 0.5],
anchorXUnits: 'pixels', anchorXUnits: 'fraction',
anchorYUnits: 'pixels', anchorYUnits: 'fraction',
scale: baseMarker.scale * scaleFactor, scale: 1.2 * scaleFactor,
imgSize: baseMarker.size, imgSize: baseMarker.size,
src: svgPathToURI(baseMarker.path, baseMarker.size, outline, weight, col, transparentBorderWidth), src: svgPathToURI(baseMarker.svg, outline, col, add_stroke),
rotation: (baseMarker.noRotate ? 0 : rotation * Math.PI / 180.0), rotation: (baseMarker.noRotate ? 0 : rotation * Math.PI / 180.0),
opacity: opacity, opacity: opacity,
rotateWithView: (baseMarker.noRotate ? false : true) rotateWithView: (baseMarker.noRotate ? false : true)
}); });
if (baseMarker.noRotate) {
// the base marker won't be rotated
this.markerStaticIcon = icon;
this.markerStaticStyle = new ol.style.Style({
image: this.markerStaticIcon
});
// create an arrow that we will rotate around the base marker
// to indicate heading
var offset = baseMarker.markerRadius * baseMarker.scale + 6;
var size = offset * 2;
var arrowPath = "M " + offset + ",0 m 4,4 -8,0 4,-4 z";
this.markerIcon = new ol.style.Icon({
anchor: [offset, offset],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
scale: 1.0 * scaleFactor,
imgSize: [size, size],
src: svgPathToURI(arrowPath, [size, size], outline, 1, outline, 0),
rotation: rotation * Math.PI / 180.0,
opacity: opacity,
rotateWithView: true
});
this.markerStyle = new ol.style.Style({
image: this.markerIcon
});
} else {
this.markerIcon = icon; this.markerIcon = icon;
this.markerStyle = new ol.style.Style({ this.markerStyle = new ol.style.Style({
image: this.markerIcon image: this.markerIcon
}); });
this.markerStaticIcon = null; this.markerStaticIcon = null;
this.markerStaticStyle = new ol.style.Style({}); this.markerStaticStyle = new ol.style.Style({});
}
this.markerStyleKey = styleKey; this.markerStyleKey = styleKey;
this.markerSvgKey = svgKey; this.markerSvgKey = svgKey;
@ -500,6 +516,18 @@ PlaneObject.prototype.updateMarker = function(moved) {
} }
}; };
// return the styling of the lines based on altitude
PlaneObject.prototype.altitudeLines = function(altitude) {
var colorArr = this.getAltitudeColor(altitude);
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'hsl(' + (colorArr[0]/5).toFixed(0)*5 + ',' + (colorArr[1]/5).toFixed(0)*5 + '%,' + (colorArr[2]/5).toFixed(0)*5 + '%)',
width: 2
})
})
}
// Update our planes tail line, // Update our planes tail line,
PlaneObject.prototype.updateLines = function() { PlaneObject.prototype.updateLines = function() {
if (!this.selected) if (!this.selected)
@ -542,7 +570,7 @@ PlaneObject.prototype.updateLines = function() {
var lastfixed = lastseg.fixed.getCoordinateAt(1.0); var lastfixed = lastseg.fixed.getCoordinateAt(1.0);
var geom = new ol.geom.LineString([lastfixed, ol.proj.fromLonLat(this.position)]); var geom = new ol.geom.LineString([lastfixed, ol.proj.fromLonLat(this.position)]);
this.elastic_feature = new ol.Feature(geom); this.elastic_feature = new ol.Feature(geom);
this.elastic_feature.setStyle(this.altitude === 'ground' ? groundStyle : airStyle); this.elastic_feature.setStyle(this.altitudeLines(lastseg.altitude));
if (oldElastic < 0) { if (oldElastic < 0) {
PlaneTrailFeatures.push(this.elastic_feature); PlaneTrailFeatures.push(this.elastic_feature);
@ -557,10 +585,8 @@ PlaneObject.prototype.updateLines = function() {
seg.feature = new ol.Feature(seg.fixed); seg.feature = new ol.Feature(seg.fixed);
if (seg.estimated) { if (seg.estimated) {
seg.feature.setStyle(estimateStyle); seg.feature.setStyle(estimateStyle);
} else if (seg.ground) {
seg.feature.setStyle(groundStyle);
} else { } else {
seg.feature.setStyle(airStyle); seg.feature.setStyle(this.altitudeLines(seg.altitude));
} }
PlaneTrailFeatures.push(seg.feature); PlaneTrailFeatures.push(seg.feature);

414
public_html/script.js
View file

@ -12,7 +12,10 @@ var PlanesOrdered = [];
var PlaneFilter = {}; var PlaneFilter = {};
var SelectedPlane = null; var SelectedPlane = null;
var SelectedAllPlanes = false; var SelectedAllPlanes = false;
var HighlightedPlane = null;
var FollowSelected = false; var FollowSelected = false;
var infoBoxOriginalPosition = {};
var customAltitudeColors = true;
var SpecialSquawks = { var SpecialSquawks = {
'7500' : { cssClass: 'squawk7500', markerColor: 'rgb(255, 85, 85)', text: 'Aircraft Hijacking' }, '7500' : { cssClass: 'squawk7500', markerColor: 'rgb(255, 85, 85)', text: 'Aircraft Hijacking' },
@ -45,6 +48,11 @@ var MessageRate = 0;
var NBSP='\u00a0'; var NBSP='\u00a0';
var layers;
// piaware vs flightfeeder
var isFlightFeeder = false;
function processReceiverUpdate(data) { function processReceiverUpdate(data) {
// Loop through all the planes in the data packet // Loop through all the planes in the data packet
var now = data.now; var now = data.now;
@ -150,6 +158,7 @@ function fetchData() {
selectNewPlanes(); selectNewPlanes();
refreshTableInfo(); refreshTableInfo();
refreshSelected(); refreshSelected();
refreshHighlighted();
if (ReceiverClock) { if (ReceiverClock) {
var rcv = new Date(now * 1000); var rcv = new Date(now * 1000);
@ -180,39 +189,12 @@ var PositionHistorySize = 0;
function initialize() { function initialize() {
// Set page basics // Set page basics
document.title = PageName; document.title = PageName;
$("#infoblock_name").text(PageName);
flightFeederCheck();
PlaneRowTemplate = document.getElementById("plane_row_template"); PlaneRowTemplate = document.getElementById("plane_row_template");
if (!ShowClocks) { refreshClock();
$('#timestamps').css('display','none');
} else {
// Create the clocks.
new CoolClock({
canvasId: "utcclock",
skinId: "classic",
displayRadius: 40,
showSecondHand: true,
gmtOffset: "0", // this has to be a string!
showDigital: false,
logClock: false,
logClockRev: false
});
ReceiverClock = new CoolClock({
canvasId: "receiverclock",
skinId: "classic",
displayRadius: 40,
showSecondHand: true,
gmtOffset: null,
showDigital: false,
logClock: false,
logClockRev: false
});
// disable ticking on the receiver clock, we will update it ourselves
ReceiverClock.tick = (function(){})
}
$("#loader").removeClass("hidden"); $("#loader").removeClass("hidden");
@ -254,8 +236,58 @@ function initialize() {
} }
} }
}); });
// check if the altitude color values are default to enable the altitude filter
if (ColorByAlt.air.h.length === 3 && ColorByAlt.air.h[0].alt === 2000 && ColorByAlt.air.h[0].val === 20 && ColorByAlt.air.h[1].alt === 10000 && ColorByAlt.air.h[1].val === 140 && ColorByAlt.air.h[2].alt === 40000 && ColorByAlt.air.h[2].val === 300) {
customAltitudeColors = false;
}
$("#altitude_filter_reset_button").click(onResetAltitudeFilter); $("#altitude_filter_reset_button").click(onResetAltitudeFilter);
$('#settingsCog').on('click', function() {
$('#settings_infoblock').toggle();
});
$('#settings_close').on('click', function() {
$('#settings_infoblock').hide();
});
$('#groundvehicle_filter').on('click', function() {
filterGroundVehicles(true);
refreshSelected();
refreshHighlighted();
refreshTableInfo();
});
$('#blockedmlat_filter').on('click', function() {
filterBlockedMLAT(true);
refreshSelected();
refreshHighlighted();
refreshTableInfo();
});
$('#grouptype_checkbox').on('click', function() {
if ($('#grouptype_checkbox').hasClass('settingsCheckboxChecked')) {
sortByDistance();
} else {
sortByDataSource();
}
});
$('#altitude_checkbox').on('click', function() {
toggleAltitudeChart(true);
});
$('#selectall_checkbox').on('click', function() {
if ($('#selectall_checkbox').hasClass('settingsCheckboxChecked')) {
deselectAllPlanes();
} else {
selectAllPlanes();
}
})
// Force map to redraw if sidebar container is resized - use a timer to debounce // Force map to redraw if sidebar container is resized - use a timer to debounce
var mapResizeTimeout; var mapResizeTimeout;
$("#sidebar_container").on("resize", function() { $("#sidebar_container").on("resize", function() {
@ -263,6 +295,10 @@ function initialize() {
mapResizeTimeout = setTimeout(updateMapSize, 10); mapResizeTimeout = setTimeout(updateMapSize, 10);
}); });
filterGroundVehicles(false);
filterBlockedMLAT(false);
toggleAltitudeChart(false);
// Get receiver metadata, reconfigure using it, then continue // Get receiver metadata, reconfigure using it, then continue
// with initialization // with initialization
$.ajax({ url: 'data/receiver.json', $.ajax({ url: 'data/receiver.json',
@ -371,6 +407,7 @@ function end_load_history() {
refreshTableInfo(); refreshTableInfo();
refreshSelected(); refreshSelected();
refreshHighlighted();
reaper(); reaper();
// Setup our timer to poll from the server. // Setup our timer to poll from the server.
@ -434,7 +471,7 @@ function initialize_map() {
// Initialize OL3 // Initialize OL3
var layers = createBaseLayers(); layers = createBaseLayers();
var iconsLayer = new ol.layer.Vector({ var iconsLayer = new ol.layer.Vector({
name: 'ac_positions', name: 'ac_positions',
@ -471,12 +508,14 @@ function initialize_map() {
})); }));
var foundType = false; var foundType = false;
var baseCount = 0;
ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) { ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) {
if (!lyr.get('name')) if (!lyr.get('name'))
return; return;
if (lyr.get('type') === 'base') { if (lyr.get('type') === 'base') {
baseCount++;
if (MapType === lyr.get('name')) { if (MapType === lyr.get('name')) {
foundType = true; foundType = true;
lyr.setVisible(true); lyr.setVisible(true);
@ -522,14 +561,17 @@ function initialize_map() {
}), }),
controls: [new ol.control.Zoom(), controls: [new ol.control.Zoom(),
new ol.control.Rotate(), new ol.control.Rotate(),
new ol.control.Attribution({collapsed: false}), new ol.control.Attribution({collapsed: true}),
new ol.control.ScaleLine({units: DisplayUnits}), new ol.control.ScaleLine({units: DisplayUnits})
new ol.control.LayerSwitcher()
], ],
loadTilesWhileAnimating: true, loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true loadTilesWhileInteracting: true
}); });
if (baseCount > 1) {
OLMap.addControl(new ol.control.LayerSwitcher());
}
// Listeners for newly created Map // Listeners for newly created Map
OLMap.getView().on('change:center', function(event) { OLMap.getView().on('change:center', function(event) {
var center = ol.proj.toLonLat(OLMap.getView().getCenter(), OLMap.getView().getProjection()); var center = ol.proj.toLonLat(OLMap.getView().getCenter(), OLMap.getView().getProjection());
@ -542,6 +584,7 @@ function initialize_map() {
Math.abs(center[1] - selected.position[1]) > 0.0001) { Math.abs(center[1] - selected.position[1]) > 0.0001) {
FollowSelected = false; FollowSelected = false;
refreshSelected(); refreshSelected();
refreshHighlighted();
} }
} }
}); });
@ -573,6 +616,36 @@ function initialize_map() {
} }
}); });
// show the hover box
OLMap.on('pointermove', function(evt) {
var hex = evt.map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature.hex;
},
null,
function(layer) {
return (layer === iconsLayer);
},
null
);
if (hex) {
highlightPlaneByHex(hex);
} else {
removeHighlight();
}
})
// handle the layer settings pane checkboxes
OLMap.once('postrender', function(e) {
toggleLayer('#nexrad_checkbox', 'nexrad');
toggleLayer('#sitepos_checkbox', 'site_pos');
toggleLayer('#actrail_checkbox', 'ac_trail');
toggleLayer('#acpositions_checkbox', 'ac_positions');
});
// Add home marker if requested // Add home marker if requested
if (SitePosition) { if (SitePosition) {
var markerStyle = new ol.style.Style({ var markerStyle = new ol.style.Style({
@ -652,13 +725,22 @@ function createSiteCircleFeatures() {
}); });
SiteCircleFeatures.clear(); SiteCircleFeatures.clear();
var circleStyle = new ol.style.Style({ var circleStyle = function(distance) {
return new ol.style.Style({
fill: null, fill: null,
stroke: new ol.style.Stroke({ stroke: new ol.style.Stroke({
color: '#000000', color: '#000000',
width: 1 width: 1
}),
text: new ol.style.Text({
font: '10px Helvetica Neue, sans-serif',
fill: new ol.style.Fill({ color: '#000' }),
offsetY: -8,
text: format_distance_long(distance, DisplayUnits, 0)
}) })
}); });
};
var conversionFactor = 1000.0; var conversionFactor = 1000.0;
if (DisplayUnits === "nautical") { if (DisplayUnits === "nautical") {
@ -672,7 +754,7 @@ function createSiteCircleFeatures() {
var circle = make_geodesic_circle(SitePosition, distance, 360); var circle = make_geodesic_circle(SitePosition, distance, 360);
circle.transform('EPSG:4326', 'EPSG:3857'); circle.transform('EPSG:4326', 'EPSG:3857');
var feature = new ol.Feature(circle); var feature = new ol.Feature(circle);
feature.setStyle(circleStyle); feature.setStyle(circleStyle(distance));
StaticFeatures.push(feature); StaticFeatures.push(feature);
SiteCircleFeatures.push(feature); SiteCircleFeatures.push(feature);
} }
@ -701,12 +783,15 @@ function reaper() {
PlanesOrdered = newPlanes; PlanesOrdered = newPlanes;
refreshTableInfo(); refreshTableInfo();
refreshSelected(); refreshSelected();
refreshHighlighted();
} }
// Page Title update function // Page Title update function
function refreshPageTitle() { function refreshPageTitle() {
if (!PlaneCountInTitle && !MessageRateInTitle) if (!PlaneCountInTitle && !MessageRateInTitle) {
document.title = PageName;
return; return;
}
var subtitle = ""; var subtitle = "";
@ -763,7 +848,7 @@ function refreshSelected() {
} else { } else {
$('#selected_callsign').text('n/a'); $('#selected_callsign').text('n/a');
} }
$('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "[FlightAware]")); $('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "FlightAware.com"));
if (selected.registration !== null) { if (selected.registration !== null) {
$('#selected_registration').text(selected.registration); $('#selected_registration').text(selected.registration);
@ -777,13 +862,14 @@ function refreshSelected() {
$('#selected_icaotype').text(""); $('#selected_icaotype').text("");
} }
var emerg = document.getElementById('selected_emergency'); // Not using this logic for the redesigned info panel at the time, but leaving it in if/when adding it back
if (selected.squawk in SpecialSquawks) { // var emerg = document.getElementById('selected_emergency');
emerg.className = SpecialSquawks[selected.squawk].cssClass; // if (selected.squawk in SpecialSquawks) {
emerg.textContent = NBSP + 'Squawking: ' + SpecialSquawks[selected.squawk].text + NBSP ; // emerg.className = SpecialSquawks[selected.squawk].cssClass;
} else { // emerg.textContent = NBSP + 'Squawking: ' + SpecialSquawks[selected.squawk].text + NBSP ;
emerg.className = 'hidden'; // } else {
} // emerg.className = 'hidden';
// }
$("#selected_altitude").text(format_altitude_long(selected.altitude, selected.vert_rate, DisplayUnits)); $("#selected_altitude").text(format_altitude_long(selected.altitude, selected.vert_rate, DisplayUnits));
@ -818,12 +904,13 @@ function refreshSelected() {
$('#selected_position').text('n/a'); $('#selected_position').text('n/a');
$('#selected_follow').addClass('hidden'); $('#selected_follow').addClass('hidden');
} else { } else {
var mlat_bit = (selected.position_from_mlat ? "MLAT: " : "");
if (selected.seen_pos > 1) { if (selected.seen_pos > 1) {
$('#selected_position').text(mlat_bit + format_latlng(selected.position) + " (" + selected.seen_pos.toFixed(1) + "s)"); $('#selected_position').text(format_latlng(selected.position));
} else { } else {
$('#selected_position').text(mlat_bit + format_latlng(selected.position)); $('#selected_position').text(format_latlng(selected.position));
} }
$('#selected_source').text( (selected.position_from_mlat ? "MLAT" : "ADS-B"));
$('#selected_follow').removeClass('hidden'); $('#selected_follow').removeClass('hidden');
if (FollowSelected) { if (FollowSelected) {
$('#selected_follow').css('font-weight', 'bold'); $('#selected_follow').css('font-weight', 'bold');
@ -839,6 +926,53 @@ function refreshSelected() {
$('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration)); $('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration));
} }
function refreshHighlighted() {
// this is following nearly identical logic, etc, as the refreshSelected function, but doing less junk for the highlighted pane
var highlighted = false;
if (typeof HighlightedPlane !== 'undefined' && HighlightedPlane !== null) {
highlighted = Planes[HighlightedPlane];
}
// no highlighted plane
if (!highlighted) {
$('#highlighted_infoblock').hide();
return;
}
$('#highlighted_infoblock').show();
if (highlighted.flight !== null && highlighted.flight !== "") {
$('#highlighted_callsign').text(highlighted.flight);
} else {
$('#highlighted_callsign').text('n/a');
}
if (highlighted.icaotype !== null) {
$('#higlighted_icaotype').text(highlighted.icaotype);
} else {
$('#higlighted_icaotype').text("");
}
$('#highlighted_speed').text(format_speed_long(highlighted.speed, DisplayUnits));
$("#highlighted_altitude").text(format_altitude_long(highlighted.altitude, highlighted.vert_rate, DisplayUnits));
$('#highlighted_icao').text(highlighted.icao.toUpperCase());
}
function refreshClock() {
$('#clock_div').text(new Date().toLocaleString());
var c = setTimeout(refreshClock, 500);
}
function removeHighlight() {
HighlightedPlane = null;
refreshHighlighted();
}
// Refreshes the larger table of all the planes // Refreshes the larger table of all the planes
function refreshTableInfo() { function refreshTableInfo() {
var show_squawk_warning = false; var show_squawk_warning = false;
@ -863,11 +997,18 @@ function refreshTableInfo() {
if (tableplane.position !== null && tableplane.seen_pos < 60) { if (tableplane.position !== null && tableplane.seen_pos < 60) {
++TrackedAircraftPositions; ++TrackedAircraftPositions;
if (tableplane.position_from_mlat)
classes += " mlat";
else
classes += " vPosition";
} }
if (tableplane.getDataSource() === "adsb_icao") {
classes += " vPosition";
} else if (tableplane.getDataSource() === "tisb_trackfile") {
classes += " tisb";
} else if (tableplane.getDataSource() === "mlat") {
classes += " mlat";
} else {
classes += " other";
}
if (tableplane.icao == SelectedPlane) if (tableplane.icao == SelectedPlane)
classes += " selected"; classes += " selected";
@ -901,9 +1042,9 @@ function refreshTableInfo() {
tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration); tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration);
tableplane.tr.className = classes; tableplane.tr.className = classes;
} }
} }
if (show_squawk_warning) { if (show_squawk_warning) {
$("#SpecialSquawkWarning").css('display','block'); $("#SpecialSquawkWarning").css('display','block');
} else { } else {
$("#SpecialSquawkWarning").css('display','none'); $("#SpecialSquawkWarning").css('display','none');
@ -988,6 +1129,11 @@ function resortTable() {
} }
function sortBy(id,sc,se) { function sortBy(id,sc,se) {
if (id !== 'data_source') {
$('#grouptype_checkbox').removeClass('settingsCheckboxChecked');
} else {
$('#grouptype_checkbox').addClass('settingsCheckboxChecked');
}
if (id === sortId) { if (id === sortId) {
sortAscending = !sortAscending; sortAscending = !sortAscending;
PlanesOrdered.reverse(); // this correctly flips the order of rows that compare equal PlanesOrdered.reverse(); // this correctly flips the order of rows that compare equal
@ -1005,7 +1151,7 @@ function sortBy(id,sc,se) {
function selectPlaneByHex(hex,autofollow) { function selectPlaneByHex(hex,autofollow) {
//console.log("select: " + hex); //console.log("select: " + hex);
// If SelectedPlane has something in it, clear out the selected // If SelectedPlane has something in it, clear out the selected
removeHighlight();
if (SelectedAllPlanes) { if (SelectedAllPlanes) {
deselectAllPlanes(); deselectAllPlanes();
} }
@ -1043,10 +1189,23 @@ function selectPlaneByHex(hex,autofollow) {
} }
refreshSelected(); refreshSelected();
refreshHighlighted();
}
function highlightPlaneByHex(hex) {
// if we've selected a plane, don't show the highlighting box
if (SelectedPlane != null) {
return;
}
if (hex != null) {
HighlightedPlane = hex;
}
} }
// loop through the planes and mark them as selected to show the paths for all planes // loop through the planes and mark them as selected to show the paths for all planes
function selectAllPlanes() { function selectAllPlanes() {
HighlightedPlane = null;
// if all planes are already selected, deselect them all // if all planes are already selected, deselect them all
if (SelectedAllPlanes) { if (SelectedAllPlanes) {
deselectAllPlanes(); deselectAllPlanes();
@ -1071,7 +1230,10 @@ function selectAllPlanes() {
} }
} }
$('#selectall_checkbox').addClass('settingsCheckboxChecked');
refreshSelected(); refreshSelected();
refreshHighlighted();
} }
// on refreshes, try to find new planes and mark them as selected // on refreshes, try to find new planes and mark them as selected
@ -1101,9 +1263,11 @@ function deselectAllPlanes() {
Planes[key].updateMarker(); Planes[key].updateMarker();
$(Planes[key].tr).removeClass("selected"); $(Planes[key].tr).removeClass("selected");
} }
$('#selectall_checkbox').removeClass('settingsCheckboxChecked');
SelectedPlane = null; SelectedPlane = null;
SelectedAllPlanes = false; SelectedAllPlanes = false;
refreshSelected(); refreshSelected();
refreshHighlighted();
} }
function toggleFollowSelected() { function toggleFollowSelected() {
@ -1225,6 +1389,14 @@ function adjustSelectedInfoBlockPosition() {
// Get info box position and size // Get info box position and size
var infoBox = $('#selected_infoblock'); var infoBox = $('#selected_infoblock');
var infoBoxPosition = infoBox.position(); var infoBoxPosition = infoBox.position();
if (typeof infoBoxOriginalPosition.top === 'undefined') {
infoBoxOriginalPosition.top = infoBoxPosition.top;
infoBoxOriginalPosition.left = infoBoxPosition.left;
} else {
infoBox.css("left", infoBoxOriginalPosition.left);
infoBox.css("top", infoBoxOriginalPosition.top);
infoBoxPosition = infoBox.position();
}
var infoBoxExtent = getExtent(infoBoxPosition.left, infoBoxPosition.top, infoBox.outerWidth(), infoBox.outerHeight()); var infoBoxExtent = getExtent(infoBoxPosition.left, infoBoxPosition.top, infoBox.outerWidth(), infoBox.outerHeight());
// Get map size // Get map size
@ -1235,8 +1407,8 @@ function adjustSelectedInfoBlockPosition() {
if (isPointInsideExtent(markerPosition[0], markerPosition[1], infoBoxExtent)) { if (isPointInsideExtent(markerPosition[0], markerPosition[1], infoBoxExtent)) {
// Array of possible new positions for info box // Array of possible new positions for info box
var candidatePositions = []; var candidatePositions = [];
candidatePositions.push( { x: 20, y: 20 } ); candidatePositions.push( { x: 40, y: 60 } );
candidatePositions.push( { x: 20, y: markerPosition[1] + 40 } ); candidatePositions.push( { x: 40, y: markerPosition[1] + 80 } );
// Find new position // Find new position
for (var i = 0; i < candidatePositions.length; i++) { for (var i = 0; i < candidatePositions.length; i++) {
@ -1276,6 +1448,8 @@ function initializeUnitsSelector() {
var displayUnits = localStorage['displayUnits']; var displayUnits = localStorage['displayUnits'];
DisplayUnits = displayUnits; DisplayUnits = displayUnits;
setAltitudeLegend(displayUnits);
// Initialize drop-down // Initialize drop-down
var unitsSelector = $("#units_selector"); var unitsSelector = $("#units_selector");
unitsSelector.val(displayUnits); unitsSelector.val(displayUnits);
@ -1288,12 +1462,15 @@ function onDisplayUnitsChanged(e) {
localStorage['displayUnits'] = displayUnits; localStorage['displayUnits'] = displayUnits;
DisplayUnits = displayUnits; DisplayUnits = displayUnits;
setAltitudeLegend(displayUnits);
// Update filters // Update filters
updatePlaneFilter(); updatePlaneFilter();
// Refresh data // Refresh data
refreshTableInfo(); refreshTableInfo();
refreshSelected(); refreshSelected();
refreshHighlighted();
// Redraw range rings // Redraw range rings
if (SitePosition !== null && SitePosition !== undefined && SiteCircles) { if (SitePosition !== null && SitePosition !== undefined && SiteCircles) {
@ -1308,6 +1485,14 @@ function onDisplayUnitsChanged(e) {
}); });
} }
function setAltitudeLegend(units) {
if (units === 'metric') {
$('#altitude_chart_button').addClass('altitudeMeters');
} else {
$('#altitude_chart_button').removeClass('altitudeMeters');
}
}
function onFilterByAltitude(e) { function onFilterByAltitude(e) {
e.preventDefault(); e.preventDefault();
updatePlaneFilter(); updatePlaneFilter();
@ -1320,9 +1505,68 @@ function onFilterByAltitude(e) {
selectedPlane.clearLines(); selectedPlane.clearLines();
selectedPlane.updateMarker(); selectedPlane.updateMarker();
refreshSelected(); refreshSelected();
refreshHighlighted();
} }
} }
function filterGroundVehicles(switchFilter) {
if (typeof localStorage['groundVehicleFilter'] === 'undefined') {
localStorage['groundVehicleFilter'] = 'not_filtered';
}
var groundFilter = localStorage['groundVehicleFilter'];
if (switchFilter === true) {
groundFilter = (groundFilter === 'not_filtered') ? 'filtered' : 'not_filtered';
}
if (groundFilter === 'not_filtered') {
$('#groundvehicle_filter').addClass('settingsCheckboxChecked');
} else {
$('#groundvehicle_filter').removeClass('settingsCheckboxChecked');
}
localStorage['groundVehicleFilter'] = groundFilter;
PlaneFilter.groundVehicles = groundFilter;
}
function filterBlockedMLAT(switchFilter) {
if (typeof localStorage['blockedMLATFilter'] === 'undefined') {
localStorage['blockedMLATFilter'] = 'not_filtered';
}
var blockedMLATFilter = localStorage['blockedMLATFilter'];
if (switchFilter === true) {
blockedMLATFilter = (blockedMLATFilter === 'not_filtered') ? 'filtered' : 'not_filtered';
}
if (blockedMLATFilter === 'not_filtered') {
$('#blockedmlat_filter').addClass('settingsCheckboxChecked');
} else {
$('#blockedmlat_filter').removeClass('settingsCheckboxChecked');
}
localStorage['blockedMLATFilter'] = blockedMLATFilter;
PlaneFilter.blockedMLAT = blockedMLATFilter;
}
function toggleAltitudeChart(switchToggle) {
if (typeof localStorage['altitudeChart'] === 'undefined') {
localStorage['altitudeChart'] = 'show';
}
var altitudeChartDisplay = localStorage['altitudeChart'];
if (switchToggle === true) {
altitudeChartDisplay = (altitudeChartDisplay === 'show') ? 'hidden' : 'show';
}
// if you're using custom colors always hide the chart
if (customAltitudeColors === true) {
altitudeChartDisplay = 'hidden';
// also hide the control option
$('#altitude_chart_container').hide();
}
if (altitudeChartDisplay === 'show') {
$('#altitude_checkbox').addClass('settingsCheckboxChecked');
$('#altitude_chart').show();
} else {
$('#altitude_checkbox').removeClass('settingsCheckboxChecked');
$('#altitude_chart').hide();
}
localStorage['altitudeChart'] = altitudeChartDisplay;
}
function onResetAltitudeFilter(e) { function onResetAltitudeFilter(e) {
$("#altitude_filter_min").val(""); $("#altitude_filter_min").val("");
$("#altitude_filter_max").val(""); $("#altitude_filter_max").val("");
@ -1378,7 +1622,7 @@ function getFlightAwareModeSLink(code, ident, linkText) {
function getFlightAwarePhotoLink(registration) { function getFlightAwarePhotoLink(registration) {
if (registration !== null && registration !== "") { if (registration !== null && registration !== "") {
return "<a target=\"_blank\" href=\"https://flightaware.com/photos/aircraft/" + registration.replace(/[^0-9a-z]/ig,'') + "\">See Photos</a>"; return "<a target=\"_blank\" href=\"https://flightaware.com/photos/aircraft/" + registration.replace(/[^0-9a-z]/ig,'') + "\">See Aircraft Photos</a>";
} }
return ""; return "";
@ -1391,3 +1635,57 @@ function getAirframesModeSLink(code) {
return ""; return "";
} }
// takes in an elemnt jQuery path and the OL3 layer name and toggles the visibility based on clicking it
function toggleLayer(element, layer) {
// set initial checked status
ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) {
if (lyr.get('name') === layer && lyr.getVisible()) {
$(element).addClass('settingsCheckboxChecked');
}
});
$(element).on('click', function() {
var visible = false;
if ($(element).hasClass('settingsCheckboxChecked')) {
visible = true;
}
ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) {
if (lyr.get('name') === layer) {
if (visible) {
lyr.setVisible(false);
$(element).removeClass('settingsCheckboxChecked');
} else {
lyr.setVisible(true);
$(element).addClass('settingsCheckboxChecked');
}
}
});
});
}
// check status.json if it has a serial number for a flightfeeder
function flightFeederCheck() {
$.ajax('/status.json', {
success: function(data) {
if (data.type === "flightfeeder") {
isFlightFeeder = true;
updatePiAwareOrFlightFeeder();
}
}
})
}
// updates the page to replace piaware with flightfeeder references
function updatePiAwareOrFlightFeeder() {
if (isFlightFeeder) {
$('.piAwareLogo').hide();
$('.flightfeederLogo').show();
PageName = 'FlightFeeder Skyview';
} else {
$('.flightfeederLogo').hide();
$('.piAwareLogo').show();
PageName = 'PiAware Skyview';
}
refreshPageTitle();
}

593
public_html/style.css
View file

@ -1,19 +1,19 @@
html, body { html, body {
margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif; margin: 0; padding: 0; background-color: #ffffff; font-family: Helvetica Neue, Sans-Serif;
font-size: 10pt; overflow: auto; height: 100%; font-size: 10pt; overflow: auto; height: 100%;
} }
#layout_container { #layout_container {
display: flex; display: flex;
height: 100%; height: calc(100% - 60px);;
} }
#selected_infoblock { #selected_infoblock {
position: absolute; position: absolute;
left: 40px; left: 40px;
top: 10px; top: 60px;
min-width: 360px; min-width: 394px;
padding: 20px; padding: 10px;
background: #ffffff; background: #ffffff;
box-shadow: 4px 4px 10px #444444; box-shadow: 4px 4px 10px #444444;
cursor: pointer; cursor: pointer;
@ -35,15 +35,16 @@ html, body {
#toggle_sidebar_control { #toggle_sidebar_control {
display: block; display: block;
position: absolute; position: absolute;
top: 10px; top: 16px;
right: 10px; right: -3px;
} }
#toggle_sidebar_button { #toggle_sidebar_button {
cursor: pointer;
float: right; float: right;
width: 32px; width: 24px;
height: 28px; height: 25px;
background-size: 32px 28px; background-size: 24px 25px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0px; background-position: 0px;
background-color: transparent; background-color: transparent;
@ -51,33 +52,26 @@ html, body {
} }
#toggle_sidebar_button.show_sidebar { #toggle_sidebar_button.show_sidebar {
background-image: url("images/show_sidebar_inactive_48x40.png"); background-image: url("images/table-icon.png");
}
#toggle_sidebar_button.show_sidebar:hover {
background-image: url("images/show_sidebar_active_48x40.png");
} }
#toggle_sidebar_button.hide_sidebar { #toggle_sidebar_button.hide_sidebar {
background-image: url("images/hide_sidebar_inactive_48x40.png"); background-image: url("images/map-icon.png");
}
#toggle_sidebar_button.hide_sidebar:hover {
background-image: url("images/hide_sidebar_active_48x40.png");
} }
#expand_sidebar_control { #expand_sidebar_control {
display: block; display: block;
position: absolute; position: absolute;
top: 48px; top: 48px;
right: 10px; right: -3px;
} }
#expand_sidebar_button { #expand_sidebar_button {
cursor: pointer;
float: right; float: right;
width: 32px; width: 24px;
height: 28px; height: 25px;
background-size: 32px 28px; background-size: 24px 25px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0px; background-position: 0px;
background-color: transparent; background-color: transparent;
@ -85,24 +79,53 @@ html, body {
} }
#expand_sidebar_button { #expand_sidebar_button {
background-image: url("images/show_sidebar_inactive_48x40.png"); background-image: url("images/table-icon.png");
}
#expand_sidebar_button:hover {
background-image: url("images/show_sidebar_active_48x40.png");
} }
#sidebar_container { #sidebar_container {
display: flex; display: flex;
width: 470px; width: 500px;
left: 0 !important; left: 0 !important;
} }
#splitter { #splitter {
flex: 0 0 6px;
cursor: col-resize; cursor: col-resize;
background-color: #bbbbbb; display: block;
left: 0 !important; position: absolute;
top: 125px;
left: -24px;
float: right;
width: 24px;
height: 25px;
background-size: 24px 25px;
background-repeat: no-repeat;
background-position: 0px;
background-color: transparent;
border: none;
background-image: url("images/column-adjust.png");
}
.ol-zoom-in {
background-image: url("images/zoom-in.png");
color:transparent !important;
width: 19px !important;
height: 19px !important;
background-color: transparent !important;
margin-bottom: 5px !important;
}
.ol-zoom-out {
background-image: url("images/zoom-out.png");
color:transparent !important;
width: 19px !important;
height: 19px !important;
background-color: transparent !important;
}
.ol-zoom {
background-color: transparent !important;
left: 10px !important;
} }
#sidebar_canvas { #sidebar_canvas {
@ -138,7 +161,7 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
} }
.aircraft_table_header { .aircraft_table_header {
background-color: #409EDF; background-color: #002F5D;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
} }
@ -157,22 +180,22 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
text-transform: uppercase; text-transform: uppercase;
} }
.vPosition { background-color: #C3FFDF; } .vPosition { background-color: #E5F6FC; }
.mlat { background-color: #C7EAFC; } .mlat { background-color: #FDF2E5; }
.other { background-color: #CCD5F8; }
.tisb { background-color: #FFF3B8; }
.squawk7500 { font-weight: bold; background-color: #ff5555; } .squawk7500 { font-weight: bold; background-color: #ff5555; }
.squawk7600 { font-weight: bold; background-color: #00ffff; } .squawk7600 { font-weight: bold; background-color: #00ffff; }
.squawk7700 { font-weight: bold; background-color: #ffff00; } .squawk7700 { font-weight: bold; background-color: #ffff00; }
.selected { background-color: #dddddd; } .selected { background-color: #dddddd; }
.plane_table_row { cursor: pointer; } .plane_table_row {
cursor: pointer;
font-family: Helvetica Neue;
}
.hidden { display: none; } .hidden { display: none; }
.infoblock_heading { font-size: larger; } .infoblock_heading { font-size: larger; }
.infoblock_heading a { text-decoration: none; color: blue; font-size: x-small;} .infoblock_heading a { text-decoration: none; color: blue; font-size: x-small;}
.infoblock_body { font-size: small; }
#selected_icao { font-size: x-small; }
#selected_registration { font-size: x-small; }
#selected_icaotype { font-size: x-small; }
.dim { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ } .dim { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ }
@ -199,6 +222,490 @@ select.error, textarea.error, input.error {
} }
.layer-switcher { .layer-switcher {
top: 86px !important; bottom: 80px !important;
top: auto !important;
right: 10px !important; right: 10px !important;
} }
/* new css */
.rangeRingText
{
font-family: Helvetica Neue;
font-weight: bold;
font-size: 8px;
color: #333333;
color: rgb(51, 51, 51);
}
.dateTime
{
font-family: Helvetica Neue;
font-weight: bold;
font-size: 14px;
line-height: 18px;
color: #FFFFFF;
color: rgb(255, 255, 255);
line-height: 60px;
text-align: right;
display: inline-block;
padding-right: 20px;
}
.infoHeading
{
font-family: Helvetica Neue;
font-size: 14px;
line-height: 18px;
color: #002F5D;
color: rgb(0, 47, 93);
}
.infoData
{
font-family: Helvetica Neue;
font-size: 14px;
line-height: 18px;
color: #000000;
color: rgb(0, 0, 0);
}
.legend
{
font-family: Helvetica Neue;
width: 100%;
font-size: 12px;
color: #000000;
color: rgb(0, 0, 0);
display: inline-flex;
justify-content: flex-end;
padding-top: 10px;
}
.settingsHeading
{
font-family: Helvetica Neue;
font-size: 14px;
line-height: 20px;
color: #002F5D;
color: rgb(0, 47, 93);
}
.settingsText
{
font-family: Helvetica Neue;
font-size: 14px;
line-height: 20px;
text-indent: 16px
color: #000000;
color: rgb(0, 0, 0);
}
.link
{
font-family: Helvetica Neue;
font-size: 10px;
line-height: 20px;
color: #0000C8;
color: rgb(0, 0, 200);
text-decoration: underline;
}
.infoHeading
{
font-family: Helvetica Neue;
font-size: 12px;
line-height: 16px;
color: #666666;
color: rgb(102, 102, 102);
}
.infoData
{
font-family: Helvetica Neue;
font-size: 12px;
line-height: 16px;
color: #000000;
color: rgb(0, 0, 0);
}
#header {
width: 100%;
height: 60px;
background: #002F5D;
background: -webkit-linear-gradient(#002F5D, #002F5D 60%, #021624);
background: -moz-linear-gradient(#002F5D, #002F5D 60%, #021624);
background: -ms-linear-gradient(#002F5D, #002F5D 60%, #021624);
background: linear-gradient(#002F5D, #002F5D 60%, #021624);
display: flex;
box-shadow: -6px 0px 8px #999999;
z-index: 99999;
}
.flightawareLogo {
background-color: #FFF;
padding-top: 7px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
width: 121px;
height: 46px;
box-shadow:inset -12px 0 12px -12px #000000;
}
.adsbLogo {
padding-left: 20px;
padding-top: 30px;
padding-bottom: 5px;
}
.piAwareLogo {
width: 186px;
height: 24px;
}
.flightfeederLogo {
width: 229px;
height: 24px;
}
.logoContainer {
flex: 1;
}
.buttonContainer {
margin-left: auto;
}
.buttonText
{
font-family: Helvetica Neue;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
color: rgb(255, 255, 255);
line-height: 28px;
padding-left: 10px;
padding-right: 10px;
}
.button {
background: #00A0E2;
background: rgba(0, 160, 226, 1);
min-width: 80px;
height: 28px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
display: inline-block;
margin-right: 10px;
cursor: pointer;
text-align: center;
}
.buttonHeader {
margin-top: 15px;
}
.buttonTable {
margin-bottom: 5px;
}
.settingsContainer {
padding-right: 60px;
padding-left: 2px;
margin-top: 18px;
margin-left: auto;
cursor: pointer;
}
#highlighted_infoblock {
position: absolute;
left: 40px;
top: 60px;
min-width: 168px;
padding-right: 5px;
background: #ffffff;
box-shadow: 4px 4px 10px #444444;
cursor: pointer;
z-index: 9999;
display: none;
}
.highlightedTitle {
height: 36px;
border-bottom: 1px solid #00A0E2;
padding-left: 18px;
padding-top: 14px;
}
.highlightedInfo {
padding-left: 10px;
}
.identLarge {
font-family: Helvetica Neue;
font-size: 24px;
line-height: 20px;
color: #002F5D;
color: rgb(0, 47, 93);
font-weight: lighter;
}
.identSmall {
font-family: Helvetica Neue;
font-size: 12px;
font-weight: bold;
line-height: 20px;
color: #00A0E2;
color: rgb(0, 160, 226);
}
.highlightedInfo {
padding-bottom: 12px;
}
.infoRowTitle {
display: inline-block;
width: 50%;
}
.infoRowContent {
display: inline-block;
width: 40%;
}
.infoRowFluid {
display: inline-block;
}
.infoRow {
padding-top: 10px;
}
.removePadding {
padding: 0;
}
.rightLink {
float: right;
padding-right: 5px;
}
.infoBlockTopSection {
padding-top: 14px;
padding-bottom: 14px;
padding-left: 8px;
}
.infoBlock45pxSection {
height: 45px;
line-height: 45px;
padding-left: 10px;
}
.infoBlockSection {
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
}
.lightGreyBackground {
background-color: #efefef;
}
.fourColumnSection1 {
width: 20%;
}
.fourColumnSection2 {
width: 20%;
}
.fourColumnSection3 {
width: 20%;
}
.fourColumnSection4 {
width: 20%;
}
#dump1090_infoblock {
font-family: Helvetica Neue;
}
.infoBlockTitleText {
font-weight: bold;
color: #002F5D;
}
.legendBox {
width: 15px;
height: 15px;
border: 1px solid #efefef;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#adsbLegendBox {
background-color: #E5F6FC;
}
#mlatLegendBox {
background-color: #FDF2E5;
}
#otherLegendBox {
background-color: #E6E6E6;
}
#tisbLegendBox {
background-color: #CCD5DF;
}
.legendTitle {
/*margin-left: auto;*/
line-height: 19px;
display: inline-block;
padding-right: 20px;
padding-left: 5px;
}
#settings_infoblock {
position: absolute;
right: 1px;
top: 60px;
width: 398px;
min-height: 180px;
background: #ffffff;
box-shadow: 4px 4px 10px #444444;
padding: 20px;
z-index: 9999;
display: none;
}
.settingsColumn {
display: table-cell;
width: 199px;
}
.settingsOptionContainer {
display: table;
padding-bottom: 10px;
}
.settingsCheckbox {
width: 20px;
height: 11px;
background-image: url('images/box-empty.png');
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.settingsCheckboxChecked {
background-image: url('images/box-checked.png') !important;
}
.settingsCloseBox {
position: absolute;
right: 8px;
top: 8px;
background-image: url('images/close-settings.png');
width: 20px;
height: 20px;
cursor: pointer;
}
.settingsText {
line-height: 20px;
display: table-cell;
}
#altitude_chart {
float: right;
width: calc(100% - 5px);
max-width: 800px;
right: 5px;
bottom: 35px;
background-color: transparent !important;
}
#altitude_chart_button {
background-image: url('images/alt_legend_feet.svg');
background-size: cover;
background-color: transparent;
width: 100%;
height: 0;
padding: 0;
padding-bottom: calc(100% * 56 / 1815);
}
.altitudeMeters {
background-image: url('images/alt_legend_meters.svg') !important;
}
/* remove the blue highlighting around the map buttons */
.ol-control button {
outline: none;
}
/* Retina 2x images */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.settingsCloseBox {
background-image: url('images/close-settings@2x.png');
}
.settingsCheckboxChecked {
background-image: url('images/box-checked@2x.png') !important;
}
.settingsCheckbox {
background-image: url('images/box-empty@2x.png');
}
.ol-zoom-out {
background-image: url("images/zoom-out@2x.png");
}
.ol-zoom-in {
background-image: url("images/zoom-in@2x.png");
}
#splitter {
background-image: url("images/column-adjust@2x.png");
}
#toggle_sidebar_button.show_sidebar {
background-image: url("images/table-icon@2x.png");
}
#expand_sidebar_button {
background-image: url("images/table-icon@2x.png");
}
#toggle_sidebar_button.hide_sidebar {
background-image: url("images/map-icon@2x.png");
}
}
/* Retina 3x images */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 192dpi) {
.settingsCloseBox {
background-image: url('images/close-settings@3x.png');
}
.settingsCheckboxChecked {
background-image: url('images/box-checked@3x.png') !important;
}
.settingsCheckbox {
background-image: url('images/box-empty@3x.png');
}
.ol-zoom-out {
background-image: url("images/zoom-out@3x.png");
}
.ol-zoom-in {
background-image: url("images/zoom-in@3x.png");
}
#splitter {
background-image: url("images/column-adjust@3x.png");
}
#toggle_sidebar_button.show_sidebar {
background-image: url("images/table-icon@3x.png");
}
#expand_sidebar_button {
background-image: url("images/table-icon@3x.png");
}
#toggle_sidebar_button.hide_sidebar {
background-image: url("images/map-icon@3x.png");
}
}