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

Fix some indentation issues

public_html/index.html

@@ -224,19 +224,19 @@
 							</tr>
 
 							<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 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>
 						</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 -->

public_html/script.js

@@ -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";
                     

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; }
+.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; }
 .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;
+}