Merge pull request #25 from Carifio24/sun-scope

Keep sky opaque in Sun scope mode and only show cloud data on appropriate tab
cosmicds · Jan 30, 2024 · cb94568 · cb94568
2 parents 8a1dca4 + c1a85e6
commit cb94568
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 16 deletions.
diff --git a/src/LocationSelector.vue b/src/LocationSelector.vue
@@ -52,6 +52,10 @@ export default defineComponent({
       type: String,
       default: "#ffffff"
     },
+    cloudCover: {
+      type: Boolean,
+      default: false
+    },
     detectLocation: {
       type: Boolean,
       default: true
@@ -144,14 +148,15 @@ export default defineComponent({
       selectedCircle: null as L.CircleMarker | null,
       selectedPlace: null as Place | null,
       selectedPlaceCircle: null as L.CircleMarker | null,
+      cloudCoverRectangles: [] as L.Rectangle[],
       map: null as Map | null,
     };
   },
 
   methods: {
 
-    loadCloudCover() {
-      fetch('https://raw.githubusercontent.com/Jack-Hayes/solar-eclipse-2024/main/src/assets/one_deg_mean_cc.csv')
+    async loadCloudCover(): Promise<void> {
+      return fetch('https://raw.githubusercontent.com/Jack-Hayes/solar-eclipse-2024/main/src/assets/one_deg_mean_cc.csv')
         .then(response => response.text())
         .then(csvData => {
           this.parseData(csvData);
@@ -172,30 +177,26 @@ export default defineComponent({
             const lon = parseFloat(row.lon);
             const cloudCover = parseFloat(row.cloud_cover);
 
-            this.addRectangle(lat, lon, cloudCover);
+            this.cloudCoverRectangles.push(this.createRectangle(lat, lon, cloudCover));
           });
         },
       });
     },
 
-    addRectangle(lat:number, lon:number, cloudCover:number) {
-      if (this.map === null) {
-        return;
-      }
-      
+    createRectangle(lat: number, lon: number, cloudCover: number): L.Rectangle {
       const color = this.getColor(cloudCover);
 
-      L.rectangle([
+      return L.rectangle([
         [lat + 0.5, lon - 0.5],
         [lat - 0.5, lon + 0.5],
       ], {
         color: 'none', // No border
         fillColor: color,
         fillOpacity: 0.55,
-      }).addTo(this.map as Map);
+      });
     },
 
-    getColor(cloudCover:number) {
+    getColor(cloudCover: number) {
       // Calculate HSL color based on a gradient
       const hue = 30 + (cloudCover * 120); // 30° to 150°
       const saturation = '100%';
@@ -288,7 +289,9 @@ export default defineComponent({
       const options = { ...defaultMapOptions, ...this.mapOptions };
       L.tileLayer(options.templateUrl, options).addTo(map);
 
-      this.loadCloudCover();
+      this.loadCloudCover().then(() => {
+        this.updateCloudCover(this.cloudCover);
+      });
 
       this.placeCircles = this.places.map(place => this.circleForPlace(place));
       this.placeCircles.forEach((circle, index) => {
@@ -375,6 +378,14 @@ export default defineComponent({
 
     locationToLatLng(location: LocationDeg): L.LatLngExpression {
       return [location.latitudeDeg, location.longitudeDeg];
+    },
+
+    updateCloudCover(value: boolean) {
+      if (value) {
+        this.cloudCoverRectangles.forEach(rect => rect.addTo(this.map as Map));
+      } else {
+        this.cloudCoverRectangles.forEach(rect => rect.remove());
+      }
     }
 
   },
@@ -395,6 +406,9 @@ export default defineComponent({
         this.map.setView(this.latLng);
       }
     },
+    cloudCover(value: boolean) {
+      this.updateCloudCover(value);
+    },
     places() {
       this.map?.remove();
       this.setup();
@@ -461,4 +475,4 @@ export default defineComponent({
 
   
 }
-</style>
+</style>
diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
@@ -172,6 +172,7 @@
               :detect-location="false"
               :map-options="userSelectedMapOptions"
               :selected-circle-options="selectedCircleOptions"
+              :cloud-cover="learnerPath === 'Clouds'"
               class="leaflet-map"
               :geo-json-files="geojson"
             ></location-selector>
@@ -2871,11 +2872,16 @@ export default defineComponent({
       const astronomicalTwilight = 3 * _civilTwilight;
       
       const sunAlt = altRad;
-      this.skyOpacity = (1 + Math.atan(Math.PI * sunAlt / (-astronomicalTwilight))) / 2;
-      this.skyOpacity = this.skyOpacity * (1 - 0.75 * Math.pow(Math.E,-Math.pow((this.currentFractionEclipsed -1),2)/(0.001)));
+      let dssOpacity = 0;
+      if (this.viewerMode == 'SunScope') {
+        this.skyOpacity = 1;
+      } else {
+        this.skyOpacity = (1 + Math.atan(Math.PI * sunAlt / (-astronomicalTwilight))) / 2;
+        this.skyOpacity = this.skyOpacity * (1 - 0.75 * Math.pow(Math.E,-Math.pow((this.currentFractionEclipsed -1),2)/(0.001)));
+        dssOpacity = sunAlt > 0 ? 0 : 1 - (1 + Math.atan(Math.PI * sunAlt / (-astronomicalTwilight))) / 2;
+      }
       this.updateMoonTexture();
 
-      const dssOpacity = sunAlt > 0 ? 0 : 1 - (1 + Math.atan(Math.PI * sunAlt / (-astronomicalTwilight))) / 2;
       this.setForegroundOpacity(dssOpacity * 100);
     },
 
@@ -3100,6 +3106,7 @@ export default defineComponent({
         this.horizonOpacity = 0.6;
         this.startSolarScopeMode();
       }
+      this.updateSkyOpacityForSunAlt(this.sunPosition.altRad);
       this.updateMoonTexture();
     },