5.9.3

gulp/publish-frontend.js

@@ -71,6 +71,7 @@ gulp.task('compress_js_vendor', () => gulp.src(jsVendorSources)
 
 const mjsSources = [
 	'server/scripts/modules/currentweatherscroll.mjs',
+	'server/scripts/modules/hazards.mjs',
 	'server/scripts/modules/currentweather.mjs',
 	'server/scripts/modules/almanac.mjs',
 	'server/scripts/modules/icons.mjs',

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.9.0",
+	"version": "5.9.3",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {

server/scripts/index.mjs

@@ -187,7 +187,7 @@ const enterFullScreen = () => {
 
 	// change hover text and image
 	const img = document.getElementById('ToggleFullScreen');
-	img.src = 'images/nav/ic_fullscreen_exit_white_24dp_1x.png';
+	img.src = 'images/nav/ic_fullscreen_exit_white_24dp_2x.png';
 	img.title = 'Exit fullscreen';
 };
 
@@ -211,7 +211,7 @@ const exitFullscreen = () => {
 	resize();
 	// change hover text and image
 	const img = document.getElementById('ToggleFullScreen');
-	img.src = 'images/nav/ic_fullscreen_white_24dp_1x.png';
+	img.src = 'images/nav/ic_fullscreen_white_24dp_2x.png';
 	img.title = 'Enter fullscreen';
 };
 
@@ -290,37 +290,41 @@ const updateFullScreenNavigate = () => {
 };
 
 const documentKeydown = (e) => {
-	const code = (e.keyCode || e.which);
-
-	// 200ms repeat
-	if ((Date.now() - documentKeydown.lastButton ?? 0) < 200) return false;
-	documentKeydown.lastButton = Date.now();
+	const { key } = e;
 
 	if (document.fullscreenElement || document.activeElement === document.body) {
-		switch (code) {
-		case 32: // Space
+		switch (key) {
+		case ' ': // Space
+			// don't scroll
+			e.preventDefault();
 			btnNavigatePlayClick();
 			return false;
 
-		case 39: // Right Arrow
-		case 34: // Page Down
+		case 'ArrowRight':
+		case 'PageDown':
+			// don't scroll
+			e.preventDefault();
 			btnNavigateNextClick();
 			return false;
 
-		case 37: // Left Arrow
-		case 33: // Page Up
+		case 'ArrowLeft':
+		case 'PageUp':
+			// don't scroll
+			e.preventDefault();
 			btnNavigatePreviousClick();
 			return false;
 
-		case 36: // Home
+		case 'ArrowUp': // Home
+			e.preventDefault();
 			btnNavigateMenuClick();
 			return false;
 
-		case 48: // Restart
+		case '0': // "O" Restart
 			btnNavigateRefreshClick();
 			return false;
 
-		case 70: // F
+		case 'F':
+		case 'f':
 			btnFullScreenClick();
 			return false;
 
@@ -368,7 +372,6 @@ const btnGetGpsClick = async () => {
 	txtAddress.value = `${round2(latitude, 4)}, ${round2(longitude, 4)}`;
 
 	doRedirectToGeometry({ y: latitude, x: longitude }, (point) => {
-		console.log(point);
 		const location = point.properties.relativeLocation.properties;
 		// Save the query
 		const query = `${location.city}, ${location.state}`;

server/scripts/modules/almanac.mjs

@@ -22,7 +22,7 @@ class Almanac extends WeatherDisplay {
 	}
 
 	async getData(_weatherParameters) {
-		if (!super.getData(_weatherParameters)) return;
+		const superResponse = super.getData(_weatherParameters);
 		const weatherParameters = _weatherParameters ?? this.weatherParameters;
 
 		// get sun/moon data
@@ -33,11 +33,13 @@ class Almanac extends WeatherDisplay {
 			sun,
 			moon,
 		};
-		// update status
-		this.setStatus(STATUS.loaded);
-
 		// share data
 		this.getDataCallback();
+
+		if (!superResponse) return;
+
+		// update status
+		this.setStatus(STATUS.loaded);
 	}
 
 	calcSunMoonData(weatherParameters) {

server/scripts/modules/hazards.mjs

@@ -35,7 +35,8 @@ class Hazards extends WeatherDisplay {
 			const alerts = await json(url, { retryCount: 3, stillWaiting: () => this.stillWaiting() });
 			const unsortedAlerts = alerts.features ?? [];
 			const sortedAlerts = unsortedAlerts.sort((a, b) => (hazardLevels[b.properties.severity] ?? 0) - (hazardLevels[a.properties.severity] ?? 0));
-			this.data = sortedAlerts;
+			const filteredAlerts = sortedAlerts.filter((hazard) => hazard.properties.severity !== 'Unknown');
+			this.data = filteredAlerts;
 
 			// show alert indicator
 			if (this.data.length > 0) alert.classList.add('show');
@@ -50,7 +51,10 @@ class Hazards extends WeatherDisplay {
 
 		this.getDataCallback();
 
-		if (!superResult) return;
+		if (!superResult) {
+			this.setStatus(STATUS.loaded);
+			return;
+		}
 		this.drawLongCanvas();
 	}
 
@@ -71,7 +75,9 @@ class Hazards extends WeatherDisplay {
 
 		// no alerts, skip this display by setting timing to zero
 		if (lines.length === 0) {
+			this.setStatus(STATUS.loaded);
 			this.timing.totalScreens = 0;
+			this.setStatus(STATUS.loaded);
 			return;
 		}
 
@@ -79,13 +85,13 @@ class Hazards extends WeatherDisplay {
 		// set up the timing
 		this.timing.baseDelay = 20;
 		// 24 hours = 6 pages
-		const pages = Math.ceil(list.scrollHeight / 390); // first page is already displayed, last page doesn't happen
-		const timingStep = 75 * 4;
+		const pages = Math.max(Math.ceil(list.scrollHeight / 400) - 3, 1);
+		const timingStep = 400;
 		this.timing.delay = [150 + timingStep];
 		// add additional pages
 		for (let i = 0; i < pages; i += 1) this.timing.delay.push(timingStep);
 		// add the final 3 second delay
-		this.timing.delay.push(150);
+		this.timing.delay.push(250);
 		this.calcNavTiming();
 		this.setStatus(STATUS.loaded);
 	}

server/scripts/modules/icons.mjs

@@ -133,6 +133,7 @@ const getWeatherRegionalIconFromIconLink = (link, _isNightTime) => {
 		return addPath('Clear-Wind-1994.gif');
 
 	case 'blizzard':
+	case 'blizzard-n':
 		return addPath('Blowing Snow.gif');
 
 	case 'cold':
@@ -268,6 +269,7 @@ const getWeatherIconFromIconLink = (link, _isNightTime) => {
 		return addPath('CC_Windy.gif');
 
 	case 'blizzard':
+	case 'blizzard-n':
 		return addPath('Blowing-Snow.gif');
 
 	default:

server/scripts/modules/navigation.mjs

@@ -109,6 +109,13 @@ const updateStatus = (value) => {
 	// calculate first enabled display
 	const firstDisplayIndex = displays.findIndex((display) => display.enabled && display.timing.totalScreens > 0);
 
+	// value.id = 0 is hazards, if they fail to load hot-wire a new value.id to the current display to see if it needs to be loaded
+	// typically this plays out as current conditions loads, then hazards fails.
+	if (value.id === 0 && (value.status === STATUS.failed || value.status === STATUS.retrying)) {
+		value.id = firstDisplayIndex;
+		value.status = displays[firstDisplayIndex].status;
+	}
+
 	// if this is the first display and we're playing, load it up so it starts playing
 	if (isPlaying() && value.id === firstDisplayIndex && value.status === STATUS.loaded) {
 		navTo(msg.command.firstFrame);
@@ -175,6 +182,7 @@ const navTo = (direction) => {
 		if (!firstDisplay) return;
 
 		firstDisplay.navNext(msg.command.firstFrame);
+		firstDisplay.showCanvas();
 		return;
 	}
 	if (direction === msg.command.nextFrame) currentDisplay().navNext();
@@ -218,11 +226,11 @@ const setPlaying = (newValue) => {
 	if (playing) {
 		noSleep(true);
 		playButton.title = 'Pause';
-		playButton.src = 'images/nav/ic_pause_white_24dp_1x.png';
+		playButton.src = 'images/nav/ic_pause_white_24dp_2x.png';
 	} else {
 		noSleep(false);
 		playButton.title = 'Play';
-		playButton.src = 'images/nav/ic_play_arrow_white_24dp_1x.png';
+		playButton.src = 'images/nav/ic_play_arrow_white_24dp_2x.png';
 	}
 	// if we're playing and on the progress screen jump to the next screen
 	if (!progress) return;
@@ -377,7 +385,7 @@ const stopAutoRefreshTimer = () => {
 
 const refreshCheck = () => {
 	// Time has elapsed.
-	if (AutoRefreshCountMs >= AUTO_REFRESH_TIME_MS) {
+	if (AutoRefreshCountMs >= AUTO_REFRESH_TIME_MS && isPlaying()) {
 		loadTwcData();
 		return true;
 	}

server/styles/scss/_page.scss

@@ -213,8 +213,7 @@ button {
 	text-align: right;
 }
 
-#imgPause1x,
-#imgPause2x {
+#imgPause1x {
 	visibility: hidden;
 	position: absolute;
 }
@@ -322,6 +321,31 @@ button {
 		color: white;
 	}
 
+	@media (prefers-color-scheme: light) {
+
+		.loading,
+		.retrying {
+			color: hsl(60, 100%, 30%);
+		}
+
+		.press-here {
+			color: black;
+			cursor: pointer;
+		}
+
+		.failed {
+			color: hsl(0, 100%, 30%);
+		}
+
+		.no-data {
+			color: hsl(0, 0%, 30%);
+		}
+
+		.disabled {
+			color: hsl(0, 0%, 30%);
+		}
+	}
+
 	label {
 		display: block;
 		max-width: 300px;
@@ -338,7 +362,7 @@ button {
 }
 
 #divTwcBottom img {
-	zoom: 150%;
+	zoom: 75%;
 }
 
 #divTwc:fullscreen {

views/index.ejs

@@ -68,11 +68,6 @@
     <div id="divLat"></div>
     <div id="divLng"></div>
   </div>
-
-  <br />
-
-  <img id="imgPause1x" src="images/nav/ic_pause_white_24dp_1x.png" />
-  <img id="imgPause2x" src="images/nav/ic_pause_white_24dp_2x.png" />
   <div id="version" style="display:none">
     <%- version %>
   </div>
@@ -125,16 +120,16 @@
     </div>
     <div id="divTwcBottom">
       <div id="divTwcBottomLeft">
-        <img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" />
-        <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" />
-        <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" />
-        <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" />
+        <img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" />
+        <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" />
+        <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" />
+        <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" />
       </div>
       <div id="divTwcBottomMiddle">
-        <img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" />
+        <img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" />
       </div>
       <div id="divTwcBottomRight">
-        <img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_white_24dp_1x.png" title="Enter Fullscreen" />
+        <img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_white_24dp_2x.png" title="Enter Fullscreen" />
       </div>
     </div>
   </div>