Merge pull request #18 from Carifio24/custom-text-updates

Updates to the custom text overlays

src/BlazeStarNova.vue

@@ -52,6 +52,10 @@
               label="Horizon" hide-details />
             <v-checkbox :color="accentColor" v-model="showConstellations" @keyup.enter="showConstellations = !showConstellations"
               label="Constellations" hide-details />
+            <v-checkbox :color="accentColor" v-model="showBlazeOverlay" @keyup.enter="showBlazeOverlay = !showBlazeOverlay"
+              label="Blaze Star Location" hide-details />
+            <v-checkbox :color="accentColor" v-model="showAlphaOverlay" @keyup.enter="showAlphaOverlay = !showAlphaOverlay"
+              label="Alphecca Location" hide-details />
           </div>
         </div>
 
@@ -206,6 +210,10 @@
         v-model="showTextSheet"
         :accent-color="accentColor"
         :touchscreen="touchscreen"
+        :show-blaze-overlay="showBlazeOverlay"
+        :show-alpha-overlay="showAlphaOverlay"
+        @toggle-blaze="() => store.gotoRADecZoom({ raRad: crbPlace.get_RA() * 15 * D2R, decRad: crbPlace.get_dec() * D2R, zoomDeg: 90, instant: false })"
+        @toggle-alpha="() => store.gotoRADecZoom({ raRad: 233.6719500 * D2R, decRad: 26.7146850 * D2R, zoomDeg: 90, instant: false })"
        />
 
 
@@ -225,8 +233,7 @@ import {throttle} from './debounce';
 
 import { createHorizon, createSky, removeHorizon, equatorialToHorizontal } from "./annotations";
 import { EquatorialRad, HorizontalRad, LocationRad } from "./types";
-import { makeAltAzGridText, setupConstellationFigures, useCustomGlyphs, renderOneFrame } from "./wwt-hacks";
-import { makeTextOverlays } from "./text";
+import { makeAltAzGridText, setupConstellationFigures, renderOneFrame } from "./wwt-hacks";
 
 import { usePlaybackControl } from "./wwt_playback_control";
 
@@ -278,11 +285,16 @@ const showHorizon = ref(true);
 const showAltAzGrid = ref(true);
 const showControls = ref(false);
 const showConstellations = ref(true);
+const showBlazeOverlay = ref(true);
+const showAlphaOverlay = ref(true);
 const crbBelowHorizon = ref(true);
 const _showDatePicker= ref(false);
 
 const originalFrameRender = WWTControl.singleton.renderOneFrame.bind(WWTControl.singleton);
-const newFrameRender = renderOneFrame.bind(WWTControl.singleton);
+const boundRenderOneFrame = renderOneFrame.bind(WWTControl.singleton);
+const newFrameRender = function() { 
+  boundRenderOneFrame(showBlazeOverlay.value, showAlphaOverlay.value);
+};
 let beforeTourTime: Date = new Date();
 
 // For now, we're not allowing a user to change this
@@ -374,9 +386,6 @@ onMounted(() => {
     // @ts-ignore
     Grids._makeAltAzGridText = makeAltAzGridText;
 
-    const textOverlays = makeTextOverlays();
-    useCustomGlyphs(textOverlays);
-
     // We need to render one frame ahead of time
     // as there's a lot of setup done on the first frame
     // render that we need to use

src/BottomSheet.vue

@@ -22,15 +22,17 @@
             </p>
             <h4>How do I see this nova?</h4>
             <p>
-            The star that will become a nova is named "T Coronae Borealis." It is often referred to as "T CrB" for short and is also nicknamed, the "Blaze Star." As the name suggests, it is located within the constellation Corona Borealis, the "Northern Crown." <a href="#" onclick="return false;" @click="() => playTour()">This guide</a> explains how you can find Corona Borealis in your night sky.
+              The star that will become a nova is named "T Coronae Borealis." It is often referred to as "T CrB" for short and is also nicknamed, the "Blaze Star" (Go to <a href="#" @click.prevent="$emit('toggle-blaze')">T CrB</a>). As the name suggests, it is located within the constellation Corona Borealis, the "Northern Crown." <a href="#" onclick="return false;" @click="() => playTour()">This guide</a> explains how you can find Corona Borealis in your night sky.
             </p>
+            <!-- <v-btn @click="$emit('toggle-blaze')">{{ `${showBlazeOverlay ? 'Hide' : 'Show'} T CrB label` }}</v-btn> -->
             <p>
               On a clear night, go out and look for Corona Borealis, so you can get used to its U-shape in the sky. Once T CrB goes nova, which can be any day now, or possibly weeks or months from now, it will seem as if a new star appeared just to the lower left of the U shape of the constellation.
             </p>
             <h4>How bright will the nova be?</h4>
             <p>
-              At its normal brightness, T CrB is about a 10th magnitude star. This is about 30-40 times fainter than the faintest star a person could see from a dark sky, so you would need a telescope to see it. When it goes nova, it is predicted to be about 2-2.5 magnitudes. It is comparable in brightness to Alphecca, the brightest star you can see in the crown of Corona Borealis.(TODO: add a link to turn on the layer that shows the brightness comparison.)
+              At its normal brightness, T CrB is about a 10th magnitude star. This is about 30-40 times fainter than the faintest star a person could see from a dark sky, so you would need a telescope to see it. When it goes nova, it is predicted to be about 2-2.5 magnitudes. It is comparable in brightness to Alphecca (Go to <a href="#" @click.prevent="$emit('toggle-alpha')">Alphecca</a>), the brightest star you can see in the crown of Corona Borealis.(TODO: add a link to turn on the layer that shows the brightness comparison.)
             </p>
+            <!-- <v-btn @click="$emit('toggle-alpha')">{{ `${showAlphaOverlay ? 'Hide' : 'Show'} alpha label` }}</v-btn> -->
             <h4>What causes a nova?</h4>
             <p>
               Novas occur in binary star systems where small, very dense, very hot stars called white dwarfs orbit another large star at close range. The graviational pull from the white dwarf can pull gas from the outer layers of the large companion star onto the surface of the white dwarf. When enough of this gas collects on the surface of the white dwarf, it triggers a nuclear explosion that causes the temporary brightening of the nova.
@@ -58,7 +60,7 @@
             </p>
             <p>
               The nickname "Blaze Star" was given to T CrB after it "blazed forth suddenly" on May 12, 1866, becoming as bright as Alphecca. Learn more about the history in this 1897 <a href="https://articles.adsabs.harvard.edu/pdf/1897PA......5...97P" target="_blank"
-              rel="noopener noreferrer">paper</a> by Mary Proctor.
+              rel="noopener noreferrer">article</a>, <em>Heavens for June</em> (see section "The Northern Crown"), by Mary Proctor.
             </p>
           </v-card-text>
           <v-card-text v-if="tab==1" class="info-text tab-items no-bottom-border-radius scrollable">
@@ -131,15 +133,19 @@ export interface Props {
   accentColor?: any;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   touchscreen?: any;
+  showBlazeOverlay: boolean;
+  showAlphaOverlay: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(),{
   cssVars: () => ({}),
   accentColor: () => 'accent',
-  touchscreen: () => false
+  touchscreen: () => false,
+  showBlazeOverlay: false,
+  showalphaOverlay: false,
 });
 
-const emits = defineEmits(['close']);
+const emits = defineEmits(['close', 'toggle-blaze', 'toggle-alpha']);
 
 const { cssVars, accentColor, touchscreen } = props;
 

src/text.ts

@@ -5,29 +5,31 @@
 
 import { Coordinates, Text3d, Text3dBatch, Vector3d } from "@wwtelescope/engine";
 
-export function makeTextOverlays(): Text3dBatch {
+export function makeTextOverlays(): Text3dBatch[] {
   const glyphHeight = 75 * 0.5;
   const scale = 0.00018;
-  const batch = new Text3dBatch(glyphHeight);
-  const up = Vector3d.create(0, 1, 0);
   const textItems = [
-    "Blaze", 
-    "Star",
-    "Nova will", 
-    "be roughly", 
-    "this bright",
+    ["T CrB, aka", "Blaze Star"],
+    ["Nova will", "become roughly", "this bright"],
   ];
+  const up = Vector3d.create(0, 1, 0);
   const locations = [
-    Coordinates.raDecTo3d(15 + 59 / 60 + 30.1622 / 3600, 24 + 55 / 60 + 12.613 / 3600),
-    Coordinates.raDecTo3d(15 + 59 / 60 + 30.1622 / 3600, 23 + 40 / 60 + 12.613 / 3600),
-    Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 25 + 42 / 60 + 52.89 / 3600),
-    Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 24 + 27 / 60 + 52.89 / 3600),
-    Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 23 + 12 / 60 + 52.89 / 3600),  
+    [
+      Coordinates.raDecTo3d(15 + 59 / 60 + 30.1622 / 3600, 24 + 55 / 60 + 12.613 / 3600),
+      Coordinates.raDecTo3d(15 + 59 / 60 + 30.1622 / 3600, 23 + 40 / 60 + 12.613 / 3600),
+    ],
+    [
+      Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 25 + 42 / 60 + 52.89 / 3600),
+      Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 24 + 27 / 60 + 52.89 / 3600),
+      Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 23 + 12 / 60 + 52.89 / 3600),
+    ]
   ];
-
-  textItems.forEach((item, index) => {
-    batch.add(new Text3d(locations[index], up, item, glyphHeight, scale));
+  const batches = textItems.map(items => new Text3dBatch(glyphHeight));
+  textItems.forEach((items, index) => {
+    const batch = batches[index];
+    const locs = locations[index];
+    items.forEach((item, idx) => batch.add(new Text3d(locs[idx], up, item, glyphHeight, scale)));
   });
 
-  return batch;
+  return batches;
 }

src/wwt-hacks.ts

@@ -141,7 +141,7 @@ export function useCustomGlyphs(batch: Text3dBatch) {
   cache._webFile.send();
 }
 
-export function renderOneFrame() {
+export function renderOneFrame(showBlazeOverlay=true, showAlphaOverlay=true) {
   if (this.renderContext.get_backgroundImageset() != null) {
     this.renderType = this.renderContext.get_backgroundImageset().get_dataSetType();
   } else {
@@ -259,15 +259,19 @@ export function renderOneFrame() {
   Planets.drawPlanets(this.renderContext, 1);
   this._drawSkyOverlays();
 
-  if (this.textOverlays === undefined) {
-    this.textOverlays = makeTextOverlays();
+  if (this.blazeOverlay === undefined || this.alphaOverlay === undefined) {
+    const textOverlays = makeTextOverlays();
+    textOverlays.forEach(useCustomGlyphs);
+    [this.blazeOverlay, this.alphaOverlay] = textOverlays;
   }
 
-  if (Settings.get_active().get_showConstellationLabels()) {
-    if (Grids._altAzTextBatch.viewTransform != undefined) {
-      this.textOverlays.viewTransform = Grids._altAzTextBatch.viewTransform;
-    }
-    this.textOverlays.draw(this.renderContext, 1, Color.fromArgb(255, 255, 255, 255));
+  if (showBlazeOverlay) {
+    this.blazeOverlay.viewTransform = Grids._altAzTextBatch?.viewTransform;
+    this.blazeOverlay.draw(this.renderContext, 1, Color.fromArgb(255, 255, 255, 255));
+  }
+  if (showAlphaOverlay) {
+    this.alphaOverlay.viewTransform = Grids._altAzTextBatch?.viewTransform;
+    this.alphaOverlay.draw(this.renderContext, 1, Color.fromArgb(255, 255, 255, 255));
   }
 
   Annotation2.prepBatch(this.renderContext);