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;
|
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;
|
||||||
|
|
|
||||||
|
|
@ -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
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="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">⇒</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 -->
|
||||||
|
|
|
||||||
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;
|
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);
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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");
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue