fix wide-enhanced radar tiles #188 #196 #193 #194

.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.

.github/workflows/build-docker.yaml

@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - '**'
+      - '!screen-enhance'
+      - '!screen-enhance/**'
     tags:
       - 'v*.*.*'
       - 'v*.*'

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "6.5.3",
+	"version": "6.5.4",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",

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 = [];

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.enhancedScreens?.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,
@@ -143,7 +136,7 @@ const parse = (fullForecast, forecastUrl) => {
 			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

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.enhancedScreens?.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);

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) => {

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.enhancedScreens?.value) {
+		size.width = 854;
+	}
+	return size;
+};
+
+const radarSourceSize = () => {
+	const size = {
+		width: 240,
+		height: 163,
+	};
+	if (settings.wide?.value && settings.enhancedScreens?.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.enhancedScreens?.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.enhancedScreens?.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;

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();
 };

server/scripts/modules/radar-tiles.mjs

@@ -29,28 +29,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 = TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE().width;
 	const usedTiles = [
 		true,
-		TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE.width,
-		TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE.width,
+		TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE().width,
+		TILE_SIZE.x - (tileShift.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) => {

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 };
 };

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({

server/scripts/modules/regionalforecast-utils.mjs

@@ -209,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;
@@ -219,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 };
 };

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.enhancedScreens?.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)`;
 

server/scripts/modules/settings.mjs

@@ -32,6 +32,25 @@ const wideScreenChange = (value) => {
 	window.dispatchEvent(new Event('resize'));
 };
 
+const enhancedScreenChange = (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('resize'));
+};
+
 const kioskChange = (value) => {
 	const body = document.querySelector('body');
 	if (!body) {
@@ -130,6 +149,17 @@ const init = () => {
 		changeAction: wideScreenChange,
 		sticky: true,
 	});
+	settings.portrait = new Setting('portrait', {
+		name: 'Allow Portrait',
+		defaultValue: false,
+		sticky: true,
+	});
+	settings.enhancedScreens = new Setting('enhancedScreens', {
+		name: 'Enhanced Screens',
+		defaultValue: false,
+		changeAction: enhancedScreenChange,
+		sticky: true,
+	});
 	settings.kiosk = new Setting('kiosk', {
 		name: 'Kiosk',
 		defaultValue: false,

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)) {

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;
@@ -17,7 +19,6 @@
 			&.left {
 				font-family: 'Star4000 Extended';
 				font-size: 24pt;
-
 			}
 
 			&.right {
@@ -92,4 +93,4 @@
 			text-wrap: nowrap;
 		}
 	}
-}
+}

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);
 
 

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;
-			}
-		}
-
-
 	}
 }

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;

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;

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);
 		}
 	}
-}
+}

server/styles/scss/_radar.scss

@@ -1,5 +1,6 @@
 @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');
@@ -104,12 +105,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;

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');

server/styles/scss/_weather-display.scss

@@ -1,29 +1,43 @@
 @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;
+	}
+
 	/* 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 +106,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,8 +132,8 @@
 		}
 
 		&.has-box {
-			margin-left: 64px;
-			margin-right: 64px;
+			margin-left: p.$blue-box-margin;
+			margin-right: p.$blue-box-margin;
 			width: calc(100% - 128px);
 		}
 
@@ -117,7 +144,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 +152,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 +188,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 +198,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;
 	}
 }

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;

tests/package-lock.json

@@ -64,9 +64,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "25.4.0",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-25.4.0.tgz",
-			"integrity": "sha512-9wLpoeWuBlcbBpOY3XmzSTG3oscB6xjBEEtn+pYXTfhyXhIxC5FsBer2KTopBlvKEiW9l13po9fq+SJY/5lkhw==",
+			"version": "25.5.0",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-25.5.0.tgz",
+			"integrity": "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==",
 			"license": "MIT",
 			"optional": true,
 			"dependencies": {
@@ -163,9 +163,9 @@
 			}
 		},
 		"node_modules/bare-fs": {
-			"version": "4.5.5",
-			"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.5.5.tgz",
-			"integrity": "sha512-XvwYM6VZqKoqDll8BmSww5luA5eflDzY0uEFfBJtFKe4PAAtxBjU3YIxzIBzhyaEQBy1VXEQBto4cpN5RZJw+w==",
+			"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",
 			"dependencies": {
 				"bare-events": "^2.5.4",
@@ -187,9 +187,9 @@
 			}
 		},
 		"node_modules/bare-os": {
-			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.7.1.tgz",
-			"integrity": "sha512-ebvMaS5BgZKmJlvuWh14dg9rbUI84QeV3WlWn6Ph6lFI8jJoh7ADtVTyD2c93euwbe+zgi0DVrl4YmqXeM9aIA==",
+			"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",
 			"engines": {
 				"bare": ">=1.14.0"
@@ -205,19 +205,23 @@
 			}
 		},
 		"node_modules/bare-stream": {
-			"version": "2.8.1",
-			"resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.8.1.tgz",
-			"integrity": "sha512-bSeR8RfvbRwDpD7HWZvn8M3uYNDrk7m9DQjYOFkENZlXW8Ju/MPaqUPQq5LqJ3kyjEm07siTaAQ7wBKCU59oHg==",
+			"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",
 			"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
 				},
@@ -227,9 +231,9 @@
 			}
 		},
 		"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",
 			"dependencies": {
 				"bare-path": "^3.0.0"
@@ -821,9 +825,9 @@
 			}
 		},
 		"node_modules/puppeteer": {
-			"version": "24.39.0",
-			"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.39.0.tgz",
-			"integrity": "sha512-uMpGyuPqz94YInmdHSbD9ssgwsddrwe8qXr08UaEwjzrEvOa8gGl8za0h+MWoEG+/6sIBsJwzRfwuGCYRbbcpg==",
+			"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": {
@@ -831,7 +835,7 @@
 				"chromium-bidi": "14.0.0",
 				"cosmiconfig": "^9.0.0",
 				"devtools-protocol": "0.0.1581282",
-				"puppeteer-core": "24.39.0",
+				"puppeteer-core": "24.40.0",
 				"typed-query-selector": "^2.12.1"
 			},
 			"bin": {
@@ -842,9 +846,9 @@
 			}
 		},
 		"node_modules/puppeteer-core": {
-			"version": "24.39.0",
-			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.39.0.tgz",
-			"integrity": "sha512-SzIxz76Kgu17HUIi57HOejPiN0JKa9VCd2GcPY1sAh6RA4BzGZarFQdOYIYrBdUVbtyH7CrDb9uhGEwVXK/YNA==",
+			"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.13.0",
@@ -938,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",
@@ -1067,9 +1071,9 @@
 			"license": "ISC"
 		},
 		"node_modules/ws": {
-			"version": "8.19.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
-			"integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+			"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"

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>

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>

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">