From 924bcaa0440c9390181d3b172794091591828449 Mon Sep 17 00:00:00 2001 From: James Wilson Date: Fri, 20 Jan 2017 11:52:38 -0600 Subject: [PATCH] Update more styling of the page. Add legend to table highlighting Fix some indentation issues --- public_html/index.html | 22 +++++-- public_html/script.js | 127 ++++++++++++++++++++++------------------- public_html/style.css | 67 +++++++++++++++++++--- 3 files changed, 143 insertions(+), 73 deletions(-) diff --git a/public_html/index.html b/public_html/index.html index 295e0f2..f282931 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -224,19 +224,19 @@ - Aircraft (total): n/a - Messages: n/a/sec + Total Aircraft: n/a + Messages: n/a/sec - (with positions): n/a - History: n/a positions + With Positions: n/a + History: n/a positions
- + to @@ -306,6 +306,16 @@ +
+
+
ADS-B
+
+
MLAT
+
+
Other
+
+
TIS-B
+
diff --git a/public_html/script.js b/public_html/script.js index afc123e..d85e4a0 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -900,75 +900,82 @@ function removeHighlight() { // Refreshes the larger table of all the planes function refreshTableInfo() { - var show_squawk_warning = false; + var show_squawk_warning = false; - TrackedAircraft = 0 - TrackedAircraftPositions = 0 - TrackedHistorySize = 0 + TrackedAircraft = 0 + TrackedAircraftPositions = 0 + TrackedHistorySize = 0 - $(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits)); - $(".speedUnit").text(get_unit_label("speed", DisplayUnits)); - $(".distanceUnit").text(get_unit_label("distance", DisplayUnits)); - $(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits)); + $(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits)); + $(".speedUnit").text(get_unit_label("speed", DisplayUnits)); + $(".distanceUnit").text(get_unit_label("distance", DisplayUnits)); + $(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits)); - for (var i = 0; i < PlanesOrdered.length; ++i) { - var tableplane = PlanesOrdered[i]; - TrackedHistorySize += tableplane.history_size; - if (tableplane.seen >= 58 || tableplane.isFiltered()) { - tableplane.tr.className = "plane_table_row hidden"; - } else { - TrackedAircraft++; - var classes = "plane_table_row"; + for (var i = 0; i < PlanesOrdered.length; ++i) { + var tableplane = PlanesOrdered[i]; + TrackedHistorySize += tableplane.history_size; + if (tableplane.seen >= 58 || tableplane.isFiltered()) { + tableplane.tr.className = "plane_table_row hidden"; + } else { + TrackedAircraft++; + var classes = "plane_table_row"; - if (tableplane.position !== null && tableplane.seen_pos < 60) { - ++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 (tableplane.position !== null && tableplane.seen_pos < 60) { + ++TrackedAircraftPositions; } - } - if (show_squawk_warning) { - $("#SpecialSquawkWarning").css('display','block'); + if (tableplane.getDataSource() === "adsb") { + classes += " vPosition"; + } else if (tableplane.getDataSource() === "tisb") { + classes += " tisb"; + } else if (tableplane.getDataSource() === "mlat") { + classes += " mlat"; } 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(); } // diff --git a/public_html/style.css b/public_html/style.css index 494e5ef..cf9e658 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -1,5 +1,5 @@ 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%; } @@ -235,7 +235,7 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right: } .aircraft_table_header { - background-color: #409EDF; + background-color: #002F5D; color: #FFFFFF; cursor: pointer; } @@ -254,18 +254,22 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right: text-transform: uppercase; } -.vPosition { background-color: #C3FFDF; } -.mlat { background-color: #C7EAFC; } +.vPosition { background-color: #E5F6FC; } +.mlat { background-color: #FDF2E5; } +.other { background-color: #E6E6E6; } +.tisb { background-color: #CCD5DF; } .squawk7500 { font-weight: bold; background-color: #ff5555; } .squawk7600 { font-weight: bold; background-color: #00ffff; } .squawk7700 { font-weight: bold; background-color: #ffff00; } .selected { background-color: #dddddd; } -.plane_table_row { cursor: pointer; } +.plane_table_row { + cursor: pointer; + font-family: Helvetica Neue; +} .hidden { display: none; } .infoblock_heading { font-size: larger; } .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 */ } @@ -342,10 +346,13 @@ select.error, textarea.error, input.error { .legend { font-family: Helvetica Neue; + width: 100%; font-size: 12px; - line-height: 18px; color: #000000; color: rgb(0, 0, 0); + display: inline-flex; + justify-content: flex-end; + padding-top: 10px; } .settingsHeading @@ -580,4 +587,50 @@ select.error, textarea.error, input.error { .fourColumnSection4 { 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; } \ No newline at end of file