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

Update more styling of the page. Add legend to table highlighting

Browse source 
Fix some indentation issues
This commit is contained in:
James Wilson 2017-01-20 11:52:38 -06:00
parent c2c43b9f6b
commit 924bcaa044
3 changed files with 143 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
public_html/index.html
View file

@ -224,19 +224,19 @@
</tr> </tr>
<tr class="infoblock_body"> <tr class="infoblock_body">
<td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td> <td><span class="infoBlockTitleText">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td>
<td>Messages: <span id="dump1090_message_rate">n/a</span>/sec</td> <td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td>
</tr> </tr>
<tr class="infoblock_body"> <tr class="infoblock_body">
<td>(with positions): <span id="dump1090_total_ac_positions">n/a</span></td> <td><span class="infoBlockTitleText">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td>
<td>History: <span id="dump1090_total_history">n/a</span> positions</td> <td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td>
</tr> </tr>
</table> </table>
</div> <!-- dump1090_infoblock --> </div> <!-- dump1090_infoblock -->
<div id="units_container"> <div id="units_container">
<label for="units_selector">Units:</label> <label for="units_selector"><span class="infoBlockTitleText">Units:</span></label>
<select name="units_selector" id="units_selector"> <select name="units_selector" id="units_selector">
<option value="nautical">Aeronautical</option> <option value="nautical">Aeronautical</option>
<option value="metric">Metric</option> <option value="metric">Metric</option>
@ -245,7 +245,7 @@
</div> </div>
<form id="altitude_filter_form"> <form id="altitude_filter_form">
<label>Filter by altitude:</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">
<label for="minAltitude" class="altitudeUnit"></label> <label for="minAltitude" class="altitudeUnit"></label>
<span> to </span> <span> to </span>
@ -306,6 +306,16 @@
</tr> </tr>
</tbody> </tbody>
</table> </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> <!-- planes_table -->
</div> <!-- sidebar_canvas --> </div> <!-- sidebar_canvas -->

127
public_html/script.js
View file

@ -900,75 +900,82 @@ function removeHighlight() {
// Refreshes the larger table of all the planes // Refreshes the larger table of all the planes
function refreshTableInfo() { function refreshTableInfo() {
var show_squawk_warning = false; var show_squawk_warning = false;
TrackedAircraft = 0 TrackedAircraft = 0
TrackedAircraftPositions = 0 TrackedAircraftPositions = 0
TrackedHistorySize = 0 TrackedHistorySize = 0
$(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits)); $(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits));
$(".speedUnit").text(get_unit_label("speed", DisplayUnits)); $(".speedUnit").text(get_unit_label("speed", DisplayUnits));
$(".distanceUnit").text(get_unit_label("distance", DisplayUnits)); $(".distanceUnit").text(get_unit_label("distance", DisplayUnits));
$(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits)); $(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits));
for (var i = 0; i < PlanesOrdered.length; ++i) { for (var i = 0; i < PlanesOrdered.length; ++i) {
var tableplane = PlanesOrdered[i]; var tableplane = PlanesOrdered[i];
TrackedHistorySize += tableplane.history_size; TrackedHistorySize += tableplane.history_size;
if (tableplane.seen >= 58 || tableplane.isFiltered()) { if (tableplane.seen >= 58 || tableplane.isFiltered()) {
tableplane.tr.className = "plane_table_row hidden"; tableplane.tr.className = "plane_table_row hidden";
} else { } else {
TrackedAircraft++; TrackedAircraft++;
var classes = "plane_table_row"; var classes = "plane_table_row";
if (tableplane.position !== null && tableplane.seen_pos < 60) { if (tableplane.position !== null && tableplane.seen_pos < 60) {
++TrackedAircraftPositions; ++TrackedAircraftPositions;
if (tableplane.position_from_mlat)
classes += " mlat";
else
classes += " vPosition";
}
if (tableplane.icao == SelectedPlane)
classes += " selected";
if (tableplane.squawk in SpecialSquawks) {
classes = classes + " " + SpecialSquawks[tableplane.squawk].cssClass;
show_squawk_warning = true;
}
// ICAO doesn't change
if (tableplane.flight) {
tableplane.tr.cells[2].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight, tableplane.flight);
} else {
tableplane.tr.cells[2].innerHTML = "";
}
tableplane.tr.cells[3].textContent = (tableplane.registration !== null ? tableplane.registration : "");
tableplane.tr.cells[4].textContent = (tableplane.icaotype !== null ? tableplane.icaotype : "");
tableplane.tr.cells[5].textContent = (tableplane.squawk !== null ? tableplane.squawk : "");
tableplane.tr.cells[6].innerHTML = format_altitude_brief(tableplane.altitude, tableplane.vert_rate, DisplayUnits);
tableplane.tr.cells[7].textContent = format_speed_brief(tableplane.speed, DisplayUnits);
tableplane.tr.cells[8].textContent = format_vert_rate_brief(tableplane.vert_rate, DisplayUnits);
tableplane.tr.cells[9].textContent = format_distance_brief(tableplane.sitedist, DisplayUnits);
tableplane.tr.cells[10].textContent = format_track_brief(tableplane.track);
tableplane.tr.cells[11].textContent = tableplane.messages;
tableplane.tr.cells[12].textContent = tableplane.seen.toFixed(0);
tableplane.tr.cells[13].textContent = (tableplane.rssi !== null ? tableplane.rssi : "");
tableplane.tr.cells[14].textContent = (tableplane.position !== null ? tableplane.position[1].toFixed(4) : "");
tableplane.tr.cells[15].textContent = (tableplane.position !== null ? tableplane.position[0].toFixed(4) : "");
tableplane.tr.cells[16].textContent = format_data_source(tableplane.getDataSource());
tableplane.tr.cells[17].innerHTML = getAirframesModeSLink(tableplane.icao);
tableplane.tr.cells[18].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight);
tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration);
tableplane.tr.className = classes;
} }
}
if (show_squawk_warning) { if (tableplane.getDataSource() === "adsb") {
$("#SpecialSquawkWarning").css('display','block'); classes += " vPosition";
} else if (tableplane.getDataSource() === "tisb") {
classes += " tisb";
} else if (tableplane.getDataSource() === "mlat") {
classes += " mlat";
} else { } else {
$("#SpecialSquawkWarning").css('display','none'); classes += " other";
} }
resortTable(); if (tableplane.icao == SelectedPlane)
classes += " selected";
if (tableplane.squawk in SpecialSquawks) {
classes = classes + " " + SpecialSquawks[tableplane.squawk].cssClass;
show_squawk_warning = true;
}
// ICAO doesn't change
if (tableplane.flight) {
tableplane.tr.cells[2].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight, tableplane.flight);
} else {
tableplane.tr.cells[2].innerHTML = "";
}
tableplane.tr.cells[3].textContent = (tableplane.registration !== null ? tableplane.registration : "");
tableplane.tr.cells[4].textContent = (tableplane.icaotype !== null ? tableplane.icaotype : "");
tableplane.tr.cells[5].textContent = (tableplane.squawk !== null ? tableplane.squawk : "");
tableplane.tr.cells[6].innerHTML = format_altitude_brief(tableplane.altitude, tableplane.vert_rate, DisplayUnits);
tableplane.tr.cells[7].textContent = format_speed_brief(tableplane.speed, DisplayUnits);
tableplane.tr.cells[8].textContent = format_vert_rate_brief(tableplane.vert_rate, DisplayUnits);
tableplane.tr.cells[9].textContent = format_distance_brief(tableplane.sitedist, DisplayUnits);
tableplane.tr.cells[10].textContent = format_track_brief(tableplane.track);
tableplane.tr.cells[11].textContent = tableplane.messages;
tableplane.tr.cells[12].textContent = tableplane.seen.toFixed(0);
tableplane.tr.cells[13].textContent = (tableplane.rssi !== null ? tableplane.rssi : "");
tableplane.tr.cells[14].textContent = (tableplane.position !== null ? tableplane.position[1].toFixed(4) : "");
tableplane.tr.cells[15].textContent = (tableplane.position !== null ? tableplane.position[0].toFixed(4) : "");
tableplane.tr.cells[16].textContent = format_data_source(tableplane.getDataSource());
tableplane.tr.cells[17].innerHTML = getAirframesModeSLink(tableplane.icao);
tableplane.tr.cells[18].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight);
tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration);
tableplane.tr.className = classes;
}
}
if (show_squawk_warning) {
$("#SpecialSquawkWarning").css('display','block');
} else {
$("#SpecialSquawkWarning").css('display','none');
}
resortTable();
} }
// //

67
public_html/style.css
View file

@ -1,5 +1,5 @@
html, body { html, body {
margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif; margin: 0; padding: 0; background-color: #ffffff; font-family: Helvetica Neue, Sans-Serif;
font-size: 10pt; overflow: auto; height: 100%; font-size: 10pt; overflow: auto; height: 100%;
} }
@ -235,7 +235,7 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
} }
.aircraft_table_header { .aircraft_table_header {
background-color: #409EDF; background-color: #002F5D;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
} }
@ -254,18 +254,22 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
text-transform: uppercase; text-transform: uppercase;
} }
.vPosition { background-color: #C3FFDF; } .vPosition { background-color: #E5F6FC; }
.mlat { background-color: #C7EAFC; } .mlat { background-color: #FDF2E5; }
.other { background-color: #E6E6E6; }
.tisb { background-color: #CCD5DF; }
.squawk7500 { font-weight: bold; background-color: #ff5555; } .squawk7500 { font-weight: bold; background-color: #ff5555; }
.squawk7600 { font-weight: bold; background-color: #00ffff; } .squawk7600 { font-weight: bold; background-color: #00ffff; }
.squawk7700 { font-weight: bold; background-color: #ffff00; } .squawk7700 { font-weight: bold; background-color: #ffff00; }
.selected { background-color: #dddddd; } .selected { background-color: #dddddd; }
.plane_table_row { cursor: pointer; } .plane_table_row {
cursor: pointer;
font-family: Helvetica Neue;
}
.hidden { display: none; } .hidden { display: none; }
.infoblock_heading { font-size: larger; } .infoblock_heading { font-size: larger; }
.infoblock_heading a { text-decoration: none; color: blue; font-size: x-small;} .infoblock_heading a { text-decoration: none; color: blue; font-size: x-small;}
.infoblock_body { font-size: small; }
.dim { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ } .dim { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ }
@ -342,10 +346,13 @@ select.error, textarea.error, input.error {
.legend .legend
{ {
font-family: Helvetica Neue; font-family: Helvetica Neue;
width: 100%;
font-size: 12px; font-size: 12px;
line-height: 18px;
color: #000000; color: #000000;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
display: inline-flex;
justify-content: flex-end;
padding-top: 10px;
} }
.settingsHeading .settingsHeading
@ -581,3 +588,49 @@ select.error, textarea.error, input.error {
.fourColumnSection4 { .fourColumnSection4 {
width: 20%; width: 20%;
} }
#dump1090_infoblock {
font-family: Helvetica Neue;
}
.infoBlockTitleText {
font-weight: bold;
color: #002F5D;
}
.legendBox {
/*margin-top: 5px;*/
width: 15px;
height: 15px;
/*line-height: 15px*/
border: 1px solid #efefef;
/*display: inline-block;*/
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
/*margin-left: auto;*/
}
#adsbLegendBox {
background-color: #E5F6FC;
}
#mlatLegendBox {
background-color: #FDF2E5;
}
#otherLegendBox {
background-color: #E6E6E6;
}
#tisbLegendBox {
background-color: #CCD5DF;
}
.legendTitle {
/*margin-left: auto;*/
line-height: 19px;
display: inline-block;
padding-right: 20px;
padding-left: 5px;
}