Improve kiosk mode startup experience

- Pass query parameters to EJS template for kiosk mode detection
- Add kiosk class to body when enabled via query parameter
- Simplify kiosk mode CSS to hide all elements except main weather display
- Add null checks for progress object to prevent errors in kiosk mode
- Prevent navigation errors when no suitable displays are available

gulp/publish-frontend.mjs

@@ -138,6 +138,7 @@ const compressHtml = async () => {
 			production: version,
 			version,
 			OVERRIDES,
+			query: {},
 		}))
 		.pipe(rename({ extname: '.html' }))
 		.pipe(htmlmin({ collapseWhitespace: true }))

index.mjs

@@ -54,6 +54,7 @@ const index = (req, res) => {
 		production: false,
 		version,
 		OVERRIDES,
+		query: req.query,
 	});
 };
 

server/scripts/modules/navigation.mjs

@@ -36,6 +36,7 @@ const getWeather = async (latLon, haveDataCallback) => {
 
 	if (typeof haveDataCallback === 'function') haveDataCallback(point);
 
+	try {
 	// get stations
 	const stations = await json(point.properties.observationStations);
 
@@ -72,21 +73,29 @@ const getWeather = async (latLon, haveDataCallback) => {
 
 		// draw the progress canvas and hide others
 		hideAllCanvases();
+		if (!settings?.kiosk?.value) {
+			// In normal mode, hide loading screen and show progress
+			// (In kiosk mode, keep the loading screen visible until autoplay starts)
 			document.querySelector('#loading').style.display = 'none';
 			if (progress) {
 				await progress.drawCanvas();
 				progress.showCanvas();
 			}
+		}
 
 		// call for new data on each display
 		displays.forEach((display) => display.getData(weatherParameters));
+	} catch (error) {
+		console.error(`Failed to get weather data: ${error.message}`);
+	}
 };
 
 // receive a status update from a module {id, value}
 const updateStatus = (value) => {
 	if (value.id < 0) return;
-	if (!progress) return;
+	if (!progress && !settings?.kiosk?.value) return;
-	progress.drawCanvas(displays, countLoadedDisplays());
+
+	if (progress) progress.drawCanvas(displays, countLoadedDisplays());
 
 	// first display is hazards and it must load before evaluating the first display
 	if (displays[0].status === STATUS.loading) return;
@@ -153,7 +162,7 @@ const displayNavMessage = (myMessage) => {
 const navTo = (direction) => {
 	// test for a current display
 	const current = currentDisplay();
-	progress.hideCanvas();
+	if (progress) progress.hideCanvas();
 	if (!current) {
 		// special case for no active displays (typically on progress screen)
 		// find the first ready display
@@ -166,6 +175,11 @@ const navTo = (direction) => {
 
 		if (!firstDisplay) return;
 
+		// In kiosk mode, hide the loading screen when we start showing the first display
+		if (settings?.kiosk?.value) {
+			document.querySelector('#loading').style.display = 'none';
+		}
+
 		firstDisplay.navNext(msg.command.firstFrame);
 		firstDisplay.showCanvas();
 		return;
@@ -210,9 +224,12 @@ const setPlaying = (newValue) => {
 		playButton.title = 'Play';
 		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 we're playing and on the progress screen (or in kiosk mode), jump to the next screen
-	if (!progress) return;
+	if (playing && !currentDisplay()) {
-	if (playing && !currentDisplay()) navTo(msg.command.firstFrame);
+		if (progress || settings?.kiosk?.value) {
+			navTo(msg.command.firstFrame);
+		}
+	}
 };
 
 // handle all navigation buttons
@@ -237,7 +254,12 @@ const handleNavButton = (button) => {
 			break;
 		case 'menu':
 			setPlaying(false);
+			if (progress) {
 				progress.showCanvas();
+			} else if (settings?.kiosk?.value) {
+				// In kiosk mode without progress, show the loading screen
+				document.querySelector('#loading').style.display = 'flex';
+			}
 			hideAllCanvases();
 			break;
 		default:

server/styles/scss/_page.scss

@@ -1,5 +1,5 @@
-@use 'shared/_utils'as u;
+@use 'shared/_utils' as u;
-@use 'shared/_colors'as c;
+@use 'shared/_colors' as c;
 
 @font-face {
 	font-family: "Star4000";
@@ -768,15 +768,15 @@ body {
 	display: none;
 }
 
+// Hide instructions in kiosk mode (higher specificity than the show rule)
+body.kiosk #loading .instructions {
+	display: none !important;
+}
+
 .kiosk {
 
-	#divQuery,
+	// In kiosk mode, hide everything except the main weather display
-	>.info,
+	>*:not(#divTwc) {
-	>.related-links,
+		display: none !important;
-	>.heading,
-	#enabledDisplays,
-	#settings,
-	#divInfo {
-		display: none;
 	}
 }

views/index.ejs

@@ -63,7 +63,7 @@
 
 </head>
 
-<body>
+<body<% if (query && query['settings-kiosk-checkbox'] === 'true') { %> class="kiosk"<% } %>>
 
 
 	<div id="divQuery">