5.5.3

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.5.0",
+	"version": "5.5.3",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.5.0",
+			"version": "5.5.3",
 			"license": "MIT",
 			"dependencies": {
 				"eslint": "^8.21.0",

package.json

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

server/scripts/index.mjs

@@ -3,15 +3,13 @@ import noSleep from './modules/utils/nosleep.mjs';
 import {
 	message as navMessage, isPlaying, resize, resetStatuses, latLonReceived, stopAutoRefreshTimer, registerRefreshData,
 } from './modules/navigation.mjs';
+import { round2 } from './modules/utils/units.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
 });
 
-const overrides = {};
+let fullScreenOverride = false;
-
-let AutoSelectQuery = false;
-let FullScreenOverride = false;
 
 const categories = [
 	'Land Features',
@@ -30,7 +28,7 @@ const init = () => {
 		e.target.select();
 	});
 
-	registerRefreshData(LoadTwcData);
+	registerRefreshData(loadData);
 
 	document.getElementById('NavigateMenu').addEventListener('click', btnNavigateMenuClick);
 	document.getElementById('NavigateRefresh').addEventListener('click', btnNavigateRefreshClick);
@@ -41,11 +39,11 @@ const init = () => {
 	document.getElementById('btnGetGps').addEventListener('click', btnGetGpsClick);
 
 	document.getElementById('divTwc').addEventListener('click', () => {
-		if (document.fullscreenElement) UpdateFullScreenNavigate();
+		if (document.fullscreenElement) updateFullScreenNavigate();
 	});
 
 	document.addEventListener('keydown', documentKeydown);
-	document.addEventListener('touchmove', (e) => { if (FullScreenOverride) e.preventDefault(); });
+	document.addEventListener('touchmove', (e) => { if (fullScreenOverride) e.preventDefault(); });
 
 	$('#frmGetLatLng #txtAddress').devbridgeAutocomplete({
 		serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
@@ -58,21 +56,12 @@ const init = () => {
 			maxSuggestions: 10,
 		},
 		dataType: 'json',
-		transformResult: (response) => {
+		transformResult: (response) => ({
-			if (AutoSelectQuery) {
+			suggestions: response.suggestions.map((i) => ({
-				AutoSelectQuery = false;
+				value: i.text,
-				window.setTimeout(() => {
+				data: i.magicKey,
-					$(ac.suggestionsContainer.children[0]).click();
+			})),
-				}, 1);
+		}),
-			}
-
-			return {
-				suggestions: $.map(response.suggestions, (i) => ({
-					value: i.text,
-					data: i.magicKey,
-				})),
-			};
-		},
 		minChars: 3,
 		showNoSuggestionNotice: true,
 		noSuggestionNotice: 'No results found. Please try a different search string.',
@@ -80,24 +69,23 @@ const init = () => {
 		width: 490,
 	});
 
-	const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
 	$('#frmGetLatLng').on('submit', () => {
-		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).click();
+		const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
+		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).trigger('click');
 		return false;
 	});
 
 	// Auto load the previous query
-	const TwcQuery = localStorage.getItem('TwcQuery');
+	const query = localStorage.getItem('latLonQuery');
-	if (TwcQuery) {
+	const latLon = localStorage.getItem('latLonLon');
-		AutoSelectQuery = true;
+	if (query && latLon) {
 		const txtAddress = document.getElementById('txtAddress');
-		txtAddress.value = TwcQuery;
+		txtAddress.value = query;
-		txtAddress.blur();
+		loadData(JSON.parse(latLon));
-		txtAddress.focus();
 	}
 
-	const TwcPlay = localStorage.getItem('TwcPlay');
+	const twcPlay = localStorage.getItem('play');
-	if (TwcPlay === null || TwcPlay === 'true') postMessage('navButton', 'play');
+	if (twcPlay === null || twcPlay === 'true') postMessage('navButton', 'play');
 
 	document.getElementById('btnClearQuery').addEventListener('click', () => {
 		document.getElementById('spanCity').innerHTML = '';
@@ -106,18 +94,14 @@ const init = () => {
 		document.getElementById('spanRadarId').innerHTML = '';
 		document.getElementById('spanZoneId').innerHTML = '';
 
-		localStorage.removeItem('TwcScrollText');
-		localStorage.removeItem('TwcScrollTextChecked');
-
 		document.getElementById('chkAutoRefresh').checked = true;
-		localStorage.removeItem('TwcAutoRefresh');
+		localStorage.removeItem('autoRefresh');
 
-		document.getElementById('radEnglish').checked = true;
+		localStorage.removeItem('play');
-
-		localStorage.removeItem('TwcPlay');
 		postMessage('navButton', 'play');
 
-		localStorage.removeItem('TwcQuery');
+		localStorage.removeItem('latLonQuery');
+		localStorage.removeItem('latLonLon');
 	});
 
 	// swipe functionality
@@ -129,38 +113,37 @@ const autocompleteOnSelect = async (suggestion, elem) => {
 	// Do not auto get the same city twice.
 	if (elem.previousSuggestionValue === suggestion.value) return;
 
-	if (overrides[suggestion.value]) {
+	const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
-		doRedirectToGeometry(overrides[suggestion.value]);
+		data: {
-	} else {
+			text: suggestion.value,
-		const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
+			magicKey: suggestion.data,
-			data: {
+			f: 'json',
-				text: suggestion.value,
+		},
-				magicKey: suggestion.data,
+	});
-				f: 'json',
-			},
-		});
 
-		const loc = data.locations[0];
+	const loc = data.locations[0];
-		if (loc) {
+	if (loc) {
-			doRedirectToGeometry(loc.feature.geometry);
+		doRedirectToGeometry(loc.feature.geometry);
-		} else {
+	} else {
-			console.error('An unexpected error occurred. Please try a different search string.');
+		console.error('An unexpected error occurred. Please try a different search string.');
-		}
 	}
 };
 
 const doRedirectToGeometry = (geom) => {
-	const latLon = { lat: Math.round2(geom.y, 4), lon: Math.round2(geom.x, 4) };
+	const latLon = { lat: round2(geom.y, 4), lon: round2(geom.x, 4) };
-	LoadTwcData(latLon);
 	// Save the query
-	localStorage.setItem('TwcQuery', document.getElementById('txtAddress').value);
+	localStorage.setItem('latLonQuery', document.getElementById('txtAddress').value);
+	localStorage.setItem('latLonLon', JSON.stringify(latLon));
+
+	// get the data
+	loadData(latLon);
 };
 
 const btnFullScreenClick = () => {
 	if (!document.fullscreenElement) {
-		EnterFullScreen();
+		enterFullScreen();
 	} else {
-		ExitFullscreen();
+		exitFullscreen();
 	}
 
 	if (isPlaying()) {
@@ -169,12 +152,12 @@ const btnFullScreenClick = () => {
 		noSleep(false);
 	}
 
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
 
-const EnterFullScreen = () => {
+const enterFullScreen = () => {
 	const element = document.getElementById('divTwc');
 
 	// Supports most browsers and their versions.
@@ -187,10 +170,10 @@ const EnterFullScreen = () => {
 	} else {
 		// iOS doesn't support FullScreen API.
 		window.scrollTo(0, 0);
-		FullScreenOverride = true;
+		fullScreenOverride = true;
 	}
 	resize();
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	// change hover text and image
 	const img = document.getElementById('ToggleFullScreen');
@@ -198,11 +181,11 @@ const EnterFullScreen = () => {
 	img.title = 'Exit fullscreen';
 };
 
-const ExitFullscreen = () => {
+const exitFullscreen = () => {
 	// exit full-screen
 
-	if (FullScreenOverride) {
+	if (fullScreenOverride) {
-		FullScreenOverride = false;
+		fullScreenOverride = false;
 	}
 
 	if (document.exitFullscreen) {
@@ -224,15 +207,15 @@ const ExitFullscreen = () => {
 
 const btnNavigateMenuClick = () => {
 	postMessage('navButton', 'menu');
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 	return false;
 };
 
-const LoadTwcData = (_latLon) => {
+const loadData = (_latLon) => {
 	// if latlon is provided store it locally
-	if (_latLon) LoadTwcData.latLon = _latLon;
+	if (_latLon) loadData.latLon = _latLon;
 	// get the data
-	const { latLon } = LoadTwcData;
+	const { latLon } = loadData;
 	// if there's no data stop
 	if (!latLon) return;
 
@@ -256,39 +239,39 @@ const swipeCallBack = (direction) => {
 
 const btnNavigateRefreshClick = () => {
 	resetStatuses();
-	LoadTwcData();
+	loadData();
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
 
 const btnNavigateNextClick = () => {
 	postMessage('navButton', 'next');
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
 
 const btnNavigatePreviousClick = () => {
 	postMessage('navButton', 'previous');
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
 
-let NavigateFadeIntervalId = null;
+let navigateFadeIntervalId = null;
 
-const UpdateFullScreenNavigate = () => {
+const updateFullScreenNavigate = () => {
 	document.activeElement.blur();
 	document.getElementById('divTwcBottom').classList.remove('hidden');
 	document.getElementById('divTwcBottom').classList.add('visible');
 
-	if (NavigateFadeIntervalId) {
+	if (navigateFadeIntervalId) {
-		clearTimeout(NavigateFadeIntervalId);
+		clearTimeout(navigateFadeIntervalId);
-		NavigateFadeIntervalId = null;
+		navigateFadeIntervalId = null;
 	}
 
-	NavigateFadeIntervalId = setTimeout(() => {
+	navigateFadeIntervalId = setTimeout(() => {
 		if (document.fullscreenElement) {
 			document.getElementById('divTwcBottom').classList.remove('visible');
 			document.getElementById('divTwcBottom').classList.add('hidden');
@@ -337,11 +320,9 @@ const documentKeydown = (e) => {
 	return false;
 };
 
-Math.round2 = (value, decimals) => Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);
-
 const btnNavigatePlayClick = () => {
 	postMessage('navButton', 'playToggle');
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
@@ -376,13 +357,13 @@ const btnGetGpsClick = async () => {
 	const { City } = data.address;
 	const State = states.getTwoDigitCode(data.address.Region);
 	const Country = data.address.CountryCode;
-	const TwcQuery = `${ZipCode}, ${City}, ${State}, ${Country}`;
+	const query = `${ZipCode}, ${City}, ${State}, ${Country}`;
 
 	const txtAddress = document.getElementById('txtAddress');
-	txtAddress.value = TwcQuery;
+	txtAddress.value = query;
 	txtAddress.blur();
 	txtAddress.focus();
 
 	// Save the query
-	localStorage.setItem('TwcQuery', TwcQuery);
+	localStorage.setItem('latLonQuery', query);
 };

server/scripts/modules/navigation.mjs

@@ -100,8 +100,11 @@ const updateStatus = (value) => {
 	if (!progress) return;
 	progress.drawCanvas(displays, countLoadedDisplays());
 
+	// calculate first enabled display
+	const firstDisplayIndex = displays.findIndex((display) => display.enabled);
+
 	// if this is the first display and we're playing, load it up so it starts playing
-	if (isPlaying() && value.id === 0 && value.status === STATUS.loaded) {
+	if (isPlaying() && value.id === firstDisplayIndex && value.status === STATUS.loaded) {
 		navTo(msg.command.firstFrame);
 	}
 

server/scripts/modules/utils/units.mjs

@@ -1,6 +1,6 @@
 // *********************************** unit conversions ***********************
 
-const round2 = (value, decimals) => Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);
+const round2 = (value, decimals) => Math.trunc(value * 10 ** decimals) / 10 ** decimals;
 
 const kphToMph = (Kph) => Math.round(Kph / 1.60934);
 const celsiusToFahrenheit = (Celsius) => Math.round((Celsius * 9) / 5 + 32);
@@ -14,4 +14,5 @@ export {
 	kilometersToMiles,
 	metersToFeet,
 	pascalToInHg,
+	round2,
 };

server/scripts/modules/weatherdisplay.mjs

@@ -52,7 +52,7 @@ class WeatherDisplay {
 		if (this.elemId === 'progress') return false;
 
 		// get the saved status of the checkbox
-		let savedStatus = window.localStorage.getItem(`${this.elemId}Enabled`);
+		let savedStatus = window.localStorage.getItem(`display-enabled: ${this.elemId}`);
 		if (savedStatus === null) savedStatus = defaultEnabled;
 		if (savedStatus === 'true' || savedStatus === true) {
 			this.enabled = true;
@@ -61,7 +61,7 @@ class WeatherDisplay {
 		}
 
 		// refresh (or initially store the state of the checkbox)
-		window.localStorage.setItem(`${this.elemId}Enabled`, this.enabled);
+		window.localStorage.setItem(`display-enabled: ${this.elemId}`, this.enabled);
 
 		// create a checkbox in the selected displays area
 		const checkbox = document.createElement('template');
@@ -77,7 +77,7 @@ class WeatherDisplay {
 		// update the state
 		this.enabled = e.target.checked;
 		// store the value for the next load
-		window.localStorage.setItem(`${this.elemId}Enabled`, this.enabled);
+		window.localStorage.setItem(`display-enabled: ${this.elemId}`, this.enabled);
 		// calling get data will update the status and actually get the data if we're set to enabled
 		this.getData();
 	}

ws4kp.code-workspace

@@ -50,5 +50,10 @@
 		"[html]": {
 			"editor.defaultFormatter": "j69.ejs-beautify"
 		},
+		"files.exclude": {
+			"**/node_modules": true,
+			"**/debug.log": true,
+			"server/scripts/custom.js": true
+		},
 	},
 }