UI2.0 Radar Page Complete

This commit is contained in:
2022-01-16 21:05:07 -06:00
parent 76c8e5d042
commit 0de49aaf90
4 changed files with 357 additions and 797 deletions
+9 -2
View File
@@ -26,11 +26,18 @@ body {
#lock_button {
position: absolute;
z-index: 2;
left: 43%;
bottom: 33%;
right: 2%;
top: 44%;
z-index: 1;
line-height: 0%;
margin-bottom: -80px;
background-color: rgba(255,255,255,.3);
}
#selected_position {
position: absolute;
top: 228px;
left: 138px;
}
#atc_title, #atc_location {
+1 -396
View File
@@ -1,396 +1 @@
{
"now": 1642357743860.139,
"messages": 0,
"aircraft": [{
"hex": "a4e27f",
"flight": "N4136R",
"lat": 43.5586,
"lon": -70.4737,
"altitude": 5800,
"track": 229,
"speed": 100,
"squawk": "5321",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "PWM",
"arr": "",
"airline": ""
}, {
"hex": "a899a2",
"flight": "UAL17",
"lat": 45.2403,
"lon": -70.3843,
"altitude": 37975,
"track": 223,
"speed": 407,
"squawk": "2544",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "LHR",
"arr": "EWR",
"airline": "UAL"
}, {
"hex": "a8f3c5",
"flight": "UAL919",
"lat": 43.9932,
"lon": -70.1521,
"altitude": 38050,
"track": 226,
"speed": 389,
"squawk": "2530",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "LHR",
"arr": "IAD",
"airline": "UAL"
}, {
"hex": "a8634c",
"flight": "N64EF",
"lat": 43.7074,
"lon": -70.1468,
"altitude": 4100,
"track": 214,
"speed": 91,
"squawk": "5366",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "aaad2c",
"flight": "N7872G",
"lat": 43.9803,
"lon": -70.119,
"altitude": 2150,
"track": 309,
"speed": 83,
"squawk": "1200",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "800582",
"flight": "AIC102",
"lat": 43.5827,
"lon": -69.9687,
"altitude": 31000,
"track": 41,
"speed": 519,
"squawk": "2752",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "JFK",
"arr": "DEL",
"airline": "AIC"
}, {
"hex": "a2a2e6",
"flight": "UAL107",
"lat": 43.882,
"lon": -69.9547,
"altitude": 39975,
"track": 226,
"speed": 427,
"squawk": "2527",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "MUC",
"arr": "IAD",
"airline": "UAL"
}, {
"hex": "a81dae",
"flight": "N622AC",
"lat": 43.9129,
"lon": -69.938,
"altitude": 0,
"track": 250,
"speed": 78,
"squawk": "1200",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "ad9b0c",
"flight": "N976MK",
"lat": 43.8669,
"lon": -69.9119,
"altitude": 1000,
"track": 6,
"speed": 139,
"squawk": "1200",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "484fff",
"flight": "KLM259",
"lat": 45.4716,
"lon": -69.8061,
"altitude": 40000,
"track": 228,
"speed": 425,
"squawk": "0734",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "AMS",
"arr": "IAD",
"airline": "KLM"
}, {
"hex": "89655e",
"flight": "UAE201",
"lat": 43.8267,
"lon": -69.7753,
"altitude": 38000,
"track": 219,
"speed": 413,
"squawk": "2537",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "DXB",
"arr": "JFK",
"airline": "UAE"
}, {
"hex": "",
"flight": "LJ60",
"lat": 44.3681,
"lon": -69.585,
"altitude": 27850,
"track": 219,
"speed": 379,
"squawk": "1314",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "a8647d",
"flight": "N64SL",
"lat": 44.0566,
"lon": -69.5397,
"altitude": 725,
"track": 177,
"speed": 84,
"squawk": "1200",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "RKD",
"arr": "",
"airline": ""
}, {
"hex": "a84ad5",
"flight": "N633W",
"lat": 44.0511,
"lon": -69.5234,
"altitude": 600,
"track": 177,
"speed": 76,
"squawk": "1200",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "a124b5",
"flight": "DAL9962",
"lat": 44.0461,
"lon": -69.4343,
"altitude": 36000,
"track": 234,
"speed": 386,
"squawk": "0723",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "MAD",
"arr": "JFK",
"airline": "DAL"
}, {
"hex": "ad5501",
"flight": "N9582D",
"lat": 44.3333,
"lon": -69.4169,
"altitude": 4600,
"track": 305,
"speed": 96,
"squawk": "0000",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "ISS",
"arr": "",
"airline": ""
}, {
"hex": "a35563",
"flight": "N31377",
"lat": 44.0435,
"lon": -69.245,
"altitude": 1950,
"track": 239,
"speed": 116,
"squawk": "1200",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "RKD",
"arr": "",
"airline": ""
}, {
"hex": "aa3d97",
"flight": "N759XT",
"lat": 44.0163,
"lon": -69.0772,
"altitude": 750,
"track": 51,
"speed": 125,
"squawk": "1200",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "ab9a92",
"flight": "N847HJ",
"lat": 44.3349,
"lon": -69.0485,
"altitude": 3000,
"track": 128,
"speed": 150,
"squawk": "0267",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "a9bb94",
"flight": "N726TW",
"lat": 45.5377,
"lon": -68.837,
"altitude": 3375,
"track": 45,
"speed": 178,
"squawk": "1200",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "",
"arr": "",
"airline": ""
}, {
"hex": "a86558",
"flight": "N640BD",
"lat": 44.7959,
"lon": -68.8114,
"altitude": 0,
"track": 313,
"speed": 81,
"squawk": "5345",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "BED",
"arr": "BGR",
"airline": ""
}, {
"hex": "4006c1",
"flight": "BAW25C",
"lat": 44.4605,
"lon": -68.7541,
"altitude": 40000,
"track": 219,
"speed": 440,
"squawk": "2545",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "LHR",
"arr": "MCO",
"airline": "BAW"
}, {
"hex": "a16273",
"flight": "DAL169",
"lat": 45.1108,
"lon": -68.3148,
"altitude": 36025,
"track": 219,
"speed": 414,
"squawk": "2536",
"seen": 4,
"seen_pos": 4,
"rssi": 0,
"messages": 1,
"internet": true,
"dep": "BCN",
"arr": "JFK",
"airline": "DAL"
}]
}
{"now":1642388697411.588,"messages":0,"aircraft":[{"hex":"ab649a","flight":"DAL1","lat":43.781,"lon":-64.843,"altitude":35000,"track":68,"speed":597,"squawk":"2762","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"LHR","airline":"DAL"},{"hex":"c02254","flight":"CFMZZ","lat":45.936,"lon":-64.36,"altitude":3600,"track":296,"speed":90,"squawk":"4344","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"YQM","arr":"","airline":"MFC"},{"hex":"c01a51","flight":"CFJZC","lat":46.155,"lon":-64.055,"altitude":2500,"track":89,"speed":120,"squawk":"0000","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"YQM","arr":"","airline":"MFC"},{"hex":"a899a2","flight":"UAL14","lat":44.012,"lon":-64.003,"altitude":35000,"track":69,"speed":593,"squawk":"3311","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"EWR","arr":"LHR","airline":"UAL"},{"hex":"a2a2e6","flight":"UAL106","lat":46.709,"lon":-63.816,"altitude":35000,"track":53,"speed":559,"squawk":"2167","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"IAD","arr":"MUC","airline":"UAL"},{"hex":"c064df","flight":"CGMFE","lat":46.443,"lon":-63.741,"altitude":7600,"track":115,"speed":140,"squawk":"0000","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"YQM","arr":"","airline":"MFC"},{"hex":"76cdc2","flight":"SIA25","lat":44.957,"lon":-63.558,"altitude":35000,"track":61,"speed":576,"squawk":"1632","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"FRA","airline":"SIA"},{"hex":"c022a5","flight":"CFNDC","lat":44.844,"lon":-63.5,"altitude":1500,"track":180,"speed":60,"squawk":"0000","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"YQM","arr":"","airline":"MFC"},{"hex":"abd018","flight":"DAL172","lat":45.913,"lon":-63.396,"altitude":35000,"track":60,"speed":552,"squawk":"2603","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"MXP","airline":"DAL"},{"hex":"a8e4e9","flight":"UAL918","lat":46.192,"lon":-62.721,"altitude":36075,"track":61,"speed":547,"squawk":"3676","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"IAD","arr":"LHR","airline":"UAL"},{"hex":"a7a08a","flight":"UAL70","lat":47.12,"lon":-62.136,"altitude":35000,"track":59,"speed":535,"squawk":"2707","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"EWR","arr":"AMS","airline":"UAL"},{"hex":"4005b9","flight":"BAW176A","lat":45.592,"lon":-61.836,"altitude":37000,"track":63,"speed":550,"squawk":"7132","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"LHR","airline":"BAW"},{"hex":"a8c88f","flight":"UAL134","lat":44.287,"lon":-61.476,"altitude":35000,"track":81,"speed":590,"squawk":"1607","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"EWR","arr":"ZRH","airline":"UAL"},{"hex":"406f72","flight":"BAW66V","lat":43.918,"lon":-60.231,"altitude":41000,"track":78,"speed":551,"squawk":"7116","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"PHL","arr":"LHR","airline":"BAW"},{"hex":"a05629","flight":"UAL57","lat":44.233,"lon":-58.717,"altitude":35000,"track":60,"speed":585,"squawk":"3065","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"EWR","arr":"CDG","airline":"UAL"},{"hex":"4067f8","flight":"TOM023","lat":47.159,"lon":-57.027,"altitude":37000,"track":66,"speed":533,"squawk":"6140","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"CUN","arr":"LGW","airline":"TUI"},{"hex":"151d48","flight":"AZV556","lat":44.144,"lon":-57.01,"altitude":33000,"track":42,"speed":500,"squawk":"0000","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"VRA","arr":"VKO","airline":"AZV"},{"hex":"4075b4","flight":"VIR138M","lat":47.21,"lon":-56.855,"altitude":38000,"track":66,"speed":528,"squawk":"7137","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"LHR","airline":"VIR"},{"hex":"394a14","flight":"AFR007","lat":44.493,"lon":-55.885,"altitude":35000,"track":83,"speed":560,"squawk":"7103","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"CDG","airline":"AFR"}]}
+346 -398
View File
@@ -187,6 +187,11 @@
</div>
</div>
<div id="radar_page">
<div id="sidebar_open_button" onclick="expandSidebar()">
<span id="expand_icon" class="material-icons">
arrow_back_ios
</span>
</div>
<div id="nav_bar">
<!-- Raised button with ripple -->
<button id="home_button" class="mdl-button mdl-js-button mdl-button--icon"
@@ -286,6 +291,8 @@
<!-- dump1090_infoblock -->
<div id="selected_infoblock">
<button id="lock_button" onclick="lockPlane()"
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Lock</button>
<img src="" id="aircraft_tab_background">
<span id="aircraft_info_overlay">
@@ -309,18 +316,119 @@
<table style="width: 100%">
<tr>
<td style="text-align: left">
<b><span id="flight_airport_short_origin" style="font-size: 18px;">N/A</span></b><br>
<b><span id="flight_airport_short_origin"
style="font-size: 18px;">N/A</span></b><br>
<span id="flight_airport_long_origin" style="font-size: 12px;">N/A</span><br>
<span id="flight_airport_loc_origin" style="font-size: 10px;">N/A</span>
</td>
<td style="text-align: right">
<b><span id="flight_airport_short_destination"
style="font-size: 18px;">N/A</span></b><br>
style="font-size: 18px;">N/A</span></b><br>
<span id="flight_airport_long_destination"
style="font-size: 12px;">N/A</span><br>
<span id="flight_airport_loc_destination" style="font-size: 10px;">N/A</span>
</td>
</tr>
</table>
<b><span id="selected_position">n/a</span></b>
<table style="width: 100%">
<tr>
<td style="text-align: left">Altitude: <span id="selected_altitude"></span></td>
<td></td>
<td style="text-align: right">RSSI: <span id="selected_rssi">n/a</span></td>
</tr>
<tr>
<td style="text-align: left">Speed: <span id="selected_speed">n/a</span></td>
<td></td>
<td style="text-align: right">Squawk: <span id="selected_squawk"></span></td>
</tr>
<tr>
<td style="text-align: left">Track: <span id="selected_track">n/a</span></td>
<td></td>
<td style="text-align: right">Last seen: <span id="selected_seen">n/a</span></td>
</tr>
</table>
<!-- Start rest of information-->
<div style="display: none;">
<span id="selected_registration"></span>
<span id="selected_follow" onclick="toggleFollowSelected();"
class="pointer">&#x21D2;</span>
<span id="selected_icaotype"></span>
<span id="selected_emergency"></span>
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post'));
return false;">
<span id="selected_icao"></span>
</a>
</div>
</table>
</div>
<!-- selected_infoblock -->
<table id="tableinfo" style="width: 100%">
<thead id="planes_table">
<tr>
<td id="icao" onclick="sortByICAO();">ICAO</td>
<td id="flag" onclick="sortByCountry()">
<!-- column for flag image -->
</td>
<td id="flight" onclick="sortByFlight();">Flight</td>
<td id="squawk" onclick="sortBySquawk();" style="text-align: center">Squawk</td>
<td id="altitude" onclick="sortByAltitude();" style="text-align: center">
Altitude
</td>
<td id="speed" onclick="sortBySpeed();" style="text-align: center">Speed</td>
<td id="distance" onclick="sortByDistance();" style="text-align: center">
Distance
</td>
<td id="track" onclick="sortByTrack();" style="text-align: center">Track</td>
<td id="msgs" onclick="sortByMsgs();" style="text-align: center">Msgs</td>
<td id="seen" onclick="sortBySeen();" style="text-align: center">Age</td>
</tr>
</thead>
<tbody>
<tr id="plane_row_template" class="plane_table_row hidden">
<td>ICAO</td>
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
<td>FLIGHT</td>
<td style="text-align: center">SQUAWK</td>
<td style="text-align: center">ALTITUDE</td>
<td style="text-align: center">SPEED</td>
<td style="text-align: center">DISTANCE</td>
<td style="text-align: center">TRACK</td>
<td style="text-align: center">MSGS</td>
<td style="text-align: center">SEEN</td>
</tr>
</tbody>
</table>
<!-- planes_table -->
</div>
<div id="radar_flight_tab" style="display: none;">
<div id="radar_flight_info" style="display: none;"><br>
<span id="flight_airline" style="font-size: 28px;">Example Airline</span><span
id="flight_flightnum" style="font-size: 28px;">Number</span><span
style="font-size: 28px;">&nbsp;(<span id="flight_flighticaonum"></span>)</span>
<br><br>
<i><span id="flight_status" style="font-size: 20px;">En Route</span></i><br><br>
<table style="width: 100%">
<tr>
<td style="text-align: left">
<span id="flight_airport_short_origin" style="font-size: 30px;">N/A</span><br>
<span id="flight_airport_long_origin" style="font-size: 16px;">N/A</span><br>
<span id="flight_airport_loc_origin" style="font-size: 14px;">N/A</span>
</td>
<td style="text-align: right">
<span id="flight_airport_short_destination"
style="font-size: 30px;">N/A</span><br>
<span id="flight_airport_long_destination"
style="font-size: 16px;">N/A</span><br>
<span id="flight_airport_loc_destination" style="font-size: 14px;">N/A</span>
</td>
</tr>
</table><br>
<div id="flight_progress_div">
<div id="flight_progress" class="mdl-progress mdl-js-progress"></div><br>
@@ -347,426 +455,266 @@
</td>
</tr>
</table>
<div style="display: none">
<table style="width: 100%">
<tr class="infoblock_heading">
<td colspan="2">
<span id="selected_registration"></span>
<span id="selected_follow" onclick="toggleFollowSelected();"
class="pointer">&#x21D2;</span>
<span id="selected_flag">
<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
</span>
<a href="http://www.airframes.org/"
onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
<span id="selected_icao"></span>
</a>
<span id="selected_icaotype"></span>
<span id="selected_emergency"></span>
</td>
</tr>
<tr id="infoblock_country" class="infoblock_body">
<td colspan="2">Country of registration: <span
id="selected_country">n/a</span>
</td>
</tr>
<tr class="infoblock_body">
<td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
<td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
</tr>
<tr class="infoblock_body">
<td>Speed: <span id="selected_speed">n/a</span></td>
<td>RSSI: <span id="selected_rssi">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td>Track: <span id="selected_track">n/a</span></td>
<td>Last seen: <span id="selected_seen">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td colspan="2">Position: <span id="selected_position">n/a</span></td>
</tr>
<tr class="infoblock_body">
<td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span>
</td>
</tr>
</table>
</div>
<button id="lock_button" onclick="lockPlane()"
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Lock</button>
</div>
<!-- selected_infoblock -->
<table id="tableinfo" style="width: 100%">
<thead id="planes_table">
<tr>
<td id="icao" onclick="sortByICAO();">ICAO</td>
<td id="flag" onclick="sortByCountry()">
<!-- column for flag image -->
</td>
<td id="flight" onclick="sortByFlight();">Flight</td>
<td id="squawk" onclick="sortBySquawk();" style="text-align: center">Squawk</td>
<td id="altitude" onclick="sortByAltitude();" style="text-align: center">
Altitude
</td>
<td id="speed" onclick="sortBySpeed();" style="text-align: center">Speed</td>
<td id="distance" onclick="sortByDistance();" style="text-align: center">
Distance
</td>
<td id="track" onclick="sortByTrack();" style="text-align: center">Track</td>
<td id="msgs" onclick="sortByMsgs();" style="text-align: center">Msgs</td>
<td id="seen" onclick="sortBySeen();" style="text-align: center">Age</td>
</tr>
</thead>
<tbody>
<tr id="plane_row_template" class="plane_table_row hidden">
<td>ICAO</td>
<td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
<td>FLIGHT</td>
<td style="text-align: center">SQUAWK</td>
<td style="text-align: center">ALTITUDE</td>
<td style="text-align: center">SPEED</td>
<td style="text-align: center">DISTANCE</td>
<td style="text-align: center">TRACK</td>
<td style="text-align: center">MSGS</td>
<td style="text-align: center">SEEN</td>
</tr>
</tbody>
</table>
<!-- planes_table -->
<button class="mdl-button mdl-js-button mdl-button--raised" id="img_button">
More Flight Information
</button>
</div>
<div id="radar_flight_tab" style="display: none;">
<div id="radar_flight_info" style="display: none;"><br>
<span id="flight_airline" style="font-size: 28px;">Example Airline</span><span
id="flight_flightnum" style="font-size: 28px;">Number</span><span
style="font-size: 28px;">&nbsp;(<span id="flight_flighticaonum"></span>)</span>
<br><br>
<i><span id="flight_status" style="font-size: 20px;">En Route</span></i><br><br>
<table style="width: 100%">
<tr>
<td style="text-align: left">
<span id="flight_airport_short_origin"
style="font-size: 30px;">N/A</span><br>
<span id="flight_airport_long_origin"
style="font-size: 16px;">N/A</span><br>
<span id="flight_airport_loc_origin" style="font-size: 14px;">N/A</span>
</td>
<td style="text-align: right">
<span id="flight_airport_short_destination"
style="font-size: 30px;">N/A</span><br>
<span id="flight_airport_long_destination"
style="font-size: 16px;">N/A</span><br>
<span id="flight_airport_loc_destination"
style="font-size: 14px;">N/A</span>
</td>
</tr>
</table><br>
<div id="flight_progress_div">
<div id="flight_progress" class="mdl-progress mdl-js-progress"></div><br>
<table style="width: 100%">
<tr>
<td style="text-align: left;" id="flight_depart_time"
style="font-size: 10px;width: 50%;">
Depart Time
</td>
<td style="text-align: right;" id="flight_arrival_time"
style="font-size: 10px;width: 50%;">
Arrival Time
</td>
</tr>
<tr>
<td style="text-align: left;" style="font-size: 10px;">
Terminal / Gate:<br><span id="flight_depart_terminal"></span><span
id="flight_depart_gate"></span>
</td>
<div id="radar_flight_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
</div>
<div id="image_modal" class="modal">
<td style="text-align: right;" style="font-size: 10px;">
Terminal / Gate:<br><span id="flight_arrival_terminal"></span><span
id="flight_arrival_gate"></span>
</td>
</tr>
</table>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised" id="img_button">
More Flight Information
</button>
</div>
<div id="radar_flight_loading"
class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
</div>
<div id="image_modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close_modal2">&times;</span>
<span id="modal2_title">Additional Flight Information</span><br>
<img id="progress_image" src="">
<div id="additional_info_hidden">
<div class="progress-circle" id="flight_progress_circle">
<span id="flight_percentage_spinner"></span>
<div class="left-half-clipper">
<div class="first50-bar"></div>
<div class="value-bar"></div>
</div>
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close_modal2">&times;</span>
<span id="modal2_title">Additional Flight Information</span><br>
<img id="progress_image" src="">
<div id="additional_info_hidden">
<div class="progress-circle" id="flight_progress_circle">
<span id="flight_percentage_spinner"></span>
<div class="left-half-clipper">
<div class="first50-bar"></div>
<div class="value-bar"></div>
</div>
<span id="flight_progress_title">Total Flight Progress</span>
<span id="flight_progress_remaining_title">Hours Remaining</span>
<span id="flight_progress_remaining_amount"></span>
<span id="flight_progress_elapsed_title">Time Elapsed</span>
<span id="flight_progress_elapsed_amount"></span>
<span id="flight_progress_time_title">Total Flight Time</span>
<span id="flight_progress_time_amount"></span>
</div>
<span id="flight_progress_title">Total Flight Progress</span>
<span id="flight_progress_remaining_title">Hours Remaining</span>
<span id="flight_progress_remaining_amount"></span>
<span id="flight_progress_elapsed_title">Time Elapsed</span>
<span id="flight_progress_elapsed_amount"></span>
<span id="flight_progress_time_title">Total Flight Time</span>
<span id="flight_progress_time_amount"></span>
</div>
</div>
</div>
<div id="radar_aircraft_tab" style="display: none;">
<div id="radar_aircraft_info" style="display: none;">
<img src="" id="aircraft_image1"><br><br>
<span id="aircraft_name_css"><span id="aircraft_name"></span> </span><br><br>
<table style="width: 100%">
<tr>
<th style="text-align: center">Engine Type</th>
<th style="text-align: center">Engine Count</th>
<th style="text-align: center">Plane Age</th>
<th style="text-align: center">Plane Status</th>
</tr>
<tr>
<td style="text-align: center" id="aircraft_engine"></td>
<td style="text-align: center" id="aircraft_engine_count"></td>
<td style="text-align: center" id="aircraft_age"></td>
<td style="text-align: center" id="aircraft_status"></td>
</tr>
<tr>
<th style="text-align: center">Rollout Date</th>
<td></td>
<td></td>
<th style="text-align: center">First Flight</th>
</tr>
<tr>
<td style="text-align: center" id="aircraft_first_flight"></td>
<td></td>
<td></td>
<td style="text-align: center" id="aircraft_rollout_date"></td>
</tr>
</div>
<div id="radar_aircraft_tab" style="display: none;">
<div id="radar_aircraft_info" style="display: none;">
<img src="" id="aircraft_image1"><br><br>
<span id="aircraft_name_css"><span id="aircraft_name"></span> </span><br><br>
<table style="width: 100%">
<tr>
<th style="text-align: center">Engine Type</th>
<th style="text-align: center">Engine Count</th>
<th style="text-align: center">Plane Age</th>
<th style="text-align: center">Plane Status</th>
</tr>
<tr>
<td style="text-align: center" id="aircraft_engine"></td>
<td style="text-align: center" id="aircraft_engine_count"></td>
<td style="text-align: center" id="aircraft_age"></td>
<td style="text-align: center" id="aircraft_status"></td>
</tr>
<tr>
<th style="text-align: center">Rollout Date</th>
<td></td>
<td></td>
<th style="text-align: center">First Flight</th>
</tr>
<tr>
<td style="text-align: center" id="aircraft_first_flight"></td>
<td></td>
<td></td>
<td style="text-align: center" id="aircraft_rollout_date"></td>
</tr>
</table>
<button class="mdl-button mdl-js-button mdl-button--raised" id="aircraft_button">
More Information
</button>
</div>
<div id="radar_aircraft_loading"
class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="aircraft_modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close_modal3">&times;</span>
<span id="modal3_title">Additional Aircraft Information</span><br>
<img src="" id="aircraft_image1-1">
<a onmousedown="setBigImage('aircraft_image2')"><img src=""
id="aircraft_image2"></a>
<a onmousedown="setBigImage('aircraft_image3')"><img src=""
id="aircraft_image3"></a>
<a onmousedown="setBigImage('aircraft_image4')"><img src=""
id="aircraft_image4"></a>
<span id="aircraft_name_title">Aircraft Name:</span>
<span id="aircraft_name_addl"></span>
<span id="aircraft_model_title">Aircraft Model:</span>
<span id="aircraft_model"></span>
<span id="aircraft_registration_title">Aircraft Registration:</span>
<span id="aircraft_registration"></span>
</div>
</div>
</table>
<button class="mdl-button mdl-js-button mdl-button--raised" id="aircraft_button">
More Information
</button>
</div>
<div id="radar_aircraft_loading"
class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="aircraft_modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close_modal3">&times;</span>
<span id="modal3_title">Additional Aircraft Information</span><br>
<img src="" id="aircraft_image1-1">
<a onmousedown="setBigImage('aircraft_image2')"><img src="" id="aircraft_image2"></a>
<a onmousedown="setBigImage('aircraft_image3')"><img src="" id="aircraft_image3"></a>
<a onmousedown="setBigImage('aircraft_image4')"><img src="" id="aircraft_image4"></a>
<span id="aircraft_name_title">Aircraft Name:</span>
<span id="aircraft_name_addl"></span>
<span id="aircraft_model_title">Aircraft Model:</span>
<span id="aircraft_model"></span>
<span id="aircraft_registration_title">Aircraft Registration:</span>
<span id="aircraft_registration"></span>
</div>
</div>
</div>
</div>
<div id="metar_container" style="display: none">
<div id="metar_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="metar_data" style="display: none">
<h5>Local METAR Reporting Station:</h5>
<h3 id="station_id"></h3>
<h5 id="station_name"></h5>
<h6 id="full_metar"><br><br><span id="updated_time"></span></h6>
<table style="width: 100%">
<tbody>
<tr>
<td style="text-align: center">
<h4><span id="temperature"></span> &#8457</h4>
Temperature
</td>
<td style="text-align: center">
<h4 id="altimeter"></h4>
Altimeter
</td>
<td style="text-align: center">
<h4 id="visibility"></h4>
Visibility
</td>
</tr>
<tr>
<td style="text-align: center">
<h4 id="wind_speed"></h4>
Wind Speed
</td>
<td style="text-align: center">
<h4 id="wind_direction"></h4>
Wind Direction
</td>
<td style="text-align: center">
<h4 id="wind_gusts"></h4>
Wind Gusts
</td>
</tr>
<tr>
<td style="text-align: center">
<h4><span id="dew_point"></span> &#8457</h4>
Dew Point
</td>
<td style="text-align: center">
<h4 id="rules"></h4>
Flight Rules
</td>
<td style="text-align: center">
<h4 id="size"></h4>
Airport Size
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="atc_container" style="display: none">
<div id="atc_radio">
<h4 id="atc_title">No feed selected</h4>
<span id="atc_location" style="display: none;"></span><br id="atc_spacer"
style="display: none;"><br id="atc_spacer" style="display: none;">
<audio id="player">
<source type="audio/mpeg">
</audio>
<button id="audioControl" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"
onclick="playPause()" style="display: none;">
<i class="material-icons" id="audioControl_icon">pause</i>
</button>
<hr>
</div>
<div id="atc_selector">
</div>
</div>
</div>
<div id="sidebar_open_button" onclick="expandSidebar()">
<span id="expand_icon" class="material-icons">
arrow_back_ios
</span>
</div>
<!-- sidebar_container -->
<div id="SpecialSquawkWarning" class="hidden">
<b>Squawk 7x00 is reported and shown.</b><br> This is most likely an error in receiving or decoding.<br>
Please do not call the local authorities, they already know about it if it is a valid squawk.
</div>
<div id="update_error" class="hidden">
<b>Problem fetching data from dump1090.</b><br>
<span id="update_error_detail"></span><br> The displayed map data will be out of date.
</div>
<div id="container_splitter"></div>
<div id="power_modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
Power Options
<table id="power_table">
<tr>
<td>
<button onclick="sendCMD('shutdown')"
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">power_settings_new</i>
</button>
</td>
<td>
<button onclick="sendCMD('restart')"
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">refresh</i>
</button>
</td>
<td>
<button id="close_modal4"
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>Shutdown</td>
<td>Restart</td>
<td>Exit</td>
</tr>
<div id="metar_container" style="display: none">
<div id="metar_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="metar_data" style="display: none">
<h5>Local METAR Reporting Station:</h5>
<h3 id="station_id"></h3>
<h5 id="station_name"></h5>
<h6 id="full_metar"><br><br><span id="updated_time"></span></h6>
<table style="width: 100%">
<tbody>
<tr>
<td style="text-align: center">
<h4><span id="temperature"></span> &#8457</h4>
Temperature
</td>
<td style="text-align: center">
<h4 id="altimeter"></h4>
Altimeter
</td>
<td style="text-align: center">
<h4 id="visibility"></h4>
Visibility
</td>
</tr>
<tr>
<td style="text-align: center">
<h4 id="wind_speed"></h4>
Wind Speed
</td>
<td style="text-align: center">
<h4 id="wind_direction"></h4>
Wind Direction
</td>
<td style="text-align: center">
<h4 id="wind_gusts"></h4>
Wind Gusts
</td>
</tr>
<tr>
<td style="text-align: center">
<h4><span id="dew_point"></span> &#8457</h4>
Dew Point
</td>
<td style="text-align: center">
<h4 id="rules"></h4>
Flight Rules
</td>
<td style="text-align: center">
<h4 id="size"></h4>
Airport Size
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="graphs_page" style="display: none;height: 100%;">
<div id="nav_bar">
<!-- Raised button with ripple -->
<button id="home_button" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"
style="width: 40px; height: 40px; min-width: initial;" onclick="goHome()">
<i class="material-icons">home</i>
</button>
<select id="graphs_time" name="Times" onchange="changeGraphsTime()">
<option value="2h">2 Hours</option>
<option value="8h">8 Hours</option>
<option value="24h">1 Day</option>
<option value="7d">1 Week</option>
<option value="14d">2 Weeks</option>
<option value="30d">1 Month</option>
<option value="90d">3 Months</option>
<option value="180d">6 Months</option>
<option value="365d">1 Year</option>
<option value="730d">2 Years</option>
<option value="1095d">3 Years</option>
<div id="atc_container" style="display: none">
<div id="atc_radio">
<h4 id="atc_title">No feed selected</h4>
<span id="atc_location" style="display: none;"></span><br id="atc_spacer" style="display: none;"><br
id="atc_spacer" style="display: none;">
<audio id="player">
<source type="audio/mpeg">
</audio>
<button id="audioControl" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"
onclick="playPause()" style="display: none;">
<i class="material-icons" id="audioControl_icon">pause</i>
</button>
<hr>
</div>
</select>
</div>
<div id="graphs_body">
<img src="" id="graphs_holder" class="graphs"><br>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_back_graphs"
onclick="changeGraph(0)" disabled>
<i class="material-icons">arrow_back_ios</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_forward_graphs"
onclick="changeGraph(1)">
<i class="material-icons">arrow_forward_ios</i>
</button>
<div id="atc_selector">
</div>
</div>
</div>
<div id="no-updates-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
<!-- sidebar_container -->
<div id="SpecialSquawkWarning" class="hidden">
<b>Squawk 7x00 is reported and shown.</b><br> This is most likely an error in receiving or decoding.<br>
Please do not call the local authorities, they already know about it if it is a valid squawk.
</div>
<div id="update_error" class="hidden">
<b>Problem fetching data from dump1090.</b><br>
<span id="update_error_detail"></span><br> The displayed map data will be out of date.
</div>
<div id="container_splitter"></div>
<div id="power_modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
Power Options
<table id="power_table">
<tr>
<td>
<button onclick="sendCMD('shutdown')"
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">power_settings_new</i>
</button>
</td>
<td>
<button onclick="sendCMD('restart')"
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">refresh</i>
</button>
</td>
<td>
<button id="close_modal4"
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>Shutdown</td>
<td>Restart</td>
<td>Exit</td>
</tr>
</table>
</div>
</div>
</div>
<div id="graphs_page" style="display: none;height: 100%;">
<div id="nav_bar">
<!-- Raised button with ripple -->
<button id="home_button" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"
style="width: 40px; height: 40px; min-width: initial;" onclick="goHome()">
<i class="material-icons">home</i>
</button>
<select id="graphs_time" name="Times" onchange="changeGraphsTime()">
<option value="2h">2 Hours</option>
<option value="8h">8 Hours</option>
<option value="24h">1 Day</option>
<option value="7d">1 Week</option>
<option value="14d">2 Weeks</option>
<option value="30d">1 Month</option>
<option value="90d">3 Months</option>
<option value="180d">6 Months</option>
<option value="365d">1 Year</option>
<option value="730d">2 Years</option>
<option value="1095d">3 Years</option>
</select>
</div>
<div id="graphs_body">
<img src="" id="graphs_holder" class="graphs"><br>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_back_graphs"
onclick="changeGraph(0)" disabled>
<i class="material-icons">arrow_back_ios</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_forward_graphs"
onclick="changeGraph(1)">
<i class="material-icons">arrow_forward_ios</i>
</button>
</div>
</div>
<div id="no-updates-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</body>
</html>
+1 -1
View File
@@ -823,7 +823,7 @@ function refreshSelected() {
} else {
var mlat_bit = (selected.position_from_mlat ? "MLAT: " : "");
if (selected.seen_pos > 1) {
$('#selected_position').text(mlat_bit + format_latlng(selected.position) + " (" + selected.seen_pos.toFixed(1) + "s)");
$('#selected_position').text("("+mlat_bit + format_latlng(selected.position)+")");
} else {
$('#selected_position').text(mlat_bit + format_latlng(selected.position));
}