ui 2

Author: Huusky

cachebust.list

@@ -1,4 +1,6 @@
 images/sprites.png
+ui2.js
+ui2.css
 dbloader.js
 defaults.js
 early.js

html/early.js

@@ -800,6 +800,8 @@ Toggle.prototype.toggle = function(override, init) {
         }
     }
 
+    TAR && TAR.newUI && TAR.newUI.active && TAR.newUI.syncToggle(this.key, this.state);
+
     if (!init)
         loStore[this.key] = this.state;
 }

html/index.html

@@ -16,6 +16,7 @@
     <link rel="stylesheet" href="libs/ol-8.2.0.css" type="text/css" />
     <link rel="stylesheet" href="libs/ol-layerswitcher-4.1.1.css" type="text/css"/>
     <link rel="stylesheet" href="style.css" type="text/css" />
+    <link rel="stylesheet" href="ui2.css" type="text/css" />
 
     <link rel="icon" type="image/png" href="images/tar1090-favicon.png">
 
@@ -1089,6 +1090,7 @@ <h2>Improve Coverage:<br><a class="largeText" target="_blank" href="https://airp
     <script src="layers.js"></script>
     <script src="geomag2020.js"></script>
     <script src="markers.js"></script>
+    <script src="ui2.js"></script>
 
     <!-- JS_ANCHOR3 -->
     <script>let spriteSrc = 'images/sprites.png';</script>

html/markers.js

@@ -1413,6 +1413,7 @@ function iconTest() {
     jQuery('#splitter').hide();
     jQuery('#tabs').hide();
     jQuery('#filterButton').hide();
+    jQuery('.ui2-chrome').hide();
     jQuery('.ol-control').hide();
     jQuery('.ol-attribution').show();
     jQuery("#loader").addClass("hidden");

html/planeObject.js

@@ -734,10 +734,14 @@ PlaneObject.prototype.getMarkerColor = function(options) {
         l += ColorByAlt.mlat.l;
     }
 
-    if (atcStyle && (this.squawk == '7700' || this.squawk == '7600' || this.squawk == '7500')) {
-        h = 0;
-        s = 100;
-        l = 40;
+    if (atcStyle) {
+        h = 120; s = 90; l = 50;
+        if (this.selected && !SelectedAllPlanes && !onlySelected) {
+            s = 5; l = 95;
+        }
+        if (this.squawk == '7700' || this.squawk == '7600' || this.squawk == '7500') {
+            h = 0; s = 100; l = 45;
+        }
     }
 
     if (h < 0) {
@@ -875,18 +879,31 @@ PlaneObject.prototype.updateIcon = function() {
 
         labelText = "";
         if (atcStyle) {
-            labelText += callsign + '\n';
-            labelText += altString + '\n';
-            labelText += 'x' + this.squawk;
-            if (this.squawk == '7700' || this.squawk == '7600' || this.squawk == '7500') {
-                if (this.squawk == '7700') {
-                    labelText += '\nEMERGENCY';
-                } else if (this.squawk == '7600') {
-                    labelText += '\nNORDO';
-                } else if (this.squawk == '7500') {
-                    labelText += '\nHIJACK';
-                }
-            }
+            let acid = (this.flight && this.flight.trim()) ? this.flight.trim()
+                : (this.registration ? this.registration : this.icao.toUpperCase());
+            let altText;
+            if (alt === 'ground')
+                altText = 'GND';
+            else if (alt == null)
+                altText = '???';
+            else
+                altText = Math.max(0, Math.round(alt / 100)).toString().padStart(3, '0');
+            let trend = NBSP;
+            if (this.vert_rate > 245)
+                trend = UP_TRIANGLE;
+            else if (this.vert_rate < -245)
+                trend = DOWN_TRIANGLE;
+            let spdText = (this.speed == null) ? '??' : Math.round(this.speed / 10).toString().padStart(2, '0');
+            labelText += acid + '\n';
+            labelText += altText + trend + NBSP + spdText;
+            if (this.icaoType)
+                labelText += '\n' + this.icaoType;
+            if (this.squawk == '7700')
+                labelText += '\nEM';
+            else if (this.squawk == '7600')
+                labelText += '\nRF';
+            else if (this.squawk == '7500')
+                labelText += '\nHJ';
         } else if (g.extendedLabels == 3) {
             if (!windLabelsSlim) {
                 labelText += 'Wind' + NBSP;
@@ -968,12 +985,15 @@ PlaneObject.prototype.updateIcon = function() {
     if (this.styleKey != styleKey || !this.marker.getStyle()) {
         this.styleKey = styleKey;
         let style;
+        let fill = labelFill;
+        if (atcStyle && (this.squawk == '7700' || this.squawk == '7600' || this.squawk == '7500'))
+            fill = labelFillEmerg;
         if (labelText) {
             style = {
                 image: this.markerIcon,
                 text: new ol.style.Text({
                     text: labelText,
-                    fill: labelFill,
+                    fill: fill,
                     backgroundFill: bgFill,
                     stroke: labelStrokeNarrow,
                     textAlign: 'left',
@@ -1322,7 +1342,7 @@ PlaneObject.prototype.processTrace = function() {
 
     showTraceExit = false;
 
-    this.checkForDB(this.recentTrace || this.fullTrace);
+    this.checkForDB(this.recentTrace || this.fullTrace, true);
 
     this.dataChanged();
 
@@ -1799,6 +1819,9 @@ function altitudeLines (segment) {
 
     let color = hslToRgb(colorArr);
 
+    if (atcStyle)
+        color = '#0B7A0B';
+
     if (monochromeTracks)
         color = monochromeTracks;
 
@@ -2779,7 +2802,7 @@ PlaneObject.prototype.setTypeData = function() {
         this.typeDescription = `${desc}`;
     if (wtc != null)
         this.wtc = `${wtc}`;
-    if (this.typeLong == null && typeLong != null)
+    if (typeLong != null)
         this.typeLong = `${typeLong}`;
 };
 
@@ -2799,19 +2822,23 @@ PlaneObject.prototype.setTypeFlagsReg = function(data) {
     if (data.r) this.registration = `${data.r}`;
 }
 
-PlaneObject.prototype.checkForDB = function(data) {
+PlaneObject.prototype.checkForDB = function(data, fromTrace) {
     if (!this.dbinfoLoaded && this.icao >= 'ae6620' && this.icao <= 'ae6899') {
         this.icaoType = 'P8 ?';
         this.setTypeData();
     }
     if (data) {
 
-        if (data.desc) this.typeLong = `${data.desc}`;
-        if (data.ownOp) this.ownOp = `${data.ownOp}`;
-        if (data.year) this.year = `${data.year}`;
-
+        // Resolve the ICAO type first so typeLong is populated from the type
+        // database (keyed by the live API type code) before the trace's fields.
         this.setTypeFlagsReg(data);
 
+        // Live API data takes priority over the trace file: trace data may only
+        // fill in db fields that aren't already populated.
+        if (data.desc && !(fromTrace && this.typeLong)) this.typeLong = `${data.desc}`;
+        if (data.ownOp && !(fromTrace && this.ownOp)) this.ownOp = `${data.ownOp}`;
+        if (data.year && !(fromTrace && this.year)) this.year = `${data.year}`;
+
         if (data.r || data.t) {
             this.dbinfoLoaded = true;
         }

html/script.js

@@ -104,6 +104,7 @@ let newWidth = lineWidth;
 let SiteOverride = (SiteLat != null && SiteLon != null);
 let onJumpInput = null;
 let labelFill = null;
+let labelFillEmerg = null;
 let blackFill = null;
 let labelStroke = null;
 let labelStrokeNarrow = null;
@@ -773,6 +774,8 @@ function initialize() {
 
         processQueryToggles();
 
+        TAR.newUI && TAR.newUI.init();
+
         jQuery.when(historyQueued).done(push_history);
 
         if (!nHistoryItems) {
@@ -935,9 +938,10 @@ function earlyInitPage() {
         tempTrailsTimeout = 45;
         SiteCirclesDistances = new Array(5, 10, 20);
         SiteCirclesLineDash = [5, 5];
-        SiteCirclesColors = ['#2b3436', '#2b3436', '#2b3436'];
-        MapType_tar1090 = 'carto_light_all';
-        lineWidth=4;
+        SiteCirclesColors = ['#446666', '#446666', '#446666'];
+        MapType_tar1090 = 'carto_dark_nolabels';
+        lineWidth=2;
+        labelFamily = "'Consolas', 'Menlo', 'Lucida Console', monospace";
         g.enableLabels=true;
     }
 
@@ -2645,6 +2649,7 @@ function ol_map_init() {
     });
 
     OLMap.on(['click', 'dblclick'], function(evt) {
+        if (TAR.newUI && TAR.newUI.measureActive) return;
         let trailHex = null;
         let trailTS = null;
         let planeHex = null;
@@ -2794,6 +2799,7 @@ function showHideButtons() {
         jQuery('#filterButton').hide();
         jQuery('.ol-zoom').hide();
         jQuery('.layer-switcher').hide();
+        jQuery('.ui2-chrome').hide();
     } else {
         jQuery('#header_top').show();
         jQuery('#header_side').show();
@@ -2802,6 +2808,7 @@ function showHideButtons() {
         jQuery('#filterButton').show();
         jQuery('.ol-zoom').show();
         jQuery('.layer-switcher').show();
+        jQuery('.ui2-chrome').show();
     }
 }
 
@@ -3209,6 +3216,12 @@ function initMap() {
                 loStore['noMLAT'] = noMLAT;
                 console.log('noMLAT = ' + noMLAT);
                 break;
+            case "/":
+                if (TAR.newUI && TAR.newUI.active) {
+                    TAR.newUI.focusSearch();
+                    e.preventDefault();
+                }
+                break;
         }
     }, true);
 
@@ -4968,6 +4981,7 @@ function buttonActive(id, state) {
         jQuery(id).addClass('inActiveButton');
         jQuery(id).removeClass('activeButton');
     }
+    TAR.newUI && TAR.newUI.active && TAR.newUI.syncButton(id, state);
 }
 
 function toggleIsolation(state, noRefresh) {
@@ -5095,7 +5109,7 @@ function invertMap(evt){
     }
 
     altitudeChart.render = function () {
-        if (toggles['altitudeChart'].state) {
+        if (toggles['altitudeChart'].state && !atcStyle) {
             runAfterLoad(loadLegend);
         } else {
             jQuery('#altitude_chart').hide();
@@ -6446,6 +6460,11 @@ function updateAddressBar() {
         string += ':' + replay.ts.getUTCMinutes().toString().padStart(2,'0');
     }
 
+    for (const mode of ['atcStyle', 'uk_advisory']) {
+        if (usp.has(mode))
+            string += (string ? '&' : '?') + mode;
+    }
+
     if (SelPlanes.length > 0) {
         string += (string ? '&' : '?');
         string += 'icao=' + SelPlanes.map((s) => encodeURIComponent(s.icao)).join(',')
@@ -6926,11 +6945,12 @@ function setLineWidth() {
         }),
     });
 
-    labelFill = new ol.style.Fill({color: 'white' });
+    labelFill = new ol.style.Fill({color: atcStyle ? '#00FF00' : 'white' });
+    labelFillEmerg = new ol.style.Fill({color: '#FF3333' });
     blackFill = new ol.style.Fill({color: 'black' });
     labelStroke = new ol.style.Stroke({color: 'rgba(0,0,0,0.7', width: 4 * globalScale});
     labelStrokeNarrow = new ol.style.Stroke({color: 'rgba(0,0,0,0.7', width: 2.5 * globalScale});
-    bgFill = new ol.style.Stroke({color: 'rgba(0,0,0,0.25'});
+    bgFill = new ol.style.Stroke({color: atcStyle ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,0.25'});
 }
 let lastCallLocationChange = 0;
 function onLocationChange(position) {
@@ -8065,10 +8085,11 @@ function initReplay(chunk, data) {
 }
 
 function setReplayTimeHint(date) {
+    jQuery('#replayTimeZone').html('');
     if (true || utcTimesHistoric) {
-        jQuery("#replayDateHintLocal").html(TIMEZONE + " Date: " + lDateString(date));
-        jQuery("#replayDateHint").html("" + zDateString(date));
-        jQuery("#replayTimeHint").html("UTC:" + NBSP + zuluTime(date) + ' / ' + TIMEZONE + ":" + NBSP + localTime(date));
+        jQuery("#replayDateHint").html("UTC: " + zDateString(date) + '<br/>' + TIMEZONE + ": " + lDateString(date));
+        //jQuery("#replayDateHintLocal").html(TIMEZONE + " Date: " + lDateString(date));
+        jQuery("#replayTimeHint").html("UTC:" + NBSP + zuluTime(date) + '<br/>' + TIMEZONE + ":" + NBSP + localTime(date));
     } else {
         jQuery("#replayDateHintLocal").html("");
         jQuery("#replayDateHint").html("Date: " + lDateString(date));