SkyView extended mode-s changes

* Add extended Mode-S info to infoblock
* Move the infoblock to the sidebar
* Resizable infoblock
* Add hover tooltips for infoblock labels
This commit is contained in:
James Wilson 2018-07-30 17:51:18 -05:00
parent 20a16d50bd
commit 3e4012e958
6 changed files with 723 additions and 407 deletions

View file

@ -2,13 +2,13 @@
<html>
<head>
<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" />
<script src="jquery/jquery-3.0.0.min.js"></script>
<script src="jquery/jquery-ui-1.11.4.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>
<link rel="stylesheet" href="ol/ol3-layerswitcher.css" type="text/css"/>
@ -22,7 +22,7 @@
<script type="text/javascript" src="formatter.js"></script>
<script type="text/javascript" src="flags.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>
</head>
@ -63,182 +63,7 @@
<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 class="highlightedTitle">
@ -263,6 +88,14 @@
<div id="settings_infoblock">
<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="settingsOptionContainer">
<div class="infoBlockTitleText">Overlay Toggles</div>
@ -326,114 +159,476 @@
<div id="sidebar_container">
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
<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">
<td><span class="infoBlockTitleText">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td>
<td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td>
</tr>
<tr class="infoblock_body">
<td><span class="infoBlockTitleText">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td>
<td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td>
</tr>
</table>
</div> <!-- dump1090_infoblock -->
<div id="units_container">
<label for="units_selector"><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 id="sidebar-table">
<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">
<td><span class="infoBlockTitleText">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td>
<td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td>
</tr>
<tr class="infoblock_body">
<td><span class="infoBlockTitleText">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td>
<td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td>
</tr>
</table>
</div> <!-- dump1090_infoblock -->
<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>
<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> <!-- sidebar_canvas -->
<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 id="selected_infoblock" class="hidden">
<div id="splitter-infoblock" class="ui-resizable-handle ui-resizable-n"></div>
<div class="infoblock-container">
</div> <!-- sidebar_canvas -->
<div class="highlightedTitle">
<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="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 class="infoHeading infoRowFluid fourColumnSection1">
Aircraft Type:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_icaotype"></span>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
Squawks
</div>
</div>
<div class="infoBlockSection">
<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">
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 of 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.">Nav 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).">Nav 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.">Nav 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.">Nav 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">
Category:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_category">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
Last Seen:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_seen">n/a</span>
</div>
</div>
</div>
<div class="sectionTitle">
<div class="section-title-content">
<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.">Accuracy</span>
</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_p</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_source">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
Sil_type:
</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="Navigation accuracy category of the velocity (95% bound on velocities).">Nac_v</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_track">n/a</span>
</div>
</div>
<div class="infoRowLine">
<div class="infoHeading infoRowFluid fourColumnSection1">
Nic_baro:
</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="Surveillance integrity level (probability of positions lying outside the claimed radius of containment).">Sil</span>:
</div>
<div class="infoData infoRowFluid fourColumnSection2">
<span id="selected_track">n/a</span>
</div>
</div>
<!-- </div> -->
</div>
<div class="bottom-info-container">
<img src="/images/icon-information@2x.png" width="18" height="18"> Learn more about Mode S data type by hovering over each data label.
</div>
<div class="bottom-container">
<span id="selected_flightaware_link" class=""></span>
</div>
</div>
</div> <!-- selected_infoblock -->
</div> <!-- sidebar_container -->
</div> <!-- layout_container -->