Merge pull request #7 from drakeapps/master
Update design and use SkyView branding
This commit is contained in:
Oliver Jowett
GitHub
commit
d790600a86
|
|
@ -102,7 +102,7 @@ SiteCirclesDistances = new Array(100,150,200);
|
|||
ShowClocks = false;
|
||||
|
||||
// Controls page title, righthand pane when nothing is selected
|
||||
PageName = "FlightAware dump1090";
|
||||
PageName = "PiAware Skyview";
|
||||
|
||||
// Show country flags by ICAO addresses?
|
||||
ShowFlags = true;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ var DEGREES='\u00b0'
|
|||
var UP_TRIANGLE='\u25b2'; // U+25B2 BLACK UP-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 = {
|
||||
'altitude': { metric: "m", imperial: "ft", nautical: "ft"},
|
||||
|
|
@ -31,7 +31,7 @@ function format_track_brief(track) {
|
|||
return "";
|
||||
}
|
||||
|
||||
return Math.round(track);
|
||||
return Math.round(track) + DEGREES;
|
||||
}
|
||||
|
||||
// track in degrees (0..359)
|
||||
|
|
@ -54,7 +54,7 @@ function format_altitude_brief(alt, vr, displayUnits) {
|
|||
return "ground";
|
||||
}
|
||||
|
||||
alt_text = Math.round(convert_altitude(alt, displayUnits)) + NBSP;
|
||||
alt_text = Math.round(convert_altitude(alt, displayUnits)).toLocaleString() + NBSP;
|
||||
|
||||
// Vertical Rate Triangle
|
||||
var verticalRateTriangle = "<span class=\"verticalRateTriangle\">";
|
||||
|
|
@ -80,7 +80,7 @@ function format_altitude_long(alt, vr, displayUnits) {
|
|||
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) {
|
||||
return UP_TRIANGLE + NBSP + alt_text;
|
||||
|
|
@ -142,12 +142,16 @@ function format_distance_brief(dist, displayUnits) {
|
|||
}
|
||||
|
||||
// dist in meters
|
||||
function format_distance_long(dist, displayUnits) {
|
||||
function format_distance_long(dist, displayUnits, fixed) {
|
||||
if (dist === null) {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
1
public_html/images/alt_legend_feet.svg
Normal file
1
public_html/images/alt_legend_feet.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
1
public_html/images/alt_legend_meters.svg
Normal file
1
public_html/images/alt_legend_meters.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
BIN
public_html/images/box-checked.png
Normal file
BIN
public_html/images/box-checked.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 B |
BIN
public_html/images/box-checked@2x.png
Normal file
BIN
public_html/images/box-checked@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 B |
BIN
public_html/images/box-checked@3x.png
Normal file
BIN
public_html/images/box-checked@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 325 B |
BIN
public_html/images/box-empty.png
Normal file
BIN
public_html/images/box-empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 B |
BIN
public_html/images/box-empty@2x.png
Normal file
BIN
public_html/images/box-empty@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 B |
BIN
public_html/images/box-empty@3x.png
Normal file
BIN
public_html/images/box-empty@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 B |
BIN
public_html/images/close-settings.png
Normal file
BIN
public_html/images/close-settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 B |
BIN
public_html/images/close-settings@2x.png
Normal file
BIN
public_html/images/close-settings@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 874 B |
BIN
public_html/images/close-settings@3x.png
Normal file
BIN
public_html/images/close-settings@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public_html/images/column-adjust.png
Normal file
BIN
public_html/images/column-adjust.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 B |
BIN
public_html/images/column-adjust@2x.png
Normal file
BIN
public_html/images/column-adjust@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 B |
BIN
public_html/images/column-adjust@3x.png
Normal file
BIN
public_html/images/column-adjust@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 629 B |
BIN
public_html/images/fa_logo_color.png
Normal file
BIN
public_html/images/fa_logo_color.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public_html/images/fa_logo_color@2x.png
Normal file
BIN
public_html/images/fa_logo_color@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public_html/images/fa_logo_color@3x.png
Normal file
BIN
public_html/images/fa_logo_color@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
public_html/images/ff-sv-logo.png
Normal file
BIN
public_html/images/ff-sv-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public_html/images/ff-sv-logo@2x.png
Normal file
BIN
public_html/images/ff-sv-logo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
public_html/images/ff-sv-logo@3x.png
Normal file
BIN
public_html/images/ff-sv-logo@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
public_html/images/map-icon.png
Normal file
BIN
public_html/images/map-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
BIN
public_html/images/map-icon@2x.png
Normal file
BIN
public_html/images/map-icon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public_html/images/map-icon@3x.png
Normal file
BIN
public_html/images/map-icon@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public_html/images/pa-sv-logo.png
Normal file
BIN
public_html/images/pa-sv-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public_html/images/pa-sv-logo@2x.png
Normal file
BIN
public_html/images/pa-sv-logo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public_html/images/pa-sv-logo@3x.png
Normal file
BIN
public_html/images/pa-sv-logo@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
public_html/images/settings-icon.png
Normal file
BIN
public_html/images/settings-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 B |
BIN
public_html/images/settings-icon@2x.png
Normal file
BIN
public_html/images/settings-icon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 805 B |
BIN
public_html/images/settings-icon@3x.png
Normal file
BIN
public_html/images/settings-icon@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public_html/images/table-icon.png
Normal file
BIN
public_html/images/table-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 699 B |
BIN
public_html/images/table-icon@2x.png
Normal file
BIN
public_html/images/table-icon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 914 B |
BIN
public_html/images/table-icon@3x.png
Normal file
BIN
public_html/images/table-icon@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public_html/images/zoom-in.png
Normal file
BIN
public_html/images/zoom-in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 439 B |
BIN
public_html/images/zoom-in@2x.png
Normal file
BIN
public_html/images/zoom-in@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
BIN
public_html/images/zoom-in@3x.png
Normal file
BIN
public_html/images/zoom-in@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 917 B |
BIN
public_html/images/zoom-out.png
Normal file
BIN
public_html/images/zoom-out.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 B |
BIN
public_html/images/zoom-out@2x.png
Normal file
BIN
public_html/images/zoom-out@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 598 B |
BIN
public_html/images/zoom-out@3x.png
Normal file
BIN
public_html/images/zoom-out@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 834 B |
|
|
@ -23,7 +23,7 @@
|
|||
<script type="text/javascript" src="flags.js"></script>
|
||||
<script type="text/javascript" src="layers.js"></script>
|
||||
<script type="text/javascript" src="script.js"></script>
|
||||
<title>FlightAware dump1090</title>
|
||||
<title>PiAware Skyview</title>
|
||||
</head>
|
||||
|
||||
<body onload="initialize()">
|
||||
|
|
@ -46,74 +46,220 @@
|
|||
<input type="hidden" name="submit" value="submit">
|
||||
</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="selected_infoblock" class="hidden">
|
||||
<table style="width: 100%">
|
||||
<tr class="infoblock_heading">
|
||||
<td colspan="2">
|
||||
<b>
|
||||
<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span>
|
||||
</b>
|
||||
<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">⇒</span>
|
||||
|
||||
<span id="selected_flag">
|
||||
<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
|
||||
</span>
|
||||
|
||||
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
|
||||
<span id="selected_icao"></span>
|
||||
</a>
|
||||
<span id="selected_registration"></span>
|
||||
<div class="highlightedTitle">
|
||||
<span id="selected_flightaware_link" class="link rightLink"></span>
|
||||
<span class="identLarge"><span id="selected_callsign">n/a</span></span>
|
||||
<span class="identSmall"><span id="selected_icao">n/a</span></span>
|
||||
</div>
|
||||
<div class="highlightedInfo">
|
||||
<div class="infoBlockTopSection">
|
||||
<div class="infoRow removePadding">
|
||||
<div class="infoHeading infoRowFluid">Registration: </div>
|
||||
<div class="infoData infoRowFluid"><span id="selected_registration">n/a</span></div>
|
||||
</div>
|
||||
<div class="infoRow removePadding">
|
||||
<div class="infoHeading infoRowFluid">Country of registration: </div>
|
||||
<div class="infoData infoRowFluid"><span id="selected_country">n/a</span></div>
|
||||
</div>
|
||||
</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_emergency"></span>
|
||||
<span id="selected_flightaware_link"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
<div class="infoHeading infoRowFluid fourColumnSection3">
|
||||
Source:
|
||||
</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 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_canvas"></div>
|
||||
<div id="toggle_sidebar_control" class="ol-unselectable ol-control">
|
||||
<button id="toggle_sidebar_button" class="hide_sidebar" title="Toggle Sidebar"></button>
|
||||
</div>
|
||||
<div id="expand_sidebar_control" class="ol-unselectable ol-control">
|
||||
<button id="expand_sidebar_button" title="Expand Sidebar"></button>
|
||||
</div>
|
||||
<div id="toggle_sidebar_control" class="ol-unselectable ol-control">
|
||||
<button id="toggle_sidebar_button" class="hide_sidebar" title="Toggle Sidebar"></button>
|
||||
</div>
|
||||
<div id="expand_sidebar_control" class="ol-unselectable ol-control">
|
||||
<button id="expand_sidebar_button" title="Expand Sidebar"></button>
|
||||
</div>
|
||||
<div id="altitude_chart" class="ol-unselectable ol-control altitudeFeet">
|
||||
<button id="altitude_chart_button"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar_container">
|
||||
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
|
||||
|
|
@ -123,40 +269,27 @@
|
|||
<table style="width: 100%">
|
||||
<tr class="infoblock_heading">
|
||||
<td>
|
||||
<b id="infoblock_name">FlightAware dump1090</b>
|
||||
</td>
|
||||
<td>
|
||||
<span id="show_map_button" class="sidebarButton pointer">Show Map</span>
|
||||
<div class="button buttonTable" id="show_map_button"><span class="buttonText">Show Map</span></div>
|
||||
</td>
|
||||
<td style="text-align: right">
|
||||
<a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div id="sudo_buttons">
|
||||
<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 class="infoblock_body">
|
||||
<td><span class="infoBlockTitleText">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td>
|
||||
<td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td>
|
||||
</tr>
|
||||
|
||||
<tr class="infoblock_body">
|
||||
<td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td>
|
||||
<td>Messages: <span id="dump1090_message_rate">n/a</span>/sec</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>
|
||||
<td><span class="infoBlockTitleText">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td>
|
||||
<td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div> <!-- dump1090_infoblock -->
|
||||
|
||||
<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">
|
||||
<option value="nautical">Aeronautical</option>
|
||||
<option value="metric">Metric</option>
|
||||
|
|
@ -165,7 +298,7 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<label for="minAltitude" class="altitudeUnit"></label>
|
||||
<span> to </span>
|
||||
|
|
@ -189,15 +322,15 @@
|
|||
<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="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="seen" onclick="sortBySeen();">Age</td>
|
||||
<td id="rssi" onclick="sortByRssi();">RSSI</td>
|
||||
<td id="lat" onclick="sortByLatitude();">Latitude</td>
|
||||
<td id="lon" onclick="sortByLongitude();">Longitude</td>
|
||||
<td id="data_source" onclick="sortByDataSource();">Data Source</td>
|
||||
<td id="airframes_mode_s_link">Airframes.org Link</td>
|
||||
<td id="flightaware_mode_s_link">FlightAware Link</td>
|
||||
<td id="airframes_mode_s_link">Airframes.org</td>
|
||||
<td id="flightaware_mode_s_link">FlightAware</td>
|
||||
<td id="flightaware_photo_link">Photos</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -226,6 +359,16 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</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> <!-- sidebar_canvas -->
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -86,6 +86,20 @@ PlaneObject.prototype.isFiltered = function() {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +129,8 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
|
|||
head_update: this.last_position_time,
|
||||
tail_update: this.last_position_time,
|
||||
estimated: false,
|
||||
ground: (this.altitude === "ground")
|
||||
ground: (this.altitude === "ground"),
|
||||
altitude: this.altitude
|
||||
};
|
||||
this.track_linesegs.push(newseg);
|
||||
this.history_size ++;
|
||||
|
|
@ -137,6 +152,7 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
|
|||
this.track_linesegs.push({ fixed: new ol.geom.LineString([projPrev, projHere]),
|
||||
feature: null,
|
||||
head_update: this.last_position_time,
|
||||
altitude: 0,
|
||||
estimated: true });
|
||||
this.history_size += 2;
|
||||
} else {
|
||||
|
|
@ -157,14 +173,15 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
|
|||
head_update: this.last_position_time,
|
||||
tail_update: this.last_position_time,
|
||||
estimated: false,
|
||||
ground: (this.altitude === "ground") };
|
||||
ground: (this.altitude === "ground"),
|
||||
altitude: this.altitude };
|
||||
this.track_linesegs.push(lastseg);
|
||||
this.history_size ++;
|
||||
// continue
|
||||
}
|
||||
|
||||
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");
|
||||
// Create a new segment as the ground state changed.
|
||||
// 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,
|
||||
tail_update: this.last_position_time,
|
||||
estimated: false,
|
||||
altitude: this.altitude,
|
||||
ground: (this.altitude === "ground") });
|
||||
this.history_size += 3;
|
||||
return true;
|
||||
|
|
@ -236,33 +254,11 @@ PlaneObject.prototype.getMarkerColor = function() {
|
|||
|
||||
var h, s, l;
|
||||
|
||||
if (this.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;
|
||||
var colorArr = this.getAltitudeColor();
|
||||
|
||||
// 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 (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;
|
||||
}
|
||||
}
|
||||
}
|
||||
h = colorArr[0];
|
||||
s = colorArr[1];
|
||||
l = colorArr[2];
|
||||
|
||||
// If we have not seen a recent position update, change color
|
||||
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 + '%)'
|
||||
}
|
||||
|
||||
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() {
|
||||
var scaleFactor = Math.max(0.2, Math.min(1.2, 0.15 * Math.pow(1.25, ZoomLvl))).toFixed(1);
|
||||
|
||||
var col = this.getMarkerColor();
|
||||
var opacity = 1.0;
|
||||
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 weight = ((this.selected && !SelectedAllPlanes ? 2 : 1) / baseMarker.scale / scaleFactor).toFixed(1);
|
||||
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;
|
||||
|
||||
if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) {
|
||||
//console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey);
|
||||
|
||||
var icon = new ol.style.Icon({
|
||||
anchor: baseMarker.anchor,
|
||||
anchorXUnits: 'pixels',
|
||||
anchorYUnits: 'pixels',
|
||||
scale: baseMarker.scale * scaleFactor,
|
||||
anchor: [0.5, 0.5],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'fraction',
|
||||
scale: 1.2 * scaleFactor,
|
||||
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),
|
||||
opacity: opacity,
|
||||
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.markerStyle = new ol.style.Style({
|
||||
image: this.markerIcon
|
||||
});
|
||||
this.markerStaticIcon = null;
|
||||
this.markerStaticStyle = new ol.style.Style({});
|
||||
}
|
||||
this.markerIcon = icon;
|
||||
this.markerStyle = new ol.style.Style({
|
||||
image: this.markerIcon
|
||||
});
|
||||
this.markerStaticIcon = null;
|
||||
this.markerStaticStyle = new ol.style.Style({});
|
||||
|
||||
this.markerStyleKey = styleKey;
|
||||
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,
|
||||
PlaneObject.prototype.updateLines = function() {
|
||||
if (!this.selected)
|
||||
|
|
@ -542,7 +570,7 @@ PlaneObject.prototype.updateLines = function() {
|
|||
var lastfixed = lastseg.fixed.getCoordinateAt(1.0);
|
||||
var geom = new ol.geom.LineString([lastfixed, ol.proj.fromLonLat(this.position)]);
|
||||
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) {
|
||||
PlaneTrailFeatures.push(this.elastic_feature);
|
||||
|
|
@ -557,10 +585,8 @@ PlaneObject.prototype.updateLines = function() {
|
|||
seg.feature = new ol.Feature(seg.fixed);
|
||||
if (seg.estimated) {
|
||||
seg.feature.setStyle(estimateStyle);
|
||||
} else if (seg.ground) {
|
||||
seg.feature.setStyle(groundStyle);
|
||||
} else {
|
||||
seg.feature.setStyle(airStyle);
|
||||
seg.feature.setStyle(this.altitudeLines(seg.altitude));
|
||||
}
|
||||
|
||||
PlaneTrailFeatures.push(seg.feature);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@ var PlanesOrdered = [];
|
|||
var PlaneFilter = {};
|
||||
var SelectedPlane = null;
|
||||
var SelectedAllPlanes = false;
|
||||
var HighlightedPlane = null;
|
||||
var FollowSelected = false;
|
||||
var infoBoxOriginalPosition = {};
|
||||
var customAltitudeColors = true;
|
||||
|
||||
var SpecialSquawks = {
|
||||
'7500' : { cssClass: 'squawk7500', markerColor: 'rgb(255, 85, 85)', text: 'Aircraft Hijacking' },
|
||||
|
|
@ -45,6 +48,11 @@ var MessageRate = 0;
|
|||
|
||||
var NBSP='\u00a0';
|
||||
|
||||
var layers;
|
||||
|
||||
// piaware vs flightfeeder
|
||||
var isFlightFeeder = false;
|
||||
|
||||
function processReceiverUpdate(data) {
|
||||
// Loop through all the planes in the data packet
|
||||
var now = data.now;
|
||||
|
|
@ -150,6 +158,7 @@ function fetchData() {
|
|||
selectNewPlanes();
|
||||
refreshTableInfo();
|
||||
refreshSelected();
|
||||
refreshHighlighted();
|
||||
|
||||
if (ReceiverClock) {
|
||||
var rcv = new Date(now * 1000);
|
||||
|
|
@ -180,39 +189,12 @@ var PositionHistorySize = 0;
|
|||
function initialize() {
|
||||
// Set page basics
|
||||
document.title = PageName;
|
||||
$("#infoblock_name").text(PageName);
|
||||
|
||||
flightFeederCheck();
|
||||
|
||||
PlaneRowTemplate = document.getElementById("plane_row_template");
|
||||
|
||||
if (!ShowClocks) {
|
||||
$('#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(){})
|
||||
}
|
||||
refreshClock();
|
||||
|
||||
$("#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);
|
||||
|
||||
$('#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
|
||||
var mapResizeTimeout;
|
||||
$("#sidebar_container").on("resize", function() {
|
||||
|
|
@ -263,6 +295,10 @@ function initialize() {
|
|||
mapResizeTimeout = setTimeout(updateMapSize, 10);
|
||||
});
|
||||
|
||||
filterGroundVehicles(false);
|
||||
filterBlockedMLAT(false);
|
||||
toggleAltitudeChart(false);
|
||||
|
||||
// Get receiver metadata, reconfigure using it, then continue
|
||||
// with initialization
|
||||
$.ajax({ url: 'data/receiver.json',
|
||||
|
|
@ -371,6 +407,7 @@ function end_load_history() {
|
|||
|
||||
refreshTableInfo();
|
||||
refreshSelected();
|
||||
refreshHighlighted();
|
||||
reaper();
|
||||
|
||||
// Setup our timer to poll from the server.
|
||||
|
|
@ -434,7 +471,7 @@ function initialize_map() {
|
|||
|
||||
// Initialize OL3
|
||||
|
||||
var layers = createBaseLayers();
|
||||
layers = createBaseLayers();
|
||||
|
||||
var iconsLayer = new ol.layer.Vector({
|
||||
name: 'ac_positions',
|
||||
|
|
@ -471,12 +508,14 @@ function initialize_map() {
|
|||
}));
|
||||
|
||||
var foundType = false;
|
||||
var baseCount = 0;
|
||||
|
||||
ol.control.LayerSwitcher.forEachRecursive(layers, function(lyr) {
|
||||
if (!lyr.get('name'))
|
||||
return;
|
||||
|
||||
if (lyr.get('type') === 'base') {
|
||||
baseCount++;
|
||||
if (MapType === lyr.get('name')) {
|
||||
foundType = true;
|
||||
lyr.setVisible(true);
|
||||
|
|
@ -522,14 +561,17 @@ function initialize_map() {
|
|||
}),
|
||||
controls: [new ol.control.Zoom(),
|
||||
new ol.control.Rotate(),
|
||||
new ol.control.Attribution({collapsed: false}),
|
||||
new ol.control.ScaleLine({units: DisplayUnits}),
|
||||
new ol.control.LayerSwitcher()
|
||||
new ol.control.Attribution({collapsed: true}),
|
||||
new ol.control.ScaleLine({units: DisplayUnits})
|
||||
],
|
||||
loadTilesWhileAnimating: true,
|
||||
loadTilesWhileInteracting: true
|
||||
});
|
||||
|
||||
if (baseCount > 1) {
|
||||
OLMap.addControl(new ol.control.LayerSwitcher());
|
||||
}
|
||||
|
||||
// Listeners for newly created Map
|
||||
OLMap.getView().on('change:center', function(event) {
|
||||
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) {
|
||||
FollowSelected = false;
|
||||
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
|
||||
if (SitePosition) {
|
||||
var markerStyle = new ol.style.Style({
|
||||
|
|
@ -652,13 +725,22 @@ function createSiteCircleFeatures() {
|
|||
});
|
||||
SiteCircleFeatures.clear();
|
||||
|
||||
var circleStyle = new ol.style.Style({
|
||||
var circleStyle = function(distance) {
|
||||
return new ol.style.Style({
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#000000',
|
||||
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;
|
||||
if (DisplayUnits === "nautical") {
|
||||
|
|
@ -672,7 +754,7 @@ function createSiteCircleFeatures() {
|
|||
var circle = make_geodesic_circle(SitePosition, distance, 360);
|
||||
circle.transform('EPSG:4326', 'EPSG:3857');
|
||||
var feature = new ol.Feature(circle);
|
||||
feature.setStyle(circleStyle);
|
||||
feature.setStyle(circleStyle(distance));
|
||||
StaticFeatures.push(feature);
|
||||
SiteCircleFeatures.push(feature);
|
||||
}
|
||||
|
|
@ -701,12 +783,15 @@ function reaper() {
|
|||
PlanesOrdered = newPlanes;
|
||||
refreshTableInfo();
|
||||
refreshSelected();
|
||||
refreshHighlighted();
|
||||
}
|
||||
|
||||
// Page Title update function
|
||||
function refreshPageTitle() {
|
||||
if (!PlaneCountInTitle && !MessageRateInTitle)
|
||||
if (!PlaneCountInTitle && !MessageRateInTitle) {
|
||||
document.title = PageName;
|
||||
return;
|
||||
}
|
||||
|
||||
var subtitle = "";
|
||||
|
||||
|
|
@ -763,7 +848,7 @@ function refreshSelected() {
|
|||
} else {
|
||||
$('#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) {
|
||||
$('#selected_registration').text(selected.registration);
|
||||
|
|
@ -777,13 +862,14 @@ function refreshSelected() {
|
|||
$('#selected_icaotype').text("");
|
||||
}
|
||||
|
||||
var emerg = document.getElementById('selected_emergency');
|
||||
if (selected.squawk in SpecialSquawks) {
|
||||
emerg.className = SpecialSquawks[selected.squawk].cssClass;
|
||||
emerg.textContent = NBSP + 'Squawking: ' + SpecialSquawks[selected.squawk].text + NBSP ;
|
||||
} else {
|
||||
emerg.className = 'hidden';
|
||||
}
|
||||
// Not using this logic for the redesigned info panel at the time, but leaving it in if/when adding it back
|
||||
// var emerg = document.getElementById('selected_emergency');
|
||||
// if (selected.squawk in SpecialSquawks) {
|
||||
// emerg.className = SpecialSquawks[selected.squawk].cssClass;
|
||||
// emerg.textContent = NBSP + 'Squawking: ' + SpecialSquawks[selected.squawk].text + NBSP ;
|
||||
// } else {
|
||||
// emerg.className = 'hidden';
|
||||
// }
|
||||
|
||||
$("#selected_altitude").text(format_altitude_long(selected.altitude, selected.vert_rate, DisplayUnits));
|
||||
|
||||
|
|
@ -818,12 +904,13 @@ function refreshSelected() {
|
|||
$('#selected_position').text('n/a');
|
||||
$('#selected_follow').addClass('hidden');
|
||||
} else {
|
||||
var mlat_bit = (selected.position_from_mlat ? "MLAT: " : "");
|
||||
|
||||
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 {
|
||||
$('#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');
|
||||
if (FollowSelected) {
|
||||
$('#selected_follow').css('font-weight', 'bold');
|
||||
|
|
@ -839,77 +926,131 @@ function refreshSelected() {
|
|||
$('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration));
|
||||
}
|
||||
|
||||
// Refreshes the larger table of all the planes
|
||||
function refreshTableInfo() {
|
||||
var show_squawk_warning = false;
|
||||
function refreshHighlighted() {
|
||||
// this is following nearly identical logic, etc, as the refreshSelected function, but doing less junk for the highlighted pane
|
||||
var highlighted = false;
|
||||
|
||||
TrackedAircraft = 0
|
||||
TrackedAircraftPositions = 0
|
||||
TrackedHistorySize = 0
|
||||
|
||||
$(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits));
|
||||
$(".speedUnit").text(get_unit_label("speed", DisplayUnits));
|
||||
$(".distanceUnit").text(get_unit_label("distance", DisplayUnits));
|
||||
$(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits));
|
||||
|
||||
for (var i = 0; i < PlanesOrdered.length; ++i) {
|
||||
var tableplane = PlanesOrdered[i];
|
||||
TrackedHistorySize += tableplane.history_size;
|
||||
if (tableplane.seen >= 58 || tableplane.isFiltered()) {
|
||||
tableplane.tr.className = "plane_table_row hidden";
|
||||
} else {
|
||||
TrackedAircraft++;
|
||||
var classes = "plane_table_row";
|
||||
|
||||
if (tableplane.position !== null && tableplane.seen_pos < 60) {
|
||||
++TrackedAircraftPositions;
|
||||
if (tableplane.position_from_mlat)
|
||||
classes += " mlat";
|
||||
else
|
||||
classes += " vPosition";
|
||||
}
|
||||
if (tableplane.icao == SelectedPlane)
|
||||
classes += " selected";
|
||||
|
||||
if (tableplane.squawk in SpecialSquawks) {
|
||||
classes = classes + " " + SpecialSquawks[tableplane.squawk].cssClass;
|
||||
show_squawk_warning = true;
|
||||
}
|
||||
|
||||
// ICAO doesn't change
|
||||
if (tableplane.flight) {
|
||||
tableplane.tr.cells[2].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight, tableplane.flight);
|
||||
} else {
|
||||
tableplane.tr.cells[2].innerHTML = "";
|
||||
}
|
||||
tableplane.tr.cells[3].textContent = (tableplane.registration !== null ? tableplane.registration : "");
|
||||
tableplane.tr.cells[4].textContent = (tableplane.icaotype !== null ? tableplane.icaotype : "");
|
||||
tableplane.tr.cells[5].textContent = (tableplane.squawk !== null ? tableplane.squawk : "");
|
||||
tableplane.tr.cells[6].innerHTML = format_altitude_brief(tableplane.altitude, tableplane.vert_rate, DisplayUnits);
|
||||
tableplane.tr.cells[7].textContent = format_speed_brief(tableplane.speed, DisplayUnits);
|
||||
tableplane.tr.cells[8].textContent = format_vert_rate_brief(tableplane.vert_rate, DisplayUnits);
|
||||
tableplane.tr.cells[9].textContent = format_distance_brief(tableplane.sitedist, DisplayUnits);
|
||||
tableplane.tr.cells[10].textContent = format_track_brief(tableplane.track);
|
||||
tableplane.tr.cells[11].textContent = tableplane.messages;
|
||||
tableplane.tr.cells[12].textContent = tableplane.seen.toFixed(0);
|
||||
tableplane.tr.cells[13].textContent = (tableplane.rssi !== null ? tableplane.rssi : "");
|
||||
tableplane.tr.cells[14].textContent = (tableplane.position !== null ? tableplane.position[1].toFixed(4) : "");
|
||||
tableplane.tr.cells[15].textContent = (tableplane.position !== null ? tableplane.position[0].toFixed(4) : "");
|
||||
tableplane.tr.cells[16].textContent = format_data_source(tableplane.getDataSource());
|
||||
tableplane.tr.cells[17].innerHTML = getAirframesModeSLink(tableplane.icao);
|
||||
tableplane.tr.cells[18].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight);
|
||||
tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration);
|
||||
tableplane.tr.className = classes;
|
||||
}
|
||||
if (typeof HighlightedPlane !== 'undefined' && HighlightedPlane !== null) {
|
||||
highlighted = Planes[HighlightedPlane];
|
||||
}
|
||||
|
||||
if (show_squawk_warning) {
|
||||
$("#SpecialSquawkWarning").css('display','block');
|
||||
// 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
|
||||
function refreshTableInfo() {
|
||||
var show_squawk_warning = false;
|
||||
|
||||
TrackedAircraft = 0
|
||||
TrackedAircraftPositions = 0
|
||||
TrackedHistorySize = 0
|
||||
|
||||
$(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits));
|
||||
$(".speedUnit").text(get_unit_label("speed", DisplayUnits));
|
||||
$(".distanceUnit").text(get_unit_label("distance", DisplayUnits));
|
||||
$(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits));
|
||||
|
||||
for (var i = 0; i < PlanesOrdered.length; ++i) {
|
||||
var tableplane = PlanesOrdered[i];
|
||||
TrackedHistorySize += tableplane.history_size;
|
||||
if (tableplane.seen >= 58 || tableplane.isFiltered()) {
|
||||
tableplane.tr.className = "plane_table_row hidden";
|
||||
} else {
|
||||
TrackedAircraft++;
|
||||
var classes = "plane_table_row";
|
||||
|
||||
if (tableplane.position !== null && tableplane.seen_pos < 60) {
|
||||
++TrackedAircraftPositions;
|
||||
}
|
||||
|
||||
if (tableplane.getDataSource() === "adsb_icao") {
|
||||
classes += " vPosition";
|
||||
} else if (tableplane.getDataSource() === "tisb_trackfile") {
|
||||
classes += " tisb";
|
||||
} else if (tableplane.getDataSource() === "mlat") {
|
||||
classes += " mlat";
|
||||
} else {
|
||||
$("#SpecialSquawkWarning").css('display','none');
|
||||
classes += " other";
|
||||
}
|
||||
|
||||
resortTable();
|
||||
if (tableplane.icao == SelectedPlane)
|
||||
classes += " selected";
|
||||
|
||||
if (tableplane.squawk in SpecialSquawks) {
|
||||
classes = classes + " " + SpecialSquawks[tableplane.squawk].cssClass;
|
||||
show_squawk_warning = true;
|
||||
}
|
||||
|
||||
// ICAO doesn't change
|
||||
if (tableplane.flight) {
|
||||
tableplane.tr.cells[2].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight, tableplane.flight);
|
||||
} else {
|
||||
tableplane.tr.cells[2].innerHTML = "";
|
||||
}
|
||||
tableplane.tr.cells[3].textContent = (tableplane.registration !== null ? tableplane.registration : "");
|
||||
tableplane.tr.cells[4].textContent = (tableplane.icaotype !== null ? tableplane.icaotype : "");
|
||||
tableplane.tr.cells[5].textContent = (tableplane.squawk !== null ? tableplane.squawk : "");
|
||||
tableplane.tr.cells[6].innerHTML = format_altitude_brief(tableplane.altitude, tableplane.vert_rate, DisplayUnits);
|
||||
tableplane.tr.cells[7].textContent = format_speed_brief(tableplane.speed, DisplayUnits);
|
||||
tableplane.tr.cells[8].textContent = format_vert_rate_brief(tableplane.vert_rate, DisplayUnits);
|
||||
tableplane.tr.cells[9].textContent = format_distance_brief(tableplane.sitedist, DisplayUnits);
|
||||
tableplane.tr.cells[10].textContent = format_track_brief(tableplane.track);
|
||||
tableplane.tr.cells[11].textContent = tableplane.messages;
|
||||
tableplane.tr.cells[12].textContent = tableplane.seen.toFixed(0);
|
||||
tableplane.tr.cells[13].textContent = (tableplane.rssi !== null ? tableplane.rssi : "");
|
||||
tableplane.tr.cells[14].textContent = (tableplane.position !== null ? tableplane.position[1].toFixed(4) : "");
|
||||
tableplane.tr.cells[15].textContent = (tableplane.position !== null ? tableplane.position[0].toFixed(4) : "");
|
||||
tableplane.tr.cells[16].textContent = format_data_source(tableplane.getDataSource());
|
||||
tableplane.tr.cells[17].innerHTML = getAirframesModeSLink(tableplane.icao);
|
||||
tableplane.tr.cells[18].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight);
|
||||
tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration);
|
||||
tableplane.tr.className = classes;
|
||||
}
|
||||
}
|
||||
|
||||
if (show_squawk_warning) {
|
||||
$("#SpecialSquawkWarning").css('display','block');
|
||||
} else {
|
||||
$("#SpecialSquawkWarning").css('display','none');
|
||||
}
|
||||
|
||||
resortTable();
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -988,6 +1129,11 @@ function resortTable() {
|
|||
}
|
||||
|
||||
function sortBy(id,sc,se) {
|
||||
if (id !== 'data_source') {
|
||||
$('#grouptype_checkbox').removeClass('settingsCheckboxChecked');
|
||||
} else {
|
||||
$('#grouptype_checkbox').addClass('settingsCheckboxChecked');
|
||||
}
|
||||
if (id === sortId) {
|
||||
sortAscending = !sortAscending;
|
||||
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) {
|
||||
//console.log("select: " + hex);
|
||||
// If SelectedPlane has something in it, clear out the selected
|
||||
|
||||
removeHighlight();
|
||||
if (SelectedAllPlanes) {
|
||||
deselectAllPlanes();
|
||||
}
|
||||
|
|
@ -1043,10 +1189,23 @@ function selectPlaneByHex(hex,autofollow) {
|
|||
}
|
||||
|
||||
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
|
||||
function selectAllPlanes() {
|
||||
HighlightedPlane = null;
|
||||
// if all planes are already selected, deselect them all
|
||||
if (SelectedAllPlanes) {
|
||||
deselectAllPlanes();
|
||||
|
|
@ -1071,7 +1230,10 @@ function selectAllPlanes() {
|
|||
}
|
||||
}
|
||||
|
||||
$('#selectall_checkbox').addClass('settingsCheckboxChecked');
|
||||
|
||||
refreshSelected();
|
||||
refreshHighlighted();
|
||||
}
|
||||
|
||||
// on refreshes, try to find new planes and mark them as selected
|
||||
|
|
@ -1101,9 +1263,11 @@ function deselectAllPlanes() {
|
|||
Planes[key].updateMarker();
|
||||
$(Planes[key].tr).removeClass("selected");
|
||||
}
|
||||
$('#selectall_checkbox').removeClass('settingsCheckboxChecked');
|
||||
SelectedPlane = null;
|
||||
SelectedAllPlanes = false;
|
||||
refreshSelected();
|
||||
refreshHighlighted();
|
||||
}
|
||||
|
||||
function toggleFollowSelected() {
|
||||
|
|
@ -1225,6 +1389,14 @@ function adjustSelectedInfoBlockPosition() {
|
|||
// Get info box position and size
|
||||
var infoBox = $('#selected_infoblock');
|
||||
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());
|
||||
|
||||
// Get map size
|
||||
|
|
@ -1235,8 +1407,8 @@ function adjustSelectedInfoBlockPosition() {
|
|||
if (isPointInsideExtent(markerPosition[0], markerPosition[1], infoBoxExtent)) {
|
||||
// Array of possible new positions for info box
|
||||
var candidatePositions = [];
|
||||
candidatePositions.push( { x: 20, y: 20 } );
|
||||
candidatePositions.push( { x: 20, y: markerPosition[1] + 40 } );
|
||||
candidatePositions.push( { x: 40, y: 60 } );
|
||||
candidatePositions.push( { x: 40, y: markerPosition[1] + 80 } );
|
||||
|
||||
// Find new position
|
||||
for (var i = 0; i < candidatePositions.length; i++) {
|
||||
|
|
@ -1276,6 +1448,8 @@ function initializeUnitsSelector() {
|
|||
var displayUnits = localStorage['displayUnits'];
|
||||
DisplayUnits = displayUnits;
|
||||
|
||||
setAltitudeLegend(displayUnits);
|
||||
|
||||
// Initialize drop-down
|
||||
var unitsSelector = $("#units_selector");
|
||||
unitsSelector.val(displayUnits);
|
||||
|
|
@ -1288,12 +1462,15 @@ function onDisplayUnitsChanged(e) {
|
|||
localStorage['displayUnits'] = displayUnits;
|
||||
DisplayUnits = displayUnits;
|
||||
|
||||
setAltitudeLegend(displayUnits);
|
||||
|
||||
// Update filters
|
||||
updatePlaneFilter();
|
||||
|
||||
// Refresh data
|
||||
refreshTableInfo();
|
||||
refreshSelected();
|
||||
refreshHighlighted();
|
||||
|
||||
// Redraw range rings
|
||||
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) {
|
||||
e.preventDefault();
|
||||
updatePlaneFilter();
|
||||
|
|
@ -1320,9 +1505,68 @@ function onFilterByAltitude(e) {
|
|||
selectedPlane.clearLines();
|
||||
selectedPlane.updateMarker();
|
||||
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) {
|
||||
$("#altitude_filter_min").val("");
|
||||
$("#altitude_filter_max").val("");
|
||||
|
|
@ -1378,7 +1622,7 @@ function getFlightAwareModeSLink(code, ident, linkText) {
|
|||
|
||||
function getFlightAwarePhotoLink(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 "";
|
||||
|
|
@ -1391,3 +1635,57 @@ function getAirframesModeSLink(code) {
|
|||
|
||||
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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
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%;
|
||||
}
|
||||
|
||||
#layout_container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
height: calc(100% - 60px);;
|
||||
}
|
||||
|
||||
#selected_infoblock {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 10px;
|
||||
min-width: 360px;
|
||||
padding: 20px;
|
||||
top: 60px;
|
||||
min-width: 394px;
|
||||
padding: 10px;
|
||||
background: #ffffff;
|
||||
box-shadow: 4px 4px 10px #444444;
|
||||
cursor: pointer;
|
||||
|
|
@ -35,15 +35,16 @@ html, body {
|
|||
#toggle_sidebar_control {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
top: 16px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
#toggle_sidebar_button {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
background-size: 32px 28px;
|
||||
width: 24px;
|
||||
height: 25px;
|
||||
background-size: 24px 25px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px;
|
||||
background-color: transparent;
|
||||
|
|
@ -51,33 +52,26 @@ html, body {
|
|||
}
|
||||
|
||||
#toggle_sidebar_button.show_sidebar {
|
||||
background-image: url("images/show_sidebar_inactive_48x40.png");
|
||||
}
|
||||
|
||||
#toggle_sidebar_button.show_sidebar:hover {
|
||||
background-image: url("images/show_sidebar_active_48x40.png");
|
||||
background-image: url("images/table-icon.png");
|
||||
}
|
||||
|
||||
#toggle_sidebar_button.hide_sidebar {
|
||||
background-image: url("images/hide_sidebar_inactive_48x40.png");
|
||||
}
|
||||
|
||||
#toggle_sidebar_button.hide_sidebar:hover {
|
||||
background-image: url("images/hide_sidebar_active_48x40.png");
|
||||
background-image: url("images/map-icon.png");
|
||||
}
|
||||
|
||||
#expand_sidebar_control {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 10px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
#expand_sidebar_button {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
background-size: 32px 28px;
|
||||
width: 24px;
|
||||
height: 25px;
|
||||
background-size: 24px 25px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px;
|
||||
background-color: transparent;
|
||||
|
|
@ -85,24 +79,53 @@ html, body {
|
|||
}
|
||||
|
||||
#expand_sidebar_button {
|
||||
background-image: url("images/show_sidebar_inactive_48x40.png");
|
||||
}
|
||||
|
||||
#expand_sidebar_button:hover {
|
||||
background-image: url("images/show_sidebar_active_48x40.png");
|
||||
background-image: url("images/table-icon.png");
|
||||
}
|
||||
|
||||
#sidebar_container {
|
||||
display: flex;
|
||||
width: 470px;
|
||||
width: 500px;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
#splitter {
|
||||
flex: 0 0 6px;
|
||||
cursor: col-resize;
|
||||
background-color: #bbbbbb;
|
||||
left: 0 !important;
|
||||
display: block;
|
||||
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 {
|
||||
|
|
@ -138,7 +161,7 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
|
|||
}
|
||||
|
||||
.aircraft_table_header {
|
||||
background-color: #409EDF;
|
||||
background-color: #002F5D;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -157,22 +180,22 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vPosition { background-color: #C3FFDF; }
|
||||
.mlat { background-color: #C7EAFC; }
|
||||
.vPosition { background-color: #E5F6FC; }
|
||||
.mlat { background-color: #FDF2E5; }
|
||||
.other { background-color: #CCD5F8; }
|
||||
.tisb { background-color: #FFF3B8; }
|
||||
.squawk7500 { font-weight: bold; background-color: #ff5555; }
|
||||
.squawk7600 { font-weight: bold; background-color: #00ffff; }
|
||||
.squawk7700 { font-weight: bold; background-color: #ffff00; }
|
||||
.selected { background-color: #dddddd; }
|
||||
.plane_table_row { cursor: pointer; }
|
||||
.plane_table_row {
|
||||
cursor: pointer;
|
||||
font-family: Helvetica Neue;
|
||||
}
|
||||
.hidden { display: none; }
|
||||
|
||||
.infoblock_heading { font-size: larger; }
|
||||
.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 */ }
|
||||
|
||||
|
|
@ -199,6 +222,490 @@ select.error, textarea.error, input.error {
|
|||
}
|
||||
|
||||
.layer-switcher {
|
||||
top: 86px !important;
|
||||
bottom: 80px !important;
|
||||
top: auto !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");
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue