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
parent
20a16d50bd
commit
3e4012e958
BIN
public_html/images/icon-information@2x.png
Normal file
BIN
public_html/images/icon-information@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public_html/images/toggle-height@2x.png
Normal file
BIN
public_html/images/toggle-height@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 B |
BIN
public_html/images/toggle-width@2x.png
Normal file
BIN
public_html/images/toggle-width@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 778 B |
|
|
@ -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 -->
|
||||
|
||||
|
|
|
|||
|
|
@ -203,11 +203,47 @@ function initialize() {
|
|||
}
|
||||
|
||||
// Set up map/sidebar splitter
|
||||
$("#sidebar_container").resizable({handles: {w: '#splitter'}});
|
||||
$("#sidebar_container").resizable({
|
||||
handles: {
|
||||
w: '#splitter'
|
||||
},
|
||||
minWidth: 350
|
||||
});
|
||||
|
||||
// Set up aircraft information panel
|
||||
$("#selected_infoblock").draggable({containment: "parent"});
|
||||
// Set up datablock splitter
|
||||
$('#selected_infoblock').resizable({
|
||||
handles: {
|
||||
s: '#splitter-infoblock'
|
||||
},
|
||||
containment: "#sidebar_container",
|
||||
minHeight: 50
|
||||
});
|
||||
|
||||
// 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() {
|
||||
console.log('sidebar resize', $('#sidebar_canvas').width());
|
||||
if ($('#sidebar_container').width() < 500) {
|
||||
$('#selected_infoblock').addClass('infoblock-container-small');
|
||||
} else {
|
||||
$('#selected_infoblock').removeClass('infoblock-container-small');
|
||||
}
|
||||
});
|
||||
|
||||
// Set up event handlers for buttons
|
||||
$("#toggle_sidebar_button").click(toggleSidebarVisibility);
|
||||
$("#expand_sidebar_button").click(expandSidebar);
|
||||
|
|
@ -331,21 +367,26 @@ function initialize() {
|
|||
}
|
||||
|
||||
var CurrentHistoryFetch = null;
|
||||
var PositionHistoryBuffer = []
|
||||
var PositionHistoryBuffer = [];
|
||||
var HistoryItemsReturned = 0;
|
||||
function start_load_history() {
|
||||
if (PositionHistorySize > 0 && window.location.hash != '#nohistory') {
|
||||
$("#loader_progress").attr('max',PositionHistorySize);
|
||||
console.log("Starting to load history (" + PositionHistorySize + " items)");
|
||||
//Load history items in parallel
|
||||
for (var i = 0; i < PositionHistorySize; i++) {
|
||||
load_history_item(i);
|
||||
}
|
||||
}
|
||||
if (PositionHistorySize > 0 && window.location.hash != '#nohistory') {
|
||||
$("#loader_progress").attr('max',PositionHistorySize);
|
||||
console.log("Starting to load history (" + PositionHistorySize + " items)");
|
||||
//Load history items in parallel
|
||||
for (var i = 0; i < PositionHistorySize; i++) {
|
||||
load_history_item(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function load_history_item(i) {
|
||||
if (i >= PositionHistorySize) {
|
||||
end_load_history();
|
||||
}
|
||||
|
||||
console.log("Loading history #" + i);
|
||||
$("#loader_progress").attr('value',i);
|
||||
|
||||
$.ajax({ url: 'data/history_' + i + '.json',
|
||||
timeout: 5000,
|
||||
|
|
@ -353,20 +394,20 @@ function load_history_item(i) {
|
|||
dataType: 'json' })
|
||||
|
||||
.done(function(data) {
|
||||
PositionHistoryBuffer.push(data);
|
||||
HistoryItemsReturned++;
|
||||
$("#loader_progress").attr('value',HistoryItemsReturned);
|
||||
if (HistoryItemsReturned == PositionHistorySize) {
|
||||
end_load_history();
|
||||
}
|
||||
PositionHistoryBuffer.push(data);
|
||||
HistoryItemsReturned++;
|
||||
$("#loader_progress").attr('value',HistoryItemsReturned);
|
||||
if (HistoryItemsReturned == PositionHistorySize) {
|
||||
end_load_history();
|
||||
}
|
||||
})
|
||||
|
||||
.fail(function(jqxhr, status, error) {
|
||||
//Doesn't matter if it failed, we'll just be missing a data point
|
||||
HistoryItemsReturned++;
|
||||
if (HistoryItemsReturned == PositionHistorySize) {
|
||||
end_load_history();
|
||||
}
|
||||
//Doesn't matter if it failed, we'll just be missing a data point
|
||||
HistoryItemsReturned++;
|
||||
if (HistoryItemsReturned == PositionHistorySize) {
|
||||
end_load_history();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -587,9 +628,9 @@ function initialize_map() {
|
|||
if (FollowSelected) {
|
||||
// On manual navigation, disable follow
|
||||
var selected = Planes[SelectedPlane];
|
||||
if (typeof selected === 'undefined' ||
|
||||
(Math.abs(center[0] - selected.position[0]) > 0.0001 &&
|
||||
Math.abs(center[1] - selected.position[1]) > 0.0001)) {
|
||||
if (typeof selected === 'undefined' ||
|
||||
(Math.abs(center[0] - selected.position[0]) > 0.0001 &&
|
||||
Math.abs(center[1] - selected.position[1]) > 0.0001)){
|
||||
FollowSelected = false;
|
||||
refreshSelected();
|
||||
refreshHighlighted();
|
||||
|
|
@ -856,7 +897,7 @@ function refreshSelected() {
|
|||
} else {
|
||||
$('#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) {
|
||||
$('#selected_registration').text(selected.registration);
|
||||
|
|
@ -879,7 +920,7 @@ function refreshSelected() {
|
|||
// 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));
|
||||
|
||||
if (selected.squawk === null || selected.squawk === '0000') {
|
||||
$('#selected_squawk').text('n/a');
|
||||
|
|
@ -887,11 +928,14 @@ function refreshSelected() {
|
|||
$('#selected_squawk').text(selected.squawk);
|
||||
}
|
||||
|
||||
$('#selected_gs').text(format_speed_long(selected.gs, DisplayUnits));
|
||||
$('#selected_vertical_rate').text(format_vert_rate_long(selected.vert_rate, DisplayUnits));
|
||||
$('#selected_speed').text(format_speed_long(selected.gs, 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());
|
||||
$('#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) {
|
||||
$('#selected_seen').text('now');
|
||||
|
|
@ -917,8 +961,8 @@ function refreshSelected() {
|
|||
$('#selected_position').text(format_latlng(selected.position));
|
||||
} else {
|
||||
$('#selected_position').text(format_latlng(selected.position));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('#selected_follow').removeClass('hidden');
|
||||
if (FollowSelected) {
|
||||
$('#selected_follow').css('font-weight', 'bold');
|
||||
|
|
@ -927,21 +971,22 @@ function refreshSelected() {
|
|||
$('#selected_follow').css('font-weight', 'normal');
|
||||
}
|
||||
}
|
||||
if (selected.getDataSource() === "adsb_icao") {
|
||||
$('#selected_source').text("ADS-B");
|
||||
} else if (selected.getDataSource() === "tisb_trackfile" || selected.getDataSource() === "tisb_icao" || selected.getDataSource() === "tisb_other") {
|
||||
$('#selected_source').text("TIS-B");
|
||||
} else if (selected.getDataSource() === "mlat") {
|
||||
$('#selected_source').text("MLAT");
|
||||
} else {
|
||||
$('#selected_source').text("Other");
|
||||
}
|
||||
if (selected.getDataSource() === "adsb_icao") {
|
||||
$('#selected_source').text("ADS-B");
|
||||
} else if (selected.getDataSource() === "tisb_trackfile" || selected.getDataSource() === "tisb_icao" || selected.getDataSource() === "tisb_other") {
|
||||
$('#selected_source').text("TIS-B");
|
||||
} else if (selected.getDataSource() === "mlat") {
|
||||
$('#selected_source').text("MLAT");
|
||||
} else {
|
||||
$('#selected_source').text("Other");
|
||||
}
|
||||
$('#selected_category').text(selected.category ? selected.category : "n/a");
|
||||
$('#selected_sitedist').text(format_distance_long(selected.sitedist, DisplayUnits));
|
||||
$('#selected_rssi').text(selected.rssi.toFixed(1) + ' dBFS');
|
||||
$('#selected_message_count').text(selected.messages);
|
||||
$('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration));
|
||||
|
||||
$('#selected_alt_geom').text(format_altitude_long(selected.alt_geom, selected.geom_rate, DisplayUnits));
|
||||
$('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration));
|
||||
|
||||
$('#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_true_heading').text(format_track_long(selected.true_heading));
|
||||
$('#selected_ias').text(format_speed_long(selected.ias, DisplayUnits));
|
||||
|
|
@ -957,9 +1002,9 @@ function refreshSelected() {
|
|||
$('#selected_roll').text(selected.roll.toFixed(1));
|
||||
}
|
||||
if (selected.track_rate == null) {
|
||||
$('#selected_track_rate').text('n/a');
|
||||
$('#selected_trackrate').text('n/a');
|
||||
} 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));
|
||||
if (selected.nav_qnh == null) {
|
||||
|
|
@ -986,7 +1031,8 @@ function refreshSelected() {
|
|||
} else {
|
||||
$('#selected_version').text('v' + selected.version);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function refreshHighlighted() {
|
||||
// this is following nearly identical logic, etc, as the refreshSelected function, but doing less junk for the highlighted pane
|
||||
|
|
@ -1004,6 +1050,48 @@ function refreshHighlighted() {
|
|||
|
||||
$('#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 !== "") {
|
||||
$('#highlighted_callsign').text(highlighted.flight);
|
||||
} else {
|
||||
|
|
@ -1223,6 +1311,8 @@ function selectPlaneByHex(hex,autofollow) {
|
|||
Planes[SelectedPlane].clearLines();
|
||||
Planes[SelectedPlane].updateMarker();
|
||||
$(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.
|
||||
|
|
@ -1424,9 +1514,11 @@ function setSelectedInfoBlockVisibility() {
|
|||
|
||||
if (planeSelected && mapIsVisible) {
|
||||
$('#selected_infoblock').show();
|
||||
$('#sidebar_canvas').css('margin-bottom', $('#selected_infoblock').height() + 'px');
|
||||
}
|
||||
else {
|
||||
$('#selected_infoblock').hide();
|
||||
$('#sidebar_canvas').css('margin-bottom', 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1446,21 +1538,8 @@ function adjustSelectedInfoBlockPosition() {
|
|||
// Get marker position
|
||||
var marker = selectedPlane.marker;
|
||||
var markerCoordinates = selectedPlane.marker.getGeometry().getCoordinates();
|
||||
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());
|
||||
|
||||
var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates);
|
||||
|
||||
// Get map size
|
||||
var mapCanvas = $('#map_canvas');
|
||||
var mapExtent = getExtent(0, 0, mapCanvas.width(), mapCanvas.height());
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
html, body {
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
margin: 0; padding: 0; background-color: #ffffff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 10pt; overflow: auto; height: 100%;
|
||||
}
|
||||
|
|
@ -9,15 +10,28 @@ html, body {
|
|||
}
|
||||
|
||||
#selected_infoblock {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 60px;
|
||||
min-width: 394px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
background: #ffffff;
|
||||
box-shadow: 4px 4px 10px #444444;
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.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 {
|
||||
|
|
@ -85,15 +99,9 @@ html, body {
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
#sidebar_container {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
#splitter {
|
||||
cursor: col-resize;
|
||||
cursor: ew-resize;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 125px;
|
||||
|
|
@ -106,7 +114,26 @@ html, body {
|
|||
background-position: 0px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
background-image: url("images/column-adjust.png");
|
||||
background-image: url("images/toggle-width@2x.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#splitter-infoblock {
|
||||
cursor: ns-resize;
|
||||
display: inline-block;
|
||||
position: absolute ;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
/* float: right; */
|
||||
margin-left: auto;
|
||||
width: 24px;
|
||||
height: 25px;
|
||||
background-size: 24px 25px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
background-image: url("images/toggle-height@2x.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
|
@ -134,11 +161,7 @@ html, body {
|
|||
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;
|
||||
background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;
|
||||
|
|
@ -257,22 +280,33 @@ select.error, textarea.error, input.error {
|
|||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.infoHeading
|
||||
{
|
||||
.infoHeading {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
color: #002F5D;
|
||||
color: rgb(0, 47, 93);
|
||||
}
|
||||
|
||||
.infoData
|
||||
{
|
||||
.infoData {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #000000;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
background: #002F5D;
|
||||
font-size: 14px;
|
||||
/* padding: 5px 20px; */
|
||||
/* margin-left: -10px; */
|
||||
}
|
||||
|
||||
.section-title-content {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.legend
|
||||
|
|
@ -301,8 +335,7 @@ select.error, textarea.error, input.error {
|
|||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-indent: 16px
|
||||
color: #000000;
|
||||
text-indent: 16px;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
|
|
@ -316,24 +349,6 @@ select.error, textarea.error, input.error {
|
|||
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 {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
|
@ -471,12 +486,12 @@ select.error, textarea.error, input.error {
|
|||
|
||||
.infoRowTitle {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
/* width: 50%; */
|
||||
}
|
||||
|
||||
.infoRowContent {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
/* width: 40%; */
|
||||
}
|
||||
|
||||
.infoRowFluid {
|
||||
|
|
@ -487,6 +502,13 @@ select.error, textarea.error, input.error {
|
|||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.infoRowLine {
|
||||
width: 49%;
|
||||
display: inline-block;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.removePadding {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -517,7 +539,7 @@ select.error, textarea.error, input.error {
|
|||
.lightGreyBackground {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
/*
|
||||
.fourColumnSection1 {
|
||||
width: 20%;
|
||||
}
|
||||
|
|
@ -532,7 +554,7 @@ select.error, textarea.error, input.error {
|
|||
|
||||
.fourColumnSection4 {
|
||||
width: 20%;
|
||||
}
|
||||
} */
|
||||
|
||||
#dump1090_infoblock {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
|
@ -655,6 +677,32 @@ select.error, textarea.error, input.error {
|
|||
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;
|
||||
}
|
||||
.bottom-info-container {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
color: #002F5D;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.infoblock-container-small .infoRowFluid {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Retina 2x images */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.settingsCloseBox {
|
||||
|
|
@ -672,9 +720,6 @@ select.error, textarea.error, input.error {
|
|||
.ol-zoom-in {
|
||||
background-image: url("images/zoom-in@2x.png");
|
||||
}
|
||||
#splitter {
|
||||
background-image: url("images/column-adjust@2x.png");
|
||||
}
|
||||
#toggle_sidebar_button.show_sidebar {
|
||||
background-image: url("images/table-icon@2x.png");
|
||||
}
|
||||
|
|
@ -703,9 +748,6 @@ select.error, textarea.error, input.error {
|
|||
.ol-zoom-in {
|
||||
background-image: url("images/zoom-in@3x.png");
|
||||
}
|
||||
#splitter {
|
||||
background-image: url("images/column-adjust@3x.png");
|
||||
}
|
||||
#toggle_sidebar_button.show_sidebar {
|
||||
background-image: url("images/table-icon@3x.png");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue