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 class="infoblock_body">
<td>Aircraft (total): <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">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td>
<td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td>
</tr>
<tr class="infoblock_body">
<td>(with positions): <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">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td>
<td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td>
</tr>
</table>
</div> <!-- dump1090_infoblock -->
<div id="units_container">
<label for="units_selector">Units:</label>
<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>
@ -245,7 +245,7 @@
</div>
<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">
<label for="minAltitude" class="altitudeUnit"></label>
<span> to </span>
@ -306,6 +306,16 @@
</tr>
</tbody>
</table>
<div class="legend">
<div class="legendBox vPosition"></div>
<div class="legendTitle">ADS-B</div>
<div class="legendBox mlat"></div>
<div class="legendTitle">MLAT</div>
<div class="legendBox other"></div>
<div class="legendTitle">Other</div>
<div class="legendBox tisb"></div>
<div class="legendTitle">TIS-B</div>
</div>
</div> <!-- planes_table -->
</div> <!-- sidebar_canvas -->

15
public_html/script.js
View file

@ -922,11 +922,18 @@ function refreshTableInfo() {
if (tableplane.position !== null && tableplane.seen_pos < 60) {
++TrackedAircraftPositions;
if (tableplane.position_from_mlat)
classes += " mlat";
else
classes += " vPosition";
}
if (tableplane.getDataSource() === "adsb") {
classes += " vPosition";
} else if (tableplane.getDataSource() === "tisb") {
classes += " tisb";
} else if (tableplane.getDataSource() === "mlat") {
classes += " mlat";
} else {
classes += " other";
}
if (tableplane.icao == SelectedPlane)
classes += " selected";

67
public_html/style.css
View file

@ -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
@ -581,3 +588,49 @@ 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;
}