AD-336 Update Globe UI icons and add replay functionality (wiedehopf#13)

html/index.html

@@ -796,7 +796,11 @@
  <div id="expand_sidebar_control">
  <button id="expand_sidebar_button" class="sidebar_button" title="Expand Sidebar" style="display: none;"></button>
  </div>
- <div id="settingsCog" class="settingsCog"></div>
+ <div class="buttonSpacer">
+ </div>
+ <div id="settingsCog" class="settingsCog" title="Settings"></div>
+ <div class="buttonSpacer">
+ </div>
  <div id="L" title="Toggle (L)abels" class="button inActiveButton" onclick="toggleLabels();"><span class="buttonText">L</span></div>
  <div id="O" title="Toggle Label Extensi(O)ns" class="button inActiveButton" onclick="toggleExtendedLabels();"><span class="buttonText">O</span></div>
  <div id="K" title="Toggle Trac(K) Labels" class="button inActiveButton" onclick="toggleTrackLabels();"><span class="buttonText">K</span></div>
@@ -815,7 +819,9 @@
  </div>
  <div id="R" title="Follow a (R)andom plane!" class="button inActiveButton" onclick="followRandomPlane();"><span class="buttonText">R</span></div>
  <div id="F" title="(F)ollow" class="button inActiveButton" onclick="toggleFollow();"><span class="buttonText">F</span></div>
- <!--< div id="RP" title="Replay" class="button inActiveButton" onclick="showReplayBar();"><span class="buttonText">RP</span></div>-->
+ <div class="buttonSpacer">
+ </div>
+ <div id="RP" title="Replay" class="settingsReplay" onclick="showReplayBar();"></div>
  </div>
  </div>
  <div id="altitude_chart" class="ol-unselectable ol-control altitudeFeet">
@@ -826,8 +832,8 @@
  <p id="replayDateHint" >Date:</p>
  <input type="text" class="datepicker" id="replayDatepicker" >
  <p id="replayTimeHint" >Time:</p>
- <p id="hourSelect"></p>
- <p id="minuteSelect"></p>
+ <div id="hourSelect"><div id="replayDatepickerHourHandle" class="ui-slider-handle"></div></div>
+ <div id="minuteSelect"><div id="replayDatepickerMinuteHandle" class="ui-slider-handle"></div></div>
  <p id="replayTimeZone">UTC</p>
  <p id="replaySpeedHint">Speed:</p>
  <p id="replaySpeedSelect"></p>

html/script.js

@@ -182,6 +182,7 @@ let badDot;
 let badDotMlat;
 
 let showingReplayBar = false;
+let replayShouldPlayOnFirstLoad = true;
 
 function processAircraft(ac, init, uat) {
  let isArray = Array.isArray(ac);
@@ -1009,6 +1010,7 @@ function initPage() {
  }
  console.log(ts);
  replay = replayDefaults(ts);
+ replayShouldPlayOnFirstLoad = false;
  }
 
  //Pulling filters from params
@@ -1165,10 +1167,12 @@ function initPage() {
 
  jQuery('#settingsCog').on('click', function() {
  jQuery('#settings_infoblock').toggle();
+ $(this).toggleClass('settingsCog-active');
  });
 
  jQuery('#settings_close').on('click', function() {
  jQuery('#settings_infoblock').hide();
+ jQuery('#settingsCog').removeClass('settingsCog-active');
  });
 
  jQuery('#groundvehicle_filter').on('click', function() {
@@ -7217,7 +7221,7 @@ function replayDefaults(ts) {
  playing: true,
  ts: ts,
  ival: 60 * 1000,
- speed: 30,
+ speed: 10,
  dateText: zDateString(ts),
  hours: ts.getUTCHours(),
  minutes: ts.getUTCMinutes(),
@@ -7443,6 +7447,7 @@ function replaySetTimeHint(arg) {
 
  let minutes = replay.ts.getUTCMinutes();
  jQuery('#minuteSelect').slider("option", "value", minutes);
+
  replayJumpEnabled = true;
 }
 
@@ -7763,13 +7768,32 @@ function playReplay(state){
 function showReplayBar(){
  console.log('showReplayBar()');
  showingReplayBar = !showingReplayBar;
+ // Function that will remove 'replay' token from address bar and reload window
+ const forceReloadWindow = function() {
+ let currentUrl = window.location.href;
+ let url = currentUrl.replace(/replay=[^&]+&?/, '');
+ // Update the URL without reloading the page
+ window.history.pushState({}, '', url);
+ // Reload the page
+ window.location.reload();
+ };
+
  if (!showingReplayBar){
+ // Hide bar
+ jQuery("#RP").removeClass('settingsReplay-active');
  jQuery("#replayBar").hide();
+ // Force-stop playing
+ playReplay(false);
+ // Clear timers
+ replayClear();
  replay = null;
  jQuery('#map_canvas').height('100%');
  jQuery('#sidebar_canvas').height('100%');
  jQuery("#selected_showTrace_hide").show();
+ // Reset everything, as closing things is a bit of a mess
+ forceReloadWindow();
  } else {
+ jQuery("#RP").addClass('settingsReplay-active');
  jQuery("#replayBar").show();
  jQuery("#replayBar").css('display', 'grid');
  jQuery('#replayBar').height('100px');
@@ -7801,28 +7825,39 @@ function showReplayBar(){
  }
 
  jQuery("#replayDatepicker").datepicker(datepickerOptions);
-
+ let replaySliderHourHandle = jQuery("#replayDatepickerHourHandle");
  jQuery('#hourSelect').slider({
  step: 1,
  min: 0,
  max: 23,
+ create: function() {
+ replaySliderHourHandle.text(replay.hours + " hrs");
+ },
  slide: function(event, ui) {
  replay.hours = ui.value;
+ replaySliderHourHandle.text(ui.value + " hrs");
  replayOnSliderMove();
  },
- change: function() {
+ change: function(event, ui) {
+ replaySliderHourHandle.text(ui.value + " hrs");
  replayJump();
  }
  });
+ let replaySliderMinuteHandle = jQuery("#replayDatepickerMinuteHandle");
  jQuery('#minuteSelect').slider({
  step: 1,
  min: 0,
  max: 59,
+ create: function() {
+ replaySliderMinuteHandle.text(replay.minutes + " min");
+ },
  slide: function(event, ui) {
  replay.minutes = ui.value;
+ replaySliderMinuteHandle.text(ui.value + " min");
  replayOnSliderMove();
  },
- change: function() {
+ change: function(event, ui) {
+ replaySliderMinuteHandle.text(ui.value + " min");
  replayJump();
  }
  });
@@ -7843,7 +7878,31 @@ function showReplayBar(){
  jQuery('#replaySpeedHint').text('Speed: ' + replay.speed + 'x');
 
  jQuery("#selected_showTrace_hide").hide();
+
+ // Re-adjust sliders to reflect accurate time
+ replayJump();
  }
+ // Function that will wait for replay to start playing
+ const waitForReplay = function(c, max) {
+ if(!replay || replay.playing) {
+ return;
+ }
+ playReplay(true);
+ if(!replay.playing && c < max) {
+ console.log(`[${c}] Wainting for replay to start playing...`);
+ setTimeout(waitForReplay, 500, c+1, max);
+ }
+ };
+ // On very first click, simulate automatic start
+ if(replayShouldPlayOnFirstLoad) {
+ // This starts loading data required to play replay
+ loadReplay(replay.ts);
+ // This will start playing the replay once the data is loaded
+ waitForReplay(0, 20);
+ }
+
+ // Indicate that we've already played once
+ replayShouldPlayOnFirstLoad = false;
 };
 
 function timeoutFetch() {

html/style.css

@@ -485,16 +485,59 @@ select.error, textarea.error, input.error {
 }
 
 .settingsCog {
+ background-color: var(--ACCENT);
+ width: calc( 27px * var(--SCALE));
+ height: calc( 27px * var(--SCALE));
+ cursor: pointer;
+ background-image: url('images/cog-white.svg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ margin: calc(5px * var(--SCALE));
+ border-radius: calc( 2px * var(--SCALE));
+ display: inline-block;
+}
+
+.settingsReplay {
+ background-color: var(--ACCENT);
+ width: calc( 27px * var(--SCALE));
+ height: calc( 27px * var(--SCALE));
+ cursor: pointer;
+ background-image: url('images/replay-white.svg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ margin: calc( 5px * var(--SCALE));
+ border-radius: calc( 2px * var(--SCALE));
+ display: inline-block;
+}
+#replayDatepickerHourHandle, #replayDatepickerMinuteHandle {
+ width: 4em;
+ height: 1.6em;
+ top: 50%;
+ margin-left: -2em;
+ margin-top: -.8em;
+ text-align: center;
+ line-height: 1.6em;
+}
+
+.settingsCog-active {
+ background-image: url('images/cog-black.svg');
+}
+
+.settingsReplay-active {
+ background-image: url('images/replay-black.svg');
+}
+
+/* .settingsCog {
  width: calc( 48px * var(--SCALE));
  height: calc( 48px * var(--SCALE));
  cursor: pointer;
- background-image: url('images/settings-icon02.png');
+ background-image: url('images/cog-white.svg');
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: calc( 6px * var(--SCALE));
  margin-bottom: calc( 6px * var(--SCALE));
  margin-left: calc( -12px * var(--SCALE));
-}
+} */
 
 #highlighted_infoblock {
  background-color: var(--BGCOLOR1);