From ac2bde932c94c2a3e3a6e64bcc6c5e4aef96eed8 Mon Sep 17 00:00:00 2001 From: Matthias Wirth Date: Fri, 7 Jan 2022 21:20:14 +0100 Subject: [PATCH] better labeling remove local time ambiguity in labels add option to show geometric altitude in labels handle units in track labels the same as in aircraft labels --- html/config.js | 7 ++++-- html/defaults.js | 7 ++++-- html/early.js | 5 ++-- html/index.html | 4 +-- html/planeObject.js | 61 ++++++++++++++++++++++++++++++++------------- html/script.js | 53 ++++++++++++++++++++++++++++++++------- 6 files changed, 103 insertions(+), 34 deletions(-) diff --git a/html/config.js b/html/config.js index 5167ac1..8545338 100644 --- a/html/config.js +++ b/html/config.js @@ -189,8 +189,11 @@ BingMapsAPIKey = null; // This determines what is up, default is north (0 degrees) //mapOrientation = 0; -// Use UTC for all timestamps etc. -// utcTimes = false; +// Use UTC for live labels +// utcTimesLive = false; + +// Use UTC for historic labels +// utcTimesHistoric = true; // Only display labels when zoomed in this far: //labelZoom = 8; diff --git a/html/defaults.js b/html/defaults.js index 59bd8cb..6185d02 100644 --- a/html/defaults.js +++ b/html/defaults.js @@ -206,8 +206,11 @@ let pf_data = ["chunks/pf.json"] let mapOrientation = 0; // This determines what is up, normally north (0 degrees) -// Use UTC for all timestamps etc. -let utcTimes = false; +// Use UTC for live labels +let utcTimesLive = false; + +// Use UTC for historic labels +let utcTimesHistoric = true; // Only display labels when zoomed in this far: let labelZoom = 0; diff --git a/html/early.js b/html/early.js index 4da41ce..dcf9fb1 100644 --- a/html/early.js +++ b/html/early.js @@ -292,7 +292,7 @@ if (usp.has('pTracks')) { } function getDay(date) { - if (utcTimes) + if ((utcTimesLive && !showTrace) || (utcTimesHistoric && showTrace)) return date.getUTCDate(); else return date.getDate(); @@ -303,11 +303,12 @@ function zuluTime(date) { + ":" + date.getUTCSeconds().toString().padStart(2,'0') + NBSP + "Z"; } +const TIMEZONE = new Date().toLocaleTimeString(undefined,{timeZoneName:'short'}).split(' ')[2]; function localTime(date) { return date.getHours().toString().padStart(2,'0') + ":" + date.getMinutes().toString().padStart(2,'0') + ":" + date.getSeconds().toString().padStart(2,'0') - + NBSP + "L"; + + NBSP + TIMEZONE; } function zDateString(date) { let string = date.getUTCFullYear() + '-' diff --git a/html/index.html b/html/index.html index fdab395..2c0ffec 100644 --- a/html/index.html +++ b/html/index.html @@ -282,7 +282,7 @@ - Geom. Altitude: + Geom. Altitude: @@ -515,7 +515,7 @@
- Geometric: + Geometric:
n/a diff --git a/html/planeObject.js b/html/planeObject.js index ad64f0a..551060b 100644 --- a/html/planeObject.js +++ b/html/planeObject.js @@ -408,6 +408,7 @@ PlaneObject.prototype.updateTrack = function(now, last, serverTrack, stale) { altitude: this.alt_rounded, alt_real: this.altitude, alt_geom: this.alt_geom, + position: this.position, speed: this.speed, ts: now, track: this.rotation, @@ -594,6 +595,7 @@ PlaneObject.prototype.updateTrack = function(now, last, serverTrack, stale) { altitude: this.prev_alt_rounded, alt_real: this.prev_alt, alt_geom: this.prev_alt_geom, + position: this.prev_position, speed: this.prev_speed, ground: on_ground, ts: this.prev_time, @@ -1185,6 +1187,7 @@ PlaneObject.prototype.processTrace = function() { altitude: this.alt_rounded, alt_real: this.altitude, alt_geom: this.alt_geom, + position: this.position, speed: this.speed, ground: (this.altitude == "ground"), ts: this.position_time, @@ -1815,43 +1818,64 @@ PlaneObject.prototype.updateLines = function() { trackLabels || ((i == 0 || i == this.track_linesegs.length-1 ||seg.leg) && showTrace && enableLabels) ) { - const alt_real = (seg.alt_real != null) ? seg.alt_real : 'n/a'; - const speed = (seg.speed != null) ? seg.speed.toFixed(0).toString() : 'n/a'; + // 0 vertical rate to avoid arrow + let altString; + if(seg.alt_real == "ground") { + altString = "Ground"; + } else if (trackLabelsGeom) { + if (seg.alt_geom == null) { + altString = (NBSP+'?'+NBSP); + } else { + altString = format_altitude_brief( + ol.egm96_universal.ellipsoidToEgm96(seg.position[1], seg.position[0], seg.alt_real), + 0, DisplayUnits, showLabelUnits + ); + } + } else { + if (seg.alt_real == null) { + altString = (NBSP+'?'+NBSP); + } else { + altString = format_altitude_brief(seg.alt_real, 0, DisplayUnits, showLabelUnits); + } + } + const speedString = (seg.speed == null) ? (NBSP+'?'+NBSP) : format_speed_brief(seg.speed, DisplayUnits, showLabelUnits).padStart(4, NBSP); + seg.label = new ol.Feature(new ol.geom.Point(seg.fixed.getFirstCoordinate())); - let timestamp; + let timestamp1; + let timestamp2 = ""; const date = new Date(seg.ts * 1000); const refDate = (showTrace || replay) ? traceDate : new Date(); if (getDay(refDate) == getDay(date)) { - timestamp = ""; + timestamp1 = ""; } else { - if (utcTimes) { - timestamp = zDateString(date); + if ((utcTimesLive && !showTrace) || (utcTimesHistoric && showTrace)) { + timestamp1 = zDateString(date); } else { - timestamp = lDateString(date); + timestamp1 = lDateString(date); } - timestamp += '\n'; + timestamp1 += '\n'; } - if (utcTimes) { - timestamp += zuluTime(date); + if ((utcTimesLive && !showTrace) || (utcTimesHistoric && showTrace)) { + timestamp2 += zuluTime(date); } else { - timestamp += localTime(date); + timestamp2 += localTime(date); } if (traces_high_res) { - let zz = timestamp.slice(-2); - timestamp = timestamp.slice(0, -2) + '.' + (Math.floor((seg.ts*10)) % 10) + zz; + timestamp2 = timestamp2.split(NBSP); + timestamp2 = timestamp2[0] + '.' + (Math.floor((seg.ts*10)) % 10) + NBSP + timestamp2[1]; } let text = - speed.padStart(3, NBSP) + " " - + (alt_real == "ground" ? ("Ground") : (alt_real.toString().padStart(6, NBSP))) + speedString.padStart(3, NBSP) + " " + + altString.padStart(6, NBSP) + "\n" //+ NBSP + format_track_arrow(seg.track) - + timestamp; + + timestamp1 + timestamp2; if (seg.rId && show_rId) { text += "\n" + seg.rId.substring(0,9); //+ "\n" + seg.rId.substring(9,18); } if (showTrace && !trackLabels) - text = timestamp; + text = timestamp1 + timestamp2; let fill = labelFill; let zIndex = -i - 50 * (seg.alt_real == null); @@ -2483,6 +2507,7 @@ PlaneObject.prototype.cross180 = function(on_ground, is_leg) { altitude: this.prev_alt_rounded, alt_real: this.prev_alt, alt_geom: this.prev_alt_geom, + position: this.prev_position, speed: this.prev_speed, ground: on_ground, ts: this.prev_time, @@ -2497,6 +2522,7 @@ PlaneObject.prototype.cross180 = function(on_ground, is_leg) { altitude: this.prev_alt_rounded, alt_real: this.prev_alt, alt_geom: this.prev_alt_geom, + position: this.prev_position, speed: this.prev_speed, ground: on_ground, track: this.prev_rot, @@ -2511,6 +2537,7 @@ PlaneObject.prototype.cross180 = function(on_ground, is_leg) { altitude: this.prev_alt_rounded, alt_real: this.prev_alt, alt_geom: this.prev_alt_geom, + position: this.prev_position, speed: this.prev_speed, ground: on_ground, track: this.prev_rot, diff --git a/html/script.js b/html/script.js index 5436969..c635f0f 100644 --- a/html/script.js +++ b/html/script.js @@ -118,6 +118,9 @@ let trace_hist_only = false; let traces_high_res = false; let show_rId = true; +let trackLabelsGeom = false; +// track labels: uses geometric altitude MSL / EGM96 + let infoBlockWidth = baseInfoBlockWidth; const renderBuffer = 45; @@ -942,14 +945,37 @@ function initPage() { } } }); + new Toggle({ + key: "trackLabelsGeom", + display: "Track labels: geom. alt.", + container: "#settingsLeft", + init: trackLabelsGeom, + setState: function(state) { + trackLabelsGeom = state; + remakeTrails(); + refreshSelected(); + } + }); new Toggle({ - key: "utcTimes", - display: "UTC times", + key: "utcTimesLive", + display: "Live track labels: UTC", container: "#settingsLeft", - init: utcTimes, + init: utcTimesLive, setState: function(state) { - utcTimes = state; + utcTimesLive = state; + remakeTrails(); + refreshSelected(); + } + }); + + new Toggle({ + key: "utcTimesHistoric", + display: "Historic track labels: UTC", + container: "#settingsLeft", + init: utcTimesHistoric, + setState: function(state) { + utcTimesHistoric = state; remakeTrails(); refreshSelected(); } @@ -2209,6 +2235,8 @@ function initMap() { for (let key in PlanesOrdered) { PlanesOrdered[key].updateMarker(); } + remakeTrails(); + refreshSelected(); } }); @@ -2640,7 +2668,7 @@ function refreshSelected() { if (showTrace) { if (selected.position_time) { const date = new Date(selected.position_time * 1000); - let timestamp = utcTimes ? zuluTime(date) : localTime(date); + let timestamp = utcTimesHistoric ? zuluTime(date) : localTime(date); jQuery('#trace_time').updateText('Time:\n' + timestamp); } else { jQuery('#trace_time').updateText('Time:\n'); @@ -2900,8 +2928,12 @@ function refreshSelected() { jQuery('#selected_message_rate').updateText((selected.messageRate != null) ? (selected.messageRate.toFixed(1)) : "n/a"); jQuery('#selected_photo_link').html(getPhotoLink(selected)); - jQuery('#selected_altitude_geom1').updateText(format_altitude_long(selected.alt_geom, selected.geom_rate, DisplayUnits)); - jQuery('#selected_altitude_geom2').updateText(format_altitude_long(selected.alt_geom, selected.geom_rate, DisplayUnits)); + let egm96 = selected.alt_geom; + if (selected.position && selected.alt_geom != null) { + egm96 = ol.egm96_universal.ellipsoidToEgm96(selected.position[1], selected.position[0], selected.alt_geom); + } + jQuery('#selected_altitude_geom1').updateText(format_altitude_long(egm96, selected.geom_rate, DisplayUnits)); + jQuery('#selected_altitude_geom2').updateText(format_altitude_long(egm96, selected.geom_rate, DisplayUnits)); jQuery('#selected_ias').updateText(format_speed_long(selected.ias, DisplayUnits)); jQuery('#selected_tas').updateText(format_speed_long(selected.tas, DisplayUnits)); if (selected.mach == null) { @@ -3981,6 +4013,9 @@ function onDisplayUnitsChanged(e) { jQuery(".distanceUnit").text(get_unit_label("distance", DisplayUnits)); jQuery(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits)); TAR.planeMan.redraw(); + + remakeTrails(); + refreshSelected(); } function onFilterByAltitude(e) { @@ -6640,7 +6675,7 @@ function replayOnSliderMove() { date.setUTCMinutes(Number(replay.minutes)); replay.seconds = 0; date.setUTCSeconds(Number(replay.seconds)); - if (true || utcTimes) { + if (true || utcTimesHistoric) { jQuery("#replayDateHint").html("Date: " + zDateString(date)); jQuery("#replayTimeHint").html("Time: " + zuluTime(date)); } else { @@ -6677,7 +6712,7 @@ function replaySetTimeHint(arg) { replayJumpEnabled = false; let dateString; let timeString; - if (true || utcTimes) { + if (true || utcTimesHistoric) { dateString = zDateString(replay.ts); timeString = zuluTime(replay.ts); } else {