6.1.8

.vscode/launch.json

@@ -26,6 +26,18 @@
 			"skipFiles": [
 				"<node_internals>/**"
 			],
+			"args": [
+				"--use-cache"
+			],
+			"type": "node"
+		},
+		{
+			"name": "Data:stations-api",
+			"program": "${workspaceFolder}/datagenerators/stations.mjs",
+			"request": "launch",
+			"skipFiles": [
+				"<node_internals>/**"
+			],
 			"type": "node"
 		},
 		{

Dockerfile.server

@@ -2,7 +2,7 @@ FROM node:24-alpine
 WORKDIR /app
 
 COPY package.json package-lock.json ./
-RUN npm ci --omit=dev --legacy-peer-deps
+RUN npm ci --legacy-peer-deps
 COPY . .
 
 RUN npm run build

README.md

@@ -32,6 +32,18 @@ From a learning standpoint, this codebase make use of a lot of different methods
 * Hand written CSS made easier to mange with SASS
 * A linting library to keep code style consistent
 
+## Quck Start
+
+Ensure you have Node installed.
+```bash
+git clone https://github.com/netbymatt/ws4kp.git
+cd ws4kp
+npm install
+npm start
+```
+
+Open your browser and navigate to https://localhost:8080
+
 ## Does WeatherStar 4000+ work outside of the USA?
 
 This project is tightly coupled to [NOAA's Weather API](https://www.weather.gov/documentation/services-web-api), which is exclusive to the United States. Using NOAA's Weather API is a crucial requirement to provide an authentic WeatherStar 4000+ experience.
@@ -57,14 +69,7 @@ WeatherStar 4000+ supports two deployment modes:
 * Browser-based caching
 * Used by: static file hosting and default `Dockerfile`
 
-## Run Your WeatherStar
+## Other methods to run Ws4kp
-
-Ensure you have Node installed. Clone the repository:
-```bash
-git clone https://github.com/netbymatt/ws4kp.git
-cd ws4kp
-npm install
-```
 
 ### Development Mode (individual JS files, easier debugging)
 ```bash
@@ -309,11 +314,13 @@ If you're unable to pre-set the play state before entering kiosk mode (such as w
 
 ## Community Notes
 
-Thanks to the WeatherStar community for providing these discussions to further extend your retro forecasts!
+Thanks to the WeatherStar+ community for providing these discussions to further extend your retro forecasts!
 
 * [Stream as FFMPEG](https://github.com/netbymatt/ws4kp/issues/37#issuecomment-2008491948)
 * [Weather like it's 1999](https://blog.scottlabs.io/2024/02/weather-like-its-1999/) Raspberry pi, streaming, music and CRT all combined into a complete solution.
 * [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.
 
 ## Customization
 

datagenerators/stations-postprocessor.mjs

@@ -2,6 +2,8 @@
 
 import { readFileSync, writeFileSync } from 'fs';
 
+import * as url from 'node:url';
+
 // Load station data
 const stationInfo = JSON.parse(readFileSync('./datagenerators/output/stations-raw.json', 'utf8'));
 // const regionalCities = JSON.parse(readFileSync('./datagenerators/output/regionalcities.json', 'utf8'));
@@ -1109,139 +1111,184 @@ or where the fallback to the ICAO airport code occurred:
 	jq -c '.[] | select(.name | test("^[A-Z]{3}$")) | {state, city, simple, name}'
 */
 
-const diffMode = process.argv.includes('--diff');
+const readArguments = () => ({
-const onlyProblems = process.argv.includes('--only-problems');
+	diffMode: process.argv.includes('--diff'),
-const noProblems = process.argv.includes('--no-problems');
+	onlyProblems: process.argv.includes('--only-problems'),
-const onlyDuplicates = process.argv.includes('--only-dupes');
+	noProblems: process.argv.includes('--no-problems'),
-const noPriority = process.argv.includes('--no-priority');
+	onlyDuplicates: process.argv.includes('--only-dupes'),
-const noSimple = process.argv.includes('--no-simple');
+	noPriority: process.argv.includes('--no-priority'),
-const noCoordinates = process.argv.includes('--no-coords');
+	noSimple: process.argv.includes('--no-simple'),
-const writeFile = process.argv.includes('--write');
+	noCoordinates: process.argv.includes('--no-coords'),
+	writeFile: process.argv.includes('--write'),
+});
 
-// Process ALL stations at once to get the display name map
+const DEFAULT_OPTIONS = {
-let displayNameMap = processAllStations(stationInfo);
+	diffMode: false,
+	onlyProblems: false,
+	noProblems: false,
+	onlyDuplicates: false,
+	noPriority: false,
+	noSimple: false,
+	noCoordinates: false,
+	writeFile: false,
+};
 
-// Apply priority-based deduplication
+const postProcessor = (_options) => {
-displayNameMap = resolveDuplicatesByPriority(displayNameMap, stationInfo);
+	// combine default and provided options
+	const options = { ...DEFAULT_OPTIONS, ..._options };
 
-const results = [];
+	// Process ALL stations at once to get the display name map
+	let displayNameMap = processAllStations(stationInfo);
 
-// Now iterate through stations and use the pre-computed display names
+	// Apply priority-based deduplication
-const stations = Object.values(stationInfo);
+	displayNameMap = resolveDuplicatesByPriority(displayNameMap, stationInfo);
-stations.forEach((station) => {
-	const originalName = station.city;
-	const processedName = processingUtils.finalCleanup(displayNameMap[station.id]); // Look up by station ID
 
-	// Get airport type and priority for this station
+	const results = [];
-	const airportType = getAirportType(originalName, station.id); // Pass station ID for enhanced detection
-	const priority = getAirportPriority(airportType);
 
-	const potentialIssues = [];
+	// Now iterate through stations and use the pre-computed display names
-	// Check if the processed name contains punctuation (a period at the end is OK)
+	const stations = Object.values(stationInfo);
-	if (/[,;!?/:.]/.test(processedName) && !processedName.endsWith('.')) {
+	stations.forEach((station) => {
-		potentialIssues.push('punctuation');
+		const originalName = station.city;
-	}
+		const processedName = processingUtils.finalCleanup(displayNameMap[station.id]); // Look up by station ID
-	if (processedName.length > 12) {
-		potentialIssues.push('long');
-	}
-	if (processedName.length > 20) {
-		potentialIssues.push('reallyLong');
-	}
-	// check if it contains any digits
-	if (/\d/.test(processedName)) {
-		potentialIssues.push('digits');
-	}
 
-	results.push({
+		// Get airport type and priority for this station
-		id: station.id,
+		const airportType = getAirportType(originalName, station.id); // Pass station ID for enhanced detection
-		lat: station.lat,
+		const priority = getAirportPriority(airportType);
-		lon: station.lon,
+
-		state: station.state,
+		const potentialIssues = [];
-		location: originalName, // original full location name
+		// Check if the processed name contains punctuation (a period at the end is OK)
-		city: processedName, // processed city name for display
+		if (/[,;!?/:.]/.test(processedName) && !processedName.endsWith('.')) {
-		simple: originalName.match(/[^,/;\\-]*/)[0].substr(0, 12).trim(),
+			potentialIssues.push('punctuation');
-		type: airportType,
+		}
-		priority,
+		if (processedName.length > 12) {
-		potentialIssues,
+			potentialIssues.push('long');
+		}
+		if (processedName.length > 20) {
+			potentialIssues.push('reallyLong');
+		}
+		// check if it contains any digits
+		if (/\d/.test(processedName)) {
+			potentialIssues.push('digits');
+		}
+
+		results.push({
+			id: station.id,
+			lat: station.lat,
+			lon: station.lon,
+			state: station.state,
+			location: originalName, // original full location name
+			city: processedName, // processed city name for display
+			simple: originalName.match(/[^,/;\\-]*/)[0].substr(0, 12).trim(),
+			type: airportType,
+			priority,
+			potentialIssues,
+		});
 	});
-});
 
-// Check for duplicates by state
+	// Check for duplicates by state
-const cleanedMapByState = new Map();
+	const cleanedMapByState = new Map();
 
-results.forEach((result) => {
+	results.forEach((result) => {
-	const { state } = result;
+		const { state } = result;
-	if (!cleanedMapByState.has(state)) {
+		if (!cleanedMapByState.has(state)) {
-		cleanedMapByState.set(state, new Map());
+			cleanedMapByState.set(state, new Map());
-	}
+		}
-	const stateMap = cleanedMapByState.get(state);
+		const stateMap = cleanedMapByState.get(state);
-	if (stateMap.has(result.city)) {
+		if (stateMap.has(result.city)) {
-		stateMap.get(result.city).push(result);
+			stateMap.get(result.city).push(result);
-	} else {
+		} else {
-		stateMap.set(result.city, [result]);
+			stateMap.set(result.city, [result]);
-	}
-});
-
-cleanedMapByState.forEach((stateMap, _state) => {
-	stateMap.forEach((originals, _cleaned) => {
-		if (originals.length > 1) {
-			originals.forEach((original) => {
-				if (!original.potentialIssues.includes('duplicate')) {
-					original.potentialIssues.push('duplicate');
-				}
-			});
 		}
 	});
-});
 
-// Filter results if requested
+	cleanedMapByState.forEach((stateMap, _state) => {
-let finalResults = results;
+		stateMap.forEach((originals, _cleaned) => {
-if (onlyProblems) {
+			if (originals.length > 1) {
-	finalResults = results.filter((r) => r.potentialIssues.length > 0);
+				originals.forEach((original) => {
-}
+					if (!original.potentialIssues.includes('duplicate')) {
-if (onlyDuplicates) {
+						original.potentialIssues.push('duplicate');
-	finalResults = finalResults.filter((r) => r.potentialIssues.includes('duplicate'));
+					}
-}
+				});
+			}
+		});
+	});
 
-const outputResult = finalResults.map((result) => {
+	// Filter results if requested
-	let outputItem = result;
+	let finalResults = results;
-
+	if (options.onlyProblems) {
-	// Don't include lat or long in diff mode
+		finalResults = results.filter((r) => r.potentialIssues.length > 0);
-	if (noCoordinates || diffMode) {
+	}
-		const {
+	if (options.onlyDuplicates) {
-			lat: _lat, lon: _lon, ...resultWithoutLocation
+		finalResults = finalResults.filter((r) => r.potentialIssues.includes('duplicate'));
-		} = result;
-		outputItem = resultWithoutLocation;
 	}
 
-	// Don't include potentialIssues when --no-problems is specified
+	const outputResult = finalResults.map((result) => {
-	if (noProblems || diffMode) {
+		let outputItem = result;
-		const { potentialIssues: _potentialIssues, ...resultWithoutIssues } = outputItem;
-		outputItem = resultWithoutIssues;
-	}
 
-	// Remove type and priority if --no-priority is specified
+		// Don't include lat or long in diff mode
-	if (noPriority || diffMode) {
+		if (options.noCoordinates || options.diffMode) {
-		const { type: _type, priority: _priority, ...resultWithoutPriority } = outputItem;
+			const {
-		outputItem = resultWithoutPriority;
+				lat: _lat, lon: _lon, ...resultWithoutLocation
-	}
+			} = result;
+			outputItem = resultWithoutLocation;
+		}
 
-	// remove simple field if --no-simple is specified
+		// Don't include potentialIssues when --no-problems is specified
-	if (noSimple || diffMode) {
+		if (options.noProblems || options.diffMode) {
-		const { simple: _simple, ...resultWithoutSimple } = outputItem;
+			const { potentialIssues: _potentialIssues, ...resultWithoutIssues } = outputItem;
-		outputItem = resultWithoutSimple;
+			outputItem = resultWithoutIssues;
-	}
+		}
 
-	return outputItem;
+		// Remove type and priority if --no-priority is specified
-});
+		if (options.noPriority || options.diffMode) {
+			const { type: _type, priority: _priority, ...resultWithoutPriority } = outputItem;
+			outputItem = resultWithoutPriority;
+		}
+
+		// remove simple field if --no-simple is specified
+		if (options.noSimple || options.diffMode) {
+			const { simple: _simple, ...resultWithoutSimple } = outputItem;
+			outputItem = resultWithoutSimple;
+		}
+
+		return outputItem;
+	});
 
-if (writeFile) {
 	const fileResults = results.map(({
-		simple: _simple, type: _type, potentialIssues: _potentialIssues, ...rest
+		simple: _simple, type: _type, potentialIssues: _potentialIssues, location: _location, ...rest
 	}) => rest);
 
-	writeFileSync('./datagenerators/output/stations.json', compactStringifyToObject(fileResults));
+	if (options.writeFile) {
-	console.log(`Wrote ${fileResults.length} processed stations to datagenerators/output/stations.json`);
+		writeFileSync('./datagenerators/output/stations.json', compactStringifyToObject(fileResults));
-} else {
+		console.log(`Wrote ${fileResults.length} processed stations to datagenerators/output/stations.json`);
-	console.log(compactStringifyToArray(outputResult));
+	} else {
+		console.log(compactStringifyToArray(outputResult));
+	}
+
+	// array to output object
+	const returnObject = {};
+	fileResults.forEach((item) => {
+		returnObject[item.id] = item;
+	});
+
+	return returnObject;
+};
+
+// determine if running from command line or module
+const commandLine = (() => {
+	if (import.meta.url.startsWith('file:')) { // (A)
+		const modulePath = url.fileURLToPath(import.meta.url);
+		if (process.argv[1] === modulePath) { // (B)
+			return true;
+		}
+	}
+	return false;
 }
+)();
+
+// run post processor if called from command line
+if (commandLine) {
+	postProcessor(readArguments());
+}
+
+export default postProcessor;

datagenerators/stations.mjs

@@ -1,3 +1,4 @@
+/* eslint-disable no-loop-func */
 // list all stations in a single file
 // only find stations with 4 letter codes
 
@@ -6,67 +7,91 @@ import https from './https.mjs';
 import states from './stations-states.mjs';
 import chunk from './chunk.mjs';
 import overrides from './stations-overrides.mjs';
+import postProcessor from './stations-postprocessor.mjs';
+
+// check for cached flag
+const USE_CACHE = process.argv.includes('--use-cache');
 
 // skip stations starting with these letters
 const skipStations = ['U', 'C', 'H', 'W', 'Y', 'T', 'S', 'M', 'O', 'L', 'A', 'F', 'B', 'N', 'V', 'R', 'D', 'E', 'I', 'G', 'J'];
 
 // chunk the list of states
-const chunkStates = chunk(states, 1);
+const chunkStates = chunk(states, 3);
 
 // store output
 const output = {};
+let completed = 0;
 
-// process all chunks
+// get data from api if desired
-for (let i = 0; i < chunkStates.length; i += 1) {
+if (!USE_CACHE) {
-	const stateChunk = chunkStates[i];
+	// process all chunks
-	// loop through states
+	for (let i = 0; i < chunkStates.length; i += 1) {
+		const stateChunk = chunkStates[i];
+		// loop through states
 
-	// eslint-disable-next-line no-await-in-loop
+		// eslint-disable-next-line no-await-in-loop
-	await Promise.allSettled(stateChunk.map(async (state) => {
+		await Promise.allSettled(stateChunk.map(async (state) => {
-		try {
+			try {
-			let stations;
+				let stations;
-			let next = `https://api.weather.gov/stations?state=${state}`;
+				let next = `https://api.weather.gov/stations?state=${state}`;
-			let round = 0;
+				let round = 0;
-			do {
+				do {
-				console.log(`Getting: ${state}-${round}`);
+					console.log(`Getting: ${state}-${round}`);
-				// get list and parse the JSON
+					// get list and parse the JSON
-				// eslint-disable-next-line no-await-in-loop
+					// eslint-disable-next-line no-await-in-loop
-				const stationsRaw = await https(next);
+					const stationsRaw = await https(next);
-				stations = JSON.parse(stationsRaw);
+					stations = JSON.parse(stationsRaw);
-				// filter stations for 4 letter identifiers
+					// filter stations for 4 letter identifiers
-				const stationsFiltered4 = stations.features.filter((station) => station.properties.stationIdentifier.match(/^[A-Z]{4}$/));
+					const stationsFiltered4 = stations.features.filter((station) => station.properties.stationIdentifier.match(/^[A-Z]{4}$/));
-				// filter against starting letter
+					// filter against starting letter
-				const stationsFiltered = stationsFiltered4.filter((station) => !skipStations.includes(station.properties.stationIdentifier.slice(0, 1)));
+					const stationsFiltered = stationsFiltered4.filter((station) => !skipStations.includes(station.properties.stationIdentifier.slice(0, 1)));
-				// add each resulting station to the output
+					// add each resulting station to the output
-				stationsFiltered.forEach((station) => {
+					stationsFiltered.forEach((station) => {
-					const id = station.properties.stationIdentifier;
+						const id = station.properties.stationIdentifier;
-					if (output[id]) {
+						if (output[id]) {
-						console.log(`Duplicate station: ${state}-${id}`);
+							console.log(`Duplicate station: ${state}-${id}`);
-						return;
+							return;
-					}
+						}
-					// get any overrides if available
+						output[id] = {
-					const override = overrides[id] ?? {};
+							id,
-					output[id] = {
+							city: station.properties.name,
-						id,
+							state,
-						city: station.properties.name,
+							lat: station.geometry.coordinates[1],
-						state,
+							lon: station.geometry.coordinates[0],
-						lat: station.geometry.coordinates[1],
+						};
-						lon: station.geometry.coordinates[0],
+					});
-						// finally add the overrides
+					next = stations?.pagination?.next;
-						...override,
+					round += 1;
-					};
+					// write the output
-				});
+					writeFileSync('./datagenerators/output/stations-raw.json', JSON.stringify(output, null, 2));
-				next = stations?.pagination?.next;
+				}
-				round += 1;
+				while (next && stations.features.length > 0);
-				// write the output
+				completed += 1;
-				writeFileSync('./datagenerators/output/stations-raw.json', JSON.stringify(output, null, 2));
+				console.log(`Complete: ${state} ${completed}/${states.length}`);
+				return true;
+			} catch {
+				console.error(`Unable to get state: ${state}`);
+				return false;
 			}
-			while (next && stations.features.length > 0);
+		}));
-			console.log(`Complete: ${state}`);
+	}
-			return true;
-		} catch {
-			console.error(`Unable to get state: ${state}`);
-			return false;
-		}
-	}));
 }
+
+// run the post processor
+// data is passed through the file stations-raw.json
+const postProcessed = postProcessor();
+
+// apply any overrides
+Object.entries(overrides).forEach(([id, values]) => {
+	// check for existing value
+	if (postProcessed[id]) {
+		// apply the overrides
+		postProcessed[id] = {
+			...postProcessed[id],
+			...values,
+		};
+	}
+});
+
+// write final file to disk
+writeFileSync('./datagenerators/output/stations.json', JSON.stringify(postProcessed, null, 2));

gulp/publish-frontend.mjs

@@ -97,23 +97,27 @@ const copyCss = () => src(cssSources)
 const htmlSources = [
 	'views/*.ejs',
 ];
-const compressHtml = async () => {
+const packageJson = await readFile('package.json');
-	const packageJson = await readFile('package.json');
+let { version } = JSON.parse(packageJson);
-	const { version } = JSON.parse(packageJson);
+const previewVersion = async () => {
-
+	// generate a relatively unique timestamp for cache invalidation of the preview site
-	return src(htmlSources)
+	const now = new Date();
-		.pipe(ejs({
+	const msNow = now.getTime() % 1_000_000;
-			production: version,
+	version = msNow.toString();
-			serverAvailable: false,
-			version,
-			OVERRIDES,
-			query: {},
-		}))
-		.pipe(rename({ extname: '.html' }))
-		.pipe(htmlmin({ collapseWhitespace: true }))
-		.pipe(dest('./dist'));
 };
 
+const compressHtml = async () => src(htmlSources)
+	.pipe(ejs({
+		production: version,
+		serverAvailable: false,
+		version,
+		OVERRIDES,
+		query: {},
+	}))
+	.pipe(rename({ extname: '.html' }))
+	.pipe(htmlmin({ collapseWhitespace: true }))
+	.pipe(dest('./dist'));
+
 const otherFiles = [
 	'server/robots.txt',
 	'server/manifest.json',
@@ -205,7 +209,7 @@ const buildDist = series(clean, parallel(buildJs, compressJsVendor, copyCss, com
 // upload_images could be in parallel with upload, but _images logs a lot and has little changes
 // by running upload last the majority of the changes will be at the bottom of the log for easy viewing
 const publishFrontend = series(buildDist, uploadImages, upload, invalidate);
-const stageFrontend = series(buildDist, uploadImagesPreview, uploadPreview, invalidatePreview);
+const stageFrontend = series(previewVersion, buildDist, uploadImagesPreview, uploadPreview, invalidatePreview);
 
 export default publishFrontend;
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "6.1.3",
+	"version": "6.1.8",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",
@@ -56,6 +56,7 @@
 		"dotenv": "^17.0.1",
 		"ejs": "^3.1.5",
 		"express": "^5.1.0",
-		"metar-taf-parser": "^9.0.0"
+		"metar-taf-parser": "^9.0.0",
+		"npm": "^11.6.0"
 	}
 }

server/scripts/modules/currentweatherscroll.mjs

@@ -97,6 +97,12 @@ const drawScreen = async () => {
 		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');
+	}
 
 	if (typeof thisScreen === 'string') {
 		// only a string

server/scripts/modules/extendedforecast.mjs

@@ -137,10 +137,6 @@ const parse = (fullForecast, forecastUrl) => {
 		}
 		// get the object to modify/populate
 		const fDay = forecast[destIndex];
-		// high temperature will always be last in the source array so it will overwrite the low values assigned below
-		fDay.icon = getLargeIcon(period.icon);
-		fDay.text = shortenExtendedForecastText(period.shortForecast);
-		fDay.dayName = dates[destIndex];
 
 		// preload the icon
 		preloadImg(fDay.icon);
@@ -148,6 +144,9 @@ const parse = (fullForecast, forecastUrl) => {
 		if (period.isDaytime) {
 			// day time is the high temperature
 			fDay.high = period.temperature;
+			fDay.icon = getLargeIcon(period.icon);
+			fDay.text = shortenExtendedForecastText(period.shortForecast);
+			fDay.dayName = dates[destIndex];
 			// Wait for the corresponding night period to increment
 		} else {
 			// low temperature

server/scripts/modules/hazards.mjs

@@ -103,7 +103,10 @@ class Hazards extends WeatherDisplay {
 			// show alert indicator
 			if (unViewed > 0) alert.classList.add('show');
 			// draw the canvas to calculate the new timings and activate hazards in the slide deck again
-			this.drawLongCanvas();
+			// unless this has been disabled
+			if (this.isEnabled) {
+				this.drawLongCanvas();
+			}
 		} catch (error) {
 			console.error(`Unexpected Active Alerts error: ${error.message}`);
 			if (this.isEnabled) this.setStatus(STATUS.failed);
@@ -115,7 +118,7 @@ class Hazards extends WeatherDisplay {
 		this.getDataCallback();
 
 		if (!superResult) {
-			this.setStatus(STATUS.loaded);
+			// Don't override status - super.getData() already set it to STATUS.disabled
 			return;
 		}
 		this.drawLongCanvas();

server/scripts/modules/utils/metar.mjs

@@ -3,13 +3,32 @@ import { parseMetar } from '../../vendor/auto/metar-taf-parser.mjs';
 // eslint-disable-next-line import/extensions
 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;
+	}
+}
+
 /**
  * Augment observation data by parsing METAR when API fields are missing
  * @param {Object} observation - The observation object from the API
  * @returns {Object} - Augmented observation with parsed METAR data filled in
  */
 const augmentObservationWithMetar = (observation) => {
-	if (!observation?.rawMessage) {
+	// check for a metar message and for unusable ios versions
+	if (!observation?.rawMessage || (isIos && !iosVersionOk)) {
 		return observation;
 	}
 

server/styles/scss/_hazards.scss

@@ -1,5 +1,9 @@
-@use 'shared/_colors' as c;
+@use 'shared/_colors'as c;
-@use 'shared/_utils' as u;
+@use 'shared/_utils'as u;
+
+#hazards-html.weather-display {
+	background-image: url('../images/backgrounds/7.png');
+}
 
 .weather-display .main.hazards {
 	&.main {
@@ -7,6 +11,7 @@
 		height: 480px;
 		background-color: rgb(112, 35, 35);
 
+
 		.hazard-lines {
 			min-height: 400px;
 			padding-top: 10px;
@@ -26,3 +31,7 @@
 		}
 	}
 }
+
+.wide.hazards #container {
+	background: url(../images/backgrounds/7-wide.png);
+}

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";
@@ -161,6 +161,7 @@ body {
 #divTwcMain {
 	width: 640px;
 	height: 480px;
+	position: relative;
 
 	.wide & {
 		width: 854px;

server/styles/scss/_weather-display.scss

@@ -1,5 +1,5 @@
-@use 'shared/_colors' as c;
+@use 'shared/_colors'as c;
-@use 'shared/_utils' as u;
+@use 'shared/_utils'as u;
 
 .weather-display {
 	width: 640px;
@@ -116,9 +116,11 @@
 	.scroll {
 		@include u.text-shadow(3px, 1.5px);
 		width: 640px;
-		height: 70px;
+		height: 77px;
 		overflow: hidden;
 		margin-top: 3px;
+		position: relative;
+		z-index: 1;
 
 		&.hazard {
 			background-color: rgb(112, 35, 35);
@@ -159,3 +161,18 @@
 
 	}
 }
+
+#scroll-bg {
+	position: absolute;
+	bottom: 0px;
+	height: 77px;
+	width: 640px;
+
+	&.hazard {
+		background-color: rgb(112, 35, 35);
+	}
+}
+
+.wide #scroll-bg {
+	width: 854px;
+}

views/index.ejs

@@ -134,6 +134,7 @@
           <%- include('partials/hazards.ejs') %>
         </div>
       </div>
+			<div id="scroll-bg"></div>
     </div>
     <div id="divTwcBottom">
       <div id="divTwcBottomLeft">