6.2.8

Update README.md clarifying displays if you're within one of the high…

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,4 +11,5 @@ Please do not report issues with api.weather.gov being down. It's a new service
 
 Please include:
 * Web browser and OS
-* Forecast Information text block from the very bottom of the web page
+* Headend Information text block from the very bottom of the web page
+* How you're running Weatherstar (Node, Dockerfile, Dockerfile.server, etc.)

README.md

@@ -179,7 +179,7 @@ I've made several changes to this Weather Star 4000 simulation compared to the o
 * Radar displays the timestamp of the image.
 * A new hour-by-hour graph of the temperature, cloud cover and precipitation chances for the next 24 hours.
 * A new hourly forecast display for the next 24 hours is available, and is shown in the style of the travel cities forecast. (off by default because it duplicates the hourly graph)
-* The SPC Outlook is shown in the style of the old air quality screen. This shows the probability of severe weather over the next 3 days at your location.
+* The SPC Outlook is shown in the style of the old air quality screen. This shows the probability of severe weather over the next 3 days at your location. SPC outlook only displays if you're within one of the highlight areas over the next 3 day. You can view the [maps](https://www.weather.gov/crh/outlooks) and pick a location within one of the risk categories to see if the screen is working for you.
 * The "Local Forecast" and "Extended Forecast" provide several additional days of information compared to the original format in the 90s.
 * The original music has been replaced. More info in [Music](#music).
 * Marine forecast (tides) is not available as it is not reliably part of the new API.
@@ -321,6 +321,7 @@ Thanks to the WeatherStar+ community for providing these discussions to further
 * [ws4channels](https://github.com/rice9797/ws4channels) A Dockerized Node.js application to stream WeatherStar 4000 data into Channels DVR using Puppeteer and FFmpeg.
 * [SSL Certificates](https://github.com/netbymatt/ws4kp/issues/135) Discussion about how to host with an SSL certificate (enables geolocation).
 * [Changing playlists](https://github.com/netbymatt/ws4kp/issues/138) Possible ways to automatically change the playlist on a schedule.
+* [Customize Travel Forecast Cities](https://github.com/netbymatt/ws4kp/issues/146#issuecomment-3363940202)
 
 ## Customization
 

datagenerators/output/travelcities.json

@@ -84,8 +84,8 @@
 		"Latitude": 29.7633,
 		"Longitude": -95.3633,
 		"point": {
-			"x": 65,
-			"y": 97,
+			"x": 63,
+			"y": 95,
 			"wfo": "HGX"
 		}
 	},

gulp/update-vendor.mjs

@@ -5,8 +5,8 @@ import rename from 'gulp-rename';
 const clean = () => deleteAsync(['./server/scripts/vendor/auto/**']);
 
 const vendorFiles = [
-	'./node_modules/luxon/build/es6/luxon.js',
-	'./node_modules/luxon/build/es6/luxon.js.map',
+	'./node_modules/luxon/build/es6/luxon.mjs',
+	'./node_modules/luxon/build/es6/luxon.mjs.map',
 	'./node_modules/nosleep.js/dist/NoSleep.js',
 	'./node_modules/suncalc/suncalc.js',
 	'./node_modules/swiped-events/src/swiped-events.js',
@@ -23,7 +23,6 @@ const copy = () => src(vendorFiles)
 		path.dirname = path.dirname.toLowerCase();
 		path.basename = path.basename.toLowerCase();
 		path.extname = path.extname.toLowerCase();
-		if (path.basename === 'luxon') path.extname = '.mjs';
 	}))
 	.pipe(dest('./server/scripts/vendor/auto'));
 

index.mjs

@@ -8,6 +8,7 @@ import {
 import playlist from './src/playlist.mjs';
 import OVERRIDES from './src/overrides.mjs';
 import cache from './proxy/cache.mjs';
+import devTools from './src/com.chrome.devtools.mjs';
 
 const travelCities = JSON.parse(await readFile('./datagenerators/output/travelcities.json'));
 const regionalCities = JSON.parse(await readFile('./datagenerators/output/regionalcities.json'));
@@ -168,6 +169,7 @@ if (process.env?.DIST === '1') {
 	app.use('/geoip', geoip);
 	app.use('/resources', express.static('./server/scripts/modules'));
 	app.get('/', index);
+	app.get('/.well-known/appspecific/com.chrome.devtools.json', devTools);
 	app.get('*name', express.static('./server', staticOptions));
 }
 

nginx.conf

@@ -10,8 +10,10 @@ server {
 
     add_header X-Weatherstar true always;
 
+    include /etc/nginx/includes/wsqs_redirect.conf;
+
     location / {
-        index  redirect.html index.html index.htm;
+        index index.html index.htm;
         try_files $uri $uri/ =404;
     }
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "6.1.11",
+	"version": "6.2.8",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",
@@ -8,6 +8,7 @@
 		"start": "node index.mjs",
 		"stop": "pkill -f 'node index.mjs' || echo 'No process found'",
 		"test": "echo \"Error: no test specified\" && exit 1",
+		"build:travelcities": "node datagenerators/travelcities.mjs",
 		"build:css": "sass --style=compressed ./server/styles/scss/main.scss ./server/styles/main.css",
 		"build": "gulp buildDist",
 		"lint": "eslint ./server/scripts/**/*.mjs ./proxy/**/*.mjs ./src/**/*.mjs *.mjs",
@@ -50,13 +51,12 @@
 		"swiped-events": "^1.1.4",
 		"terser-webpack-plugin": "^5.3.6",
 		"webpack": "^5.99.9",
-		"webpack-stream": "^7.0.0"
+		"webpack-stream": "^7.0.0",
+		"metar-taf-parser": "^9.0.0"
 	},
 	"dependencies": {
 		"dotenv": "^17.0.1",
 		"ejs": "^3.1.5",
-		"express": "^5.1.0",
-		"metar-taf-parser": "^9.0.0",
-		"npm": "^11.6.0"
+		"express": "^5.1.0"
 	}
 }

server/scripts/index.mjs

@@ -106,17 +106,34 @@ const init = async () => {
 
 	// attempt to parse the url parameters
 	const parsedParameters = parseQueryString();
-	const loadFromParsed = parsedParameters.latLonQuery && parsedParameters.latLon;
+	const loadFromParsed = !!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) {
+	if (parsedParameters.latLonQuery && !parsedParameters.latLon) {
 		const txtAddress = document.querySelector(TXT_ADDRESS_SELECTOR);
-		txtAddress.value = query;
-		loadData(JSON.parse(latLon));
+		txtAddress.value = parsedParameters.latLonQuery;
+		const geometry = await geocodeLatLonQuery(parsedParameters.latLonQuery);
+		if (geometry) {
+			doRedirectToGeometry(geometry);
+		}
+	} else if (latLon && !fromGPS) {
+		// update in-page search box if using cached data, or parsed parameter
+		if ((query && !loadFromParsed) || (parsedParameters.latLonQuery && loadFromParsed)) {
+			const txtAddress = document.querySelector(TXT_ADDRESS_SELECTOR);
+			txtAddress.value = query;
+		}
+		// use lat-long lookup if that's all that was provided in the query string
+		if (loadFromParsed && parsedParameters.latLon && !parsedParameters.latLonQuery) {
+			const { lat, lon } = JSON.parse(latLon);
+			getForecastFromLatLon(lat, lon, true);
+		} else {
+			// otherwise use pre-stored data	
+			loadData(JSON.parse(latLon));
+		}
 	}
 	if (fromGPS) {
 		btnGetGpsClick();
@@ -162,6 +179,26 @@ const init = async () => {
 	document.querySelector('#container').addEventListener('swiped-right', () => swipeCallBack('right'));
 };
 
+const geocodeLatLonQuery = async (query) => {
+	try {
+		const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
+			data: {
+				text: query,
+				f: 'json',
+			},
+		});
+
+		const loc = data.locations?.[0];
+		if (loc) {
+			return loc.feature.geometry;
+		}
+		return null;
+	} catch (error) {
+		console.error('Geocoding failed:', error);
+		return null;
+	}
+};
+
 const autocompleteOnSelect = async (suggestion) => {
 	// Note: it's fine that this uses json instead of safeJson since it's infrequent and user-initiated
 	const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {

server/scripts/modules/currentweather.mjs

@@ -13,6 +13,7 @@ import {
 } from './utils/units.mjs';
 import { debugFlag } from './utils/debug.mjs';
 import { isDataStale, enhanceObservationWithMapClick } from './utils/mapclick.mjs';
+import { DateTime } from '../vendor/auto/luxon.mjs';
 
 // some stations prefixed do not provide all the necessary data
 const skipStations = ['U', 'C', 'H', 'W', 'Y', 'T', 'S', 'M', 'O', 'L', 'A', 'F', 'B', 'N', 'V', 'R', 'D', 'E', 'I', 'G', 'J'];
@@ -49,7 +50,7 @@ class CurrentWeather extends WeatherDisplay {
 				// eslint-disable-next-line no-await-in-loop
 				candidateObservation = await safeJson(`${station.id}/observations`, {
 					data: {
-						limit: 2, // we need the two most recent observations to calculate pressure direction
+						limit: 5, // we need the two most recent observations to calculate pressure direction, and to back fill any missing data
 					},
 					retryCount: 3,
 					stillWaiting: () => this.stillWaiting(),
@@ -231,7 +232,7 @@ class CurrentWeather extends WeatherDisplay {
 		this.setAutoReload();
 		if (stillWaiting) this.stillWaitingCallbacks.push(stillWaiting);
 		return new Promise((resolve) => {
-			if (this.data) resolve(this.data);
+			if (this.data) resolve({ data: this.data, parameters: this.weatherParameters });
 			// data not available, put it into the data callback queue
 			this.getDataCallbacks.push(() => resolve(this.data));
 		});
@@ -266,7 +267,7 @@ const parseData = (data) => {
 	const kilometersConverter = distanceKilometers();
 	const pressureConverter = pressure();
 
-	const observations = data.features[0].properties;
+	const observations = backfill(data.features);
 	// values from api are provided in metric
 	data.observations = observations;
 	data.Temperature = temperatureConverter(observations.temperature.value);
@@ -306,6 +307,46 @@ const parseData = (data) => {
 	return data;
 };
 
+// default to the latest data in the provided observations, but use older data if something is missing
+const backfill = (data) => {
+	// make easy to use timestamps
+	const sortedData = data.map((observation) => {
+		observation.timestamp = DateTime.fromISO(observation.properties.timestamp);
+		return observation;
+	});
+
+	// sort by timestamp with [0] being the earliest
+	sortedData.sort((a, b) => b.timestamp - a.timestamp);
+
+	// create the result data
+	const result = {};
+
+	// backfill each property
+	Object.keys(sortedData[0].properties).forEach((key) => {
+		// qualify the key (must have value)
+		if (Object.hasOwn(sortedData[0].properties[key], 'value')) {
+			// backfill this property
+			result[key] = backfillProperty(sortedData, key);
+		} else {
+			// use the property as is
+			result[key] = sortedData[0].properties[key];
+		}
+	});
+
+	return result;
+};
+
+// return the property with a value closest to the [0] index
+// reduce returns the first non-null value in the array
+const backfillProperty = (data, key) => data.reduce(
+	(prev, cur) => {
+		const curValue = cur.properties?.[key]?.value;
+		if (prev.value === null && curValue !== null && curValue !== undefined) return cur.properties[key];
+		return prev;
+	},
+	{ value: null }, // null is the default provided by the api
+);
+
 const display = new CurrentWeather(1, 'current-weather');
 registerDisplay(display);
 

server/scripts/modules/currentweatherscroll.mjs

@@ -1,5 +1,4 @@
 import { locationCleanup } from './utils/string.mjs';
-import { elemForEach } from './utils/elem.mjs';
 import getCurrentWeather from './currentweather.mjs';
 import { currentDisplay } from './navigation.mjs';
 import getHazards from './hazards.mjs';
@@ -12,6 +11,16 @@ const TICK_INTERVAL_MS = 500; // milliseconds per tick
 const secondsToTicks = (seconds) => Math.ceil((seconds * 1000) / TICK_INTERVAL_MS);
 const DEFAULT_UPDATE = secondsToTicks(4.0); // 4 second default for each current conditions
 
+// items on page
+let mainScroll;
+let fixedScroll;
+let header;
+document.addEventListener('DOMContentLoaded', () => {
+	mainScroll = document.querySelector('#container>.scroll');
+	fixedScroll = document.querySelector('#container>.scroll .fixed');
+	header = document.querySelector('#container>.scroll .scroll-header');
+});
+
 // local variables
 let interval;
 let screenIndex = 0;
@@ -23,6 +32,8 @@ let defaultScreensLoaded = true;
 // start drawing conditions
 // reset starts from the first item in the text scroll list
 const start = () => {
+	// show the block
+	show();
 	// if already started, draw the screen on a reset flag and return
 	if (interval) {
 		if (resetFlag) drawScreen();
@@ -62,6 +73,7 @@ const incrementInterval = (force) => {
 	const display = currentDisplay();
 	if (!display?.okToDrawCurrentConditions) {
 		stop(display?.elemId === 'progress');
+		hide();
 		return;
 	}
 	screenIndex = (screenIndex + 1) % (workingScreens.length);
@@ -72,7 +84,7 @@ const incrementInterval = (force) => {
 
 const drawScreen = async () => {
 	// get the conditions
-	const data = await getCurrentWeather();
+	const { data, parameters } = await getCurrentWeather();
 
 	// create a data object (empty if no valid current weather conditions)
 	const scrollData = data || {};
@@ -88,21 +100,11 @@ const drawScreen = async () => {
 	// if we have no current weather and no hazards, there's nothing to display
 	if (!data && (!scrollData.hazards || scrollData.hazards.length === 0)) return;
 
-	const thisScreen = workingScreens[screenIndex](scrollData);
+	const thisScreen = workingScreens[screenIndex](scrollData, parameters);
 
 	// update classes on the scroll area
-	elemForEach('.weather-display .scroll', (elem) => {
-		elem.classList.forEach((cls) => { if (cls !== 'scroll') elem.classList.remove(cls); });
-		// no scroll on progress
-		if (elem.parentElement.id === 'progress-html') return;
-		thisScreen?.classes?.forEach((cls) => elem.classList.add(cls));
-	});
-	// special case for red background on hazard scroll
-	const mainScrollBg = document.getElementById('scroll-bg');
-	mainScrollBg.className = '';
-	if (thisScreen?.classes?.includes('hazard')) {
-		mainScrollBg.classList.add('hazard');
-	}
+	mainScroll.classList.forEach((cls) => { if (cls !== 'scroll') mainScroll.classList.remove(cls); });
+	thisScreen?.classes?.forEach((cls) => mainScroll.classList.add(cls));
 
 	if (typeof thisScreen === 'string') {
 		// only a string
@@ -131,9 +133,7 @@ const hazards = (data) => {
 	// test for data
 	if (!data.hazards || data.hazards.length === 0) return false;
 
-	// since the hazard scroll element has no left/right margins, pad the beginning and end with non-breaking spaces
-	const padding = ' '.repeat(4);
-	const hazard = `${padding}${data.hazards[0].properties.event} ${data.hazards[0].properties.description}${padding}`;
+	const hazard = `${data.hazards[0].properties.event} ${data.hazards[0].properties.description}`;
 
 	return {
 		text: hazard,
@@ -196,17 +196,12 @@ let workingScreens = [...baseScreens, ...additionalScreens];
 
 // internal draw function with preset parameters
 const drawCondition = (text) => {
-	// update all html scroll elements
-	elemForEach('.weather-display .scroll .fixed', (elem) => {
-		elem.innerHTML = text;
-	});
+	fixedScroll.innerHTML = text;
 	setHeader('');
 };
 
 const setHeader = (text) => {
-	elemForEach('.weather-display .scroll .scroll-header', (elem) => {
-		elem.innerHTML = text ?? '';
-	});
+	header.innerHTML = text ?? '';
 };
 
 // reset the screens back to the original set
@@ -229,14 +224,14 @@ const drawScrollCondition = (screen) => {
 	scrollElement.classList.add('scroll-area');
 	scrollElement.innerHTML = screen.text;
 	// add it to the page to get the width
-	document.querySelector('.weather-display .scroll .fixed').innerHTML = scrollElement.outerHTML;
+	fixedScroll.innerHTML = scrollElement.outerHTML;
 	// grab the width
-	const { scrollWidth, clientWidth } = document.querySelector('.weather-display .scroll .fixed .scroll-area');
+	const { scrollWidth, clientWidth } = document.querySelector('#container>.scroll .fixed .scroll-area');
 
 	// calculate the scroll distance and set a minimum scroll
 	const scrollDistance = Math.max(scrollWidth - clientWidth, 0);
-	// calculate the scroll time (scaled by global speed setting)
-	const scrollTime = scrollDistance / SCROLL_SPEED * settings.speed.value;
+	// calculate the scroll time (scaled by global speed setting), minimum 2s (4s when added to start and end delays)
+	const scrollTime = Math.max(scrollDistance / SCROLL_SPEED * settings.speed.value, 2);
 	// add 1 second pause at the end of the scroll animation
 	const endPauseTime = 1.0;
 	const totalAnimationTime = scrollTime + endPauseTime;
@@ -252,17 +247,13 @@ const drawScrollCondition = (screen) => {
 	scrollElement.style.backfaceVisibility = 'hidden'; // Force hardware acceleration
 	scrollElement.style.perspective = '1000px'; // Enable 3D rendering context
 
-	elemForEach('.weather-display .scroll .fixed', (elem) => {
-		elem.innerHTML = '';
-		elem.append(scrollElement.cloneNode(true));
-	});
+	fixedScroll.innerHTML = '';
+	fixedScroll.append(scrollElement.cloneNode(true));
 
 	// start the scroll after the specified delay
 	setTimeout(() => {
 		// change the transform to trigger the scroll
-		elemForEach('.weather-display .scroll .fixed .scroll-area', (elem) => {
-			elem.style.transform = `translateX(-${scrollDistance.toFixed(0)}px)`;
-		});
+		document.querySelector('#container>.scroll .fixed .scroll-area').style.transform = `translateX(-${scrollDistance.toFixed(0)}px)`;
 	}, startDelayTime * 1000);
 };
 
@@ -270,9 +261,19 @@ const parseMessage = (event) => {
 	if (event?.data?.type === 'current-weather-scroll') {
 		if (event.data?.method === 'start') start();
 		if (event.data?.method === 'reload') stop(true);
+		if (event.data?.method === 'show') show();
+		if (event.data?.method === 'hide') hide();
 	}
 };
 
+const show = () => {
+	mainScroll.style.display = 'block';
+};
+
+const hide = () => {
+	mainScroll.style.display = 'none';
+};
+
 const screenCount = () => workingScreens.length;
 const atDefault = () => defaultScreensLoaded;
 
@@ -283,6 +284,8 @@ window.CurrentWeatherScroll = {
 	addScreen,
 	reset,
 	start,
+	show,
+	hide,
 	screenCount,
 	atDefault,
 };
@@ -291,6 +294,9 @@ export {
 	addScreen,
 	reset,
 	start,
+	show,
+	hide,
 	screenCount,
 	atDefault,
+	hazards,
 };

server/scripts/modules/custom-rss-feed.mjs

@@ -1,5 +1,5 @@
 import Setting from './utils/setting.mjs';
-import { reset as resetScroll, addScreen as addScroll } from './currentweatherscroll.mjs';
+import { reset as resetScroll, addScreen as addScroll, hazards } from './currentweatherscroll.mjs';
 import { json } from './utils/fetch.mjs';
 
 let firstRun = true;
@@ -42,8 +42,9 @@ const parseFeed = (textInput) => {
 		return;
 	}
 
-	// add single text scroll
+	// add single text scroll after hazards if present
 	resetScroll();
+	addScroll(hazards);
 	addScroll(
 		() => (
 			{
@@ -81,6 +82,8 @@ const getFeed = async (url) => {
 
 	// reset the scroll, then add the screens
 	resetScroll();
+	// add the hazards scroll first
+	addScroll(hazards);
 	titles.forEach((title) => {
 		// data is provided to the screen handler, so we return a function
 		addScroll(

server/scripts/modules/hourly.mjs

@@ -3,7 +3,7 @@
 import STATUS from './status.mjs';
 import { DateTime, Interval, Duration } from '../vendor/auto/luxon.mjs';
 import { safeJson } from './utils/fetch.mjs';
-import { temperature as temperatureUnit, distanceKilometers } from './utils/units.mjs';
+import { temperature as temperatureUnit, windSpeed as windUnit } from './utils/units.mjs';
 import { getHourlyIcon } from './icons.mjs';
 import { directionToNSEW } from './utils/calc.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
@@ -191,7 +191,7 @@ class Hourly extends WeatherDisplay {
 const parseForecast = async (data) => {
 	// get unit converters
 	const temperatureConverter = temperatureUnit();
-	const distanceConverter = distanceKilometers();
+	const windConverter = windUnit();
 
 	// parse data
 	const temperature = expand(data.temperature.values);
@@ -210,8 +210,8 @@ const parseForecast = async (data) => {
 		temperature: temperatureConverter(temperature[idx]),
 		temperatureUnit: temperatureConverter.units,
 		apparentTemperature: temperatureConverter(apparentTemperature[idx]),
-		windSpeed: distanceConverter(windSpeed[idx]),
-		windUnit: distanceConverter.units,
+		windSpeed: windConverter(windSpeed[idx]),
+		windUnit: windConverter.units,
 		windDirection: directionToNSEW(windDirection[idx]),
 		probabilityOfPrecipitation: probabilityOfPrecipitation[idx],
 		skyCover: skyCover[idx],

server/scripts/modules/navigation.mjs

@@ -109,6 +109,7 @@ const getWeather = async (latLon, haveDataCallback) => {
 		weatherParameters.forecast = point.properties.forecast;
 		weatherParameters.forecastGridData = point.properties.forecastGridData;
 		weatherParameters.stations = stations.features;
+		weatherParameters.relativeLocation = point.properties.relativeLocation.properties;
 
 		// update the main process for display purposes
 		populateWeatherParameters(weatherParameters, point.properties);
@@ -330,6 +331,7 @@ const handleNavButton = (button) => {
 			break;
 		case 'menu':
 			setPlaying(false);
+			postMessage({ type: 'current-weather-scroll', method: 'hide' });
 			if (progress) {
 				progress.showCanvas();
 			} else if (settings?.kiosk?.value) {

server/scripts/modules/progress.mjs

@@ -22,7 +22,9 @@ class Progress extends WeatherDisplay {
 	}
 
 	async drawCanvas(displays, loadedCount) {
+		// skip drawing if not displayed, or not yet available
 		if (!this.elem) return;
+		if (this.elem.classList.contains('show') === false) return;
 		super.drawCanvas();
 
 		// get the progress bar cover (makes percentage)

server/scripts/modules/spc-outlook.mjs

@@ -57,6 +57,7 @@ class SpcOutlook extends WeatherDisplay {
 	}
 
 	async getData(weatherParameters, refresh) {
+		if (weatherParameters) this.weatherParameters = weatherParameters;
 		if (!super.getData(weatherParameters, refresh)) return;
 
 		// SPC outlook data does not need to be reloaded on a location change, only during silent refresh
@@ -93,7 +94,7 @@ class SpcOutlook extends WeatherDisplay {
 			}
 		}
 		// parse the data
-		this.data = testAllPoints([weatherParameters.longitude, weatherParameters.latitude], this.rawOutlookData);
+		this.data = testAllPoints([this.weatherParameters.longitude, this.weatherParameters.latitude], this.rawOutlookData);
 
 		// check if there's a "risk" for any of the three days, otherwise skip the SPC Outlook screen
 		if (this.data.reduce((prev, cur) => prev || !!cur, false)) {

server/scripts/modules/utils/metar.mjs

@@ -5,21 +5,22 @@ import en from '../../vendor/auto/locale/en.js';
 
 // metar-taf-parser requires regex lookbehind
 // this does not work in iOS < 16.4
-// this is a detection algorithm for iOS versions
-const isIos = /iP(ad|od|hone)/i.test(window.navigator.userAgent);
-let iosVersionOk = false;
-if (isIos) {
-	// regex match the version string
-	const iosVersionRaw = /OS (\d+)_(\d+)/.exec(window.navigator.userAgent);
-	// check for match
-	if (iosVersionRaw) {
-		// break into parts
-		const iosVersionMajor = parseInt(iosVersionRaw[1], 10);
-		const iosVersionMinor = parseInt(iosVersionRaw[2], 10);
-		if (iosVersionMajor > 16) iosVersionOk = true;
-		if (iosVersionMajor === 16 && iosVersionMinor >= 4) iosVersionOk = true;
+// this is a detection algorithm for missing lookbehind support
+const supportsRegexLookAheadLookBehindCheck = () => {
+	try {
+		return (
+			// deliberately using RegExp for broader browser support during check
+			/* eslint-disable prefer-regex-literals */
+			'hibyehihi'
+				.replace(new RegExp('(?<=hi)hi', 'g'), 'hello')
+				.replace(new RegExp('hi(?!bye)', 'g'), 'hey') === 'hibyeheyhello'
+			/* eslint-enable prefer-regex-literals */
+		);
+	} catch {
+		return false;
 	}
-}
+};
+const supportsRegexLookAheadLookBehind = supportsRegexLookAheadLookBehindCheck();
 
 /**
  * Augment observation data by parsing METAR when API fields are missing
@@ -27,8 +28,8 @@ if (isIos) {
  * @returns {Object} - Augmented observation with parsed METAR data filled in
  */
 const augmentObservationWithMetar = (observation) => {
-	// check for a metar message and for unusable ios versions
-	if (!observation?.rawMessage || (isIos && !iosVersionOk)) {
+	// check for a metar message and for regex lookbehind support
+	if (!observation?.rawMessage || (!supportsRegexLookAheadLookBehind)) {
 		return observation;
 	}
 

server/scripts/modules/weatherdisplay.mjs

@@ -172,6 +172,7 @@ class WeatherDisplay {
 		if (this.screenIndex < 0) this.screenIndex = 0;
 		if (this.okToDrawCurrentDateTime) this.drawCurrentDateTime();
 		if (this.okToDrawCurrentConditions) postMessage({ type: 'current-weather-scroll', method: 'start' });
+		if (this.okToDrawCurrentConditions === false) postMessage({ type: 'current-weather-scroll', method: 'hide' });
 	}
 
 	finishDraw() {

server/scripts/vendor/auto/luxon.mjs

@@ -8127,7 +8127,7 @@ function friendlyDateTime(dateTimeish) {
   }
 }
 
-const VERSION = "3.7.1";
+const VERSION = "3.7.2";
 
 export { DateTime, Duration, FixedOffsetZone, IANAZone, Info, Interval, InvalidZone, Settings, SystemZone, VERSION, Zone };
-//# sourceMappingURL=luxon.js.map
+//# sourceMappingURL=luxon.mjs.map

server/styles/scss/_weather-display.scss

@@ -112,31 +112,32 @@
 
 	}
 
+}
 
-	.scroll {
-		@include u.text-shadow(3px, 1.5px);
+#container>.scroll {
+	display: none;
+	@include u.text-shadow(3px, 1.5px);
+	width: 640px;
+	height: 77px;
+	overflow: hidden;
+	margin-top: 3px;
+	position: absolute;
+	bottom: 0px;
+	z-index: 1;
+
+	&.hazard {
+		background-color: rgb(112, 35, 35);
+	}
+
+	.scroll-container {
 		width: 640px;
-		height: 77px;
-		overflow: hidden;
-		margin-top: 3px;
-		position: relative;
-		z-index: 1;
-
-		&.hazard {
-			background-color: rgb(112, 35, 35);
-		}
 
 		.fixed,
 		.scroll-header {
 			margin-left: 55px;
 			margin-right: 55px;
 			overflow: hidden;
-		}
-
-		// Remove margins for hazard scrolls to maximize text space
-		&.hazard .fixed {
-			margin-left: 0;
-			margin-right: 0;
+			white-space: nowrap;
 		}
 
 		.scroll-header {
@@ -158,21 +159,17 @@
 				// left: calc((elem width) - 640px);
 			}
 		}
-
 	}
+
+
+
 }
 
-#scroll-bg {
-	position: absolute;
-	bottom: 0px;
-	height: 77px;
-	width: 640px;
-
-	&.hazard {
-		background-color: rgb(112, 35, 35);
-	}
-}
-
-.wide #scroll-bg {
+.wide #container>.scroll {
 	width: 854px;
+	margin-left: -107px;
+
+	.scroll-container {
+		margin-left: 107px;
+	}
 }

src/com.chrome.devtools.mjs

@@ -0,0 +1,25 @@
+import path from 'path';
+
+// get values for devtools json
+const uuid = 'd2bd1130-560f-4c8e-b2c5-e91073784964';
+const root = path.resolve('server');
+
+const DEVTOOLS_CONFIG = {
+	workspace: {
+		uuid,
+		root,
+	},
+};
+
+const devTools = (req, res) => {
+	// test for localhost
+	if (['127.0.0.1', '::1', '::ffff:127.0.0.1'].includes(req.ip)) {
+		console.log(DEVTOOLS_CONFIG);
+		res.json(DEVTOOLS_CONFIG);
+	} else {
+		// not localhost
+		res.status(404).send('File not found');
+	}
+};
+
+export default devTools;

static-env-handler.sh

@@ -12,6 +12,9 @@ url_encode() {
 
 # build query string from WSQS_ env vars
 while IFS='=' read -r key val; do
+    # Skip empty lines
+    [ -z "$key" ] && continue
+
     # Remove WSQS_ prefix and convert underscores to hyphens
     key="${key#WSQS_}"
     key="${key//_/-}"
@@ -23,11 +26,16 @@ while IFS='=' read -r key val; do
         QS="${key}=${encoded_val}"
     fi
 done << EOF
-$(env | grep '^WSQS_')
+$(env | grep '^WSQS_' || true)
 EOF
 
+mkdir -p /etc/nginx/includes
 
 if [ -n "$QS" ]; then
+    # Escape the query string for use in JavaScript (escape backslashes and single quotes)
+    QS_ESCAPED=$(printf '%s' "$QS" | sed "s/\\\\/\\\\\\\\/g; s/'/\\\'/g")
+
+    # Generate redirect.html with JavaScript logic
     cat > "$ROOT/redirect.html" <<EOF
 <!DOCTYPE html>
 <html>
@@ -35,10 +43,36 @@ if [ -n "$QS" ]; then
   <meta charset="utf-8" />
   <title>Redirecting</title>
   <meta http-equiv="refresh" content="0;url=/index.html?$QS" />
+  <script>
+    (function() {
+      var wsqsParams = '$QS_ESCAPED';
+      var currentParams = window.location.search.substring(1);
+      var targetParams = currentParams || wsqsParams;
+      window.location.replace('/index.html?' + targetParams);
+    })();
+  </script>
 </head>
 <body></body>
 </html>
 EOF
+
+    # Generate nginx config for conditional redirects
+    cat > /etc/nginx/includes/wsqs_redirect.conf <<'EOF'
+location = / {
+    if ($args = '') {
+        rewrite ^ /redirect.html last;
+    }
+    rewrite ^/$ /index.html?$args? redirect;
+}
+
+location = /index.html {
+    if ($args = '') {
+        rewrite ^ /redirect.html last;
+    }
+}
+EOF
+else
+    touch /etc/nginx/includes/wsqs_redirect.conf
 fi
 
 exec nginx -g 'daemon off;'

views/index.ejs

@@ -133,8 +133,8 @@
         <div id="hazards-html" class="weather-display">
           <%- include('partials/hazards.ejs') %>
         </div>
+        <%- include('partials/scroll.ejs') %>
       </div>
-			<div id="scroll-bg"></div>
     </div>
     <div id="divTwcBottom">
       <div id="divTwcBottomLeft">
@@ -186,16 +186,24 @@
       </div>
     </div>
 
-    <div class='heading'>Forecast Information</div>
+    <div class='heading'>Headend Information</div>
     <div id="divInfo">
-      Location: <span id="spanCity"></span> <span id="spanState"></span><br />
-      Station Id: <span id="spanStationId"></span><br />
-      Radar Id: <span id="spanRadarId"></span><br />
-      Zone Id: <span id="spanZoneId"></span><br />
-      Office Id: <span id="spanOfficeId"></span><br />
-      Grid X,Y: <span id="spanGridPoint"></span><br />
-      Music: <span id="musicTrack">Not playing</span><br />
-      Ws4kp Version: <span><%- version %></span>
+      <div class="header">Location:</div>
+      <div class="header"><span id="spanCity"></span> <span id="spanState"></span></div>
+      <div class="header">Station Id:</div>
+      <div class="header"><span id="spanStationId"></span></div>
+      <div class="header">Radar Id:</div>
+      <div class="header"><span id="spanRadarId"></span></div>
+      <div class="header">Zone Id:</div>
+      <div class="header"><span id="spanZoneId"></span></div>
+      <div class="header">Office Id:</div>
+      <div class="header"><span id="spanOfficeId"></span></div>
+      <div class="header">Grid X,Y:</div>
+      <div class="header"><span id="spanGridPoint"></span></div>
+      <div class="header">Music:</div>
+      <div class="header"><span id="musicTrack">Not playing</span></div>
+      <div class="header">Ws4kp Version:</div>
+      <div class="header"><span><%- version %></span></div>
     </div>
   </div>
 

views/partials/almanac.ejs

@@ -21,5 +21,4 @@
       </div>
     </div>
   </div>
-</div>
-<%- include('scroll.ejs') %>
+</div>

views/partials/current-weather.ejs

@@ -1,43 +1,42 @@
 <%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true, hasTime: true}) %>
-	<div class="main has-scroll has-box current-weather">
-		<div class="weather template">
-			<div class="left col">
-				<div class="temp center"></div>
-				<div class="condition center"></div>
-				<div class="icon center"><img src="" /></div>
-				<div class="wind-container">
-					<div class="wind-label">Wind:</div>
-					<div class="wind"></div>
-				</div>
-				<div class="wind-gusts"></div>
-			</div>
-			<div class="right col">
-				<div class="location"></div>
-				<div class="row">
-					<div class="label">Humidity:</div>
-					<div class="humidity value"></div>
-				</div>
-				<div class="row">
-					<div class="label">Dewpoint:</div>
-					<div class="dewpoint value"></div>
-				</div>
-				<div class="row">
-					<div class="label">Ceiling:</div>
-					<div class="ceiling value"></div>
-				</div>
-				<div class="row">
-					<div class="label">Visibility:</div>
-					<div class="visibility value"></div>
-				</div>
-				<div class="row">
-					<div class="label">Pressure:</div>
-					<div class="pressure value"></div>
-				</div>
-				<div class="row">
-					<div class="heat-index-label label"></div>
-					<div class="heat-index value"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll has-box current-weather">
+  <div class="weather template">
+    <div class="left col">
+      <div class="temp center"></div>
+      <div class="condition center"></div>
+      <div class="icon center"><img src="" /></div>
+      <div class="wind-container">
+        <div class="wind-label">Wind:</div>
+        <div class="wind"></div>
+      </div>
+      <div class="wind-gusts"></div>
+    </div>
+    <div class="right col">
+      <div class="location"></div>
+      <div class="row">
+        <div class="label">Humidity:</div>
+        <div class="humidity value"></div>
+      </div>
+      <div class="row">
+        <div class="label">Dewpoint:</div>
+        <div class="dewpoint value"></div>
+      </div>
+      <div class="row">
+        <div class="label">Ceiling:</div>
+        <div class="ceiling value"></div>
+      </div>
+      <div class="row">
+        <div class="label">Visibility:</div>
+        <div class="visibility value"></div>
+      </div>
+      <div class="row">
+        <div class="label">Pressure:</div>
+        <div class="pressure value"></div>
+      </div>
+      <div class="row">
+        <div class="heat-index-label label"></div>
+        <div class="heat-index value"></div>
+      </div>
+    </div>
+  </div>
+</div>

views/partials/extended-forecast.ejs

@@ -19,5 +19,4 @@
       </div>
     </div>
   </div>
-</div>
-<%- include('scroll.ejs') %>
+</div>

views/partials/hourly-graph.ejs

@@ -1,24 +1,23 @@
 <%- include('header.ejs', {title: 'Hourly Graph' , hasTime: false }) %>
 <div class="main has-scroll hourly-graph">
-		<div class="top-right template ">
-			<div class="temperature">Temperature</div>
-			<div class="cloud">Cloud %</div>
-			<div class="rain">Precip %</div>
-		</div>
-		<div class="y-axis">
-			<div class="label l-1">75</div>
-			<div class="label l-2">65</div>
-			<div class="label l-3">55</div>
-		</div>
-		<div class="chart">
-			<img id="chart-area"></img>
-		</div>
-		<div class="x-axis">
-			<div class="label l-1">12a</div>
-			<div class="label l-2">6a</div>
-			<div class="label l-3">12p</div>
-			<div class="label l-4">6p</div>
-			<div class="label l-5">12a</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+  <div class="top-right template ">
+    <div class="temperature">Temperature</div>
+    <div class="cloud">Cloud %</div>
+    <div class="rain">Precip %</div>
+  </div>
+  <div class="y-axis">
+    <div class="label l-1">75</div>
+    <div class="label l-2">65</div>
+    <div class="label l-3">55</div>
+  </div>
+  <div class="chart">
+    <img id="chart-area"></img>
+  </div>
+  <div class="x-axis">
+    <div class="label l-1">12a</div>
+    <div class="label l-2">6a</div>
+    <div class="label l-3">12p</div>
+    <div class="label l-4">6p</div>
+    <div class="label l-5">12a</div>
+  </div>
+</div>

views/partials/hourly.ejs

@@ -1,18 +1,17 @@
 <%- include('header.ejs', {title: 'Hourly Forecast' , hasTime: true }) %>
-	<div class="main has-scroll hourly">
-		<div class="column-headers">
-			<div class="temp">TEMP</div>
-			<div class="like">LIKE</div>
-			<div class="wind">WIND</div>
-		</div>
-		<div class="hourly-lines">
-			<div class="hourly-row template">
-				<div class="hour"></div>
-				<div class="icon"><img /></div>
-				<div class="temp"></div>
-				<div class="like"></div>
-				<div class="wind"></div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll hourly">
+  <div class="column-headers">
+    <div class="temp">TEMP</div>
+    <div class="like">LIKE</div>
+    <div class="wind">WIND</div>
+  </div>
+  <div class="hourly-lines">
+    <div class="hourly-row template">
+      <div class="hour"></div>
+      <div class="icon"><img /></div>
+      <div class="temp"></div>
+      <div class="like"></div>
+      <div class="wind"></div>
+    </div>
+  </div>
+</div>

views/partials/latest-observations.ejs

@@ -1,20 +1,19 @@
 <%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true, hasTime: true }) %>
-	<div class="main has-scroll latest-observations has-box">
-		<div class="container">
-			<div class="column-headers">
-				<div class="temp english">&deg;F</div>
-				<div class="temp metric">&deg;C</div>
-				<div class="weather">Weather</div>
-				<div class="wind">Wind</div>
-			</div>
-			<div class="observation-lines">
-				<div class="observation-row template">
-					<div class="location"></div>
-					<div class="temp"></div>
-					<div class="weather"></div>
-					<div class="wind"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll latest-observations has-box">
+  <div class="container">
+    <div class="column-headers">
+      <div class="temp english">&deg;F</div>
+      <div class="temp metric">&deg;C</div>
+      <div class="weather">Weather</div>
+      <div class="wind">Wind</div>
+    </div>
+    <div class="observation-lines">
+      <div class="observation-row template">
+        <div class="location"></div>
+        <div class="temp"></div>
+        <div class="weather"></div>
+        <div class="wind"></div>
+      </div>
+    </div>
+  </div>
+</div>

views/partials/regional-forecast.ejs

@@ -1,14 +1,13 @@
 <%- include('header.ejs', {titleDual:{ top: 'Regional' , bottom: 'Observations' }, hasTime: true }) %>
-	<div class="main has-scroll regional-forecast">
-		<div class="map"><img src="images/maps/basemap.webp" /></div>
-		<div class="location-container">
-			<div class="location template">
-				<div class="icon">
-					<img src="" />
-				</div>
-				<div class="city"></div>
-				<div class="temp"></div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll regional-forecast">
+  <div class="map"><img src="images/maps/basemap.webp" /></div>
+  <div class="location-container">
+    <div class="location template">
+      <div class="icon">
+        <img src="" />
+      </div>
+      <div class="city"></div>
+      <div class="temp"></div>
+    </div>
+  </div>
+</div>

views/partials/scroll.ejs

@@ -1,5 +1,6 @@
 <div class="scroll">
-	<div class="scrolling template"></div>
-	<div class="scroll-header"></div>
-	<div class="fixed"></div>
+  <div class="scroll-container">
+    <div class="scroll-header"></div>
+    <div class="fixed"></div>
+  </div>
 </div>

views/partials/spc-outlook.ejs

@@ -1,20 +1,19 @@
 <%- include('header.ejs', {titleDual:{ top: 'Storm Prediction' , bottom: 'Center Outlook' }, hasTime: true}) %>
-	<div class="main has-scroll spc-outlook">
-		<div class="container">
-			<div class="risk-levels">
-				<div class="risk-level">High</div>
-				<div class="risk-level">Moderate</div>
-				<div class="risk-level">Enhanced</div>
-				<div class="risk-level">Slight</div>
-				<div class="risk-level">Marginal</div>
-				<div class="risk-level">T'Storm</div>
-			</div>
-			<div class="days">
-				<div class="day template">
-					<div class="day-name">Monday</div>
-					<div class="risk-bar"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll spc-outlook">
+  <div class="container">
+    <div class="risk-levels">
+      <div class="risk-level">High</div>
+      <div class="risk-level">Moderate</div>
+      <div class="risk-level">Enhanced</div>
+      <div class="risk-level">Slight</div>
+      <div class="risk-level">Marginal</div>
+      <div class="risk-level">T'Storm</div>
+    </div>
+    <div class="days">
+      <div class="day template">
+        <div class="day-name">Monday</div>
+        <div class="risk-bar"></div>
+      </div>
+    </div>
+  </div>
+</div>

views/partials/travel.ejs

@@ -12,5 +12,4 @@
       <div class="temp high"></div>
     </div>
   </div>
-</div>
-<%- include('scroll.ejs') %>
+</div>

ws4kp.code-workspace

@@ -73,7 +73,10 @@
 		"editor.formatOnSave": true,
 		"editor.codeActionsOnSave": {
 			"source.fixAll.eslint": "explicit"
-		}
+		},
+		"cSpell.words": [
+			"hibyehihi"
+		]
 	},
 	"extensions": {
 		"recommendations": [