diff --git a/public_html/index.html b/public_html/index.html index ad769c8..c386a7a 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -121,6 +121,28 @@ + +
+
+ n/a + n/a +
+
+
+
Aircraft Type:
+
n/a
+
+
+
Altitude:
+
n/a
+
+
+
Speed:
+
n/a
+
+
+
+
diff --git a/public_html/script.js b/public_html/script.js index 7dc436b..41bc30e 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -13,6 +13,7 @@ var PlanesOrdered = []; var PlaneFilter = {}; var SelectedPlane = null; var SelectedAllPlanes = false; +var HighlightedPlane = null; var FollowSelected = false; var SpecialSquawks = { @@ -157,6 +158,7 @@ function fetchData() { selectNewPlanes(); refreshTableInfo(); refreshSelected(); + refreshHighlighted(); if (ReceiverClock) { var rcv = new Date(now * 1000); @@ -378,6 +380,7 @@ function end_load_history() { refreshTableInfo(); refreshSelected(); + refreshHighlighted(); reaper(); // Setup our timer to poll from the server. @@ -549,6 +552,7 @@ function initialize_map() { Math.abs(center[1] - selected.position[1]) > 0.0001) { FollowSelected = false; refreshSelected(); + refreshHighlighted(); } } }); @@ -580,6 +584,28 @@ function initialize_map() { } }); + + // show the hover box + OLMap.on('pointermove', function(evt) { + var hex = evt.map.forEachFeatureAtPixel(evt.pixel, + function(feature, layer) { + return feature.hex; + }, + null, + function(layer) { + return (layer === iconsLayer); + }, + null + ); + + if (hex) { + highlightPlaneByHex(hex); + } else { + removeHighlight(); + } + + }) + // Add home marker if requested if (SitePosition) { var markerStyle = new ol.style.Style({ @@ -712,6 +738,7 @@ function reaper() { PlanesOrdered = newPlanes; refreshTableInfo(); refreshSelected(); + refreshHighlighted(); } // Page Title update function @@ -850,6 +877,48 @@ function refreshSelected() { $('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration)); } +function refreshHighlighted() { + // this is following nearly identical logic, etc, as the refreshSelected function, but doing less junk for the highlighted pane + var highlighted = false; + + if (typeof HighlightedPlane !== 'undefined' && HighlightedPlane !== null) { + highlighted = Planes[HighlightedPlane]; + } + + // no highlighted plane + if (!highlighted) { + $('#highlighted_infoblock').hide(); + return; + } + + $('#highlighted_infoblock').show(); + + if (highlighted.flight !== null && highlighted.flight !== "") { + $('#highlighted_callsign').text(highlighted.flight); + } else { + $('#highlighted_callsign').text('n/a'); + } + + if (highlighted.icaotype !== null) { + $('#higlighted_icaotype').text(highlighted.icaotype); + } else { + $('#higlighted_icaotype').text(""); + } + + + $('#highlighted_speed').text(format_speed_long(highlighted.speed, DisplayUnits)); + + $("#highlighted_altitude").text(format_altitude_long(highlighted.altitude, highlighted.vert_rate, DisplayUnits)); + + $('#highlighted_icao').text(highlighted.icao.toUpperCase()); + +} + +function removeHighlight() { + HighlightedPlane = null; + refreshHighlighted(); +} + // Refreshes the larger table of all the planes function refreshTableInfo() { var show_squawk_warning = false; @@ -1016,7 +1085,7 @@ function sortBy(id,sc,se) { function selectPlaneByHex(hex,autofollow) { //console.log("select: " + hex); // If SelectedPlane has something in it, clear out the selected - + removeHighlight(); if (SelectedAllPlanes) { deselectAllPlanes(); } @@ -1054,10 +1123,23 @@ function selectPlaneByHex(hex,autofollow) { } refreshSelected(); + refreshHighlighted(); +} + +function highlightPlaneByHex(hex) { + // if we've selected a plane, don't show the highlighting box + if (SelectedPlane != null) { + return; + } + + if (hex != null) { + HighlightedPlane = hex; + } } // loop through the planes and mark them as selected to show the paths for all planes function selectAllPlanes() { + HighlightedPlane = null; // if all planes are already selected, deselect them all if (SelectedAllPlanes) { deselectAllPlanes(); @@ -1083,6 +1165,7 @@ function selectAllPlanes() { } refreshSelected(); + refreshHighlighted(); } // on refreshes, try to find new planes and mark them as selected @@ -1115,6 +1198,7 @@ function deselectAllPlanes() { SelectedPlane = null; SelectedAllPlanes = false; refreshSelected(); + refreshHighlighted(); } function toggleFollowSelected() { @@ -1122,6 +1206,7 @@ function toggleFollowSelected() { if (FollowSelected && OLMap.getView().getZoom() < 8) OLMap.getView().setZoom(8); refreshSelected(); + refreshHighlighted(); } function resetMap() { @@ -1305,6 +1390,7 @@ function onDisplayUnitsChanged(e) { // Refresh data refreshTableInfo(); refreshSelected(); + refreshHighlighted(); // Redraw range rings if (SitePosition !== null && SitePosition !== undefined && SiteCircles) { @@ -1331,6 +1417,7 @@ function onFilterByAltitude(e) { selectedPlane.clearLines(); selectedPlane.updateMarker(); refreshSelected(); + refreshHighlighted(); } } diff --git a/public_html/style.css b/public_html/style.css index 2f7c1a4..1586c3a 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -269,24 +269,6 @@ select.error, textarea.error, input.error { color: rgb(0, 0, 0); } -.identLarge -{ - font-family: Helvetica Neue; - font-size: 19px; - line-height: 20px; - color: #002F5D; - color: rgb(0, 47, 93); -} - -.identSmall -{ - font-family: Helvetica Neue; - font-size: 12px; - line-height: 20px; - color: #00A0E2; - color: rgb(0, 160, 226); -} - .link { font-family: Helvetica Neue; @@ -390,4 +372,62 @@ select.error, textarea.error, input.error { margin-top: 18px; margin-left: auto; cursor: pointer; +} + +#highlighted_infoblock { + position: absolute; + left: 40px; + top: 60px; + min-width: 168px; + background: #ffffff; + box-shadow: 4px 4px 10px #444444; + cursor: pointer; + z-index: 9999; +} + +.highlightedTitle { + height: 36px; + border-bottom: 1px solid #00A0E2; + padding-left: 18px; + padding-top: 14px; +} + +.highlightedInfo { + padding-left: 10px; +} + +.identLarge { + font-family: Helvetica Neue; + font-size: 19px; + line-height: 20px; + color: #002F5D; + color: rgb(0, 47, 93); + +} + +.identSmall { + font-family: Helvetica Neue; + font-size: 12px; + font-weight: bold; + line-height: 20px; + color: #00A0E2; + color: rgb(0, 160, 226); +} + +.highlightedInfo { + padding-bottom: 12px; +} + +.infoRowTitle { + display: inline-block; + width: 50%; +} + +.infoRowContent { + display: inline-block; + width: 40%; +} + +.infoRow { + padding-top: 10px; } \ No newline at end of file