Merge pull request #32 from Carifio24/usnob-toggle

Toggle button for USNOB layer
cosmicds · Aug 21, 2024 · 426db80 · 426db80
2 parents b495f2c + 3e240c3
commit 426db80
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 27 deletions.
diff --git a/src/BlazeStarNova.vue b/src/BlazeStarNova.vue
@@ -126,41 +126,59 @@
        </div>
        <div id="playback-controls">
 
-            <icon-button
+          <icon-button
             @activate="() => playPauseTour()"
             :fa-icon="isTourPlaying ? 'stop' : 'play'"
             :color="buttonColor"
             :tooltip-text="isTourPlaying ? 'Stop tour' : 'Play tour'"
-            tooltip-location="start">
+            tooltip-location="top">
               <template #button>
-                <span class="jl_icon_button_text">{{ isTourPlaying ? 'Leave tour and return to main view' : 'Show me how to find the Nova!'}}</span>
+                <span class="jl_icon_button_text">{{ isTourPlaying ? 'Leave tour and return to main view' : 'Show me how to find the nova'}}</span>
               </template>
           </icon-button>
+          <icon-button
+            v-if="!isTourPlaying"
+            @activate="() => {
+              toggleAndGoToNova();  
+            }"
+            :color="buttonColor"
+            :tooltip-text="store.backgroundImageset?.get_name() == TYCHO_ISET_NAME ? 'Show nova' : 'Hide nova'"
+            tooltip-location="top"
+          >
+            <template #button>
+              <span class="jl_icon_button_text">{{
+                store.backgroundImageset?.get_name() == TYCHO_ISET_NAME ?
+                'Show me what the nova will look like' :
+                'Show me what T CrB usually looks like'
+                }}</span>
+            </template>
+          </icon-button>
           <!-- icon button to go to TCrB -->
           <icon-button
             v-if="!isTourPlaying"
             @activate="() => goToTCrB()"
-            :fa-icon="'star'"
+            fa-icon="star"
             :color="buttonColor"
-            :tooltip-text="'Go to T CrB'"
-            tooltip-location="start">
+            tooltip-text="Center on T CrB"
+            tooltip-location="top">
               <template #button>
                 <span class="jl_icon_button_text"><v-icon>mdi-flare</v-icon><span> Go to T CrB</span></span>
               </template>
           </icon-button>
-
+
+
           <!-- reset time to now button -->
-           <button 
+          <button 
             class="icon-wrapper jl_icon-button jl_debug"
             @click="selectedDate = new Date()"
             :style="{color: buttonColor}"
-            ><font-awesome-icon icon="clock"/>&nbsp;Set time to Now</button>
-            <!-- reset to 9pm button -->
-            <button
+          ><font-awesome-icon icon="clock"/>&nbsp;Set time to Now</button>
+          <!-- reset to 9pm button -->
+          <button
             class="icon-wrapper jl_icon-button jl_debug"
             @click="selectedDate = todayAt9pm()"
             :style="{color: buttonColor}"
-            ><font-awesome-icon icon="clock"/>&nbsp;Set time to 9pm</button>
+          ><font-awesome-icon icon="clock"/>&nbsp;Set time to 9pm</button>
        </div>
        
        
@@ -259,7 +277,7 @@ import { GotoRADecZoomParams, engineStore } from "@wwtelescope/engine-pinia";
 import { BackgroundImageset, skyBackgroundImagesets, supportsTouchscreen, blurActiveElement, useWWTKeyboardControls, D2R, LocationDeg } from "@cosmicds/vue-toolkit";
 import { useDisplay} from 'vuetify';
 
-import {throttle} from './debounce';
+import { throttle } from './debounce';
 
 import { equatorialToHorizontal } from "./utils";
 import { LocationRad } from "./types";
@@ -275,6 +293,9 @@ export interface MainComponentProps {
   initialCameraParams?: CameraParams;
 }
 
+const TYCHO_ISET_NAME = "Tycho (Synthetic, Optical)";
+const USNOB_ISET_NAME = "USNOB: US Naval Observatory B 1.0 (Synthetic, Optical)";
+
 const store = engineStore();
 const { isTourPlaying } = storeToRefs(store);
 
@@ -354,12 +375,20 @@ function getWWTLocation(): LocationRad {
   };
 }
 
-function goToTCrB(instant=false) {
-  store.gotoTarget({
+async function goToTCrB(instant=false): Promise<void> {
+  return store.gotoTarget({
     place: crbPlace,
     noZoom: false,
-    instant: instant,
-    trackObject: false
+    instant,
+    trackObject: false,
+  });
+}
+
+function toggleAndGoToNova() {
+  // const instant = isTCrBOnScreen();
+  // console.log("Instant", instant);
+  goToTCrB().then(() => {
+    store.setBackgroundImageByName(store.backgroundImageset?.get_name() == TYCHO_ISET_NAME ? USNOB_ISET_NAME : TYCHO_ISET_NAME);
   });
 }
 
@@ -421,7 +450,7 @@ onMounted(() => {
   store.waitForReady().then(async () => {
     skyBackgroundImagesets.forEach(iset => backgroundImagesets.push(iset));
 
-    store.setBackgroundImageByName("Tycho (Synthetic, Optical)");
+    store.setBackgroundImageByName(TYCHO_ISET_NAME);
 
     // If there are layers to set up, do that here!
     layersLoaded.value = true;
@@ -573,7 +602,7 @@ function playPauseTour() {
     store.loadTour({ url: `${window.location.origin}/FindingCoronaBorealis.WTT`, play: true });
   } else {
     clearCurrentTour();
-    store.setBackgroundImageByName("Tycho (Synthetic, Optical)");
+    store.setBackgroundImageByName(TYCHO_ISET_NAME);
   }
 }
 
@@ -587,7 +616,7 @@ function onTourPlayingChange(playing: boolean) {
     // @ts-ignore
     WWTControl.singleton.set__mover(null);
     store.applySetting(["localHorizonMode", true]);
-    store.setBackgroundImageByName("Tycho (Synthetic, Optical)");
+    store.setBackgroundImageByName(TYCHO_ISET_NAME);
     selectedDate.value = beforeTourTime;
     // The watcher will do this, but we need it to happen now,
     // before we move

diff --git a/src/BottomSheet.vue b/src/BottomSheet.vue
@@ -43,7 +43,7 @@
                 src="https://www.nasa.gov/wp-content/uploads/2024/06/novacyg093500952-print.jpg"
               ></v-img>
               <figcaption>A red giant star and white dwarf orbit each other, similar to T Coronae Borealis, the Blaze Star. 
-                A disk of material is pulled off the red giant, into a disk, and then onto the white dwarf. <credit>(Credit: NASA / Goddard Space Flight Center)</credit>
+                A disk of material is pulled off the red giant, into a disk, and then onto the white dwarf. (Credit: NASA / Goddard Space Flight Center)
               </figcaption>
             </figure>
 

diff --git a/src/main.ts b/src/main.ts
@@ -36,17 +36,16 @@ import {
 
 library.add(faBookOpen);
 library.add(faChevronDown);
+library.add(faClock);
 library.add(faGear);
+library.add(faLocation);
+library.add(faLocationDot);
+library.add(faPause);
 library.add(faPlay);
+library.add(faSquareXmark);
 library.add(faStop);
 library.add(faTimes);
 library.add(faVideo);
-library.add(faPlay);
-library.add(faPause);
-library.add(faLocation);
-library.add(faLocationDot);
-library.add(faClock);
-library.add(faSquareXmark);
 
 /** v-hide directive taken from https://www.ryansouthgate.com/2020/01/30/vue-js-v-hide-element-whilst-keeping-occupied-space/ */
 // Extract the function out, up here, so I'm not writing it twice