Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

clean up interface #341

Merged
merged 4 commits into from
Jan 22, 2024
Merged

clean up interface #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a2a4f6
remove uneeded ts file
johnarban Jan 17, 2024
40993a9
fix clouddata grid
johnarban Jan 17, 2024
36f1acb
clean up interface
johnarban Jan 16, 2024
8001109
some text updates
johnarban Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 29 additions & 130 deletions solar-eclipse-2024/src/SolarEclipse2024.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,6 @@
<span v-if="learnerPath=='Explore'"
>Watch and Compare
</span>
<span v-if="learnerPath=='Answer'"
>Identify Eclipse Path
</span>
<span v-if="learnerPath=='Choose'"
>Choose Any Location
</span>
Expand All @@ -68,83 +65,11 @@
<span class="description">
<p v-if="!queryData"><strong>{{ touchscreen ? "Tap" : "Click" }}</strong> <font-awesome-icon icon="play" class="bullet-icon"/> to "watch" the eclipse at the location marked by the red dot.</p>

<p><strong>{{ touchscreen ? "Tap" : "Click" }} highlighted cities</strong> on the map to switch locations and view the eclipse from there.</p>
<p><strong>Explore</strong> until you can identify which locations will see an annular eclipse!</p>
<p><strong>{{ touchscreen ? "Tap" : "Click" }}</strong> on the map to switch locations and view the eclipse from there.</p>
<p>The <strong><span class="highlighted bg-red">red</span></strong> line shows the path of the total eclipse, and the <span class="highlighted bg-grey text-black">Grey</span> band shows where the total eclipse will be visible (the umbra)</p>
</span>
</div>

<div class="instructions-text" v-if="learnerPath=='Answer'">
<span class="description">
<p>Have you determined the eclipse path? <strong>{{ touchscreen ? "Tap" : "Click" }} a card</strong> to select it.</p>
<p>If you are not sure, {{ touchscreen ? "tap" : "click" }} <font-awesome-icon icon="rocket" class="bullet-icon"/> to keep exploring.</p>
</span>
<mc-radiogroup
v-if="learnerPath=='Answer'"
id = "mc-radiogroup-container"
row
hide-input
:preselected="quizAnswer"
:radio-options="['A', 'B','C']"
:feedbacks="['Not that one.<br/>Try again!', 'Not that one.<br/>Try again!', 'Yes! It passes from Oregon to Texas']"
:correct-answers="[2]"
@select="onAnswerSelected"
colorWrong="transparent"
colorRight="transparent"
>
<!-- for images width=100px, height=58px for correct aspect ratio -->
<template #default="{index, text, selected, color, feedback}">
<flip-transition
:id="text"
:width="(xSmallSize ? `21vw` : `12vw`)"
height="9vh"
duration="0.8s"
:flipBackAfter="3000"
tabindex="0"
role="button"
borderRadius="5px"
>
<template v-slot:front>
<image-label
id="front"
:alt-text="longAnswers[index]"
:color="['rgb(0,180,200)','rgb(255, 110,0)','#f0f'][index]"
:background-color="(selected ? `${color}` : '#F0DCB9')"
:background-opacity="1"
fontSize="5vh"
fontWeight="bold"
:width="(xSmallSize ? `21vw` : `12vw`)"
height="9vh"
:border="'1px solid white'"
borderRadius="5px"
@click="() => { console.log('clicked'); quizAnswer = index;}"
>
{{ text }}
</image-label>
</template>
<template v-slot:back>
<image-label
id="front"
:color="['rgb(0,180,200)','rgb(255, 110,0)','#f0f'][index]"
background-color="black"
:background-opacity="1"
:width="(xSmallSize ? `21vw` : `12vw`)"
height="9vh"
:fontSize="(xSmallSize ? `min(2vh,2.5vw)` : `min(1.6vh,1.6vw)`)"
fontWeight="bold"
lineHeight="(xSmallSize ? `min(2.2vh,2.7vw)` : `min(1.8vh,1.8vw)`)"
:border="'1px solid white'"
borderRadius="5px"
>
<span v-html="feedback"></span>
</image-label>
</template>
</flip-transition>
</template>
</mc-radiogroup>
<div v-if="showLinkToPath" class="my-1">
See NASA's map with the October annular eclipse path <a href="https://science.nasa.gov/eclipses/future-eclipses/eclipse-2024/where-when/" target="_blank" rel="noopener noreferrer">here.</a>
</div>
</div>

<!-- Choose Path -->
<div class="instructions-text" v-if="learnerPath=='Choose'">
Expand Down Expand Up @@ -193,18 +118,6 @@
:box-shadow="false"
@activate="() => { learnerPath = 'Choose'}"
></icon-button>
<icon-button
:model-value="learnerPath == 'Answer'"
fa-icon="puzzle-piece"
fa-size="xl"
:color="accentColor"
:focus-color="accentColor"
:tooltip-text="'Identify eclipse path'"
:tooltip-location="'bottom'"
:show-tooltip="!mobile"
:box-shadow="false"
@activate="() => { learnerPath = 'Answer'}"
></icon-button>
<icon-button
v-model="showInfoSheet"
fa-icon="book-open"
Expand Down Expand Up @@ -238,29 +151,12 @@
:disabled="smAndUp"
>
<div v-if="!smAndUp || smAndUp" id="map-container" >
<!-- :places="places" -->
<location-selector
v-if="learnerPath == 'Explore'"
:model-value="locationDeg"
@place="(place: typeof places[number]) => updateLocation(place.name)"
:detect-location="false"
:map-options="presetMapOptions"
:places="places"
@update:modelValue="updateLocationFromMap"
:initial-place="places.find(p => p.name === 'selectedLocation')"
:place-circle-options="placeCircleOptions"
:selected-circle-options="selectedCircleOptions"
:selectable="false"
class="leaflet-map"
:geo-json-files="geojson"
></location-selector>

<span id="eclipse-path-map" v-if="learnerPath=='Answer'">
<img alt="This is a map of the US with three possible paths for the April 2024 solar eclipse. In choice A, the eclipse moves North to South from Bismarck, ND through Denver, CO and Albuquerque, NM. In choice B, the eclipse moves West to East from Los Angeles, CA to Charlotte, NC. In Choice C, the eclipse moves Northwest to South from Eugene, OR to San Antonio, TX." src="./assets/AnnularEclipseMap.png"/>
</span>

<location-selector
v-if="learnerPath == 'Choose'"
:model-value="locationDeg"
@update:modelValue="updateLocationFromMap"
:detect-location="false"
:map-options="userSelectedMapOptions"
:selected-circle-options="selectedCircleOptions"
Expand Down Expand Up @@ -858,16 +754,15 @@
<v-window-item :value="1">
<div class="intro-text">
<p class="mb-5">
On October 14, 2023, the Americas will experience
a partial solar eclipse, where the Moon
will appear to travel across the Sun and
block a portion of it.
On April 8, 2024, North America will experience
a total solar eclipse, where the Moon
will appear to travel across the Sun, blocking out it's lightt
</p>
<p class="mb-5">
A lucky segment of the U.S., Central, and South America will experience a dazzling <b>"Ring of Fire"</b> created by an <b>annular eclipse</b>.
A lucky segment of Mexico, the U.S., and Cander will experience an aweinspiring <b>total eclipse</b>, and the rest will get to glimpse a <em>partial</em> eclipse.
</p>
<p class="mb-5">
Use your detective skills to identify where those lucky people are in our map quiz.
See where the eclipse will be visible, and if clouds are likely to interfere with seeing the eclipse.
</p>
</div>
</v-window-item>
Expand All @@ -891,12 +786,6 @@
</template>
<strong>Select any location</strong> around the world. See and share how the eclipse would look from there.
</v-list-item>
<v-list-item density="compact">
<template v-slot:prepend>
<font-awesome-icon icon="puzzle-piece" size="xl" class="bullet-icon"></font-awesome-icon>
</template>
Identify the path of the annular eclipse for the U.S. in our <strong>Map Quiz</strong>.
</v-list-item>
<v-list-item density="compact">
<template v-slot:prepend>
<font-awesome-icon icon="book-open" size="xl" class="bullet-icon"></font-awesome-icon>
Expand Down Expand Up @@ -1306,7 +1195,7 @@ import { v4 } from "uuid";
import { drawSkyOverlays, makeAltAzGridText, layerManagerDraw, updateViewParameters, renderOneFrame } from "./wwt-hacks";

type SheetType = "text" | "video" | null;
type LearnerPath = "Explore" | "Choose" | "Learn" | "Answer";
type LearnerPath = "Explore" | "Choose" | "Learn";
type ViewerMode = "Horizon" | "SunScope";
type MoonImageFile = "moon.png" | "moon-dark-gray-overlay.png" | "moon-sky-blue-overlay.png";

Expand Down Expand Up @@ -1443,7 +1332,7 @@ function parseEclipsePath(csv: string) {
const eclipsePath = parseEclipsePath(eclipse);

// convert the eclipse path to a GeoJson feature collection
const eclipsePathGeoJson = {
const _eclipsePathGeoJson = {
"name": "Eclipse Path",
"type": "FeatureCollection",
"features": eclipsePath.map((d) => {
Expand Down Expand Up @@ -1471,13 +1360,16 @@ import { csvParseRows } from "d3-dsv";
// the first row is the longitude values
// the first column is the latitude values
// the data lies in the interior of the matrix
const cloudData = csvParseRows(cloudCover, (d, _i) => {
let cloudData: number[][] = csvParseRows(cloudCover, (d, _i) => {
// loop over the row and convert each value to a number ("+v")
return d.map((v) => +v);
});

const minLat = Math.min(...cloudData.map((d) => d[0]));
const minLon = Math.min(...cloudData[0]);
// lon and lat are first col and row (dropping the first value)
const minLat = Math.min(...cloudData.map(d => d[0]).slice(1));
const minLon = Math.min(...cloudData[0].slice(1));
// get just the inner data grid
cloudData = cloudData.slice(1).map(row => row.slice(1));

console.log("cloud cover data loaded");

Expand Down Expand Up @@ -1799,10 +1691,10 @@ export default defineComponent({
url: 'https://raw.githubusercontent.com/johnarban/wwt_interactives/main/images/center.json',
style: {color: '#ff0000', weight: 2, opacity: 1, fillOpacity: 0}
},
{
'geojson': eclipsePathGeoJson as GeoJSON.FeatureCollection,
'style': {radius:3,fillColor: '#ccc', color:'#222', weight: 2, opacity: 1, fillOpacity: 1}
}
// { // individual places
// 'geojson': eclipsePathGeoJson as GeoJSON.FeatureCollection,
// 'style': {radius:3,fillColor: '#ccc', color:'#222', weight: 2, opacity: 1, fillOpacity: 1}
// }
],


Expand Down Expand Up @@ -1970,7 +1862,7 @@ export default defineComponent({
return `Cloud Cover: ${(cc * 100).toFixed(0)}%`;
}
}
return "Cloud Cover: N/A";
return "Outside Range";

},

Expand Down Expand Up @@ -4261,6 +4153,13 @@ video, #info-video {
flex-direction: column;
}


span.highlighted {
font-weight: bold;
padding-inline: 0.5em;
border-radius: 0.25em;;
}

#scrollButton-button {
position: fixed;
top: calc(var(--top-content-height) - 2.5rem);
Expand Down
Loading