shorten permalinks close #206

current observations don't show like when the same close #207
restructure wide/enhanced settings close #205
2026-04-14 07:39:29 -07:00 · 2026-04-13 16:19:26 -05:00 · 2026-04-13 14:54:18 -05:00 · 2026-04-13 14:36:15 -05:00 · 2026-04-08 23:36:33 -05:00 · 2026-04-08 23:34:10 -05:00
65 changed files with 2218 additions and 1561 deletions
--- a/.github/ISSUE_TEMPLATE/screen_enhance.md
+++ b/.github/ISSUE_TEMPLATE/screen_enhance.md
@@ -0,0 +1,11 @@
+---
+name: Screen Enhancement
+about: Items and tasks related to the screen enhancement project
+title: '[Project]: '
+labels: screen-enhance
+projects: ['netbymatt/5']
+assignees: ''
+
+---
+
+Describe the task, how it affects the overall project and what is considered complete.
--- a/.github/workflows/build-docker.yaml
+++ b/.github/workflows/build-docker.yaml
@@ -4,6 +4,8 @@ on:
  push:
    branches:
      - '**'
+      - '!screen-enhance'
+      - '!screen-enhance/**'
    tags:
      - 'v*.*.*'
      - 'v*.*'
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ 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
+## Quick Start

 Ensure you have Node installed.
 ```bash
@@ -139,8 +139,8 @@ services:
      # Following the "Sharing a Permalink" example below, here are a few environment variables defined. Visit that section for a
      # more complete list of configuration options.
      - WSQS_latLonQuery=Orlando International Airport Orlando FL USA
-      - WSQS_hazards_checkbox=false
-      - WSQS_current_weather_checkbox=true
+      - WSQS_hazards=false
+      - WSQS_current_weather=true
    ports:
      - 8080:8080 # change the first 8080 to meet your local network needs
    restart: unless-stopped
@@ -192,13 +192,13 @@ Selected displays, the forecast city and widescreen setting are sticky from one

 Your permalink will be very long. Here is an example for the Orlando International Airport:
 ```
-https://weatherstar.netbymatt.com/?hazards-checkbox=false&current-weather-checkbox=true&latest-observations-checkbox=true&hourly-checkbox=false&hourly-graph-checkbox=true&travel-checkbox=false&regional-forecast-checkbox=true&local-forecast-checkbox=true&extended-forecast-checkbox=true&almanac-checkbox=false&spc-outlook-checkbox=true&radar-checkbox=true&settings-wide-checkbox=false&settings-kiosk-checkbox=false&settings-scanLines-checkbox=false&settings-speed-select=1.00&settings-units-select=us&latLonQuery=Orlando+International+Airport%2C+Orlando%2C+FL%2C+USA&latLon=%7B%22lat%22%3A28.431%2C%22lon%22%3A-81.3076%7D
+https://weatherstar.netbymatt.com/?hazards=false&current-weather=true&latest-observations=true&hourly=false&hourly-graph=true&travel=false&regional-forecast=true&local-forecast=true&extended-forecast=true&almanac=false&spc-outlook=true&radar=true&wide=false&kiosk=false&scanLines=false&speed-select=1.00&units-select=us&latLonQuery=Orlando+International+Airport%2C+Orlando%2C+FL%2C+USA&latLon=%7B%22lat%22%3A28.431%2C%22lon%22%3A-81.3076%7D
 ```
 You can also build your own permalink. Any omitted settings will be filled with defaults. Here are a few examples:
 ```
 https://weatherstar.netbymatt.com/?latLonQuery=Orlando+International+Airport
 https://weatherstar.netbymatt.com/?kiosk=true
-https://weatherstar.netbymatt.com/?settings-units-select=metric
+https://weatherstar.netbymatt.com/?units-select=metric
 ```

 ### Kiosk mode
@@ -213,7 +213,7 @@ When serving this via the built-in Express server, it's possible to define envir

 Environment variables can be added to the command line as usual, or via a .env file which is parsed with [dotenv](https://github.com/motdotla/dotenv). Both methods have the same effect.

-Environment variables that are to be added to the default query string are prefixed with `WSQS_` and then use the same key/value pairs generated by the [Permalink](#sharing-a-permalink-bookmarking) above, with the `- (dash)` character replaced by an `_ (underscore)`. For example, if you wanted to turn the travel forecast on, you would find `travel-checkbox=true` in the permalink, its matching environment variable becomes `WSQS_travel_checkbox=true`.
+Environment variables that are to be added to the default query string are prefixed with `WSQS_` and then use the same key/value pairs generated by the [Permalink](#sharing-a-permalink-bookmarking) above, with the `- (dash)` character replaced by an `_ (underscore)`. For example, if you wanted to turn the travel forecast on, you would find `travel-checkbox=true` in the permalink, its matching environment variable becomes `WSQS_travel=true`.

 When using the Docker container, these environment variables are read on container start-up to generate the static redirect HTML.

@@ -221,7 +221,13 @@ When using the Docker container, these environment variables are read on contain

 **Speed:** Controls the playback speed multiplier of the displays, from "Very Fast" (1.5x) to "Very Slow" (0.5x) with "Normal" being 1x

-**Widescreen:** Stretches the background to 16:9 to avoid "pillarboxing" on modern displays
+**Display Mode:**
+- Standard: Classic 4:3 display with the classic (not enhanced, below) screen layouts.
+- Widescreen: Stretches the background to 16:9 to avoid "pillarboxing" on modern displays
+- Widescreen Enhanced: Stretches as above, and makes use of the additional space to provide wider maps, more weather data and/or additional days in the forecast
+- Portrait Enhanced: (in progress) Rotates the screen to a 16:9 portrait orientation and enhances the original displays by adjusting them to fit the new orientation.
+
+

 **Kiosk:** Immediately activates kiosk mode, which hides all settings. Exit by refreshing the page or using `Ctrl-K`. (Kiosk mode is similar to clicking the "Fullscreen" icon, but scales to the current browser viewport instead of activating the browser's actual "Fullscreen" mode.)

@@ -336,6 +342,11 @@ When using Docker:
 * **Static deployment**: Mount your `custom.js` file to `/usr/share/nginx/html/scripts/custom.js`
 * **Server deployment**: Mount your `custom.js` file to `/app/server/scripts/custom.js`

+### Custom text scroll
+If you would like your Weatherstar to have custom scrolling text in the bottom blue bar, turn on the setting for `Enable RSS Feed/Text` and then enter text in the resulting text box. Then press set.
+
+Tip: You can have Weatherstar select randomly between several text strings on each pass through the current conditions. Use a pipe character to separate string. `Welcome to Weatherstar|Thanks for watching`.
+
 ## Issue reporting and feature requests

 Please do not report issues with api.weather.gov being down. It's a new service and not considered fully operational yet. I've also observed that the API can go down on a regional basis (based on NWS office locations). This means that you may have problems getting data for, say, Chicago right now, but Dallas and others are working just fine.
--- a/datagenerators/stations.mjs
+++ b/datagenerators/stations.mjs
@@ -8,13 +8,11 @@ import states from './stations-states.mjs';
 import chunk from './chunk.mjs';
 import overrides from './stations-overrides.mjs';
 import postProcessor from './stations-postprocessor.mjs';
+import { stationFilter } from '../server/scripts/modules/utils/string.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, 3);

@@ -41,10 +39,8 @@ if (!USE_CACHE) {
 					// eslint-disable-next-line no-await-in-loop
 					const stationsRaw = await https(next);
 					stations = JSON.parse(stationsRaw);
-					// filter stations for 4 letter identifiers
-					const stationsFiltered4 = stations.features.filter((station) => station.properties.stationIdentifier.match(/^[A-Z]{4}$/));
 					// filter against starting letter
-					const stationsFiltered = stationsFiltered4.filter((station) => !skipStations.includes(station.properties.stationIdentifier.slice(0, 1)));
+					const stationsFiltered = stations.filter(stationFilter);
 					// add each resulting station to the output
 					stationsFiltered.forEach((station) => {
 						const id = station.properties.stationIdentifier;
--- a/gulp/publish-frontend.mjs
+++ b/gulp/publish-frontend.mjs
@@ -15,10 +15,11 @@ import { readFile } from 'fs/promises';
 import file from 'gulp-file';
 import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
 import log from 'fancy-log';
-import dartSass from 'sass';
+import * as dartSass from 'sass';
 import gulpSass from 'gulp-sass';
 import sourceMaps from 'gulp-sourcemaps';
 import OVERRIDES from '../src/overrides.mjs';
+import { DateTime } from 'luxon';

 // get cloudfront
 import reader from '../src/playlist-reader.mjs';
@@ -86,6 +87,7 @@ const mjsSources = [
 	'server/scripts/modules/travelforecast.mjs',
 	'server/scripts/modules/progress.mjs',
 	'server/scripts/modules/media.mjs',
+	'server/scripts/modules/custom-scroll-text.mjs',
 	'server/scripts/index.mjs',
 ];

@@ -109,10 +111,9 @@ const htmlSources = [
 const packageJson = await readFile('package.json');
 let { version } = JSON.parse(packageJson);
 const previewVersion = async () => {
-	// generate a relatively unique timestamp for cache invalidation of the preview site
-	const now = new Date();
-	const msNow = now.getTime() % 1_000_000;
-	version = msNow.toString();
+	// generate a unique timestamp for cache invalidation of the preview site
+	const now = DateTime.utc();
+	version = now.toFormat('yyyyLLddHHmm').substring(3);
 };

 const compressHtml = async () => src(htmlSources)
@@ -221,7 +222,7 @@ const buildDist = series(clean, parallel(buildJs, compressJsVendor, buildCss, co
 // 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, logVersion);
-const stageFrontend = series(previewVersion, buildDist, uploadImagesPreview, uploadPreview, invalidatePreview);
+const stageFrontend = series(previewVersion, buildDist, uploadImagesPreview, uploadPreview, invalidatePreview, logVersion);

 export default publishFrontend;

--- a/index.mjs
+++ b/index.mjs
@@ -158,6 +158,7 @@ if (process.env?.DIST === '1') {
 	// 'npm run build' and then 'DIST=1 npm start'
 	app.use('/scripts', express.static('./server/scripts', staticOptions));
 	app.use('/geoip', geoip);
+	app.use('/music', express.static('./server/music', staticOptions));

 	// render the EJS template in production mode (serve compressed files from dist directory)
 	app.get('/', (req, res) => { renderIndex(req, res, true); });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "6.5.0",
+	"version": "6.5.7",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",
@@ -31,7 +31,7 @@
 		"@eslint/eslintrc": "^3.3.1",
 		"ajv": "^8.17.1",
 		"del": "^8.0.0",
-		"eslint": "^9.0.0",
+		"eslint": "^10.0.3",
 		"eslint-config-airbnb-base": "15.0.0",
 		"eslint-plugin-import": "^2.10.0",
 		"fancy-log": "^2.0.0",
@@ -40,7 +40,7 @@
 		"gulp-concat": "^2.6.1",
 		"gulp-ejs": "^5.1.0",
 		"gulp-file": "^0.4.0",
-		"gulp-html-minifier-terser": "^7.1.0",
+		"gulp-html-minifier-terser": "^8.0.0",
 		"gulp-rename": "^2.0.0",
 		"gulp-s3-uploader": "^1.0.6",
 		"gulp-sass": "^6.0.0",
@@ -58,7 +58,7 @@
 	},
 	"dependencies": {
 		"dotenv": "^17.0.1",
-		"ejs": "^3.1.5",
+		"ejs": "^5.0.1",
 		"express": "^5.1.0"
 	}
 }
--- a/server/images/backgrounds/1-chart-wide.png
+++ b/server/images/backgrounds/1-chart-wide.png
--- a/server/images/backgrounds/1-wide-enhanced.png
+++ b/server/images/backgrounds/1-wide-enhanced.png
--- a/server/images/backgrounds/3-wide-enhanced.png
+++ b/server/images/backgrounds/3-wide-enhanced.png
--- a/server/images/gimp/1-chart-wide.xcf
+++ b/server/images/gimp/1-chart-wide.xcf
--- a/server/images/gimp/1-wide-enhanced.xcf
+++ b/server/images/gimp/1-wide-enhanced.xcf
--- a/server/images/gimp/1.xcf
+++ b/server/images/gimp/1.xcf
--- a/server/images/gimp/3-wide-enhanced.xcf
+++ b/server/images/gimp/3-wide-enhanced.xcf
--- a/server/scripts/index.mjs
+++ b/server/scripts/index.mjs
@@ -141,7 +141,7 @@ const init = async () => {
 	}

 	// Handle kiosk mode initialization
-	const urlKioskCheckbox = parsedParameters['settings-kiosk-checkbox'];
+	const urlKioskCheckbox = parsedParameters?.kiosk ?? parsedParameters['settings-kiosk-checkbox'];

 	// If kiosk=false is specified, disable kiosk mode and clear any stored value
 	if (urlKioskCheckbox === 'false') {
--- a/server/scripts/modules/almanac.mjs
+++ b/server/scripts/modules/almanac.mjs
@@ -47,10 +47,7 @@ class Almanac extends WeatherDisplay {
 	}

 	calcSunMoonData(weatherParameters) {
-		const sun = [
-			SunCalc.getTimes(new Date(), weatherParameters.latitude, weatherParameters.longitude),
-			SunCalc.getTimes(DateTime.local().plus({ days: 1 }).toJSDate(), weatherParameters.latitude, weatherParameters.longitude),
-		];
+		const sun = [0, 1, 2, 3, 4, 5, 6].map((days) => SunCalc.getTimes(DateTime.local().plus({ days }).toJSDate(), weatherParameters.latitude, weatherParameters.longitude));

 		// brute force the moon phases by scanning the next 30 days
 		const moon = [];
@@ -72,7 +69,7 @@ class Almanac extends WeatherDisplay {

 			// stop after 30 days or 4 moon phases
 			iterations += 1;
-		} while (iterations <= 30 && moon.length < 4);
+		} while (iterations <= 45 && moon.length < 5);

 		return {
 			sun,
@@ -126,21 +123,16 @@ class Almanac extends WeatherDisplay {

 		// Set day names
 		const Today = DateTime.local();
-		const Tomorrow = Today.plus({ days: 1 });
-		this.elem.querySelector('.day-1').textContent = Today.toLocaleString({ weekday: 'long' });
-		this.elem.querySelector('.day-2').textContent = Tomorrow.toLocaleString({ weekday: 'long' });
+		// fill all three days, even if some are hidden by non-enhanced
+		for (let i = 0; i < 3; i += 1) {
+			this.elem.querySelector(`.day-${i}`).textContent = Today.plus({ days: i }).toLocaleString({ weekday: 'long' });

-		const todaySunrise = DateTime.fromJSDate(info.sun[0].sunrise);
-		const todaySunset = DateTime.fromJSDate(info.sun[0].sunset);
-		const [todaySunriseFormatted, todaySunsetFormatted] = formatTimesForColumn([todaySunrise, todaySunset]);
-		this.elem.querySelector('.rise-1').textContent = todaySunriseFormatted;
-		this.elem.querySelector('.set-1').textContent = todaySunsetFormatted;
-
-		const tomorrowSunrise = DateTime.fromJSDate(info.sun[1].sunrise);
-		const tomorrowSunset = DateTime.fromJSDate(info.sun[1].sunset);
-		const [tomorrowSunriseFormatted, tomorrowSunsetformatted] = formatTimesForColumn([tomorrowSunrise, tomorrowSunset]);
-		this.elem.querySelector('.rise-2').textContent = tomorrowSunriseFormatted;
-		this.elem.querySelector('.set-2').textContent = tomorrowSunsetformatted;
+			const sunrise = DateTime.fromJSDate(info.sun[i].sunrise);
+			const sunset = DateTime.fromJSDate(info.sun[i].sunset);
+			const [sunriseFormatted, sunsetFormatted] = formatTimesForColumn([sunrise, sunset]);
+			this.elem.querySelector(`.rise-${i}`).textContent = sunriseFormatted;
+			this.elem.querySelector(`.set-${i}`).textContent = sunsetFormatted;
+		}

 		// Moon data
 		const days = info.moon.map((MoonPhase) => {
--- a/server/scripts/modules/currentweather.mjs
+++ b/server/scripts/modules/currentweather.mjs
@@ -14,9 +14,7 @@ import {
 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'];
+import settings from './settings.mjs';

 class CurrentWeather extends WeatherDisplay {
 	constructor(navId, elemId) {
@@ -29,8 +27,8 @@ class CurrentWeather extends WeatherDisplay {
 		// note: current weather does not use old data on a silent refresh
 		// this is deliberate because it can pull data from more than one station in sequence

-		// filter for 4-letter observation stations, only those contain sky conditions and thus an icon
-		const filteredStations = this.weatherParameters.stations.filter((station) => station?.properties?.stationIdentifier?.length === 4 && !skipStations.includes(station.properties.stationIdentifier.slice(0, 1)));
+		// get the available stations
+		const { stations } = this.weatherParameters;

 		// Load the observations
 		let observations;
@@ -38,9 +36,9 @@ class CurrentWeather extends WeatherDisplay {

 		// station number counter
 		let stationNum = 0;
-		while (!observations && stationNum < filteredStations.length) {
+		while (!observations && stationNum < stations.length) {
 			// get the station
-			station = filteredStations[stationNum];
+			station = stations[stationNum];
 			const stationId = station.properties.stationIdentifier;

 			stationNum += 1;
@@ -104,7 +102,11 @@ class CurrentWeather extends WeatherDisplay {
 					debugContext: 'currentweather',
 				});

+				// copy enhanced data and restore the timestamp if it was overwritten by older data from mapclick
+				const { timestamp } = candidateObservation.features[0].properties;
 				candidateObservation.features[0].properties = enhancedResult.data;
+				candidateObservation.features[0].properties.timestamp = timestamp;
+
 				const { missingFields } = enhancedResult;
 				const missingRequired = missingFields.filter((fieldName) => {
 					const field = requiredFields.find((f) => f.name === fieldName && f.required);
@@ -192,7 +194,9 @@ class CurrentWeather extends WeatherDisplay {
 		const wind = (typeof this.data.WindSpeed === 'number') ? this.data.WindDirection.padEnd(3, '') + this.data.WindSpeed.toString().padStart(3, ' ') : this.data.WindSpeed;

 		// get location (city name) from StationInfo if available (allows for overrides)
-		const location = (StationInfo[this.data.station.properties.stationIdentifier]?.city ?? locationCleanup(this.data.station.properties.name)).substr(0, 20);
+		// longer name allowed if in wide-enhanced
+		const locationLimit = (settings.wide?.value && settings.enhanced?.value) ? 25 : 20;
+		const location = (StationInfo[this.data.station.properties.stationIdentifier]?.city ?? locationCleanup(this.data.station.properties.name)).substr(0, locationLimit);

 		const fill = {
 			temp: this.data.Temperature + String.fromCharCode(176),
--- a/server/scripts/modules/currentweatherscroll.mjs
+++ b/server/scripts/modules/currentweatherscroll.mjs
@@ -261,6 +261,7 @@ 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 === 'non-display') nonDisplay();
 		if (event.data?.method === 'show') show();
 		if (event.data?.method === 'hide') hide();
 	}
@@ -274,6 +275,20 @@ const hide = () => {
 	mainScroll.style.display = 'none';
 };

+const nonDisplay = () => {
+	if (interval) {
+		clearInterval(interval);
+		interval = null;
+		stop();
+		// if greater than default update (typically long scroll) skip to the next weather screen
+		if (nextUpdate > DEFAULT_UPDATE) {
+			screenIndex = (screenIndex + 1) % (workingScreens.length);
+			sinceLastUpdate = 0;
+			nextUpdate = DEFAULT_UPDATE;
+		}
+	}
+};
+
 const screenCount = () => workingScreens.length;
 const atDefault = () => defaultScreensLoaded;

--- a/server/scripts/modules/custom-scroll-text.mjs
+++ b/server/scripts/modules/custom-scroll-text.mjs
@@ -0,0 +1,89 @@
+import Setting from './utils/setting.mjs';
+import { reset as resetScroll, addScreen as addScroll, hazards } from './currentweatherscroll.mjs';
+
+let firstRun = true;
+
+// change of enable handler
+const changeEnable = (newValue) => {
+	let newDisplay;
+	if (newValue) {
+		// add the text to the scroll
+		parseText(customText.value);
+		// show the string box
+		newDisplay = 'block';
+	} else {
+		// set scroll back to original
+		resetScroll();
+		// hide the string entry
+		newDisplay = 'none';
+	}
+	const stringEntry = document.getElementById('settings-customText-label');
+	if (stringEntry) {
+		stringEntry.style.display = newDisplay;
+	}
+};
+
+// parse the text provided
+const parseText = (textInput) => {
+	// skip updating text on first run
+	if (firstRun) return;
+
+	// test validity
+	if (textInput === undefined || textInput === '') {
+		resetScroll();
+	}
+
+	// split the text at pipe characters
+	const texts = textInput.split('|');
+
+	// add single text scroll after hazards if present
+	resetScroll();
+	addScroll(hazards);
+	addScroll(
+		() => {
+			// pick a random string from the available list
+			const randInt = Math.floor(Math.random() * texts.length);
+			return {
+				type: 'scroll',
+				text: texts[randInt],
+			};
+		},
+		// keep the existing scroll
+		true,
+	);
+};
+
+// change the text
+const changeText = (newValue) => {
+	// first pass through won't have custom text enable ready
+	if (firstRun) return;
+
+	if (customTextEnable.value) {
+		parseText(newValue);
+	}
+};
+
+const customText = new Setting('customText', {
+	name: 'Custom Text',
+	defaultValue: '',
+	type: 'string',
+	changeAction: changeText,
+	placeholder: 'Text to scroll',
+});
+
+const customTextEnable = new Setting('customTextEnable', {
+	name: 'Enable Custom Text',
+	defaultValue: false,
+	changeAction: changeEnable,
+});
+
+// initialize the custom text inputs on the page
+document.addEventListener('DOMContentLoaded', () => {
+	// add the controls to the page
+	const settingsSection = document.querySelector('#settings');
+	settingsSection.append(customTextEnable.generate(), customText.generate());
+	// clear the first run value
+	firstRun = false;
+	// call change enable with the current value to show/hide the url box
+	changeEnable(customTextEnable.value);
+});
--- a/server/scripts/modules/extendedforecast.mjs
+++ b/server/scripts/modules/extendedforecast.mjs
@@ -17,7 +17,13 @@ class ExtendedForecast extends WeatherDisplay {
 		super(navId, elemId, 'Extended Forecast', true);

 		// set timings
-		this.timing.totalScreens = 2;
+		if (settings.portrait?.value) {
+			this.timing.totalScreens = 1;
+			this.perPage = 4;
+		} else {
+			this.timing.totalScreens = 2;
+			this.perPage = 3;
+		}
 	}

 	async getData(weatherParameters, refresh) {
@@ -54,7 +60,7 @@ class ExtendedForecast extends WeatherDisplay {

 		// determine bounds
 		// grab the first three or second set of three array elements
-		const forecast = parse(this.data.properties.periods, this.weatherParameters.forecast).slice(0 + 3 * this.screenIndex, 3 + this.screenIndex * 3);
+		const forecast = parse(this.data.properties.periods, this.weatherParameters.forecast).slice(0 + this.perPage * this.screenIndex, this.perPage + this.screenIndex * this.perPage);

 		// create each day template
 		const days = forecast.map((Day) => {
@@ -97,11 +103,9 @@ const parse = (fullForecast, forecastUrl) => {
 	// Skip the first period if it's nighttime (like "Tonight") since extended forecast
 	// should focus on upcoming full days, not the end of the current day
 	let startIndex = 0;
-	let dateOffset = 0; // offset for date labels when we skip periods

 	if (activePeriods.length > 0 && !activePeriods[0].isDaytime) {
 		startIndex = 1;
-		dateOffset = 1; // start date labels from tomorrow since we're skipping tonight
 		if (debugFlag('extendedforecast')) {
 			console.log(`ExtendedForecast: Skipping first period "${activePeriods[0].name}" because it's nighttime`);
 		}
@@ -111,25 +115,14 @@ const parse = (fullForecast, forecastUrl) => {
 		}
 	}

-	// create a list of days starting with the appropriate day
-	const Days = [0, 1, 2, 3, 4, 5, 6];
-	const dates = Days.map((shift) => {
-		const date = DateTime.local().startOf('day').plus({ days: shift + dateOffset });
-		return date.toLocaleString({ weekday: 'short' });
-	});
-
-	if (debugFlag('extendedforecast')) {
-		console.log(`ExtendedForecast: Generated date labels: [${dates.join(', ')}]`);
-	}
-
 	// track the destination forecast index
 	let destIndex = 0;
 	const forecast = [];

+	// if the first period is nighttime it is skipped above via startIndex
 	for (let i = startIndex; i < activePeriods.length; i += 1) {
 		const period = activePeriods[i];

-		// create the destination object if necessary
 		if (!forecast[destIndex]) {
 			forecast.push({
 				dayName: '', low: undefined, high: undefined, text: undefined, icon: undefined,
@@ -138,15 +131,14 @@ const parse = (fullForecast, forecastUrl) => {
 		// get the object to modify/populate
 		const fDay = forecast[destIndex];

-		// preload the icon
-		preloadImg(fDay.icon);
-
 		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];
+			fDay.dayName = DateTime.fromISO(period.startTime).startOf('day').toLocaleString({ weekday: 'short' });
+			// preload the icon
+			preloadImg(fDay.icon);
 			// Wait for the corresponding night period to increment
 		} else {
 			// low temperature
--- a/server/scripts/modules/hourly-graph.mjs
+++ b/server/scripts/modules/hourly-graph.mjs
@@ -5,10 +5,30 @@ import getHourlyData from './hourly.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
 import { registerDisplay, timeZone } from './navigation.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
+import settings from './settings.mjs';

-// get available space
-const availableWidth = 532;
-const availableHeight = 285;
+// set up spacing and scales
+const scaling = () => {
+	const available = {
+		width: 532,
+		height: 285,
+	};
+	const dataLength = {
+		hours: 36,
+		xTicks: 4,
+	};
+
+	if (settings.wide?.value && settings.enhanced?.value) {
+		available.width = available.width + 107 + 107;
+		available.height = 285;
+		dataLength.hours = 48;
+		dataLength.xTicks = 6;
+	}
+	return {
+		available,
+		dataLength,
+	};
+};

 class HourlyGraph extends WeatherDisplay {
 	constructor(navId, elemId, defaultActive) {
@@ -46,28 +66,43 @@ class HourlyGraph extends WeatherDisplay {
 			skyCover, temperature, probabilityOfPrecipitation, temperatureUnit: data[0].temperatureUnit, dewpoint,
 		};

+		// get the data length for current settings
+		const { dataLength } = scaling();
+
+		// clamp down the data to the allowed size
+		Object.entries(this.data).forEach(([key, value]) => {
+			if (Array.isArray(value)) {
+				this.data[key] = value.slice(0, dataLength.hours);
+			}
+		});
+
 		this.setStatus(STATUS.loaded);
 	}

 	drawCanvas() {
+		// get scaling parameters
+		const { dataLength, available } = scaling();
+
+		// get the image
 		if (!this.image) this.image = this.elem.querySelector('.chart img');

-		this.image.width = availableWidth;
-		this.image.height = availableHeight;
+		// set up image
+		this.image.width = available.width;
+		this.image.height = available.height;

 		// get context
 		const canvas = document.createElement('canvas');
-		canvas.width = availableWidth;
-		canvas.height = availableHeight;
+		canvas.width = available.width;
+		canvas.height = available.height;
 		const ctx = canvas.getContext('2d');
 		ctx.imageSmoothingEnabled = false;

 		// calculate time scale
-		const timeScale = calcScale(0, 5, this.data.temperature.length - 1, availableWidth);
-		const timeStep = this.data.temperature.length / 4;
+		const timeScale = calcScale(0, 5, this.data.temperature.length - 1, available.width);
+		const timeStep = this.data.temperature.length / (dataLength.xTicks);
 		const startTime = DateTime.now().startOf('hour');
 		let prevTime = startTime;
-		Array(5).fill().forEach((val, idx) => {
+		Array(dataLength.xTicks + 1).fill().forEach((val, idx) => {
 			// track the previous label so a day of week can be added when it changes
 			const label = formatTime(startTime.plus({ hour: idx * timeStep }), prevTime);
 			prevTime = label.ts;
@@ -77,7 +112,7 @@ class HourlyGraph extends WeatherDisplay {

 		// order is important last line drawn is on top
 		// clouds
-		const percentScale = calcScale(0, availableHeight - 10, 100, 10);
+		const percentScale = calcScale(0, available.height - 10, 100, 10);
 		const cloud = createPath(this.data.skyCover, timeScale, percentScale);
 		drawPath(cloud, ctx, {
 			strokeStyle: 'lightgrey',
@@ -97,7 +132,7 @@ class HourlyGraph extends WeatherDisplay {
 		const thirdScale = (maxScale - minScale) / 3;
 		const midScale1 = Math.round(minScale + thirdScale);
 		const midScale2 = Math.round(minScale + (thirdScale * 2));
-		const tempScale = calcScale(minScale, availableHeight - 10, maxScale, 10);
+		const tempScale = calcScale(minScale, available.height - 10, maxScale, 10);

 		// dewpoint
 		const dewpointPath = createPath(this.data.dewpoint, timeScale, tempScale);
--- a/server/scripts/modules/hourly.mjs
+++ b/server/scripts/modules/hourly.mjs
@@ -238,7 +238,7 @@ const determineIcon = async (skyCover, weather, iceAccumulation, probabilityOfPr
 };

 // expand a set of values with durations to an hour-by-hour array
-const expand = (data, maxHours = 36) => {
+const expand = (data, maxHours = 48) => {
 	const startOfHour = DateTime.utc().startOf('hour').toMillis();
 	const result = []; // resulting expanded values
 	data.forEach((item) => {
--- a/server/scripts/modules/latestobservations.mjs
+++ b/server/scripts/modules/latestobservations.mjs
@@ -159,12 +159,17 @@ class LatestObservations extends WeatherDisplay {
 			const windDirection = directionToNSEW(condition.windDirection.value);

 			const Temperature = temperatureConverter(condition.temperature.value);
+			const Like = likeTemperature(condition.heatIndex?.value, condition.windChill?.value, Temperature, temperatureConverter);
 			const WindSpeed = windConverter(condition.windSpeed.value);

+			const locationLimit = (settings.wide?.value && settings.enhanced?.value) ? 20 : 14;
+			const weatherLimit = (settings.wide?.value && settings.enhanced?.value) ? 10 : 9;
+
 			const fill = {
-				location: locationCleanup(condition.city).substr(0, 14),
+				location: locationCleanup(condition.city).substr(0, locationLimit),
 				temp: Temperature,
-				weather: shortenCurrentConditions(condition.textDescription).substr(0, 9),
+				like: Like.value,
+				weather: shortenCurrentConditions(condition.textDescription).substr(0, weatherLimit),
 			};

 			if (WindSpeed > 0) {
@@ -175,7 +180,12 @@ class LatestObservations extends WeatherDisplay {
 				fill.wind = 'Calm';
 			}

-			return this.fillTemplate('observation-row', fill);
+			const filledRow = this.fillTemplate('observation-row', fill);
+
+			// add the feels like class
+			if (Like.cssClass) filledRow.querySelector('.like').classList.add(Like.cssClass);
+
+			return filledRow;
 		});

 		const linesContainer = this.elem.querySelector('.observation-lines');
@@ -186,6 +196,25 @@ class LatestObservations extends WeatherDisplay {
 	}
 }

+// generate a "feels like" temperature from heat index and wind chill.
+const likeTemperature = (heat, wind, actual, converter) => {
+	// figure out the feels like value
+	let value = '';
+	if (heat) value = converter(heat);
+	if (wind) value = converter(wind);
+
+	// determine if there's a red/blue color class to add
+	let cssClass;
+	if (value !== '') {
+		if (value > actual) cssClass = 'heat-index';
+		if (value < actual) cssClass = 'wind-chill';
+	}
+	return {
+		value,
+		cssClass,
+	};
+};
+
 const shortenCurrentConditions = (_condition) => {
 	let condition = _condition;
 	condition = condition.replace(/Light/, 'L');
--- a/server/scripts/modules/media.mjs
+++ b/server/scripts/modules/media.mjs
@@ -1,6 +1,5 @@
 import { text } from './utils/fetch.mjs';
 import Setting from './utils/setting.mjs';
-import { registerHiddenSetting } from './share.mjs';

 let playlist;
 let currentTrack = 0;
@@ -33,9 +32,6 @@ document.addEventListener('DOMContentLoaded', () => {

 	// get the playlist
 	getMedia();
-
-	// register the volume setting
-	registerHiddenSetting(mediaVolume.elemId, mediaVolume);
 });

 const scanMusicDirectory = async () => {
@@ -246,6 +242,7 @@ const mediaVolume = new Setting('mediaVolume', {
 		[0.25, '25%'],
 	],
 	changeAction: setVolume,
+	visible: false,
 });

 const initializePlayer = () => {
--- a/server/scripts/modules/navigation.mjs
+++ b/server/scripts/modules/navigation.mjs
@@ -6,6 +6,7 @@ import { safeJson } from './utils/fetch.mjs';
 import { getPoint } from './utils/weather.mjs';
 import { debugFlag } from './utils/debug.mjs';
 import settings from './settings.mjs';
+import { stationFilter } from './utils/string.mjs';

 document.addEventListener('DOMContentLoaded', () => {
 	init();
@@ -37,6 +38,11 @@ const init = async () => {
 		resizeTimeout = setTimeout(() => resize(), 100);
 	});

+	// redraw current screen (typically from enhanced setting change)
+	window.addEventListener('redraw', () => {
+		currentDisplay()?.drawCanvas();
+	});
+
 	// Handle orientation changes (Mobile Safari doesn't always fire resize events on orientation change)
 	window.addEventListener('orientationchange', () => {
 		if (debugFlag('resize')) {
@@ -85,7 +91,15 @@ const getWeather = async (latLon, haveDataCallback) => {
 			return;
 		}

-		const StationId = stations.features[0].properties.stationIdentifier;
+		// filter stations for proper format
+		const stationsFiltered = stations.features.filter(stationFilter);
+		// check for stations available after filtering
+		if (stationsFiltered.length === 0) {
+			console.warn('No observation stations left for location after filtering');
+			return;
+		}
+
+		const StationId = stationsFiltered[0].properties.stationIdentifier;

 		let { city } = point.properties.relativeLocation.properties;
 		const { state } = point.properties.relativeLocation.properties;
@@ -108,7 +122,7 @@ const getWeather = async (latLon, haveDataCallback) => {
 		weatherParameters.timeZone = point.properties.timeZone;
 		weatherParameters.forecast = point.properties.forecast;
 		weatherParameters.forecastGridData = point.properties.forecastGridData;
-		weatherParameters.stations = stations.features;
+		weatherParameters.stations = stationsFiltered;
 		weatherParameters.relativeLocation = point.properties.relativeLocation.properties;

 		// update the main process for display purposes
--- a/server/scripts/modules/radar-constants.mjs
+++ b/server/scripts/modules/radar-constants.mjs
@@ -1,5 +1,56 @@
+import settings from './settings.mjs';
+
+const radarFinalSize = () => {
+	const size = {
+		width: 640, height: 367,
+	};
+	if (settings.wide?.value && settings.enhanced?.value) {
+		size.width = 854;
+	}
+	return size;
+};
+
+const radarSourceSize = () => {
+	const size = {
+		width: 240,
+		height: 163,
+	};
+	if (settings.wide?.value && settings.enhanced?.value) {
+		size.width = 240 / 640 * 854; // original size of 640 scaled up to wide at 854
+	}
+	return size;
+};
+
+const radarOffset = () => {
+	const offset = {
+		x: 240,
+		y: 138,
+	};
+	if (settings.wide?.value && settings.enhanced?.value) {
+		// 107 is the margins shift, 640/854 is the scaling factor normal => wide, /2 is because of the fixed 2:1 scaling between source radar and map tiles
+		offset.x = 240 + (107 * 640 / 854 / 2); // original size of 640 scaled up to wide at 854;
+	}
+
+	return offset;
+};
+
+// shift the base coordinates to align with enhanced radar window sizes
+const radarShift = () => {
+	const shift = {
+		x: 0,
+		y: 0,
+	};
+	if (settings.wide?.value && settings.enhanced?.value) {
+		shift.x = 107;
+	}
+	return shift;
+};
+
 export const TILE_SIZE = { x: 680, y: 387 };
 export const TILE_COUNT = { x: 10, y: 11 };
 export const TILE_FULL_SIZE = { x: 6800, y: 4255 };
 export const RADAR_FULL_SIZE = { width: 2550, height: 1600 };
-export const RADAR_FINAL_SIZE = { width: 640, height: 367 };
+export const RADAR_FINAL_SIZE = radarFinalSize;
+export const RADAR_SOURCE_SIZE = radarSourceSize;
+export const RADAR_OFFSET = radarOffset;
+export const RADAR_SHIFT = radarShift;
--- a/server/scripts/modules/radar-processor.mjs
+++ b/server/scripts/modules/radar-processor.mjs
@@ -1,5 +1,5 @@
 import { removeDopplerRadarImageNoise } from './radar-utils.mjs';
-import { RADAR_FULL_SIZE, RADAR_FINAL_SIZE } from './radar-constants.mjs';
+import { RADAR_FULL_SIZE, RADAR_FINAL_SIZE, RADAR_SOURCE_SIZE } from './radar-constants.mjs';

 // process a single radar image and place it on the provided canvas
 const processRadar = async (data) => {
@@ -13,8 +13,8 @@ const processRadar = async (data) => {

 	// calculate offsets and sizes
 	const radarSource = {
-		width: 240,
-		height: 163,
+		width: RADAR_SOURCE_SIZE().width,
+		height: RADAR_SOURCE_SIZE().height,
 		x: Math.round(radarSourceXY.x / 2),
 		y: Math.round(radarSourceXY.y / 2),
 	};
@@ -52,11 +52,11 @@ const processRadar = async (data) => {

 	// stretch the radar image
 	const stretchCanvas = document.createElement('canvas');
-	stretchCanvas.width = RADAR_FINAL_SIZE.width;
-	stretchCanvas.height = RADAR_FINAL_SIZE.height;
+	stretchCanvas.width = RADAR_FINAL_SIZE().width;
+	stretchCanvas.height = RADAR_FINAL_SIZE().height;
 	const stretchContext = stretchCanvas.getContext('2d', { willReadFrequently: true });
 	stretchContext.imageSmoothingEnabled = false;
-	stretchContext.drawImage(croppedRadarCanvas, 0, 0, radarSource.width, radarSource.height, 0, 0, RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
+	stretchContext.drawImage(croppedRadarCanvas, 0, 0, radarSource.width, radarSource.height, 0, 0, RADAR_FINAL_SIZE().width, RADAR_FINAL_SIZE().height);

 	return stretchCanvas.toDataURL();
 };
--- a/server/scripts/modules/radar-tiles.mjs
+++ b/server/scripts/modules/radar-tiles.mjs
@@ -9,10 +9,12 @@ const pixelToFile = (xPixel, yPixel) => {
 	return `${yTile}-${xTile}`;
 };

-// convert a pixel location in the overall map to a pixel location on the tile
+// convert a pixel location in the overall map to a pixel location on the tile set
 const modTile = (xPixel, yPixel) => {
-	const x = Math.round(xPixel) % TILE_SIZE.x;
-	const y = Math.round(yPixel) % TILE_SIZE.y;
+	// adjust for additional 1 tile when odd
+	const x = (Math.floor(xPixel) % (TILE_SIZE.x));
+	const y = (Math.floor(yPixel) % (TILE_SIZE.y));
+
 	return { x, y };
 };

@@ -29,28 +31,33 @@ const setTiles = (data) => {

 	// determine the basemap images needed
 	const baseMapTiles = [
-		pixelToFile(sourceXY.x, sourceXY.y),
-		pixelToFile(sourceXY.x + TILE_SIZE.x, sourceXY.y),
-		pixelToFile(sourceXY.x, sourceXY.y + TILE_SIZE.y),
-		pixelToFile(sourceXY.x + TILE_SIZE.x, sourceXY.y + TILE_SIZE.y),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y),
 	];

 	// do some calculations
 	// the tiles are arranged as follows, with the horizontal axis as x, and correlating with the second set of digits in the image file number
-	// T[0] T[1]
-	// T[2] T[3]
+	// T[0] T[1] T[2]
+	// T[3] T[4] T[5]

 	// calculate the shift of tile 0 (upper left)
 	const tileShift = modTile(sourceXY.x, sourceXY.y);

 	// determine which tiles are used
+	const secondRow = tileShift.y + TILE_SIZE.y > RADAR_FINAL_SIZE().height;
 	const usedTiles = [
 		true,
-		TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE.width,
-		TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE.width,
+		tileShift.x + TILE_SIZE.x > RADAR_FINAL_SIZE().width,
+		tileShift.x + (TILE_SIZE.x * 2) > RADAR_FINAL_SIZE().width,
+		secondRow,
 	];
-	// if we need t[1] and t[2] then we also need t[3]
-	usedTiles.push(usedTiles[1] && usedTiles[2]);
+	// second row is a copy of the first row when in use
+	// calculate T[4] and T[5]
+	usedTiles.push(secondRow && usedTiles[1], secondRow && usedTiles[2]);

 	// helper function for populating tiles
 	const populateTile = (tileName) => (elem, index) => {
--- a/server/scripts/modules/radar-utils.mjs
+++ b/server/scripts/modules/radar-utils.mjs
@@ -1,4 +1,6 @@
-import { TILE_SIZE, TILE_FULL_SIZE } from './radar-constants.mjs';
+import {
+	TILE_SIZE, TILE_FULL_SIZE, RADAR_OFFSET, RADAR_SHIFT,
+} from './radar-constants.mjs';

 // limit a value to within a range
 const coerce = (low, value, high) => Math.max(Math.min(value, high), low);
@@ -9,16 +11,16 @@ const getXYFromLatitudeLongitudeMap = (pos) => {
 	// 589	466		-122.3615246	47.63177832
 	// 5288	3638	-80.18297384	25.77018996

-	// map position is calculated as a regresion from the above values (=/- a manual adjustment factor)
+	// map position is calculated as a regresion from the above values (+/- a manual adjustment factor) and shifting for enhanced views
 	// then shifted by half of the tile size (to center the map)
 	// then they are limited to values between 0 and the width or height of the map
-	const y = coerce(0, (-145.095 * pos.latitude + 7377.117) - 27 - (TILE_SIZE.y / 2), TILE_FULL_SIZE.y - (TILE_SIZE.y));
-	const x = coerce(0, (111.407 * pos.longitude + 14220.972) + 4 - (TILE_SIZE.x / 2), TILE_FULL_SIZE.x - (TILE_SIZE.x));
+	const y = coerce(0, (-145.095 * pos.latitude + 7377.117) - 27 - (TILE_SIZE.y / 2) - RADAR_SHIFT().y, TILE_FULL_SIZE.y - (TILE_SIZE.y));
+	const x = coerce(0, (111.407 * pos.longitude + 14220.972) + 4 - (TILE_SIZE.x / 2) - RADAR_SHIFT().x, TILE_FULL_SIZE.x - (TILE_SIZE.x));

 	return { x, y };
 };

-const getXYFromLatitudeLongitudeDoppler = (pos, offsetX, offsetY) => {
+const getXYFromLatitudeLongitudeDoppler = (pos) => {
 	const imgHeight = 6000;
 	const imgWidth = 2800;

@@ -26,8 +28,8 @@ const getXYFromLatitudeLongitudeDoppler = (pos, offsetX, offsetY) => {
 	// then shifted by half of the tile size (to center the map)
 	// then they are limited to values between 0 and the width or height of the map

-	const y = coerce(0, (51 - pos.latitude) * 61.4481 - offsetY, imgHeight);
-	const x = coerce(0, ((-129.138 - pos.longitude) * 42.1768) * -1 - offsetX, imgWidth);
+	const y = coerce(0, (51 - pos.latitude) * 61.4481 - RADAR_OFFSET().y, imgHeight);
+	const x = coerce(0, ((-129.138 - pos.longitude) * 42.1768) * -1 - RADAR_OFFSET().x, imgWidth);

 	return { x: x * 2, y: y * 2 };
 };
--- a/server/scripts/modules/radar.mjs
+++ b/server/scripts/modules/radar.mjs
@@ -128,10 +128,8 @@ class Radar extends WeatherDisplay {
 		const urls = sortedPngs.slice(-(this.dopplerRadarImageMax));

 		// calculate offsets and sizes
-		const offsetX = 120 * 2;
-		const offsetY = 69 * 2;
 		const sourceXY = utils.getXYFromLatitudeLongitudeMap(this.weatherParameters);
-		const radarSourceXY = utils.getXYFromLatitudeLongitudeDoppler(this.weatherParameters, offsetX, offsetY);
+		const radarSourceXY = utils.getXYFromLatitudeLongitudeDoppler(this.weatherParameters);

 		// set up the base map and overlay tiles
 		setTiles({
--- a/server/scripts/modules/regionalforecast-utils.mjs
+++ b/server/scripts/modules/regionalforecast-utils.mjs
@@ -23,7 +23,7 @@ const buildForecast = (forecast, city, cityXY) => {
 const getRegionalObservation = async (point, city) => {
 	try {
 		// get stations using centralized safe handling
-		const stations = await safeJson(`https://api.weather.gov/gridpoints/${point.wfo}/${point.x},${point.y}/stations?limit=1`);
+		const stations = await safeJson(`https://api.weather.gov/gridpoints/${point.wfo}/${point.x},${point.y}/stations?limit=10`);

 		if (!stations || !stations.features || stations.features.length === 0) {
 			if (debugFlag('verbose-failures')) {
@@ -32,9 +32,13 @@ const getRegionalObservation = async (point, city) => {
 			return false;
 		}

-		// get the first station
-		const station = stations.features[0].id;
-		const stationId = stations.features[0].properties.stationIdentifier;
+		// get the first station with a 4-letter id (generally has appropriate data)
+		const station4Letter = stations.features.find((station) => {
+			if (station.properties.stationIdentifier.length === 4) return station.properties;
+			return false;
+		});
+		const station = station4Letter.id;
+		const stationId = station4Letter.properties.stationIdentifier;
 		// get the observation data using centralized safe handling
 		const observation = await safeJson(`${station}/observations/latest`);

@@ -205,7 +209,7 @@ const getMinMaxLatitudeLongitudeHI = (X, Y, OffsetX, OffsetY) => {
 	};
 };

-const getXYForCity = (City, MaxLatitude, MinLongitude, state) => {
+const getXYForCity = (City, MaxLatitude, MinLongitude, state, maxX = 580) => {
 	if (state === 'AK') getXYForCityAK(City, MaxLatitude, MinLongitude);
 	if (state === 'HI') getXYForCityHI(City, MaxLatitude, MinLongitude);
 	let x = (City.lon - MinLongitude) * 57;
@@ -215,7 +219,7 @@ const getXYForCity = (City, MaxLatitude, MinLongitude, state) => {
 	if (y > 282) y = 282;

 	if (x < 40) x = 40;
-	if (x > 580) x = 580;
+	if (x > maxX) x = maxX;

 	return { x, y };
 };
--- a/server/scripts/modules/regionalforecast.mjs
+++ b/server/scripts/modules/regionalforecast.mjs
@@ -14,11 +14,29 @@ import * as utils from './regionalforecast-utils.mjs';
 import { getPoint } from './utils/weather.mjs';
 import { debugFlag } from './utils/debug.mjs';
 import filterExpiredPeriods from './utils/forecast-utils.mjs';
+import settings from './settings.mjs';

-// map offset
-const mapOffsetXY = {
-	x: 240,
-	y: 117,
+// set up spacing and scales
+const scaling = () => {
+	// available space
+	const available = {
+		x: 640,
+	};
+
+	// map offset
+	const mapOffsetXY = {
+		x: 240,
+		y: 117,
+	};
+
+	if (settings.wide?.value && settings.enhanced?.value) {
+		mapOffsetXY.x = 320;
+		available.x = 854;
+	}
+	return {
+		mapOffsetXY,
+		available,
+	};
 };

 class RegionalForecast extends WeatherDisplay {
@@ -45,6 +63,7 @@ class RegionalForecast extends WeatherDisplay {
 		this.elem.querySelector('.map img').src = baseMap;

 		// get user's location in x/y
+		const { available, mapOffsetXY } = scaling();
 		const sourceXY = utils.getXYFromLatitudeLongitude(this.weatherParameters.latitude, this.weatherParameters.longitude, mapOffsetXY.x, mapOffsetXY.y, weatherParameters.state);

 		// get latitude and longitude limits
@@ -102,7 +121,7 @@ class RegionalForecast extends WeatherDisplay {
 				}

 				// get XY on map for city
-				const cityXY = utils.getXYForCity(city, minMaxLatLon.maxLat, minMaxLatLon.minLon, this.weatherParameters.state);
+				const cityXY = utils.getXYForCity(city, minMaxLatLon.maxLat, minMaxLatLon.minLon, this.weatherParameters.state, available - 60);

 				// wait for the regional observation if it's not done yet
 				const observation = await observationPromise;
@@ -188,7 +207,8 @@ class RegionalForecast extends WeatherDisplay {
 		}

 		// draw the map
-		const scale = 640 / (mapOffsetXY.x * 2);
+		const { available, mapOffsetXY } = scaling();
+		const scale = available.x / (mapOffsetXY.x * 2);
 		const map = this.elem.querySelector('.map');
 		map.style.transform = `scale(${scale}) translate(-${sourceXY.x}px, -${sourceXY.y}px)`;

--- a/server/scripts/modules/settings.mjs
+++ b/server/scripts/modules/settings.mjs
@@ -10,6 +10,11 @@ const deferredDomSettings = new Set();
 // don't show checkboxes for these settings
 const hiddenSettings = [
 	'scanLines',
+
+	// wide, portrait and enhanced are handled by a dropdown which sets these individual settings accordingly
+	'wide',
+	'portrait',
+	'enhanced',
 ];

 // Declare change functions first, before they're referenced in init() to avoid the Temporal Dead Zone (TDZ)
@@ -32,6 +37,69 @@ const wideScreenChange = (value) => {
 	window.dispatchEvent(new Event('resize'));
 };

+const portraitChange = (value) => {
+	const container = document.querySelector('#divTwc');
+	if (!container) {
+		// DOM not ready; defer enabling if set
+		if (value) {
+			deferredDomSettings.add('portrait');
+		}
+		return;
+	}
+
+	if (value) {
+		container.classList.add('portrait');
+	} else {
+		container.classList.remove('portrait');
+	}
+	// Trigger resize to recalculate scaling for new width
+	window.dispatchEvent(new Event('resize'));
+};
+
+const enhancedChange = (value) => {
+	const container = document.querySelector('#divTwc');
+	if (!container) {
+		// DOM not ready; defer enabling if set
+		if (value) {
+			deferredDomSettings.add('enhanced');
+		}
+		return;
+	}
+
+	if (value) {
+		container.classList.add('enhanced');
+	} else {
+		container.classList.remove('enhanced');
+	}
+	// Trigger resize to recalculate scaling for new width
+	window.dispatchEvent(new Event('redraw'));
+};
+
+const viewModeChange = (value) => {
+	// set the appropriate mode bits which triggers change actions above
+	switch (value) {
+		case 'wide':
+			settings.wide.value = true;
+			settings.enhanced.value = false;
+			settings.portrait.value = false;
+			break;
+		case 'wide-enhanced':
+			settings.wide.value = true;
+			settings.enhanced.value = true;
+			settings.portrait.value = false;
+			break;
+		case 'portrait-enhanced':
+			settings.wide.value = false;
+			settings.enhanced.value = true;
+			settings.portrait.value = true;
+			break;
+		default:
+			settings.wide.value = false;
+			settings.enhanced.value = false;
+			settings.portrait.value = false;
+	}
+};
+
 const kioskChange = (value) => {
 	const body = document.querySelector('body');
 	if (!body) {
@@ -130,6 +198,39 @@ const init = () => {
 		changeAction: wideScreenChange,
 		sticky: true,
 	});
+	settings.portrait = new Setting('portrait', {
+		name: 'Allow Portrait',
+		changeAction: portraitChange,
+		defaultValue: false,
+		sticky: true,
+	});
+	settings.enhanced = new Setting('enhanced', {
+		name: 'Enhanced Screens',
+		defaultValue: false,
+		changeAction: enhancedChange,
+		sticky: true,
+	});
+	// widescreen, portrait and enhanced are handled by a dropdown
+	// the dropdown change action sets the above bits accordingly
+	// first, figure out the default value based on other settings
+	// this also enforces rules on how these can be combined
+	let viewModeDefault = 'standard';
+	if (settings.wide.value && !settings.enhanced.value) viewModeDefault = 'wide';
+	if (settings.wide.value && settings.enhanced.value) viewModeDefault = 'wide-enhanced';
+	if (settings.portrait.value) viewModeDefault = 'portrait-enhanced';
+	settings.viewMode = new Setting('viewMode', {
+		name: 'Display mode',
+		type: 'select',
+		defaultValue: viewModeDefault,
+		changeAction: viewModeChange,
+		sticky: false,	// not sticky because the above 3 settings are sticky and define this item's starting state
+		values: [
+			['standard', 'Standard'],
+			['wide', 'Widescreen'],
+			['wide-enhanced', 'Widescreen enhanced'],
+			['portrait-enhanced', 'Portrait enhanced'],
+		],
+	});
 	settings.kiosk = new Setting('kiosk', {
 		name: 'Kiosk',
 		defaultValue: false,
@@ -172,6 +273,7 @@ const init = () => {
 			['medium', 'Medium (2x)'],
 			['thick', 'Thick (3x)'],
 		],
+		visible: false,
 	});
 	settings.units = new Setting('units', {
 		name: 'Units',
@@ -221,7 +323,7 @@ document.addEventListener('DOMContentLoaded', () => {
 	const settingHtml = Object.values(settings).map((setting) => {
 		if (hiddenSettings.includes(setting.shortName)) {
 			// setting is hidden, register it
-			registerHiddenSetting(setting.elemId, setting);
+			registerHiddenSetting(setting.shortName, setting);
 			return false;
 		}
 		// generate HTML for setting
@@ -239,7 +341,6 @@ document.addEventListener('DOMContentLoaded', () => {
 	} else if (modeSelect) {
 		modeSelect.style.display = 'none';
 	}
-	registerHiddenSetting('settings-scanLineMode-select', settings.scanLineMode);
 });

 export default settings;
--- a/server/scripts/modules/share.mjs
+++ b/server/scripts/modules/share.mjs
@@ -25,22 +25,28 @@ const createLink = async (e) => {
 	const queryStringElements = {};

 	elemForEach('input[type=checkbox]', (elem) => {
-		if (elem?.id) {
-			queryStringElements[elem.id] = elem?.checked ?? false;
+		// use name, and fallback to id (older prefix/suffix permalinks)
+		const key = elem?.name ?? elem?.id;
+		if (key) {
+			queryStringElements[key] = elem?.checked ?? false;
 		}
 	});

 	// get all select boxes
 	elemForEach('select', (elem) => {
-		if (elem?.id) {
-			queryStringElements[elem.id] = encodeURIComponent(elem?.value ?? '');
+		// use name, and fallback to id (older prefix/suffix permalinks)
+		const key = elem?.name ?? elem?.id;
+		if (key) {
+			queryStringElements[key] = encodeURIComponent(elem?.value ?? '');
 		}
 	});

 	// get all text boxes
 	elemForEach('input[type=text]', ((elem) => {
-		if (elem?.id) {
-			queryStringElements[elem.id] = elem?.value ?? 0;
+		// use name, and fallback to id (older prefix/suffix permalinks)
+		const key = elem?.name ?? elem?.id;
+		if (key && key !== '') {
+			queryStringElements[key] = elem?.value ?? 0;
 		}
 	}));

--- a/server/scripts/modules/utils/setting.mjs
+++ b/server/scripts/modules/utils/setting.mjs
@@ -41,7 +41,9 @@ class Setting {
 		this.elemId = `settings-${shortName}-${this.type}`;

 		// get value from url
-		const urlValue = parseQueryString()?.[this.elemId];
+		// includes a fallback to the older prefix/suffix version
+		const queryString = parseQueryString();
+		const urlValue = queryString?.[shortName] ?? queryString?.[this.elemId];
 		let urlState;
 		if (this.type === 'checkbox' && urlValue !== undefined) {
 			urlState = urlValue === 'true';
@@ -92,7 +94,7 @@ class Setting {

 		const select = document.createElement('select');
 		select.id = `settings-${this.shortName}-select`;
-		select.name = `settings-${this.shortName}-select`;
+		select.name = this.shortName;
 		select.addEventListener('change', (e) => this.selectChange(e));

 		this.values.forEach(([value, text]) => {
@@ -125,7 +127,7 @@ class Setting {
 		checkbox.type = 'checkbox';
 		checkbox.value = true;
 		checkbox.id = `settings-${this.shortName}-checkbox`;
-		checkbox.name = `settings-${this.shortName}-checkbox`;
+		checkbox.name = this.shortName;
 		checkbox.checked = this.myValue;
 		checkbox.addEventListener('change', (e) => this.checkboxChange(e));
 		const span = document.createElement('span');
@@ -148,14 +150,14 @@ class Setting {
 		textInput.type = 'text';
 		textInput.value = this.myValue;
 		textInput.id = `settings-${this.shortName}-string`;
-		textInput.name = `settings-${this.shortName}-string`;
+		textInput.name = this.shortName;
 		textInput.placeholder = this.placeholder;
 		// set button
 		const setButton = document.createElement('input');
 		setButton.type = 'button';
 		setButton.value = 'Set';
 		setButton.id = `settings-${this.shortName}-button`;
-		setButton.name = `settings-${this.shortName}-button`;
+		setButton.name = this.shortName;
 		setButton.addEventListener('click', () => {
 			this.stringChange({ target: { value: textInput.value } });
 		});
--- a/server/scripts/modules/utils/string.mjs
+++ b/server/scripts/modules/utils/string.mjs
@@ -13,7 +13,12 @@ const locationCleanup = (input) => {
 	return regexes.reduce((value, regex) => value.replace(regex, ''), input);
 };

+// stations must be 4 alpha characters and not start with the provided list
+const skipStations = ['U', 'C', 'H', 'W', 'Y', 'T', 'S', 'M', 'O', 'L', 'A', 'F', 'B', 'N', 'V', 'R', 'D', 'E', 'I', 'G', 'J'];
+const stationFilter = (station) => station.properties.stationIdentifier.match(/^[A-Z]{4}$/) && !skipStations.includes(station.properties.stationIdentifier.slice(0, 1));
+
 export {
-	// eslint-disable-next-line import/prefer-default-export
+
 	locationCleanup,
+	stationFilter,
 };
--- a/server/scripts/modules/weatherdisplay.mjs
+++ b/server/scripts/modules/weatherdisplay.mjs
@@ -55,8 +55,9 @@ class WeatherDisplay {
 		// no checkbox if progress
 		if (this.elemId === 'progress') return false;

-		// get url provided state
-		const urlValue = parseQueryString()?.[`${this.elemId}-checkbox`];
+		// get url provided state, and fall back to the older suffix naming convention
+		const queryString = parseQueryString();
+		const urlValue = queryString?.[this.elemId] ?? queryString?.[`${this.elemId}-checkbox`];
 		let urlState;
 		if (urlValue !== undefined) {
 			urlState = urlValue === 'true';
@@ -78,7 +79,7 @@ class WeatherDisplay {
 		checkbox.type = 'checkbox';
 		checkbox.value = true;
 		checkbox.id = `${this.elemId}-checkbox`;
-		checkbox.name = `${this.elemId}-checkbox`;
+		checkbox.name = this.elemId;
 		checkbox.checked = this.isEnabled;
 		checkbox.addEventListener('change', (e) => this.checkboxChange(e));
 		const span = document.createElement('span');
@@ -172,6 +173,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) postMessage({ type: 'current-weather-scroll', method: 'non-display' });
 		if (this.okToDrawCurrentConditions === false) postMessage({ type: 'current-weather-scroll', method: 'hide' });
 	}

--- a/server/scripts/vendor/auto/metar-taf-parser.mjs
+++ b/server/scripts/vendor/auto/metar-taf-parser.mjs
@@ -346,7 +346,7 @@ var TimeIndicator;
    TimeIndicator["TL"] = "TL";
 })(TimeIndicator || (TimeIndicator = {}));
 /**
- * https://www.aviationweather.gov/taf/decoder
+ * https://web.archive.org/web/20230318235549/https://aviationweather.gov/taf/decoder
 */
 var WeatherChangeType;
 (function (WeatherChangeType) {
@@ -2535,7 +2535,8 @@ class MetarParser extends AbstractParser {
        while (i < trendParts.length &&
            trendParts[i] !== this.TEMPO &&
            trendParts[i] !== this.INTER &&
-            trendParts[i] !== this.BECMG) {
+            trendParts[i] !== this.BECMG &&
+            trendParts[i] !== this.RMK) {
            if (trendParts[i].startsWith(this.FM) ||
                trendParts[i].startsWith(this.TL) ||
                trendParts[i].startsWith(this.AT)) {
--- a/server/styles/scss/_almanac.scss
+++ b/server/styles/scss/_almanac.scss
@@ -1,8 +1,13 @@
-@use 'shared/_colors' as c;
-@use 'shared/_utils' as u;
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;

 #almanac-html.weather-display {
 	background-image: url('../images/backgrounds/3.png');
+
+	// repeat the background if wide-enhanced
+	.wide.enhanced & {
+		background-image: url('../images/backgrounds/3-wide-enhanced.png');
+	}
 }

 .weather-display .main.almanac {
@@ -14,13 +19,17 @@
 		// Use CSS Grid for cross-browser consistency
 		// Grid is populated in reading order (left-to-right, top-to-bottom):
 		display: grid;
-		grid-template-columns: auto auto auto;
-		grid-template-rows: auto auto auto;
+		grid-template-columns: repeat(3, auto);
+		grid-template-rows: repeat(3, auto);
 		gap: 0px 90px;
 		margin: 3px auto 5px auto; // align the bottom of the div with the background
 		width: fit-content;
 		line-height: 30px;

+		.wide.enhanced & {
+			grid-template-columns: repeat(4, auto);
+		}
+
 		.grid-item {
 			// Reset inherited styles that interfere with grid layout
 			width: auto;
@@ -45,6 +54,14 @@
 			&.time {
 				text-align: center;
 			}
+
+			&.wide-enhanced {
+				display: none;
+
+				.wide.enhanced & {
+					display: block;
+				}
+			}
 		}
 	}

@@ -58,6 +75,10 @@
 			padding-left: 13px;
 		}

+		.days {
+			text-align: center;
+		}
+
 		.day {
 			display: inline-block;
 			text-align: center;
@@ -77,4 +98,4 @@



-}
+}
--- a/server/styles/scss/_current-weather.scss
+++ b/server/styles/scss/_current-weather.scss
@@ -1,8 +1,10 @@
-@use 'shared/_colors' as c;
-@use 'shared/_utils' as u;
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+@use 'shared/positions'as p;

 .weather-display .main.current-weather {
 	&.main {
+		width: calc(p.$standard-width - (2 * p.$blue-box-margin));

 		.col {
 			height: 50px;
@@ -12,12 +14,17 @@
 			padding-top: 10px;
 			position: absolute;

+			.wide.enhanced & {
+				width: 300px;
+				margin-left: 25px;
+				margin-right: 25px;
+			}
+
 			@include u.text-shadow();

 			&.left {
 				font-family: 'Star4000 Extended';
 				font-size: 24pt;
-
 			}

 			&.right {
@@ -92,4 +99,4 @@
 			text-wrap: nowrap;
 		}
 	}
-}
+}
--- a/server/styles/scss/_hazards.scss
+++ b/server/styles/scss/_hazards.scss
@@ -1,5 +1,6 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
+@use 'shared/positions'as p;

 #hazards-html.weather-display {
 	background-image: url('../images/backgrounds/7.png');
@@ -8,7 +9,7 @@
 .weather-display .main.hazards {
 	&.main {
 		overflow-y: hidden;
-		height: 480px;
+		height: p.$standard-height;
 		background-color: rgb(112, 35, 35);


--- a/server/styles/scss/_hourly-graph.scss
+++ b/server/styles/scss/_hourly-graph.scss
@@ -4,6 +4,12 @@
 #hourly-graph-html {
 	background-image: url(../images/backgrounds/1-chart.png);

+	// change background for wide-enhanced
+	.wide.enhanced & {
+		background-image: url(../images/backgrounds/1-chart-wide.png);
+		background-position-x: 0px;
+	}
+
 	.header {
 		.right {
 			position: absolute;
@@ -84,10 +90,51 @@
 				&.l-5 {
 					left: calc(532px / 4 * 4);
 				}
+
+				// adjust when enhanced
+				.wide.enhanced & {
+
+					&.l-1 {
+						left: 0px;
+					}
+
+					&.l-2 {
+						left: calc(726px / 6 * 1);
+					}
+
+					&.l-3 {
+						left: calc(726px / 6 * 2);
+					}
+
+					&.l-4 {
+						left: calc(726px / 6 * 3);
+					}
+
+					&.l-5 {
+						left: calc(726px / 6 * 4);
+					}
+
+					&.l-6 {
+						left: calc(726px / 6 * 5);
+					}
+
+					&.l-7 {
+						left: calc(726px / 6 * 6);
+					}
+				}
+
+				// only in wide + enhanced
+				&.l-6,
+				&.l-7 {
+					display: none;
+
+					.wide.enhanced & {
+						display: block;
+					}
+				}
+
 			}

-
-
 		}

 		.chart {
@@ -97,6 +144,11 @@
 			img {
 				width: 532px;
 				height: 285px;
+
+				// wide and enhanced
+				.wide.enhanced & {
+					width: 746px;
+				}
 			}
 		}

@@ -128,32 +180,5 @@
 			}
 		}

-		.column-headers {
-			background-color: c.$column-header;
-			height: 20px;
-			position: absolute;
-			width: 100%;
-		}
-
-		.column-headers {
-			position: sticky;
-			top: 0px;
-			z-index: 5;
-
-
-			.temp {
-				left: 355px;
-			}
-
-			.like {
-				left: 435px;
-			}
-
-			.wind {
-				left: 535px;
-			}
-		}
-
-
 	}
 }
--- a/server/styles/scss/_hourly.scss
+++ b/server/styles/scss/_hourly.scss
@@ -84,11 +84,11 @@
 					left: 425px;

 					&.heat-index {
-						color: #e00;
+						color: c.$heat-index;
 					}

 					&.wind-chill {
-						color: c.$extended-low;
+						color: c.$wind-chill;
 					}
 				}

--- a/server/styles/scss/_latest-observations.scss
+++ b/server/styles/scss/_latest-observations.scss
@@ -46,6 +46,41 @@
 			left: 430px;
 		}

+		.like {
+			display: none;
+		}
+
+		// wide and enhanced moves the columns and enables the like column
+		.wide.enhanced & {
+			.temp {
+				left: 320px;
+			}
+
+			.like {
+				left: 380px;
+				display: hidden;
+
+				&.heat-index {
+					color: c.$heat-index;
+					display: block;
+				}
+
+				&.wind-chill {
+					display: block;
+					color: c.$wind-chill;
+				}
+			}
+
+			.weather {
+				left: 470px;
+			}
+
+			.wind {
+				left: 630px;
+			}
+
+		}
+
 		.observation-lines {
 			min-height: 338px;
 			padding-top: 10px;
--- a/server/styles/scss/_local-forecast.scss
+++ b/server/styles/scss/_local-forecast.scss
@@ -1,7 +1,14 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
+@use 'shared/positions'as p;

 .weather-display .local-forecast {
+
+	// clamp width to standard
+	&.main {
+		width: calc(p.$standard-width - (2 * p.$blue-box-margin));
+	}
+
 	.container {
 		position: relative;
 		top: 15px;
--- a/server/styles/scss/_page.scss
+++ b/server/styles/scss/_page.scss
@@ -1,5 +1,6 @@
@use 'shared/_utils'as u;
@use 'shared/_colors'as c;
+@use 'shared/positions'as p;

@font-face {
 	font-family: "Star4000";
@@ -33,7 +34,7 @@ body {
 }

 #divQuery {
-	max-width: 640px;
+	max-width: p.$standard-width;
 	padding: 8px;

 	.buttons {
@@ -146,11 +147,11 @@ body {
 	background-color: #000000;
 	color: #ffffff;
 	width: 100%;
-	max-width: 640px;
+	max-width: p.$standard-width;
 	margin: 0; // Ensure edge-to-edge display

 	&.wide {
-		max-width: 854px;
+		max-width: p.$wide-width;
 	}
 }

@@ -159,12 +160,12 @@ body {
 }

 #divTwcMain {
-	width: 640px;
-	height: 480px;
+	width: p.$standard-width;
+	height: p.$standard-height;
 	position: relative;

 	.wide & {
-		width: 854px;
+		width: p.$wide-width;
 	}
 }

@@ -209,10 +210,10 @@ body {
 	background-color: #000000;

 	color: #ffffff;
-	width: 640px;
+	width: p.$standard-width;

 	.wide & {
-		width: 854px;
+		width: p.$wide-width;
 	}

 	@media (prefers-color-scheme: dark) {
@@ -274,7 +275,7 @@ body {
 	flex-direction: row;
 	background-color: #000000;
 	color: #ffffff;
-	max-width: 640px;
+	max-width: p.$standard-width;
 }

 #divTwcNav>div {
@@ -336,8 +337,8 @@ body {

 #container {
 	position: relative;
-	width: 640px;
-	height: 480px;
+	width: p.$standard-width;
+	height: p.$standard-height;
 	// overflow: hidden;
 	background-image: url(../images/backgrounds/1.png);
 	transform-origin: 0 0;
@@ -345,8 +346,7 @@ body {
 }

 .wide #container {
-	padding-left: 107px;
-	padding-right: 107px;
+	width: p.$wide-width;
 	background: url(../images/backgrounds/1-wide.png);
 	background-repeat: no-repeat;
 }
@@ -359,8 +359,8 @@ body {
 }

 #loading {
-	width: 640px;
-	height: 480px;
+	width: p.$standard-width;
+	height: p.$standard-height;
 	max-width: 100%;
 	text-shadow: 4px 4px black;
 	display: flex;
@@ -368,6 +368,10 @@ body {
 	text-align: center;
 	justify-content: center;

+	.wide & {
+		margin-left: p.$wide-margin;
+	}
+
 	.title {
 		font-family: Star4000 Large;
 		font-size: 36px;
--- a/server/styles/scss/_progress.scss
+++ b/server/styles/scss/_progress.scss
@@ -1,17 +1,23 @@
-@use 'shared/_colors' as c;
-@use 'shared/_utils' as u;
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+@use 'shared/positions'as p;

 .weather-display .progress {
 	@include u.text-shadow();
 	font-family: 'Star4000 Extended';
 	font-size: 19pt;

+	// clamp width to standard
+	&.main {
+		width: calc(p.$standard-width - (2 * p.$blue-box-margin));
+	}
+
 	.container {
 		position: relative;
 		top: 15px;
 		margin: 0px 10px;
 		box-sizing: border-box;
-		height: 310px;
+		height: p.$standard-scroll-height;
 		overflow: hidden;
 		line-height: 28px;

@@ -118,4 +124,4 @@
 			transition: width 1s steps(6);
 		}
 	}
-}
+}
--- a/server/styles/scss/_radar.scss
+++ b/server/styles/scss/_radar.scss
@@ -1,9 +1,14 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
+@use 'shared/positions'as p;

 #radar-html.weather-display {
 	background-image: url('../images/backgrounds/4.png');

+	.wide & {
+		background: url(../images/backgrounds/4-wide.png);
+	}
+
 	.header {
 		height: 83px;

@@ -104,12 +109,13 @@
 .weather-display .main.radar {
 	overflow: hidden;
 	height: 367px;
+	width: p.$standard-width;

 	.container {

 		.tiles {
 			position: absolute;
-			width: 1400px;
+			width: 2040px;

 			img {
 				vertical-align: middle;
@@ -120,8 +126,4 @@
 			position: relative;
 		}
 	}
-}
-
-.wide.radar #container {
-	background: url(../images/backgrounds/4-wide.png);
 }
--- a/server/styles/scss/_regional-forecast.scss
+++ b/server/styles/scss/_regional-forecast.scss
@@ -1,10 +1,6 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;

-#regional-forecast-html.weather-display {
-	background-image: url('../images/backgrounds/5.png');
-}
-
 .weather-display .main.regional-forecast {


--- a/server/styles/scss/_spc-outlook.scss
+++ b/server/styles/scss/_spc-outlook.scss
@@ -1,5 +1,6 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
+@use 'shared/positions'as p;

 #spc-outlook-html.weather-display {
 	background-image: url('../images/backgrounds/6.png');
--- a/server/styles/scss/_weather-display.scss
+++ b/server/styles/scss/_weather-display.scss
@@ -1,29 +1,50 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
+@use 'shared/positions'as p;

 .weather-display {
-	width: 640px;
-	height: 480px;
+	width: p.$standard-width;
+	height: p.$standard-height;
 	overflow: hidden;
 	position: relative;
 	background-image: url(../images/backgrounds/1.png);

+	// adjust for wide
+	.wide & {
+		width: p.$wide-width;
+		background-position-x: p.$wide-margin;
+		background-repeat: no-repeat;
+	}
+
+	.wide.enhanced & {
+		&:has(.can-enhance) {
+			background-image: url(../images/backgrounds/1-wide-enhanced.png);
+			background-position-x: 0px;
+		}
+	}
+
 	/* this method is required to hide blocks so they can be measured while off screen */
 	height: 0px;

 	&.show {
-		height: 480px;
+		height: p.$standard-height;
 	}

 	.template {
 		display: none;
 	}

-	.header {
-		width: 640px;
+	>.header {
+		width: p.$standard-width;
 		height: 60px;
+		position: relative;
 		padding-top: 30px;

+		// adjust for wide
+		.wide & {
+			left: p.$wide-margin;
+		}
+
 		.title {
 			color: c.$title-color;
 			@include u.text-shadow(3px, 1.5px);
@@ -92,10 +113,23 @@
 	.main {
 		position: relative;

+		// adjust for wide
+		.wide & {
+			left: p.$wide-margin;
+		}
+
+		// adjust for enhanced when possible
+		.wide.enhanced & {
+			&.can-enhance {
+				left: 0px;
+				width: p.$wide-width;
+			}
+		}
+
 		&.has-scroll {
-			width: 640px;
+			width: p.$standard-width;
 			margin-top: 0;
-			height: 310px;
+			height: p.$standard-scroll-height;
 			overflow: hidden;

 			&.no-header {
@@ -105,9 +139,15 @@
 		}

 		&.has-box {
-			margin-left: 64px;
-			margin-right: 64px;
+			margin-left: p.$blue-box-margin;
+			margin-right: p.$blue-box-margin;
 			width: calc(100% - 128px);
+
+			.wide.enhanced & {
+				&.can-enhance {
+					width: calc(p.$wide-width - p.$blue-box-margin - p.$blue-box-margin)
+				}
+			}
 		}

 	}
@@ -117,7 +157,7 @@
 #container>.scroll {
 	display: none;
 	@include u.text-shadow(3px, 1.5px);
-	width: 640px;
+	width: p.$standard-width;
 	height: 77px;
 	overflow: hidden;
 	margin-top: 3px;
@@ -125,12 +165,17 @@
 	bottom: 0px;
 	z-index: 1;

+	// adjust for wide
+	.wide & {
+		left: p.$wide-margin;
+	}
+
 	&.hazard {
 		background-color: rgb(112, 35, 35);
 	}

 	.scroll-container {
-		width: 640px;
+		width: p.$standard-width;

 		.fixed,
 		.scroll-header {
@@ -156,7 +201,7 @@
 				position: relative;
 				// the following added by js code as it is dependent on the content of the element
 				// transition: left (x)s;
-				// left: calc((elem width) - 640px);
+				// left: calc((elem width) - p.$standard-width);
 			}
 		}
 	}
@@ -166,10 +211,10 @@
 }

 .wide #container>.scroll {
-	width: 854px;
-	margin-left: -107px;
+	width: p.$wide-width;
+	margin-left: -1*p.$wide-margin;

 	.scroll-container {
-		margin-left: 107px;
+		margin-left: p.$wide-margin;
 	}
 }
--- a/server/styles/scss/shared/_colors.scss
+++ b/server/styles/scss/shared/_colors.scss
@@ -13,5 +13,7 @@ $gradient-loading-3: #4f99f9;
 $gradient-loading-4: #8ffdfa;

 $extended-low: #8080FF;
+$wind-chill: #8080FF;
+$heat-index: #e00;

 $blue-box: #26235a;
--- a/server/styles/scss/shared/_positions.scss
+++ b/server/styles/scss/shared/_positions.scss
@@ -0,0 +1,14 @@
+// standard positioning
+$standard-width: 640px;
+$standard-height: 480px;
+
+// height with scroll
+$standard-scroll-height: 310px;
+
+// blue box size
+$blue-box-margin: 64px;
+
+// wide screen positioning
+$wide-padding: 107px;
+$wide-margin: 107px;
+$wide-width: 854px;
--- a/server/styles/ws.min.css
+++ b/server/styles/ws.min.css
--- a/server/styles/ws.min.css.map
+++ b/server/styles/ws.min.css.map
--- a/tests/package-lock.json
+++ b/tests/package-lock.json
@@ -14,12 +14,12 @@
 			}
 		},
 		"node_modules/@babel/code-frame": {
-			"version": "7.27.1",
-			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
-			"integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+			"version": "7.29.0",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+			"integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
 			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-validator-identifier": "^7.27.1",
+				"@babel/helper-validator-identifier": "^7.28.5",
 				"js-tokens": "^4.0.0",
 				"picocolors": "^1.1.1"
 			},
@@ -37,16 +37,16 @@
 			}
 		},
 		"node_modules/@puppeteer/browsers": {
-			"version": "2.10.13",
-			"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.10.13.tgz",
-			"integrity": "sha512-a9Ruw3j3qlnB5a/zHRTkruppynxqaeE4H9WNj5eYGRWqw0ZauZ23f4W2ARf3hghF5doozyD+CRtt7XSYuYRI/Q==",
+			"version": "2.13.0",
+			"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.13.0.tgz",
+			"integrity": "sha512-46BZJYJjc/WwmKjsvDFykHtXrtomsCIrwYQPOP7VfMJoZY2bsDF9oROBABR3paDjDcmkUye1Pb1BqdcdiipaWA==",
 			"license": "Apache-2.0",
 			"dependencies": {
 				"debug": "^4.4.3",
 				"extract-zip": "^2.0.1",
 				"progress": "^2.0.3",
 				"proxy-agent": "^6.5.0",
-				"semver": "^7.7.3",
+				"semver": "^7.7.4",
 				"tar-fs": "^3.1.1",
 				"yargs": "^17.7.2"
 			},
@@ -64,13 +64,13 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "24.10.1",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
-			"integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+			"version": "25.5.0",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-25.5.0.tgz",
+			"integrity": "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==",
 			"license": "MIT",
 			"optional": true,
 			"dependencies": {
-				"undici-types": "~7.16.0"
+				"undici-types": "~7.18.0"
 			}
 		},
 		"node_modules/@types/yauzl": {
@@ -135,9 +135,9 @@
 			}
 		},
 		"node_modules/b4a": {
-			"version": "1.7.3",
-			"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.7.3.tgz",
-			"integrity": "sha512-5Q2mfq2WfGuFp3uS//0s6baOJLMoVduPYVeNmDYxu5OUA1/cBfvr2RIS7vi62LdNj/urk1hfmj867I3qt6uZ7Q==",
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.0.tgz",
+			"integrity": "sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==",
 			"license": "Apache-2.0",
 			"peerDependencies": {
 				"react-native-b4a": "*"
@@ -163,11 +163,10 @@
 			}
 		},
 		"node_modules/bare-fs": {
-			"version": "4.5.1",
-			"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.5.1.tgz",
-			"integrity": "sha512-zGUCsm3yv/ePt2PHNbVxjjn0nNB1MkIaR4wOCxJ2ig5pCf5cCVAYJXVhQg/3OhhJV6DB1ts7Hv0oUaElc2TPQg==",
+			"version": "4.5.6",
+			"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.5.6.tgz",
+			"integrity": "sha512-1QovqDrR80Pmt5HPAsMsXTCFcDYr+NSUKW6nd6WO5v0JBmnItc/irNRzm2KOQ5oZ69P37y+AMujNyNtG+1Rggw==",
 			"license": "Apache-2.0",
-			"optional": true,
 			"dependencies": {
 				"bare-events": "^2.5.4",
 				"bare-path": "^3.0.0",
@@ -188,11 +187,10 @@
 			}
 		},
 		"node_modules/bare-os": {
-			"version": "3.6.2",
-			"resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.2.tgz",
-			"integrity": "sha512-T+V1+1srU2qYNBmJCXZkUY5vQ0B4FSlL3QDROnKQYOqeiQR8UbjNHlPa+TIbM4cuidiN9GaTaOZgSEgsvPbh5A==",
+			"version": "3.8.0",
+			"resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.8.0.tgz",
+			"integrity": "sha512-Dc9/SlwfxkXIGYhvMQNUtKaXCaGkZYGcd1vuNUUADVqzu4/vQfvnMkYYOUnt2VwQ2AqKr/8qAVFRtwETljgeFg==",
 			"license": "Apache-2.0",
-			"optional": true,
 			"engines": {
 				"bare": ">=1.14.0"
 			}
@@ -202,25 +200,28 @@
 			"resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz",
 			"integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==",
 			"license": "Apache-2.0",
-			"optional": true,
 			"dependencies": {
 				"bare-os": "^3.0.1"
 			}
 		},
 		"node_modules/bare-stream": {
-			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.7.0.tgz",
-			"integrity": "sha512-oyXQNicV1y8nc2aKffH+BUHFRXmx6VrPzlnaEvMhram0nPBrKcEdcyBg5r08D0i8VxngHFAiVyn1QKXpSG0B8A==",
+			"version": "2.11.0",
+			"resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.11.0.tgz",
+			"integrity": "sha512-Y/+iQ49fL3rIn6w/AVxI/2+BRrpmzJvdWt5Jv8Za6Ngqc6V227c+pYjYYgLdpR3MwQ9ObVXD0ZrqoBztakM0rw==",
 			"license": "Apache-2.0",
-			"optional": true,
 			"dependencies": {
-				"streamx": "^2.21.0"
+				"streamx": "^2.25.0",
+				"teex": "^1.0.1"
 			},
 			"peerDependencies": {
+				"bare-abort-controller": "*",
 				"bare-buffer": "*",
 				"bare-events": "*"
 			},
 			"peerDependenciesMeta": {
+				"bare-abort-controller": {
+					"optional": true
+				},
 				"bare-buffer": {
 					"optional": true
 				},
@@ -230,19 +231,18 @@
 			}
 		},
 		"node_modules/bare-url": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.3.2.tgz",
-			"integrity": "sha512-ZMq4gd9ngV5aTMa5p9+UfY0b3skwhHELaDkhEHetMdX0LRkW9kzaym4oo/Eh+Ghm0CCDuMTsRIGM/ytUc1ZYmw==",
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.4.0.tgz",
+			"integrity": "sha512-NSTU5WN+fy/L0DDenfE8SXQna4voXuW0FHM7wH8i3/q9khUSchfPbPezO4zSFMnDGIf9YE+mt/RWhZgNRKRIXA==",
 			"license": "Apache-2.0",
-			"optional": true,
 			"dependencies": {
 				"bare-path": "^3.0.0"
 			}
 		},
 		"node_modules/basic-ftp": {
-			"version": "5.0.5",
-			"resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz",
-			"integrity": "sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==",
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.2.0.tgz",
+			"integrity": "sha512-VoMINM2rqJwJgfdHq6RiUudKt2BV+FY5ZFezP/ypmwayk68+NzzAQy4XXLlqsGD4MCzq3DrmNFD/uUmBJuGoXw==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=10.0.0"
@@ -279,9 +279,9 @@
 			}
 		},
 		"node_modules/chromium-bidi": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-11.0.0.tgz",
-			"integrity": "sha512-cM3DI+OOb89T3wO8cpPSro80Q9eKYJ7hGVXoGS3GkDPxnYSqiv+6xwpIf6XERyJ9Tdsl09hmNmY94BkgZdVekw==",
+			"version": "14.0.0",
+			"resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-14.0.0.tgz",
+			"integrity": "sha512-9gYlLtS6tStdRWzrtXaTMnqcM4dudNegMXJxkR0I/CXObHalYeYcAMPrL19eroNZHtJ8DQmu1E+ZNOYu/IXMXw==",
 			"license": "Apache-2.0",
 			"dependencies": {
 				"mitt": "^3.0.1",
@@ -324,9 +324,9 @@
 			"license": "MIT"
 		},
 		"node_modules/cosmiconfig": {
-			"version": "9.0.0",
-			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
-			"integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.1.tgz",
+			"integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==",
 			"license": "MIT",
 			"dependencies": {
 				"env-paths": "^2.2.1",
@@ -390,11 +390,10 @@
 			}
 		},
 		"node_modules/devtools-protocol": {
-			"version": "0.0.1521046",
-			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1521046.tgz",
-			"integrity": "sha512-vhE6eymDQSKWUXwwA37NtTTVEzjtGVfDr3pRbsWEQ5onH/Snp2c+2xZHWJJawG/0hCCJLRGt4xVtEVUVILol4w==",
-			"license": "BSD-3-Clause",
-			"peer": true
+			"version": "0.0.1581282",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1581282.tgz",
+			"integrity": "sha512-nv7iKtNZQshSW2hKzYNr46nM/Cfh5SEvE2oV0/SEGgc9XupIY5ggf84Cz8eJIkBce7S3bmTAauFD6aysMpnqsQ==",
+			"license": "BSD-3-Clause"
 		},
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
@@ -816,9 +815,9 @@
 			"license": "MIT"
 		},
 		"node_modules/pump": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
-			"integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+			"integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
 			"license": "MIT",
 			"dependencies": {
 				"end-of-stream": "^1.1.0",
@@ -826,18 +825,18 @@
 			}
 		},
 		"node_modules/puppeteer": {
-			"version": "24.31.0",
-			"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.31.0.tgz",
-			"integrity": "sha512-q8y5yLxLD8xdZdzNWqdOL43NbfvUOp60SYhaLZQwHC9CdKldxQKXOyJAciOr7oUJfyAH/KgB2wKvqT2sFKoVXA==",
+			"version": "24.40.0",
+			"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.40.0.tgz",
+			"integrity": "sha512-IxQbDq93XHVVLWHrAkFP7F7iHvb9o0mgfsSIMlhHb+JM+JjM1V4v4MNSQfcRWJopx9dsNOr9adYv0U5fm9BJBQ==",
 			"hasInstallScript": true,
 			"license": "Apache-2.0",
 			"dependencies": {
-				"@puppeteer/browsers": "2.10.13",
-				"chromium-bidi": "11.0.0",
+				"@puppeteer/browsers": "2.13.0",
+				"chromium-bidi": "14.0.0",
 				"cosmiconfig": "^9.0.0",
-				"devtools-protocol": "0.0.1521046",
-				"puppeteer-core": "24.31.0",
-				"typed-query-selector": "^2.12.0"
+				"devtools-protocol": "0.0.1581282",
+				"puppeteer-core": "24.40.0",
+				"typed-query-selector": "^2.12.1"
 			},
 			"bin": {
 				"puppeteer": "lib/cjs/puppeteer/node/cli.js"
@@ -847,18 +846,18 @@
 			}
 		},
 		"node_modules/puppeteer-core": {
-			"version": "24.31.0",
-			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.31.0.tgz",
-			"integrity": "sha512-pnAohhSZipWQoFpXuGV7xCZfaGhqcBR9C4pVrU0QSrcMi7tQMH9J9lDBqBvyMAHQqe8HCARuREqFuVKRQOgTvg==",
+			"version": "24.40.0",
+			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.40.0.tgz",
+			"integrity": "sha512-MWL3XbUCfVgGR0gRsidzT6oKJT2QydPLhMITU6HoVWiiv4gkb6gJi3pcdAa8q4HwjBTbqISOWVP4aJiiyUJvag==",
 			"license": "Apache-2.0",
 			"dependencies": {
-				"@puppeteer/browsers": "2.10.13",
-				"chromium-bidi": "11.0.0",
+				"@puppeteer/browsers": "2.13.0",
+				"chromium-bidi": "14.0.0",
 				"debug": "^4.4.3",
-				"devtools-protocol": "0.0.1521046",
-				"typed-query-selector": "^2.12.0",
-				"webdriver-bidi-protocol": "0.3.9",
-				"ws": "^8.18.3"
+				"devtools-protocol": "0.0.1581282",
+				"typed-query-selector": "^2.12.1",
+				"webdriver-bidi-protocol": "0.4.1",
+				"ws": "^8.19.0"
 			},
 			"engines": {
 				"node": ">=18"
@@ -883,9 +882,9 @@
 			}
 		},
 		"node_modules/semver": {
-			"version": "7.7.3",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-			"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+			"version": "7.7.4",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+			"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
 			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
@@ -943,9 +942,9 @@
 			}
 		},
 		"node_modules/streamx": {
-			"version": "2.23.0",
-			"resolved": "https://registry.npmjs.org/streamx/-/streamx-2.23.0.tgz",
-			"integrity": "sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==",
+			"version": "2.25.0",
+			"resolved": "https://registry.npmjs.org/streamx/-/streamx-2.25.0.tgz",
+			"integrity": "sha512-0nQuG6jf1w+wddNEEXCF4nTg3LtufWINB5eFEN+5TNZW7KWJp6x87+JFL43vaAUPyCfH1wID+mNVyW6OHtFamg==",
 			"license": "MIT",
 			"dependencies": {
 				"events-universal": "^1.0.0",
@@ -980,9 +979,9 @@
 			}
 		},
 		"node_modules/tar-fs": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.1.tgz",
-			"integrity": "sha512-LZA0oaPOc2fVo82Txf3gw+AkEd38szODlptMYejQUhndHMLQ9M059uXR+AfS7DNo0NpINvSqDsvyaCrBVkptWg==",
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.2.tgz",
+			"integrity": "sha512-QGxxTxxyleAdyM3kpFs14ymbYmNFrfY+pHj7Z8FgtbZ7w2//VAgLMac7sT6nRpIHjppXO2AwwEOg0bPFVRcmXw==",
 			"license": "MIT",
 			"dependencies": {
 				"pump": "^3.0.0",
@@ -994,20 +993,30 @@
 			}
 		},
 		"node_modules/tar-stream": {
-			"version": "3.1.7",
-			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
-			"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+			"version": "3.1.8",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.8.tgz",
+			"integrity": "sha512-U6QpVRyCGHva435KoNWy9PRoi2IFYCgtEhq9nmrPPpbRacPs9IH4aJ3gbrFC8dPcXvdSZ4XXfXT5Fshbp2MtlQ==",
 			"license": "MIT",
 			"dependencies": {
 				"b4a": "^1.6.4",
+				"bare-fs": "^4.5.5",
 				"fast-fifo": "^1.2.0",
 				"streamx": "^2.15.0"
 			}
 		},
+		"node_modules/teex": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/teex/-/teex-1.0.1.tgz",
+			"integrity": "sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==",
+			"license": "MIT",
+			"dependencies": {
+				"streamx": "^2.12.5"
+			}
+		},
 		"node_modules/text-decoder": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
-			"integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==",
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.7.tgz",
+			"integrity": "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==",
 			"license": "Apache-2.0",
 			"dependencies": {
 				"b4a": "^1.6.4"
@@ -1020,22 +1029,22 @@
 			"license": "0BSD"
 		},
 		"node_modules/typed-query-selector": {
-			"version": "2.12.0",
-			"resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
-			"integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==",
+			"version": "2.12.1",
+			"resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.1.tgz",
+			"integrity": "sha512-uzR+FzI8qrUEIu96oaeBJmd9E7CFEiQ3goA5qCVgc4s5llSubcfGHq9yUstZx/k4s9dXHVKsE35YWoFyvEqEHA==",
 			"license": "MIT"
 		},
 		"node_modules/undici-types": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
-			"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+			"version": "7.18.2",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+			"integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
 			"license": "MIT",
 			"optional": true
 		},
 		"node_modules/webdriver-bidi-protocol": {
-			"version": "0.3.9",
-			"resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.3.9.tgz",
-			"integrity": "sha512-uIYvlRQ0PwtZR1EzHlTMol1G0lAlmOe6wPykF9a77AK3bkpvZHzIVxRE2ThOx5vjy2zISe0zhwf5rzuUfbo1PQ==",
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.1.tgz",
+			"integrity": "sha512-ARrjNjtWRRs2w4Tk7nqrf2gBI0QXWuOmMCx2hU+1jUt6d00MjMxURrhxhGbrsoiZKJrhTSTzbIrc554iKI10qw==",
 			"license": "Apache-2.0"
 		},
 		"node_modules/wrap-ansi": {
@@ -1062,9 +1071,9 @@
 			"license": "ISC"
 		},
 		"node_modules/ws": {
-			"version": "8.18.3",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-			"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+			"version": "8.20.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
+			"integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=10.0.0"
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -62,15 +62,16 @@
  <script type="module" src="scripts/modules/radar.mjs"></script>
  <script type="module" src="scripts/modules/settings.mjs"></script>
  <script type="module" src="scripts/modules/media.mjs"></script>
+  <script type="module" src="scripts/modules/custom-scroll-text.mjs"></script>
  <script type="module" src="scripts/index.mjs"></script>
  <% } %>

 </head>

-<body <% if (query && query['settings-kiosk-checkbox'] === 'true' ) { %>class="kiosk" <% }%>>
+<body <% if (query && (query['kiosk'] === true || query['settings-kiosk-checkbox'] === 'true' )) { %>class="kiosk" <% }%>>

  <div id="divQuery">
-    <input id="txtLocation" type="text" value="" placeholder="ZIP Code or City, State" data-1p-ignore />
+    <input id="txtLocation" name="txtLocation" type="text" value="" placeholder="ZIP Code or City, State" data-1p-ignore />
    <div class="buttons">
      <button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light" />
        <img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark" />
--- a/views/partials/almanac.ejs
+++ b/views/partials/almanac.ejs
@@ -1,15 +1,18 @@
 <%- include('header.ejs', {title:'Almanac', hasTime: true}) %>
-<div class="main has-scroll almanac">
+<div class="main has-scroll almanac can-enhance">
  <div class="sun">
    <div class="grid-item empty"></div>
+    <div class="grid-item header day-0"></div>
    <div class="grid-item header day-1"></div>
-    <div class="grid-item header day-2"></div>
+    <div class="grid-item header day-2 wide-enhanced"></div>
    <div class="grid-item row-label">Sunrise:</div>
+    <div class="grid-item time rise-0"></div>
    <div class="grid-item time rise-1"></div>
-    <div class="grid-item time rise-2"></div>
+    <div class="grid-item time rise-2 wide-enhanced"></div>
    <div class="grid-item row-label">Sunset:</div>
+    <div class="grid-item time set-0"></div>
    <div class="grid-item time set-1"></div>
-    <div class="grid-item time set-2"></div>
+    <div class="grid-item time set-2 wide-enhanced"></div>
  </div>
  <div class="moon">
    <div class="title">Moon Data:</div>
--- a/views/partials/current-weather.ejs
+++ b/views/partials/current-weather.ejs
@@ -1,5 +1,5 @@
 <%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true, hasTime: true}) %>
-<div class="main has-scroll has-box current-weather">
+<div class="main has-scroll has-box current-weather can-enhance">
  <div class="weather template">
    <div class="left col">
      <div class="temp center"></div>
--- a/views/partials/hourly-graph.ejs
+++ b/views/partials/hourly-graph.ejs
@@ -1,8 +1,8 @@
 <%- include('header.ejs', {title: 'Hourly Graph' , hasTime: false }) %>
-<div class="main has-scroll hourly-graph">
+<div class="main has-scroll hourly-graph can-enhance">
  <div class="top-right template ">
    <div class="temperature">Temperature</div>
-		<div class="dewpoint">Dewpoint</div>
+    <div class="dewpoint">Dewpoint</div>
    <div class="cloud">Cloud %</div>
    <div class="rain">Precip %</div>
  </div>
@@ -10,7 +10,7 @@
    <div class="label l-1">75</div>
    <div class="label l-2">65</div>
    <div class="label l-3">55</div>
-		<div class="label l-4">45</div>
+    <div class="label l-4">45</div>
  </div>
  <div class="chart">
    <img id="chart-area"></img>
@@ -21,5 +21,7 @@
    <div class="label l-3">12p</div>
    <div class="label l-4">6p</div>
    <div class="label l-5">12a</div>
+    <div class="label l-6">6a</div>
+    <div class="label l-7">12p</div>
  </div>
 </div>
--- a/views/partials/latest-observations.ejs
+++ b/views/partials/latest-observations.ejs
@@ -1,9 +1,10 @@
 <%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true, hasTime: true }) %>
-<div class="main has-scroll latest-observations has-box">
+<div class="main has-scroll latest-observations has-box can-enhance">
  <div class="container">
    <div class="column-headers">
      <div class="temp english">&deg;F</div>
      <div class="temp metric">&deg;C</div>
+      <div class="like">Like</div>
      <div class="weather">Weather</div>
      <div class="wind">Wind</div>
    </div>
@@ -11,6 +12,7 @@
      <div class="observation-row template">
        <div class="location"></div>
        <div class="temp"></div>
+        <div class="like"></div>
        <div class="weather"></div>
        <div class="wind"></div>
      </div>
--- a/views/partials/local-forecast.ejs
+++ b/views/partials/local-forecast.ejs
@@ -1,12 +1,12 @@
 <%- include('header.ejs', {titleDual:{ top: 'Local' , bottom: 'Forecast' }, hasTime: true, noaaLogo: true}) %>
-	<div class="main has-scroll has-box local-forecast">
-		<div class="container">
-			<div class="forecasts">
-				<div class="forecast template">
-					<div class="text">
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll has-box local-forecast can-enhance">
+  <div class="container">
+    <div class="forecasts">
+      <div class="forecast template">
+        <div class="text">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<%- include('scroll.ejs') %>
--- a/views/partials/radar.ejs
+++ b/views/partials/radar.ejs
@@ -1,45 +1,45 @@
 <div class="header">
-	<div class="logo"><img src="images/logos/logo-corner.png" /></div>
-	<div class="title dual">
-		<div class="top">
-			Local
-		</div>
-		<div class="bottom">
-			Radar
-		</div>
-	</div>
-	<div class="right">
-		<div class="precip">
-			<div class="precip-header">PRECIP</div>
-			<div class="scale">
-				<div class="text">Light</div>
-				<div class="scale-table">
-					<div class="box box-1"></div>
-					<div class="box box-2"></div>
-					<div class="box box-3"></div>
-					<div class="box box-4"></div>
-					<div class="box box-5"></div>
-					<div class="box box-6"></div>
-					<div class="box box-7"></div>
-					<div class="box box-7"></div>
-				</div>
-				<div class="text">Heavy</div>
-			</div>
-			<div class="time"></div>
-		</div>
-	</div>
+  <div class="logo"><img src="images/logos/logo-corner.png" /></div>
+  <div class="title dual">
+    <div class="top">
+      Local
+    </div>
+    <div class="bottom">
+      Radar
+    </div>
+  </div>
+  <div class="right">
+    <div class="precip">
+      <div class="precip-header">PRECIP</div>
+      <div class="scale">
+        <div class="text">Light</div>
+        <div class="scale-table">
+          <div class="box box-1"></div>
+          <div class="box box-2"></div>
+          <div class="box box-3"></div>
+          <div class="box box-4"></div>
+          <div class="box box-5"></div>
+          <div class="box box-6"></div>
+          <div class="box box-7"></div>
+          <div class="box box-7"></div>
+        </div>
+        <div class="text">Heavy</div>
+      </div>
+      <div class="time"></div>
+    </div>
+  </div>
 </div>

-<div class="main radar">
-	<div class="container">
-		<div class="map-tiles tiles"><img/><img/><img/><img/></div>
-		<div class="scroll-area">
-			<div class="frame template">
-				<div class="map">
-					<img/>
-				</div>
-			</div>
-		</div>
-		<div class="overlay-tiles tiles"><img/><img/><img/><img/></div>
-	</div>
+<div class="main radar can-enhance">
+  <div class="container">
+    <div class="map-tiles tiles"><img /><img /><img /><img /><img /><img /></div>
+    <div class="scroll-area">
+      <div class="frame template">
+        <div class="map">
+          <img />
+        </div>
+      </div>
+    </div>
+    <div class="overlay-tiles tiles"><img /><img /><img /><img /><img /></div>
+  </div>
 </div>
--- a/views/partials/regional-forecast.ejs
+++ b/views/partials/regional-forecast.ejs
@@ -1,5 +1,5 @@
 <%- include('header.ejs', {titleDual:{ top: 'Regional' , bottom: 'Observations' }, hasTime: true }) %>
-<div class="main has-scroll regional-forecast">
+<div class="main has-scroll regional-forecast can-enhance">
  <div class="map"><img src="images/maps/basemap.webp" /></div>
  <div class="location-container">
    <div class="location template">
Author	SHA1	Message	Date
Matt Walsh	994c9240b8	shorten permalinks close #206	2026-04-13 16:19:26 -05:00
Matt Walsh	27d75ba62d	current observations don't show like when the same close #207	2026-04-13 14:54:18 -05:00
Matt Walsh	63e089451d	restructure wide/enhanced settings close #205	2026-04-13 14:36:15 -05:00
Matt Walsh	42f1f66117	squeeze preview format into available space	2026-04-08 23:36:33 -05:00
Matt Walsh	d4f648f244	better 'version' numbers for staging site	2026-04-08 23:34:10 -05:00
Matt Walsh	71d52c0b72	fixe wide-enhanced radar and almanac backgrounds	2026-04-08 23:25:05 -05:00
Matt Walsh	d2bf8f3f99	fix radar tiles	2026-04-08 23:01:42 -05:00
Matt Walsh	f4289e6329	Merge branch 'main' into screen-enahnce/magic-number-code	2026-04-08 22:56:20 -05:00
Matt Walsh	11c54391b2	6.5.7	2026-04-08 22:42:07 -05:00
Matt Walsh	0b47cf79c1	don't overwrite timestamps when enhancing with mapclick	2026-04-08 22:41:42 -05:00
Matt Walsh	ba36904477	6.5.6	2026-04-08 11:39:36 -05:00
Matt Walsh	dae5b20bc6	fix radar round/floor mismatch in calculations close #200	2026-04-08 11:39:25 -05:00
Matt Walsh	ccc936d81a	6.5.5	2026-04-08 09:57:24 -05:00
Matt Walsh	5dc214c6a5	filter station list upon receipt	2026-04-08 09:57:18 -05:00
Matt Walsh	ec1169e07b	redraw on entering/leaving enhanced close #198	2026-04-08 09:24:54 -05:00
Matt Walsh	eee4519095	almanac #188 #196 #194 #193	2026-04-07 14:17:26 -05:00
Matt Walsh	38cdb46c85	enhance current weather, latest observations #188 #196 #193 #194	2026-04-07 13:50:37 -05:00
Matt Walsh	e70639d7a6	local forecast enhanced-wide #188 #196 #193 #194	2026-04-07 10:38:12 -05:00
Matt Walsh	63d27d1a26	fix wide-enhanced radar tiles #188 #196 #193 #194	2026-04-06 16:53:11 -05:00
Matt Walsh	97ac0a1656	radar expanded, to do fix number of tiles	2026-04-06 16:41:03 -05:00
Matt Walsh	8158afd039	fix radar crop when wide	2026-04-06 00:48:38 -05:00
Matt Walsh	5fffc495ae	regional map enhanced #188 #193 #196	2026-04-06 00:35:24 -05:00
Matt Walsh	b2a424a64f	css constants cleanup	2026-04-06 00:06:01 -05:00
Matt Walsh	9f6b90919c	hourly enhanced #188 #195 #196 #193 #194	2026-04-05 23:58:50 -05:00
Matt Walsh	778b7f4456	almanac, current weather, extended forecast, hazards #193	2026-04-04 11:36:31 -05:00
Matt Walsh	443114f555	Add new screen enhancement settings close #195	2026-04-04 11:09:21 -05:00
Matt Walsh	2a4dc03cf7	don't build screen-enhance images	2026-04-04 11:02:12 -05:00
Matt Walsh	8c13128005	add screen enhancement template	2026-04-04 10:45:31 -05:00
Matt Walsh	942fa8b817	6.5.4	2026-03-26 14:45:41 -05:00
Matt Walsh	15b68eba2f	fix extended forecast day names close #190	2026-03-26 14:44:13 -05:00
Matt Walsh	933a289d03	update dependencies	2026-03-26 14:12:38 -05:00
Matt Walsh	e6121327ce	6.5.3	2026-03-16 12:31:36 -05:00
Matt Walsh	678f04fe42	fix extended forecast preload close #189	2026-03-16 12:31:27 -05:00
Matt Walsh	77592a08a3	update test dependencies	2026-03-10 09:33:04 -05:00
Matt Walsh	dadfcb8a5c	readme spelling	2026-03-09 13:50:09 -05:00
Matt Walsh	245e9daf9c	update eslint	2026-03-09 13:11:31 -05:00
Matt Walsh	177012317b	update dependencies	2026-03-09 13:08:22 -05:00
Matt Walsh	7bd21bcf1d	6.5.2	2026-03-06 15:55:39 -06:00
Matt Walsh	ec65025ae2	search for 4-letter stations on regional maps close #187	2026-03-06 15:55:28 -06:00
Matt Walsh	194e108037	6.5.1	2026-03-01 10:04:02 -06:00
Matt Walsh	d5b7c6630a	re-instate custom text scroll close #186	2026-03-01 10:03:52 -06:00
Matt Walsh	39bafae394	Merge pull request #185 from rmitchellscott/music-dist-1 fix: correctly use music mount when DIST=1. Fixes #174	2026-02-17 11:53:04 -06:00
Mitchell Scott	ec8fffbb64	fix: correctly use music mount when DIST=1. Fixes #174	2026-02-17 07:34:12 -07:00