AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

SkyView extended mode-s changes

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public_html/images/icon-information@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public_html/images/toggle-height@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 780 B

BIN
public_html/images/toggle-width@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 778 B

567
public_html/index.html
View file

@ -2,7 +2,7 @@
<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>
@ -22,7 +22,7 @@
<script type="text/javascript" src="formatter.js"></script> <script type="text/javascript" src="formatter.js"></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,183 +63,8 @@
<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>
@ -263,6 +88,14 @@
<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,6 +160,8 @@
<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="sidebar-table">
<div id="dump1090_infoblock"> <div id="dump1090_infoblock">
<table style="width: 100%"> <table style="width: 100%">
<tr class="infoblock_heading"> <tr class="infoblock_heading">
@ -350,15 +185,6 @@
</table> </table>
</div> <!-- dump1090_infoblock --> </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>
<form id="altitude_filter_form"> <form id="altitude_filter_form">
<label><span class="infoBlockTitleText">Filter by Altitude:</span></label> <label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5"> <input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
@ -432,8 +258,377 @@
<div class="legendTitle">TIS-B</div> <div class="legendTitle">TIS-B</div>
</div> </div>
</div> <!-- planes_table --> </div> <!-- planes_table -->
</div>
</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 class="infoblock-container">
<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> <!-- sidebar_container -->
</div> <!-- layout_container --> </div> <!-- layout_container -->

125
public_html/script.js
View file

@ -203,10 +203,46 @@ 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
});
// 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 // Set up event handlers for buttons
$("#toggle_sidebar_button").click(toggleSidebarVisibility); $("#toggle_sidebar_button").click(toggleSidebarVisibility);
@ -331,7 +367,7 @@ 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') {
@ -345,7 +381,12 @@ function start_load_history() {
} }
function load_history_item(i) { function load_history_item(i) {
if (i >= PositionHistorySize) {
end_load_history();
}
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,
@ -856,7 +897,7 @@ function refreshSelected() {
} else { } else {
$('#selected_callsign').text('n/a'); $('#selected_callsign').text('n/a');
} }
$('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "FlightAware.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);
@ -887,8 +928,11 @@ 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));
@ -936,12 +980,13 @@ function refreshSelected() {
} 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 +1002,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) {
@ -986,6 +1031,7 @@ function refreshSelected() {
} else { } else {
$('#selected_version').text('v' + selected.version); $('#selected_version').text('v' + selected.version);
} }
} }
function refreshHighlighted() { function refreshHighlighted() {
@ -1004,6 +1050,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 {
@ -1223,6 +1311,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.
@ -1424,9 +1514,11 @@ 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);
} }
} }
@ -1448,19 +1540,6 @@ function adjustSelectedInfoBlockPosition() {
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');
var mapExtent = getExtent(0, 0, mapCanvas.width(), mapCanvas.height()); var mapExtent = getExtent(0, 0, mapCanvas.width(), mapCanvas.height());

162
public_html/style.css
View file

@ -1,4 +1,5 @@
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: auto; height: 100%;
} }
@ -10,14 +11,27 @@ html, body {
#selected_infoblock { #selected_infoblock {
position: absolute; position: absolute;
left: 40px; bottom: 0;
top: 60px; margin: 0;
min-width: 394px; border-top: 1px solid #ccc;
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 +99,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,7 +114,26 @@ 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;
}
#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; background-size: cover;
} }
@ -134,11 +161,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 +280,33 @@ 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 .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;
/* padding: 5px 20px; */
/* margin-left: -10px; */
}
.section-title-content {
padding: 5px 20px;
} }
.legend .legend
@ -301,8 +335,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 +349,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;
@ -471,12 +486,12 @@ select.error, textarea.error, input.error {
.infoRowTitle { .infoRowTitle {
display: inline-block; display: inline-block;
width: 50%; /* width: 50%; */
} }
.infoRowContent { .infoRowContent {
display: inline-block; display: inline-block;
width: 40%; /* width: 40%; */
} }
.infoRowFluid { .infoRowFluid {
@ -487,6 +502,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;
} }
@ -517,7 +539,7 @@ select.error, textarea.error, input.error {
.lightGreyBackground { .lightGreyBackground {
background-color: #efefef; background-color: #efefef;
} }
/*
.fourColumnSection1 { .fourColumnSection1 {
width: 20%; width: 20%;
} }
@ -532,7 +554,7 @@ select.error, textarea.error, input.error {
.fourColumnSection4 { .fourColumnSection4 {
width: 20%; width: 20%;
} } */
#dump1090_infoblock { #dump1090_infoblock {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -655,6 +677,32 @@ 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;
}
.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 */ /* 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 +720,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 +748,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");
} }