Merge pull request #21 from drakeapps/master

Update skyview with extended mode S data fields
This commit is contained in:
Oliver Jowett 2018-08-17 17:59:37 +01:00 committed by GitHub
commit ed23dbd6db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 936 additions and 442 deletions

View file

@ -12,7 +12,8 @@ var UnitLabels = {
'altitude': { metric: "m", imperial: "ft", nautical: "ft"}, 'altitude': { metric: "m", imperial: "ft", nautical: "ft"},
'speed': { metric: "km/h", imperial: "mph", nautical: "kt" }, 'speed': { metric: "km/h", imperial: "mph", nautical: "kt" },
'distance': { metric: "km", imperial: "mi", nautical: "NM" }, 'distance': { metric: "km", imperial: "mi", nautical: "NM" },
'verticalRate': { metric: "m/s", imperial: "ft/min", nautical: "ft/min" } 'verticalRate': { metric: "m/s", imperial: "ft/min", nautical: "ft/min" },
'distanceShort': {metric: "m", imperial: "ft", nautical: "m"}
}; };
// formatting helpers // formatting helpers
@ -91,6 +92,17 @@ function format_altitude_long(alt, vr, displayUnits) {
} }
} }
// alt ground/airborne
function format_onground (alt) {
if (alt === null) {
return "n/a";
} else if (alt === "ground") {
return "on ground";
} else {
return "airborne";
}
}
// alt in feet // alt in feet
function convert_altitude(alt, displayUnits) { function convert_altitude(alt, displayUnits) {
if (displayUnits === "metric") { if (displayUnits === "metric") {
@ -156,6 +168,16 @@ function format_distance_long(dist, displayUnits, fixed) {
return dist_text; return dist_text;
} }
function format_distance_short (dist, displayUnits) {
if (dist === null) {
return "n/a";
}
var dist_text = Math.round(convert_distance_short(dist, displayUnits)) + NBSP + get_unit_label("distanceShort", displayUnits);
return dist_text;
}
// dist in meters // dist in meters
function convert_distance(dist, displayUnits) { function convert_distance(dist, displayUnits) {
if (displayUnits === "metric") { if (displayUnits === "metric") {
@ -167,6 +189,15 @@ function convert_distance(dist, displayUnits) {
return (dist / 1852); // meters to nautical miles return (dist / 1852); // meters to nautical miles
} }
// dist in meters
// converts meters to feet or just returns meters
function convert_distance_short(dist, displayUnits) {
if (displayUnits === "imperial") {
return (dist / 0.3048); // meters to feet
}
return dist; // just meters
}
// rate in ft/min // rate in ft/min
function format_vert_rate_brief(rate, displayUnits) { function format_vert_rate_brief(rate, displayUnits) {
if (rate === null || rate === undefined) { if (rate === null || rate === undefined) {
@ -225,3 +256,52 @@ function format_data_source(source) {
return ""; return "";
} }
function format_nac_p (value) {
switch (value) {
case 0:
return "EPU ≥ 18.52 km";
case 1:
return "EPU < 18.52 km";
case 2:
return "EPU < 7.408 km";
case 3:
return "EPU < 3.704 km";
case 4:
return "EPU < 1852 m";
case 5:
return "EPU < 926 m";
case 6:
return "EPU < 555.6 m";
case 7:
return "EPU < 185.2 m";
case 8:
return "EPU < 92.6 m";
case 9:
return "EPU < 30 m";
case 10:
return "EPU < 10 m";
case 11:
return "EPU < 3 m";
default:
return "n/a";
}
}
function format_nac_v (value) {
switch (value) {
case 0:
return "Unknown or 10 m/s";
case 1:
return "< 10 m/s";
case 2:
return "< 3 m/s";
case 3:
return "< 1 m/s";
case 4:
return "< 0.3 m/s";
default:
return "n/a";
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 780 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 778 B

View file

@ -2,13 +2,13 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css?v=2" />
<link rel="stylesheet" href="jquery/jquery-ui-1.11.4-smoothness.css" /> <link rel="stylesheet" href="jquery/jquery-ui-1.11.4-smoothness.css" />
<script src="jquery/jquery-3.0.0.min.js"></script> <script src="jquery/jquery-3.0.0.min.js"></script>
<script src="jquery/jquery-ui-1.11.4.min.js"></script> <script src="jquery/jquery-ui-1.11.4.min.js"></script>
<script src="jquery/plugins/jquery.validate.min.js"></script> <script src="jquery/plugins/jquery.validate.min.js"></script>
<link rel="stylesheet" href="ol/ol-4.4.2.css" type="text/css" /> <link rel="stylesheet" href="ol/ol-4.4.2.css" type="text/css" />
<script src="ol/ol-4.4.2.js" type="text/javascript"></script> <script src="ol/ol-4.4.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol/ol3-layerswitcher.css" type="text/css"/> <link rel="stylesheet" href="ol/ol3-layerswitcher.css" type="text/css"/>
@ -18,11 +18,11 @@
<script type="text/javascript" src="markers.js"></script> <script type="text/javascript" src="markers.js"></script>
<script type="text/javascript" src="dbloader.js"></script> <script type="text/javascript" src="dbloader.js"></script>
<script type="text/javascript" src="registrations.js"></script> <script type="text/javascript" src="registrations.js"></script>
<script type="text/javascript" src="planeObject.js"></script> <script type="text/javascript" src="planeObject.js?v=2"></script>
<script type="text/javascript" src="formatter.js"></script> <script type="text/javascript" src="formatter.js?v=2"></script>
<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?v=2"></script>
<title>PiAware Skyview</title> <title>PiAware Skyview</title>
</head> </head>
@ -63,189 +63,18 @@
<div id="layout_container"> <div id="layout_container">
<div id="selected_infoblock" class="hidden">
<div class="highlightedTitle">
<span id="selected_flightaware_link" class="link rightLink"></span>
<span class="identLarge"><span id="selected_callsign">n/a</span></span>
<span class="identSmall"><span id="selected_icao">n/a</span></span>
</div>
<div class="highlightedInfo">
<div class="infoBlockTopSection">
<div class="infoRow removePadding">
<div class="infoHeading infoRowFluid">Registration: </div>
<div class="infoData infoRowFluid"><span id="selected_registration">n/a</span></div>
</div>
<div class="infoRow removePadding">
<div class="infoHeading infoRowFluid">Country of registration: </div>
<div class="infoData infoRowFluid"><span id="selected_country">n/a</span></div>
</div>
</div>
<div class="infoBlock45pxSection lightGreyBackground">
<div class="infoHeading infoRowFluid fourColumnSection1">
Aircraft Type:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_icaotype"></span>
</div>
<div class="infoHeading infoRowFluid fourColumnSection3">
Source:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_source"></span>
</div>
</div>
<div class="infoBlockSection">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">
Squawk:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_squawk"></span>
</div>
<div class="infoHeading infoRowFluid fourColumnSection3">
Groundspeed:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_gs">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">
Ground track:
</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>
<div id="extendedData" class="hidden">
<div class="infoBlockSection lightGreyBackground">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">Alt (geom):</div>
<div class="infoData infoRowFluid fourColumnSection2"><span id="selected_alt_geom"/></div>
<div class="infoHeading infoRowFluid fourColumnSection3">Geom rate:</div>
<div class="infoData infoRowFluid fourColumnSection4"><span id="selected_geom_rate"/></div>
</div>
</div>
<div class="infoBlockSection">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">Mag heading:</div>
<div class="infoData infoRowFluid fourColumnSection2"><span id="selected_mag_heading"/></div>
<div class="infoHeading infoRowFluid fourColumnSection3">True heading:</div>
<div class="infoData infoRowFluid fourColumnSection4"><span id="selected_true_heading"/></div>
</div>
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">Roll:</div>
<div class="infoData infoRowFluid fourColumnSection2"><span id="selected_roll"/></div>
<div class="infoHeading infoRowFluid fourColumnSection3">Track rate:</div>
<div class="infoData infoRowFluid fourColumnSection4"><span id="selected_track_rate"/></div>
</div>
</div>
<div class="infoBlockSection lightGreyBackground">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">IAS:</div>
<div class="infoData infoRowFluid fourColumnSection2"><span id="selected_ias"/></div>
<div class="infoHeading infoRowFluid fourColumnSection3">TAS:</div>
<div class="infoData infoRowFluid fourColumnSection4"><span id="selected_tas"/></div>
</div>
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">Mach:</div>
<div class="infoData infoRowFluid fourColumnSection2"><span id="selected_mach"/></div>
</div>
</div>
<div class="infoBlockSection">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">Nav alt:</div>
<div class="infoData infoRowFluid fourColumnSection2"><span id="selected_nav_altitude"/></div>
<div class="infoHeading infoRowFluid fourColumnSection3">Nav heading:</div>
<div class="infoData infoRowFluid fourColumnSection4"><span id="selected_nav_heading"/></div>
</div>
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">Nav modes:</div>
<div class="infoData infoRowFluid fourColumnSection2"><span id="selected_nav_modes"/></div>
<div class="infoHeading infoRowFluid fourColumnSection3">Nav QNH:</div>
<div class="infoData infoRowFluid fourColumnSection4"><span id="selected_nav_qnh"/></div>
</div>
</div>
<div class="infoBlockSection lightGreyBackground">
<div>
<div class="infoHeading infoRowFluid fourColumnSection1">ADS-B:</div>
<div class="infoData infoRowFluid fourColumnSection2"><span id="selected_version"/></div>
</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>
</div> <!-- selected_infoblock -->
<div id="highlighted_infoblock"> <div id="highlighted_infoblock">
<div class="highlightedTitle"> <div class="highlightedTitle">
<span class="identLarge"><span id="highlighted_callsign">n/a</span></span> <span class="identLarge"><span id="highlighted_callsign">n/a</span></span>
<span class="identSmall"><span id="highlighted_icao">n/a</span></span> <span class="identSmall"><span id="highlighted_icao">n/a</span></span>
</div> </div>
<div class="highlightedInfo"> <div class="highlightedInfo">
<div class="infoRow">
<div class="infoHeading infoRowTitle">Registration: </div>
<div class="infoData infoRowContent"><span id="highlighted_registration">n/a</span></div>
</div>
<div class="infoRow"> <div class="infoRow">
<div class="infoHeading infoRowTitle">Aircraft Type: </div> <div class="infoHeading infoRowTitle">Aircraft Type: </div>
<div class="infoData infoRowContent"><span id="higlighted_icaotype">n/a</span></div> <div class="infoData infoRowContent"><span id="higlighted_icaotype">n/a</span></div>
@ -258,11 +87,23 @@
<div class="infoHeading infoRowTitle">Speed: </div> <div class="infoHeading infoRowTitle">Speed: </div>
<div class="infoData infoRowContent"><span id="highlighted_speed">n/a</span></div> <div class="infoData infoRowContent"><span id="highlighted_speed">n/a</span></div>
</div> </div>
<div class="infoRow">
<div class="infoHeading infoRowTitle">Source: </div>
<div class="infoData infoRowContent"><span id="highlighted_source">n/a</span></div>
</div>
</div> </div>
</div> </div>
<div id="settings_infoblock"> <div id="settings_infoblock">
<div id="settings_close" class="settingsCloseBox"></div> <div id="settings_close" class="settingsCloseBox"></div>
<div id="units_container">
<label for="units_selector"><span class="infoBlockTitleText">Units:</span></label>
<select name="units_selector" id="units_selector">
<option value="nautical">Aeronautical</option>
<option value="metric">Metric</option>
<option value="imperial">Imperial</option>
</select>
</div>
<div class="settingsColumn"> <div class="settingsColumn">
<div class="settingsOptionContainer"> <div class="settingsOptionContainer">
<div class="infoBlockTitleText">Overlay Toggles</div> <div class="infoBlockTitleText">Overlay Toggles</div>
@ -327,113 +168,472 @@
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div> <div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
<div id="sidebar_canvas"> <div id="sidebar_canvas">
<div id="dump1090_infoblock">
<table style="width: 100%">
<tr class="infoblock_heading">
<td>
<div class="button buttonTable" id="show_map_button"><span class="buttonText">Show Map</span></div>
</td>
<td style="text-align: right">
<a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a>
</td>
</tr>
<tr class="infoblock_body"> <div id="sidebar-table">
<td><span class="infoBlockTitleText">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td> <div id="dump1090_infoblock">
<td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td> <table style="width: 100%">
</tr> <tr class="infoblock_heading">
<td>
<div class="button buttonTable" id="show_map_button"><span class="buttonText">Show Map</span></div>
</td>
<td style="text-align: right">
<a href="https://github.com/flightaware/dump1090" id="dump1090_version" target="_blank"></a>
</td>
</tr>
<tr class="infoblock_body"> <tr class="infoblock_body">
<td><span class="infoBlockTitleText">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td> <td><span class="infoBlockTitleText">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td>
<td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td> <td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td>
</tr> </tr>
</table>
</div> <!-- dump1090_infoblock -->
<div id="units_container"> <tr class="infoblock_body">
<label for="units_selector"><span class="infoBlockTitleText">Units:</span></label> <td><span class="infoBlockTitleText">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td>
<select name="units_selector" id="units_selector"> <td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td>
<option value="nautical">Aeronautical</option> </tr>
<option value="metric">Metric</option> </table>
<option value="imperial">Imperial</option> </div> <!-- dump1090_infoblock -->
</select>
<form id="altitude_filter_form">
<label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
<label for="minAltitude" class="altitudeUnit"></label>
<span> to </span>
<input id="altitude_filter_max" name="maxAltitude" type="text" class="altitudeFilterInput" maxlength="5">
<label for="maxAltitude" class="altitudeUnit"></label>
<button type="submit">Filter</button>
<button id="altitude_filter_reset_button">Reset</button>
</form>
<div id="planes_table">
<table id="tableinfo" style="width: 100%">
<thead class="aircraft_table_header">
<tr>
<td id="icao" onclick="sortByICAO();">ICAO</td>
<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
<td id="flight" onclick="sortByFlight();">Ident</td>
<td id="registration" onclick="sortByRegistration();">Registration</td>
<td id="aircraft_type" onclick="sortByAircraftType();"> Aircraft type</td>
<td id="squawk" onclick="sortBySquawk();">Squawk</td>
<td id="altitude" onclick="sortByAltitude();">Altitude (<span class="altitudeUnit"></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="distance" onclick="sortByDistance();">Distance (<span class="distanceUnit"></span>)</td>
<td id="track" onclick="sortByTrack();">Heading</td>
<td id="msgs" onclick="sortByMsgs();">Msgs</td>
<td id="seen" onclick="sortBySeen();">Age</td>
<td id="rssi" onclick="sortByRssi();">RSSI</td>
<td id="lat" onclick="sortByLatitude();">Latitude</td>
<td id="lon" onclick="sortByLongitude();">Longitude</td>
<td id="data_source" onclick="sortByDataSource();">Data Source</td>
<td id="airframes_mode_s_link">Airframes.org</td>
<td id="flightaware_mode_s_link">FlightAware</td>
<td id="flightaware_photo_link">Photos</td>
</tr>
</thead>
<tbody>
<tr id="plane_row_template" class="plane_table_row hidden">
<td class="icaoCodeColumn">ICAO</td>
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
<td>FLIGHT</td>
<td>REGISTRATION</td>
<td>AIRCRAFT_TYPE</td>
<td style="text-align: right">SQUAWK</td>
<td style="text-align: right">ALTITUDE</td>
<td style="text-align: right">SPEED</td>
<td style="text-align: right">VERT_RATE</td>
<td style="text-align: right">DISTANCE</td>
<td style="text-align: right">TRACK</td>
<td style="text-align: right">MSGS</td>
<td style="text-align: right">SEEN</td>
<td style="text-align: right">RSSI</td>
<td style="text-align: right">LAT</td>
<td style="text-align: right">LON</td>
<td style="text-align: right">DATA_SOURCE</td>
<td style="text-align: center">AIRFRAMES_MODE_S_LINK</td>
<td style="text-align: center">FLIGHTAWARE_MODE_S_LINK</td>
<td style="text-align: center">FLIGHTAWARE_PHOTO_LINK</td>
</tr>
</tbody>
</table>
<div class="legend">
<div class="legendBox vPosition"></div>
<div class="legendTitle">ADS-B</div>
<div class="legendBox mlat"></div>
<div class="legendTitle">MLAT</div>
<div class="legendBox other"></div>
<div class="legendTitle">Other</div>
<div class="legendBox tisb"></div>
<div class="legendTitle">TIS-B</div>
</div>
</div> <!-- planes_table -->
</div> </div>
<form id="altitude_filter_form">
<label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
<label for="minAltitude" class="altitudeUnit"></label>
<span> to </span>
<input id="altitude_filter_max" name="maxAltitude" type="text" class="altitudeFilterInput" maxlength="5">
<label for="maxAltitude" class="altitudeUnit"></label>
<button type="submit">Filter</button>
<button id="altitude_filter_reset_button">Reset</button>
</form>
<div id="planes_table">
<table id="tableinfo" style="width: 100%">
<thead class="aircraft_table_header">
<tr>
<td id="icao" onclick="sortByICAO();">ICAO</td>
<td id="flag" onclick="sortByCountry()"><!-- column for flag image --></td>
<td id="flight" onclick="sortByFlight();">Ident</td>
<td id="registration" onclick="sortByRegistration();">Registration</td>
<td id="aircraft_type" onclick="sortByAircraftType();"> Aircraft type</td>
<td id="squawk" onclick="sortBySquawk();">Squawk</td>
<td id="altitude" onclick="sortByAltitude();">Altitude (<span class="altitudeUnit"></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="distance" onclick="sortByDistance();">Distance (<span class="distanceUnit"></span>)</td>
<td id="track" onclick="sortByTrack();">Heading</td>
<td id="msgs" onclick="sortByMsgs();">Msgs</td>
<td id="seen" onclick="sortBySeen();">Age</td>
<td id="rssi" onclick="sortByRssi();">RSSI</td>
<td id="lat" onclick="sortByLatitude();">Latitude</td>
<td id="lon" onclick="sortByLongitude();">Longitude</td>
<td id="data_source" onclick="sortByDataSource();">Data Source</td>
<td id="airframes_mode_s_link">Airframes.org</td>
<td id="flightaware_mode_s_link">FlightAware</td>
<td id="flightaware_photo_link">Photos</td>
</tr>
</thead>
<tbody>
<tr id="plane_row_template" class="plane_table_row hidden">
<td class="icaoCodeColumn">ICAO</td>
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
<td>FLIGHT</td>
<td>REGISTRATION</td>
<td>AIRCRAFT_TYPE</td>
<td style="text-align: right">SQUAWK</td>
<td style="text-align: right">ALTITUDE</td>
<td style="text-align: right">SPEED</td>
<td style="text-align: right">VERT_RATE</td>
<td style="text-align: right">DISTANCE</td>
<td style="text-align: right">TRACK</td>
<td style="text-align: right">MSGS</td>
<td style="text-align: right">SEEN</td>
<td style="text-align: right">RSSI</td>
<td style="text-align: right">LAT</td>
<td style="text-align: right">LON</td>
<td style="text-align: right">DATA_SOURCE</td>
<td style="text-align: center">AIRFRAMES_MODE_S_LINK</td>
<td style="text-align: center">FLIGHTAWARE_MODE_S_LINK</td>
<td style="text-align: center">FLIGHTAWARE_PHOTO_LINK</td>
</tr>
</tbody>
</table>
<div class="legend">
<div class="legendBox vPosition"></div>
<div class="legendTitle">ADS-B</div>
<div class="legendBox mlat"></div>
<div class="legendTitle">MLAT</div>
<div class="legendBox other"></div>
<div class="legendTitle">Other</div>
<div class="legendBox tisb"></div>
<div class="legendTitle">TIS-B</div>
</div>
</div> <!-- planes_table -->
</div> <!-- sidebar_canvas --> </div> <!-- sidebar_canvas -->
<div id="selected_infoblock" class="hidden">
<div id="splitter-infoblock" class="ui-resizable-handle ui-resizable-n"></div>
<div id="close-button">Close</div>
<div class="infoblock-container">
<div class="highlightedTitle">
<span class="identLarge" title="Typically the air traffic control callsign or the aircraft's registration, as entered into the transponder by the pilot."><span id="selected_callsign">n/a</span></span>
<span class="identSmall" title="The aircraft's unique ICAO identification number shown in hexadecimal format."><span id="selected_icao">n/a</span></span>
</div>
<div class="infoBlockTopSection">
<span id="selected_flightaware_link" class=""></span>
<div class="infoRow removePadding">
<div class="infoHeading infoRowFluid"><span title="The alphanumeric registration code assigned by the country in which the aircraft is registered.">Registration</span>: </div>
<div class="infoData infoRowFluid"><span id="selected_registration">n/a</span></div>
</div>
<div class="infoRow removePadding">
<div class="infoHeading infoRowFluid">Country of registration: </div>
<div class="infoData infoRowFluid"><span id="selected_country">n/a</span></div>
</div>
<div class="infoHeading infoRowFluid fourColumnSection1">
Aircraft Type:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_icaotype"></span> <span class="lightblue-link" id="selected_photo_link"></span>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
Location
</div>
</div>
<div class="infoBlockSection">
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="Latitude and longitude coordinates of the aircraft's last known position.">Position</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_position">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="Whether the aircraft is reporting it is on the ground or airborne.">Air/Ground Status</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_onground">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="Distance of the aircraft from your ADS-B site at its last known position.">Distance</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_sitedist">n/a</span>
</div>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
Speed
</div>
</div>
<div class="infoBlockSection">
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="The speed of the aircraft over the ground.">Groundspeed</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_speed">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="Indicated airspeed (the airspeed read directly from the airspeed indicator on the aircraft)">IAS</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_ias">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="True airspeed (the speed of the aircraft relative to the airmass in which it is flying)">TAS</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_tas">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="The ratio of the speed of the aircraft to the speed of sound in the surrounding space.">Mach Number</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_mach">n/a</span>
</div>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
Altitude
</div>
</div>
<div class="infoBlockSection">
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="The uncorrected pressure-derived height of the aircraft above mean sea level (based on barometric pressure).">Altitude (Barometric)</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_altitude"></span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="The height of the aircraft (usually height above the WGS84 ellipsoid and derived from avionics which may by inertial or GNSS/satellite-based).">Altitude (Geometric)</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_altitude_geo">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="Rate of climb or descent (derived from barometric altitude).">Vertical Rate (Barometric)</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_vertical_rate">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection3">
<span title="Rate of climb or descent (derived from avionics which may by inertial or GNSS/satellite-based).">Vertical Rate (Geometric)</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection4">
<span id="selected_vertical_rate_geo">n/a</span>
</div>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
Direction
</div>
</div>
<div class="infoBlockSection">
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Direction the aircraft is traveling over the ground.">Ground Track</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_track">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Rate of turn of the ground track.">Track Rate</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_trackrate">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The aircraft's nose heading relative to magnetic north.">Magnetic Heading</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_mag_heading">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The aircraft's roll angle.">Roll</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_roll">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The aircraft's nose heading relative to true north.">True Heading</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_true_heading">n/a</span>
</div>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
Navigation
</div>
</div>
<div class="infoBlockSection">
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The selected altitude in the aircraft's flight management system.">Selected Altitude</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_nav_altitude">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The enabled navigation modes as reported by the aircraft (i.e., auto-pilot, Traffic Collision Avoidance System, altitude hold, approach, LNAV approach, and/or VNAV approach).">Modes</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_nav_modes">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The selected heading in the aircraft's flight management system.">Selected Heading</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_nav_heading">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The altimeter/QNH setting used by the aircraft's navigation systems.">QNH</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_nav_qnh">n/a</span>
</div>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
Tracking Information
</div>
</div>
<div class="infoBlockSection">
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Data source for the reported aircraft data (e.g., ADS-B, MLAT, Other Mode S)">Source</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_source">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The total number of messages received from the aircraft by your ADS-B site.">Messages</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_message_count">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="For ADS-B-equipped aircraft, the version of ADS-B to which the aircraft conforms, as reported by the aircraft.">ADS-B Version</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_version">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Indicated signal strength of the signal received by your ADS-B site from the aircraft.">RSSI</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_rssi">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Aircraft category code as reported by the aircraft. This indicates the type of aircraft and, for airplanes, a relative indicator of its size.">Category</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_category">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="The last time your ADS-B site received a message from the aircraft.">Last Seen</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_seen">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="A 4-digit octal code assigned to the aircraft by Air Traffic Control.">Squawk</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_squawk"></span>
</div>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
Accuracy
</div>
</div>
<div class="infoBlockSection">
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Navigation accuracy category of the position (95% bound on positions).">NAC<sub>P</sub></sub></span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_nac_p">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Surveillance integrity level (probability of positions lying outside the claimed radius of containment).">SIL</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_sil">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Navigation accuracy category of the velocity (95% bound on velocities).">NAC<sub>V</sub></span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_nac_v">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Whether the reported pressure altitude has been crosschecked against another source of pressure altitude.">NIC<sub>BARO</sub></span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_nic_baro">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
<span title="Radius of containment. The reported position of the aircraft is expected to be within this distance of the true position, with a failure rate defined by SIL.">R<sub>C</sub></span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_rc">n/a</span>
</div>
</div>
</div>
<div class="bottom-info-container">
<img src="images/icon-information@2x.png" width="18" height="18"><div class="bottom-info-text"> Learn more about Mode S data type by hovering over each data label.</div>
</div>
<div class="bottom-container">
<div class="selected_airframe">
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
airframes.org
</a>
</div>
</div>
</div>
</div> <!-- selected_infoblock -->
</div> <!-- sidebar_container --> </div> <!-- sidebar_container -->
</div> <!-- layout_container --> </div> <!-- layout_container -->

View file

@ -5,8 +5,8 @@ function PlaneObject(icao) {
this.icao = icao; this.icao = icao;
this.icaorange = findICAORange(icao); this.icaorange = findICAORange(icao);
this.flight = null; this.flight = null;
this.squawk = null; this.squawk = null;
this.selected = false; this.selected = false;
this.category = null; this.category = null;
// Basic location information // Basic location information
@ -29,6 +29,13 @@ function PlaneObject(icao) {
this.nav_heading = null; this.nav_heading = null;
this.nav_modes = null; this.nav_modes = null;
this.nav_qnh = null; this.nav_qnh = null;
this.rc = null;
this.nac_p = null;
this.nac_v = null;
this.nic_baro = null;
this.sil_type = null;
this.sil = null;
this.baro_rate = null; this.baro_rate = null;
this.geom_rate = null; this.geom_rate = null;
@ -438,8 +445,9 @@ PlaneObject.prototype.updateData = function(receiver_timestamp, data) {
var fields = ["alt_baro", "alt_geom", "gs", "ias", "tas", "track", var fields = ["alt_baro", "alt_geom", "gs", "ias", "tas", "track",
"track_rate", "mag_heading", "true_heading", "mach", "track_rate", "mag_heading", "true_heading", "mach",
"roll", "nav_altitude", "nav_heading", "nav_modes", "roll", "nav_altitude", "nav_heading", "nav_modes",
"nav_qnh", "baro_rate", "geom_rate", "nac_p", "nac_v", "nic_baro", "sil_type", "sil",
"nav_qnh", "baro_rate", "geom_rate", "rc",
"squawk", "category", "version"]; "squawk", "category", "version"];
for (var i = 0; i < fields.length; ++i) { for (var i = 0; i < fields.length; ++i) {

View file

@ -203,10 +203,58 @@ function initialize() {
} }
// Set up map/sidebar splitter // Set up map/sidebar splitter
$("#sidebar_container").resizable({handles: {w: '#splitter'}}); $("#sidebar_container").resizable({
handles: {
w: '#splitter'
},
minWidth: 350
});
// Set up aircraft information panel // Set up datablock splitter
$("#selected_infoblock").draggable({containment: "parent"}); $('#selected_infoblock').resizable({
handles: {
s: '#splitter-infoblock'
},
containment: "#sidebar_container",
minHeight: 50
});
$('#close-button').on('click', function() {
if (SelectedPlane !== null) {
var selectedPlane = Planes[SelectedPlane];
SelectedPlane = null;
selectedPlane.selected = null;
selectedPlane.clearLines();
selectedPlane.updateMarker();
refreshSelected();
refreshHighlighted();
$('#selected_infoblock').hide();
}
});
// this is a little hacky, but the best, most consitent way of doing this. change the margin bottom of the table container to the height of the overlay
$('#selected_infoblock').on('resize', function() {
$('#sidebar_canvas').css('margin-bottom', $('#selected_infoblock').height() + 'px');
});
// look at the window resize to resize the pop-up infoblock so it doesn't float off the bottom or go off the top
$(window).on('resize', function() {
var topCalc = ($(window).height() - $('#selected_infoblock').height() - 60);
// check if the top will be less than zero, which will be overlapping/off the screen, and set the top correctly.
if (topCalc < 0) {
topCalc = 0;
$('#selected_infoblock').css('height', ($(window).height() - 60) +'px');
}
$('#selected_infoblock').css('top', topCalc + 'px');
});
// to make the infoblock responsive
$('#sidebar_container').on('resize', function() {
if ($('#sidebar_container').width() < 500) {
$('#selected_infoblock').addClass('infoblock-container-small');
} else {
$('#selected_infoblock').removeClass('infoblock-container-small');
}
});
// Set up event handlers for buttons // Set up event handlers for buttons
$("#toggle_sidebar_button").click(toggleSidebarVisibility); $("#toggle_sidebar_button").click(toggleSidebarVisibility);
@ -331,21 +379,22 @@ function initialize() {
} }
var CurrentHistoryFetch = null; var CurrentHistoryFetch = null;
var PositionHistoryBuffer = [] var PositionHistoryBuffer = [];
var HistoryItemsReturned = 0; var HistoryItemsReturned = 0;
function start_load_history() { function start_load_history() {
if (PositionHistorySize > 0 && window.location.hash != '#nohistory') { if (PositionHistorySize > 0 && window.location.hash != '#nohistory') {
$("#loader_progress").attr('max',PositionHistorySize); $("#loader_progress").attr('max',PositionHistorySize);
console.log("Starting to load history (" + PositionHistorySize + " items)"); console.log("Starting to load history (" + PositionHistorySize + " items)");
//Load history items in parallel //Load history items in parallel
for (var i = 0; i < PositionHistorySize; i++) { for (var i = 0; i < PositionHistorySize; i++) {
load_history_item(i); load_history_item(i);
} }
} }
} }
function load_history_item(i) { function load_history_item(i) {
console.log("Loading history #" + i); console.log("Loading history #" + i);
$("#loader_progress").attr('value',i);
$.ajax({ url: 'data/history_' + i + '.json', $.ajax({ url: 'data/history_' + i + '.json',
timeout: 5000, timeout: 5000,
@ -353,20 +402,20 @@ function load_history_item(i) {
dataType: 'json' }) dataType: 'json' })
.done(function(data) { .done(function(data) {
PositionHistoryBuffer.push(data); PositionHistoryBuffer.push(data);
HistoryItemsReturned++; HistoryItemsReturned++;
$("#loader_progress").attr('value',HistoryItemsReturned); $("#loader_progress").attr('value',HistoryItemsReturned);
if (HistoryItemsReturned == PositionHistorySize) { if (HistoryItemsReturned == PositionHistorySize) {
end_load_history(); end_load_history();
} }
}) })
.fail(function(jqxhr, status, error) { .fail(function(jqxhr, status, error) {
//Doesn't matter if it failed, we'll just be missing a data point //Doesn't matter if it failed, we'll just be missing a data point
HistoryItemsReturned++; HistoryItemsReturned++;
if (HistoryItemsReturned == PositionHistorySize) { if (HistoryItemsReturned == PositionHistorySize) {
end_load_history(); end_load_history();
} }
}); });
} }
@ -587,9 +636,9 @@ function initialize_map() {
if (FollowSelected) { if (FollowSelected) {
// On manual navigation, disable follow // On manual navigation, disable follow
var selected = Planes[SelectedPlane]; var selected = Planes[SelectedPlane];
if (typeof selected === 'undefined' || if (typeof selected === 'undefined' ||
(Math.abs(center[0] - selected.position[0]) > 0.0001 && (Math.abs(center[0] - selected.position[0]) > 0.0001 &&
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(); refreshHighlighted();
@ -856,18 +905,18 @@ function refreshSelected() {
} else { } else {
$('#selected_callsign').text('n/a'); $('#selected_callsign').text('n/a');
} }
$('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "FlightAware.com")); $('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "Visit Flight Page"));
if (selected.registration !== null) { if (selected.registration !== null) {
$('#selected_registration').text(selected.registration); $('#selected_registration').text(selected.registration);
} else { } else {
$('#selected_registration').text(""); $('#selected_registration').text("n/a");
} }
if (selected.icaotype !== null) { if (selected.icaotype !== null) {
$('#selected_icaotype').text(selected.icaotype); $('#selected_icaotype').text(selected.icaotype);
} else { } else {
$('#selected_icaotype').text(""); $('#selected_icaotype').text("n/a");
} }
// Not using this logic for the redesigned info panel at the time, but leaving it in if/when adding it back // Not using this logic for the redesigned info panel at the time, but leaving it in if/when adding it back
@ -879,7 +928,9 @@ function refreshSelected() {
// emerg.className = 'hidden'; // 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));
$('#selected_onground').text(format_onground(selected.altitude));
if (selected.squawk === null || selected.squawk === '0000') { if (selected.squawk === null || selected.squawk === '0000') {
$('#selected_squawk').text('n/a'); $('#selected_squawk').text('n/a');
@ -887,11 +938,14 @@ function refreshSelected() {
$('#selected_squawk').text(selected.squawk); $('#selected_squawk').text(selected.squawk);
} }
$('#selected_gs').text(format_speed_long(selected.gs, DisplayUnits)); $('#selected_speed').text(format_speed_long(selected.gs, DisplayUnits));
$('#selected_vertical_rate').text(format_vert_rate_long(selected.vert_rate, DisplayUnits)); $('#selected_ias').text(format_speed_long(selected.ias, DisplayUnits));
$('#selected_tas').text(format_speed_long(selected.tas, DisplayUnits));
$('#selected_vertical_rate').text(format_vert_rate_long(selected.baro_rate, DisplayUnits));
$('#selected_vertical_rate_geo').text(format_vert_rate_long(selected.geom_rate, DisplayUnits));
$('#selected_icao').text(selected.icao.toUpperCase()); $('#selected_icao').text(selected.icao.toUpperCase());
$('#airframes_post_icao').attr('value',selected.icao); $('#airframes_post_icao').attr('value',selected.icao);
$('#selected_track').text(format_track_long(selected.track)); $('#selected_track').text(format_track_long(selected.track));
if (selected.seen <= 1) { if (selected.seen <= 1) {
$('#selected_seen').text('now'); $('#selected_seen').text('now');
@ -917,7 +971,7 @@ function refreshSelected() {
$('#selected_position').text(format_latlng(selected.position)); $('#selected_position').text(format_latlng(selected.position));
} else { } else {
$('#selected_position').text(format_latlng(selected.position)); $('#selected_position').text(format_latlng(selected.position));
} }
$('#selected_follow').removeClass('hidden'); $('#selected_follow').removeClass('hidden');
if (FollowSelected) { if (FollowSelected) {
@ -927,21 +981,22 @@ function refreshSelected() {
$('#selected_follow').css('font-weight', 'normal'); $('#selected_follow').css('font-weight', 'normal');
} }
} }
if (selected.getDataSource() === "adsb_icao") { if (selected.getDataSource() === "adsb_icao") {
$('#selected_source').text("ADS-B"); $('#selected_source').text("ADS-B");
} else if (selected.getDataSource() === "tisb_trackfile" || selected.getDataSource() === "tisb_icao" || selected.getDataSource() === "tisb_other") { } else if (selected.getDataSource() === "tisb_trackfile" || selected.getDataSource() === "tisb_icao" || selected.getDataSource() === "tisb_other") {
$('#selected_source').text("TIS-B"); $('#selected_source').text("TIS-B");
} else if (selected.getDataSource() === "mlat") { } else if (selected.getDataSource() === "mlat") {
$('#selected_source').text("MLAT"); $('#selected_source').text("MLAT");
} else { } else {
$('#selected_source').text("Other"); $('#selected_source').text("Other");
} }
$('#selected_category').text(selected.category ? selected.category : "n/a");
$('#selected_sitedist').text(format_distance_long(selected.sitedist, DisplayUnits)); $('#selected_sitedist').text(format_distance_long(selected.sitedist, DisplayUnits));
$('#selected_rssi').text(selected.rssi.toFixed(1) + ' dBFS'); $('#selected_rssi').text(selected.rssi.toFixed(1) + ' dBFS');
$('#selected_message_count').text(selected.messages); $('#selected_message_count').text(selected.messages);
$('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration)); $('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration));
$('#selected_alt_geom').text(format_altitude_long(selected.alt_geom, selected.geom_rate, DisplayUnits)); $('#selected_altitude_geom').text(format_altitude_long(selected.alt_geom, selected.geom_rate, DisplayUnits));
$('#selected_mag_heading').text(format_track_long(selected.mag_heading)); $('#selected_mag_heading').text(format_track_long(selected.mag_heading));
$('#selected_true_heading').text(format_track_long(selected.true_heading)); $('#selected_true_heading').text(format_track_long(selected.true_heading));
$('#selected_ias').text(format_speed_long(selected.ias, DisplayUnits)); $('#selected_ias').text(format_speed_long(selected.ias, DisplayUnits));
@ -957,9 +1012,9 @@ function refreshSelected() {
$('#selected_roll').text(selected.roll.toFixed(1)); $('#selected_roll').text(selected.roll.toFixed(1));
} }
if (selected.track_rate == null) { if (selected.track_rate == null) {
$('#selected_track_rate').text('n/a'); $('#selected_trackrate').text('n/a');
} else { } else {
$('#selected_track_rate').text(selected.track_rate.toFixed(2)); $('#selected_trackrate').text(selected.track_rate.toFixed(2));
} }
$('#selected_geom_rate').text(format_vert_rate_long(selected.geom_rate, DisplayUnits)); $('#selected_geom_rate').text(format_vert_rate_long(selected.geom_rate, DisplayUnits));
if (selected.nav_qnh == null) { if (selected.nav_qnh == null) {
@ -973,7 +1028,58 @@ function refreshSelected() {
$('#selected_nav_modes').text("n/a"); $('#selected_nav_modes').text("n/a");
} else { } else {
$('#selected_nav_modes').text(selected.nav_modes.join()); $('#selected_nav_modes').text(selected.nav_modes.join());
} }
if (selected.nic_baro == null) {
$('#selected_nic_baro').text("n/a");
} else {
if (selected.nic_baro == 1) {
$('#selected_nic_baro').text("cross-checked");
} else {
$('#selected_nic_baro').text("not cross-checked");
}
}
$('#selected_nac_p').text(format_nac_p(selected.nac_p));
$('#selected_nac_v').text(format_nac_v(selected.nac_v));
if (selected.rc == null) {
$('#selected_rc').text("n/a");
} else if (selected.rc == 0) {
$('#selected_rc').text("unknown");
} else {
$('#selected_rc').text(format_distance_short(selected.rc, DisplayUnits));
}
if (selected.sil == null || selected.sil_type == null) {
$('#selected_sil').text("n/a");
} else {
var sampleRate = "";
var silDesc = "";
if (selected.sil_type == "perhour") {
sampleRate = " per flight hour";
} else if (selected.sil_type == "persample") {
sampleRate = " per sample";
}
switch (selected.sil) {
case 0:
silDesc = "&gt; 1×10<sup>-3</sup>";
break;
case 1:
silDesc = "≤ 1×10<sup>-3</sup>";
break;
case 2:
silDesc = "≤ 1×10<sup>-5</sup>";
break;
case 3:
silDesc = "≤ 1×10<sup>-7</sup>";
break;
default:
silDesc = "n/a";
sampleRate = "";
break;
}
$('#selected_sil').html(silDesc + sampleRate);
}
if (selected.version == null) { if (selected.version == null) {
$('#selected_version').text('none'); $('#selected_version').text('none');
@ -986,7 +1092,8 @@ function refreshSelected() {
} else { } else {
$('#selected_version').text('v' + selected.version); $('#selected_version').text('v' + selected.version);
} }
}
}
function refreshHighlighted() { function refreshHighlighted() {
// this is following nearly identical logic, etc, as the refreshSelected function, but doing less junk for the highlighted pane // this is following nearly identical logic, etc, as the refreshSelected function, but doing less junk for the highlighted pane
@ -1004,6 +1111,48 @@ function refreshHighlighted() {
$('#highlighted_infoblock').show(); $('#highlighted_infoblock').show();
// Get info box position and size
var infoBox = $('#highlighted_infoblock');
var infoBoxPosition = infoBox.position();
if (typeof infoBoxOriginalPosition.top === 'undefined') {
infoBoxOriginalPosition.top = infoBoxPosition.top;
infoBoxOriginalPosition.left = infoBoxPosition.left;
} else {
infoBox.css("left", infoBoxOriginalPosition.left);
infoBox.css("top", infoBoxOriginalPosition.top);
infoBoxPosition = infoBox.position();
}
var infoBoxExtent = getExtent(infoBoxPosition.left, infoBoxPosition.top, infoBox.outerWidth(), infoBox.outerHeight());
// Get map size
var mapCanvas = $('#map_canvas');
var mapExtent = getExtent(0, 0, mapCanvas.width(), mapCanvas.height());
var marker = highlighted.marker;
var markerCoordinates = highlighted.marker.getGeometry().getCoordinates();
var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates);
// Check for overlap
//FIXME TODO: figure out this/remove this check
if (isPointInsideExtent(markerPosition[0], markerPosition[1], infoBoxExtent) || true) {
// Array of possible new positions for info box
var candidatePositions = [];
candidatePositions.push( { x: 40, y: 80 } );
candidatePositions.push( { x: markerPosition[0] + 20, y: markerPosition[1] + 60 } );
// Find new position
for (var i = 0; i < candidatePositions.length; i++) {
var candidatePosition = candidatePositions[i];
var candidateExtent = getExtent(candidatePosition.x, candidatePosition.y, infoBox.outerWidth(), infoBox.outerHeight());
if (!isPointInsideExtent(markerPosition[0], markerPosition[1], candidateExtent) && isPointInsideExtent(candidatePosition.x, candidatePosition.y, mapExtent)) {
// Found a new position that doesn't overlap marker - move box to that position
infoBox.css("left", candidatePosition.x);
infoBox.css("top", candidatePosition.y);
}
}
}
if (highlighted.flight !== null && highlighted.flight !== "") { if (highlighted.flight !== null && highlighted.flight !== "") {
$('#highlighted_callsign').text(highlighted.flight); $('#highlighted_callsign').text(highlighted.flight);
} else { } else {
@ -1013,9 +1162,24 @@ function refreshHighlighted() {
if (highlighted.icaotype !== null) { if (highlighted.icaotype !== null) {
$('#higlighted_icaotype').text(highlighted.icaotype); $('#higlighted_icaotype').text(highlighted.icaotype);
} else { } else {
$('#higlighted_icaotype').text(""); $('#higlighted_icaotype').text("n/a");
} }
if (highlighted.getDataSource() === "adsb_icao") {
$('#highlighted_source').text("ADS-B");
} else if (highlighted.getDataSource() === "tisb_trackfile" || highlighted.getDataSource() === "tisb_icao" || highlighted.getDataSource() === "tisb_other") {
$('#highlighted_source').text("TIS-B");
} else if (highlighted.getDataSource() === "mlat") {
$('#highlighted_source').text("MLAT");
} else {
$('#highlighted_source').text("Other");
}
if (highlighted.registration !== null) {
$('#highlighted_registration').text(highlighted.registration);
} else {
$('#highlighted_registration').text("n/a");
}
$('#highlighted_speed').text(format_speed_long(highlighted.speed, DisplayUnits)); $('#highlighted_speed').text(format_speed_long(highlighted.speed, DisplayUnits));
@ -1213,7 +1377,6 @@ 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();
} }
@ -1223,6 +1386,8 @@ function selectPlaneByHex(hex,autofollow) {
Planes[SelectedPlane].clearLines(); Planes[SelectedPlane].clearLines();
Planes[SelectedPlane].updateMarker(); Planes[SelectedPlane].updateMarker();
$(Planes[SelectedPlane].tr).removeClass("selected"); $(Planes[SelectedPlane].tr).removeClass("selected");
// scroll the infoblock back to the top for the next plane to be selected
$('.infoblock-container').scrollTop(0);
} }
// If we are clicking the same plane, we are deselecting it. // If we are clicking the same plane, we are deselecting it.
@ -1255,10 +1420,6 @@ function selectPlaneByHex(hex,autofollow) {
} }
function highlightPlaneByHex(hex) { function highlightPlaneByHex(hex) {
// if we've selected a plane, don't show the highlighting box
if (SelectedPlane != null) {
return;
}
if (hex != null) { if (hex != null) {
HighlightedPlane = hex; HighlightedPlane = hex;
@ -1424,10 +1585,12 @@ function setSelectedInfoBlockVisibility() {
if (planeSelected && mapIsVisible) { if (planeSelected && mapIsVisible) {
$('#selected_infoblock').show(); $('#selected_infoblock').show();
$('#sidebar_canvas').css('margin-bottom', $('#selected_infoblock').height() + 'px');
} }
else { else {
$('#selected_infoblock').hide(); $('#selected_infoblock').hide();
} $('#sidebar_canvas').css('margin-bottom', 0);
}
} }
// Reposition selected plane info box if it overlaps plane marker // Reposition selected plane info box if it overlaps plane marker
@ -1446,20 +1609,7 @@ function adjustSelectedInfoBlockPosition() {
// Get marker position // Get marker position
var marker = selectedPlane.marker; var marker = selectedPlane.marker;
var markerCoordinates = selectedPlane.marker.getGeometry().getCoordinates(); var markerCoordinates = selectedPlane.marker.getGeometry().getCoordinates();
var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates); var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates);
// Get info box position and size
var infoBox = $('#selected_infoblock');
var infoBoxPosition = infoBox.position();
if (typeof infoBoxOriginalPosition.top === 'undefined') {
infoBoxOriginalPosition.top = infoBoxPosition.top;
infoBoxOriginalPosition.left = infoBoxPosition.left;
} else {
infoBox.css("left", infoBoxOriginalPosition.left);
infoBox.css("top", infoBoxOriginalPosition.top);
infoBoxPosition = infoBox.position();
}
var infoBoxExtent = getExtent(infoBoxPosition.left, infoBoxPosition.top, infoBox.outerWidth(), infoBox.outerHeight());
// Get map size // Get map size
var mapCanvas = $('#map_canvas'); var mapCanvas = $('#map_canvas');
@ -1684,7 +1834,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 Aircraft Photos</a>"; return "<a target=\"_blank\" href=\"https://flightaware.com/photos/aircraft/" + registration.replace(/[^0-9a-z]/ig,'') + "\">See Photos</a>";
} }
return ""; return "";

View file

@ -1,6 +1,7 @@
html, body { html, body {
-ms-overflow-style: -ms-autohiding-scrollbar;
margin: 0; padding: 0; background-color: #ffffff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 0; background-color: #ffffff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10pt; overflow: auto; height: 100%; font-size: 10pt; overflow: hidden; height: 100%;
} }
#layout_container { #layout_container {
@ -9,15 +10,27 @@ html, body {
} }
#selected_infoblock { #selected_infoblock {
position: absolute; position: absolute;
left: 40px; bottom: 0;
top: 60px; margin: 0;
min-width: 394px;
padding: 10px;
background: #ffffff; background: #ffffff;
box-shadow: 4px 4px 10px #444444; width: 100%;
cursor: pointer; height: 400px;
z-index: 9999; }
.infoblock-container {
overflow: scroll;
height: 100%;
}
#sidebar_canvas {
padding: 10px;
overflow: scroll;
}
#sidebar_container {
display: flex;
flex-direction: column;
width: 500px;
left: 0 !important;
height: 100%;
} }
#map_container { #map_container {
@ -85,15 +98,9 @@ html, body {
background-size: cover; background-size: cover;
} }
#sidebar_container {
display: flex;
width: 500px;
left: 0 !important;
}
#splitter { #splitter {
cursor: col-resize; cursor: ew-resize;
display: block; display: block;
position: absolute; position: absolute;
top: 125px; top: 125px;
@ -106,10 +113,44 @@ html, body {
background-position: 0px; background-position: 0px;
background-color: transparent; background-color: transparent;
border: none; border: none;
background-image: url("images/column-adjust.png"); background-image: url("images/toggle-width@2x.png");
background-size: cover; background-size: cover;
} }
#splitter-infoblock {
cursor: ns-resize;
display: inline-block;
position: absolute ;
top: 0px;
right: 0;
margin-left: auto;
width: 24px;
height: 4px;
background-size: 24px 25px;
background-repeat: no-repeat;
background-position: 0px;
border: none;
width: 100%;
border-bottom: #234c75;
background-color: #65819e;
border-bottom-width: 1px;
border-bottom-style: solid;
}
#close-button {
display: inline-block;
position: absolute;
top: 18px;
color: #00A0E2;
right: 30px;
margin-left: auto;
font-size: 75%;
text-decoration: underline;
cursor: pointer;
background: #fff;
padding: 3px;
border-radius: 2px;
}
.ol-zoom-in { .ol-zoom-in {
background-image: url("images/zoom-in.png"); background-image: url("images/zoom-in.png");
background-size: cover; background-size: cover;
@ -134,11 +175,7 @@ html, body {
left: 10px !important; left: 10px !important;
} }
#sidebar_canvas {
flex: 1 1 auto;
padding: 10px;
overflow: scroll;
}
div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red; div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;
background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px; background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;
@ -257,22 +294,35 @@ select.error, textarea.error, input.error {
padding-right: 20px; padding-right: 20px;
} }
.infoHeading .infoHeading {
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 12px;
line-height: 18px; font-weight: bold;
line-height: 16px;
color: #002F5D; color: #002F5D;
color: rgb(0, 47, 93);
} }
.infoData .infoHeading sub {
{ font-weight: normal;
}
.infoData {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 12px;
line-height: 18px; line-height: 16px;
color: #000000; color: #000000;
color: rgb(0, 0, 0); }
.sectionTitle {
width: 100%;
text-transform: uppercase;
color: #fff;
background: #002F5D;
font-size: 14px;
}
.section-title-content {
padding: 5px 20px;
} }
.legend .legend
@ -301,8 +351,7 @@ select.error, textarea.error, input.error {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
text-indent: 16px text-indent: 16px;
color: #000000;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }
@ -316,24 +365,6 @@ select.error, textarea.error, input.error {
text-decoration: underline; text-decoration: underline;
} }
.infoHeading
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
color: #666666;
color: rgb(102, 102, 102);
}
.infoData
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
color: #000000;
color: rgb(0, 0, 0);
}
#header { #header {
width: 100%; width: 100%;
height: 60px; height: 60px;
@ -407,6 +438,10 @@ select.error, textarea.error, input.error {
text-align: center; text-align: center;
} }
.lightblue-link, .lightblue-link a {
color: #00A0E2;
}
.buttonHeader { .buttonHeader {
margin-top: 15px; margin-top: 15px;
} }
@ -440,7 +475,7 @@ select.error, textarea.error, input.error {
height: 36px; height: 36px;
border-bottom: 1px solid #00A0E2; border-bottom: 1px solid #00A0E2;
padding-left: 18px; padding-left: 18px;
padding-top: 14px; padding-top: 18px;
} }
.highlightedInfo { .highlightedInfo {
@ -471,12 +506,10 @@ select.error, textarea.error, input.error {
.infoRowTitle { .infoRowTitle {
display: inline-block; display: inline-block;
width: 50%;
} }
.infoRowContent { .infoRowContent {
display: inline-block; display: inline-block;
width: 40%;
} }
.infoRowFluid { .infoRowFluid {
@ -487,6 +520,13 @@ select.error, textarea.error, input.error {
padding-top: 10px; padding-top: 10px;
} }
.infoRowLine {
width: 49%;
display: inline-block;
padding-top: 2px;
padding-bottom: 2px;
}
.removePadding { .removePadding {
padding: 0; padding: 0;
} }
@ -518,22 +558,6 @@ select.error, textarea.error, input.error {
background-color: #efefef; background-color: #efefef;
} }
.fourColumnSection1 {
width: 20%;
}
.fourColumnSection2 {
width: 20%;
}
.fourColumnSection3 {
width: 20%;
}
.fourColumnSection4 {
width: 20%;
}
#dump1090_infoblock { #dump1090_infoblock {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
@ -569,7 +593,6 @@ select.error, textarea.error, input.error {
} }
.legendTitle { .legendTitle {
/*margin-left: auto;*/
line-height: 19px; line-height: 19px;
display: inline-block; display: inline-block;
padding-right: 20px; padding-right: 20px;
@ -655,6 +678,45 @@ select.error, textarea.error, input.error {
outline: none; outline: none;
} }
.bottom-container {
width: 100%;
margin-top: 8px;
padding: 40px 0px;
text-align: center;
background-color: #eee;
}
#selected_flightaware_link a {
background-color: #00a0e2;
color: white;
text-decoration: none;
padding: 10px;
border-radius: 4px;
float: right;
margin-right: 25px;
margin-top: 10px;
}
.bottom-info-container {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
color: #002F5D;
line-height: 18px;
}
.bottom-info-container img {
vertical-align: middle;
}
.bottom-info-container .bottom-info-text {
vertical-align: middle;
display: inline;
}
.selected_airframe a {
color: #002F5D;
}
.infoblock-container-small .infoRowFluid {
display: block;
}
/* Retina 2x images */ /* Retina 2x images */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.settingsCloseBox { .settingsCloseBox {
@ -672,9 +734,6 @@ select.error, textarea.error, input.error {
.ol-zoom-in { .ol-zoom-in {
background-image: url("images/zoom-in@2x.png"); background-image: url("images/zoom-in@2x.png");
} }
#splitter {
background-image: url("images/column-adjust@2x.png");
}
#toggle_sidebar_button.show_sidebar { #toggle_sidebar_button.show_sidebar {
background-image: url("images/table-icon@2x.png"); background-image: url("images/table-icon@2x.png");
} }
@ -703,9 +762,6 @@ select.error, textarea.error, input.error {
.ol-zoom-in { .ol-zoom-in {
background-image: url("images/zoom-in@3x.png"); background-image: url("images/zoom-in@3x.png");
} }
#splitter {
background-image: url("images/column-adjust@3x.png");
}
#toggle_sidebar_button.show_sidebar { #toggle_sidebar_button.show_sidebar {
background-image: url("images/table-icon@3x.png"); background-image: url("images/table-icon@3x.png");
} }