Merge branch 'share-kiosk'

README.md

@@ -77,6 +77,14 @@ I've made several changes to this Weather Star 4000 simulation compared to the o
 * The nearby cities displayed on screens such as "Latest Observations" and "Regional Forecast" are likely not the same as they were in the 90's. The weather monitoring equipment at these stations move over time for one reason or another, and coming up with a simple formulaic way of finding nearby stations is sufficient to give the same look-and-feel as the original.
 * "Flavors" are not present in this simulation. Flavors refer to the order of the weather information that was shown on the original units. Instead, the order of the displays has been fixed and a checkboxes can be used to turn on and off individual displays. The travel forecast has been defaulted to off so only local information shows for new users.
 
+## Sharing a permalink (bookmarking)
+Selected displays, the forecast city and widescreen setting are sticky from one session to the next. However if you would like to share your exact configuration or bookmark it click the "Copy Permalink" near the bottom of the page. A URL will be copied to your clipboard with all of you selected displays and location. You can then share this link or add it to your bookmarks.
+
+## Kiosk mode
+Kiosk mode can be activated by a checkbox on the page. Note that there is no way out of kiosk mode (except refresh or closing the browser), and the play/pause and other controls will not be available. This is deliberate as a browser's kiosk mode it intended not to be exited or significantly modified.
+
+It's also possible to enter kiosk mode using a permalink. First generate a [Permalink](#sharing-a-permalink-bookmarking), then to the end of it add `&kiosk=true`. Opening this link will load all of the selected displays included in the Permalink, enter kiosk mode immediately upon loading and start playing the forecast.
+
 ## Wish list
 
 As time allows I will be working on the following enhancements.

server/scripts/index.mjs

@@ -4,6 +4,8 @@ import {
 	message as navMessage, isPlaying, resize, resetStatuses, latLonReceived, stopAutoRefreshTimer, registerRefreshData,
 } from './modules/navigation.mjs';
 import { round2 } from './modules/utils/units.mjs';
+import { parseQueryString } from './modules/share.mjs';
+import settings from './modules/settings.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
@@ -81,10 +83,15 @@ const init = () => {
 		return false;
 	};
 
-	// Auto load the previous query
-	const query = localStorage.getItem('latLonQuery');
-	const latLon = localStorage.getItem('latLon');
-	const fromGPS = localStorage.getItem('latLonFromGPS');
+	// attempt to parse the url parameters
+	const parsedParameters = parseQueryString();
+
+	const loadFromParsed = parsedParameters.latLonQuery && parsedParameters.latLon;
+
+	// Auto load the parsed parameters and fall back to the previous query
+	const query = parsedParameters.latLonQuery ?? localStorage.getItem('latLonQuery');
+	const latLon = parsedParameters.latLon ?? localStorage.getItem('latLon');
+	const fromGPS = localStorage.getItem('latLonFromGPS') && !loadFromParsed;
 	if (query && latLon && !fromGPS) {
 		const txtAddress = document.querySelector(TXT_ADDRESS_SELECTOR);
 		txtAddress.value = query;
@@ -94,7 +101,9 @@ const init = () => {
 		btnGetGpsClick();
 	}
 
-	const play = localStorage.getItem('play');
+	// if kiosk mode was set via the query string, also play immediately
+	settings.kiosk.value = parsedParameters['settings-kiosk-checkbox'] === 'true';
+	const play = parsedParameters['settings-kiosk-checkbox'] ?? localStorage.getItem('play');
 	if (play === null || play === 'true') postMessage('navButton', 'play');
 
 	document.querySelector('#btnClearQuery').addEventListener('click', () => {
@@ -176,7 +185,7 @@ const enterFullScreen = () => {
 
 	// Supports most browsers and their versions.
 	const requestMethod = element.requestFullScreen || element.webkitRequestFullScreen
-			|| element.mozRequestFullScreen || element.msRequestFullscreen;
+		|| element.mozRequestFullScreen || element.msRequestFullscreen;
 
 	if (requestMethod) {
 		// Native full screen.

server/scripts/modules/navigation.mjs

@@ -275,7 +275,7 @@ const resize = () => {
 	const heightZoomPercent = (window.innerHeight) / 480;
 
 	const scale = Math.min(widthZoomPercent, heightZoomPercent);
-	if (scale < 1.0 || document.fullscreenElement) {
+	if (scale < 1.0 || document.fullscreenElement || settings.kiosk) {
 		document.querySelector('#container').style.transform = `scale(${scale})`;
 	} else {
 		document.querySelector('#container').style.transform = 'unset';

server/scripts/modules/settings.mjs

@@ -8,7 +8,8 @@ const settings = {};
 
 const init = () => {
 	// create settings
-	settings.wide = new Setting('wide', 'Widescreen', 'boolean', false, wideScreenChange);
+	settings.wide = new Setting('wide', 'Widescreen', 'boolean', false, wideScreenChange, true);
+	settings.kiosk = new Setting('kiosk', 'Kiosk', 'boolean', false, kioskChange, false);
 
 	// generate checkboxes
 	const checkboxes = Object.values(settings).map((d) => d.generateCheckbox());
@@ -28,4 +29,14 @@ const wideScreenChange = (value) => {
 	}
 };
 
+const kioskChange = (value) => {
+	const body = document.querySelector('body');
+	if (value) {
+		body.classList.add('kiosk');
+		window.dispatchEvent(new Event('resize'));
+	} else {
+		body.classList.remove('kiosk');
+	}
+};
+
 export default settings;

server/scripts/modules/share.mjs

@@ -0,0 +1,73 @@
+document.addEventListener('DOMContentLoaded', () => init());
+
+// shorthand mappings for frequently used values
+const specialMappings = {
+	kiosk: 'settings-kiosk-checkbox',
+};
+
+const init = () => {
+	// add action to existing link
+	document.querySelector('#share-link').addEventListener('click', createLink);
+};
+
+const createLink = async (e) => {
+	// cancel default event (click on hyperlink)
+	e.preventDefault();
+	// get all checkboxes on page
+	const checkboxes = document.querySelectorAll('input[type=checkbox]');
+
+	// list to receive checkbox statuses
+	const queryStringElements = {};
+
+	[...checkboxes].forEach((elem) => {
+		if (elem?.id) {
+			queryStringElements[elem.id] = elem?.checked ?? false;
+		}
+	});
+
+	// add the location string
+	queryStringElements.latLonQuery = localStorage.getItem('latLonQuery');
+	queryStringElements.latLon = localStorage.getItem('latLon');
+
+	const queryString = (new URLSearchParams(queryStringElements)).toString();
+
+	const url = new URL(`?${queryString}`, document.location.href);
+
+	try {
+		await navigator.clipboard.writeText(url.toString());
+		const confirmSpan = document.querySelector('#share-link-copied');
+		confirmSpan.style.display = 'inline';
+		setTimeout(() => {
+			confirmSpan.style.display = 'none';
+		}, 5000);
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+const parseQueryString = () => {
+	// return memoized result
+	if (parseQueryString.params) return parseQueryString.params;
+	const urlSearchParams = new URLSearchParams(window.location.search);
+
+	// turn into an array of key-value pairs
+	const paramsArray = [...urlSearchParams];
+
+	// add additional expanded keys
+	paramsArray.forEach((paramPair) => {
+		const expandedKey = specialMappings[paramPair[0]];
+		if (expandedKey) {
+			paramsArray.push([expandedKey, paramPair[1]]);
+		}
+	});
+
+	// memoize result
+	parseQueryString.params = Object.fromEntries(paramsArray);
+
+	return parseQueryString.params;
+};
+
+export {
+	createLink,
+	parseQueryString,
+};

server/scripts/modules/utils/cors.mjs

@@ -1,8 +1,8 @@
 // rewrite some urls for local server
 const rewriteUrl = (_url) => {
 	let url = _url;
-	url = url.replace('https://api.weather.gov/', window.location.href);
-	url = url.replace('https://www.cpc.ncep.noaa.gov/', window.location.href);
+	url = url.replace('https://api.weather.gov/', `${window.location.protocol}//${window.location.host}/`);
+	url = url.replace('https://www.cpc.ncep.noaa.gov/', `${window.location.protocol}//${window.location.host}/`);
 	return url;
 };
 

server/scripts/modules/utils/setting.mjs

@@ -1,19 +1,19 @@
 const SETTINGS_KEY = 'Settings';
 
 class Setting {
-	constructor(shortName, name, type, defaultValue, changeAction) {
+	constructor(shortName, name, type, defaultValue, changeAction, sticky) {
 		// store values
 		this.shortName = shortName;
 		this.name = name;
 		this.defaultValue = defaultValue;
 		this.myValue = defaultValue;
 		this.type = type;
-		// a defualt blank change function is provded
+		// a default blank change function is provided
 		this.changeAction = changeAction ?? (() => {});
 
 		// get existing value if present
 		const storedValue = this.getFromLocalStorage();
-		if (storedValue !== null) {
+		if (sticky && storedValue !== null) {
 			this.myValue = storedValue;
 		}
 
@@ -53,6 +53,7 @@ class Setting {
 	}
 
 	storeToLocalStorage(value) {
+		if (!this.sticky) return;
 		const allSettingsString = localStorage?.getItem(SETTINGS_KEY) ?? '{}';
 		const allSettings = JSON.parse(allSettingsString);
 		allSettings[this.shortName] = value;
@@ -86,7 +87,13 @@ class Setting {
 	}
 
 	set value(newValue) {
+		// update the state
 		this.myValue = newValue;
+		this.checkbox.checked = newValue;
+		this.storeToLocalStorage(this.myValue);
+
+		// call change action
+		this.changeAction(this.myValue);
 	}
 }
 

server/scripts/modules/weatherdisplay.mjs

@@ -5,6 +5,7 @@ import { DateTime } from '../vendor/auto/luxon.mjs';
 import {
 	msg, displayNavMessage, isPlaying, updateStatus, timeZone,
 } from './navigation.mjs';
+import { parseQueryString } from './share.mjs';
 
 class WeatherDisplay {
 	constructor(navId, elemId, name, defaultEnabled) {
@@ -50,8 +51,15 @@ class WeatherDisplay {
 		// no checkbox if progress
 		if (this.elemId === 'progress') return false;
 
-		// get the saved status of the checkbox
-		let savedStatus = window.localStorage.getItem(`display-enabled: ${this.elemId}`);
+		// get url provided state
+		const urlValue = parseQueryString()?.[`${this.elemId}-checkbox`];
+		let urlState;
+		if (urlValue !== undefined) {
+			urlState = urlValue === 'true';
+		}
+
+		// get the saved status of the checkbox, but defer to a value set in the url
+		let savedStatus = urlState ?? window.localStorage.getItem(`display-enabled: ${this.elemId}`);
 		if (savedStatus === null) savedStatus = defaultEnabled;
 		this.isEnabled = !!((savedStatus === 'true' || savedStatus === true));
 

server/styles/scss/_page.scss

@@ -1,4 +1,5 @@
 @use 'shared/_utils'as u;
+@use 'shared/_colors'as c;
 
 @font-face {
 	font-family: "Star4000";
@@ -18,6 +19,10 @@ body {
 			color: lightblue;
 		}
 	}
+
+	&.kiosk {
+		margin: 0px;
+	}
 }
 
 #divQuery {
@@ -301,13 +306,18 @@ body {
 	background: url(../images/BackGround1_1_wide.png)
 }
 
-#divTwc:fullscreen #container {
+#divTwc:fullscreen #container,
+.kiosk #divTwc #container {
 	// background-image: none;
 	width: unset;
 	height: unset;
 	transform-origin: unset;
 }
 
+.kiosk #divTwc #container {
+	transform-origin: 0 0;
+}
+
 #loading {
 	width: 640px;
 	height: 480px;
@@ -343,7 +353,7 @@ body {
 	margin-bottom: 15px;
 }
 
-#enabledDisplays {
+#enabledDisplays, #settings {
 	margin-bottom: 15px;
 	@include u.status-colors();
 
@@ -395,18 +405,24 @@ body {
 	transform: scale(0.75);
 }
 
-#divTwc:fullscreen {
+#divTwc:fullscreen,
+.kiosk #divTwc {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	align-content: center;
 }
+.kiosk #divTwc {
+	justify-content: unset;
+}
 
-#divTwc:fullscreen #display {
+#divTwc:fullscreen #display,
+.kiosk #divTwc #display {
 	position: relative;
 }
 
-#divTwc:fullscreen #divTwcBottom {
+#divTwc:fullscreen #divTwcBottom,
+.kiosk #divTwc #divTwcBottom {
 	display: flex;
 	flex-direction: row;
 	background-color: rgb(0 0 0 / 0.5);
@@ -416,6 +432,14 @@ body {
 	bottom: 0px;
 }
 
+.kiosk {
+	#divTwc #divTwcBottom {
+		>div {
+			display: none;
+		}
+	}
+}
+
 .navButton {
 	cursor: pointer;
 }
@@ -697,4 +721,21 @@ body {
 			}
 		}
 	}
+}
+
+#share-link-copied {
+	color: c.$title-color;
+	display: none;
+}
+
+.kiosk {
+	#divQuery,
+	>.info,
+	>.heading,
+	#enabledDisplays,
+	#settings,
+	#divInfo,
+	#divRefresh {
+		display: none;
+	}
 }

views/index.ejs

@@ -151,6 +151,10 @@
 	<div id='settings'>
 	</div>
 
+	<div class='info'>
+		<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
+	</div>
+
   <div id="divInfo">
     Location: <span id="spanCity"></span> <span id="spanState"></span><br />
     Station Id: <span id="spanStationId"></span><br />

ws4kp.code-workspace

@@ -53,6 +53,9 @@
 		},
 		"files.exclude": {},
 		"files.eol": "\n",
-		"editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+			"source.fixAll.eslint": "explicit"
+		}
+
 	},
 }