radar portrait #167

moves changes made in 0b47cf79c1 to the mapclick processing for benefit of other mapclick calls

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020-2025 Matt Walsh
+Copyright (c) 2020-2026 Matt Walsh
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

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

gulp/build.mjs

@@ -8,16 +8,13 @@ import ejs from 'gulp-ejs';
 import rename from 'gulp-rename';
 import htmlmin from 'gulp-html-minifier-terser';
 import { deleteAsync } from 'del';
-import s3Upload from 'gulp-s3-uploader';
 import webpack from 'webpack-stream';
 import TerserPlugin from 'terser-webpack-plugin';
 import { readFile } from 'fs/promises';
 import file from 'gulp-file';
-import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
-import log from 'fancy-log';
 import * as dartSass from 'sass';
 import gulpSass from 'gulp-sass';
-import sourceMaps from 'gulp-sourcemaps';
+import log from 'fancy-log';
 import OVERRIDES from '../src/overrides.mjs';
 
 // get cloudfront
@@ -27,8 +24,6 @@ const sass = gulpSass(dartSass);
 
 const clean = () => deleteAsync(['./dist/**/*', '!./dist/readme.txt']);
 
-const cloudfront = new CloudFrontClient({ region: 'us-east-1' });
-
 const RESOURCES_PATH = './dist/resources';
 
 // Data is now served as JSON files to avoid redundancy
@@ -36,12 +31,55 @@ const RESOURCES_PATH = './dist/resources';
 const webpackOptions = {
 	mode: 'production',
 	output: {
-		filename: 'ws.min.js',
+		filename: '[name].min.js',
 	},
 	resolve: {
 		roots: ['./'],
 	},
 	devtool: 'source-map',
+	entry: {
+		index: {
+			import: './server/scripts/index.mjs',
+			dependOn: 'shared',
+		},
+		displays: {
+			import: [
+				'./server/scripts/modules/hazards.mjs',
+				'./server/scripts/modules/currentweather.mjs',
+				'./server/scripts/modules/almanac.mjs',
+				'./server/scripts/modules/spc-outlook.mjs',
+				'./server/scripts/modules/extendedforecast.mjs',
+				'./server/scripts/modules/hourly.mjs',
+				'./server/scripts/modules/hourly-graph.mjs',
+				'./server/scripts/modules/latestobservations.mjs',
+				'./server/scripts/modules/localforecast.mjs',
+				'./server/scripts/modules/radar.mjs',
+				'./server/scripts/modules/regionalforecast.mjs',
+				'./server/scripts/modules/travelforecast.mjs',
+			],
+			dependOn: 'shared',
+		},
+		features: {
+			import: [
+				'./server/scripts/modules/custom-scroll-text.mjs',
+				'./server/scripts/modules/currentweatherscroll.mjs',
+				'./server/scripts/modules/media.mjs',
+			],
+			dependOn: 'shared',
+		},
+		shared: [
+			'./server/scripts/modules/progress.mjs',
+			'./server/scripts/modules/settings.mjs',
+			'./server/scripts/modules/utils/setting.mjs',
+			'./server/scripts/modules/icons.mjs',
+			'./server/scripts/modules/utils/cache.mjs',
+			'./server/scripts/modules/utils/debug.mjs',
+			'./server/scripts/modules/utils/image.mjs',
+			'./server/scripts/modules/utils/metar.mjs',
+			'./server/scripts/modules/utils/mapclick.mjs',
+			'./server/scripts/modules/utils/units.mjs',
+		],
+	},
 	optimization: {
 		minimize: true,
 		minimizer: [
@@ -59,7 +97,6 @@ const webpackOptions = {
 };
 
 const jsVendorSources = [
-	'server/scripts/vendor/auto/nosleep.js',
 	'server/scripts/vendor/auto/swiped-events.js',
 	'server/scripts/vendor/auto/suncalc.js',
 ];
@@ -97,36 +134,36 @@ const buildJs = () => src(mjsSources)
 const cssSources = [
 	'server/styles/scss/**/*.scss',
 ];
-const buildCss = () => src(cssSources)
-	.pipe(sourceMaps.init())
+const buildCss = () => src(cssSources, { sourcemaps: true })
 	.pipe(sass({ style: 'compressed' }).on('error', sass.logError))
 	.pipe(rename({ suffix: '.min' }))
-	.pipe(sourceMaps.write('./'))
-	.pipe(dest(RESOURCES_PATH));
+	.pipe(dest(RESOURCES_PATH, { sourcemaps: '.' }));
 
 const htmlSources = [
 	'views/*.ejs',
 ];
-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();
+
+const getVersion = async () => {
+	const packageJson = await readFile('package.json');
+	const packageVersion = JSON.parse(packageJson).version;
+
+	return process.env.WS4KP_VERSION ?? packageVersion;
 };
 
-const compressHtml = async () => src(htmlSources)
-	.pipe(ejs({
-		production: version,
-		serverAvailable: false,
-		version,
-		OVERRIDES,
-		query: {},
-	}))
-	.pipe(rename({ extname: '.html' }))
-	.pipe(htmlmin({ collapseWhitespace: true }))
-	.pipe(dest('./dist'));
+const compressHtml = async () => {
+	const version = await getVersion();
+	return src(htmlSources)
+		.pipe(ejs({
+			production: version,
+			serverAvailable: false,
+			version,
+			OVERRIDES,
+			query: {},
+		}))
+		.pipe(rename({ extname: '.html' }))
+		.pipe(htmlmin({ collapseWhitespace: true }))
+		.pipe(dest('./dist'));
+};
 
 const otherFiles = [
 	'server/robots.txt',
@@ -143,70 +180,15 @@ const copyDataFiles = () => src([
 	'datagenerators/output/stations.json',
 ]).pipe(dest('./dist/data'));
 
-const s3 = s3Upload({
-	useIAM: true,
-}, {
-	region: 'us-east-1',
-});
-const uploadSources = [
-	'dist/**',
-	'!dist/images/**/*',
-	'!dist/fonts/**/*',
-];
-
-const uploadCreator = (bucket) => () => src(uploadSources, { base: './dist', encoding: false })
-	.pipe(s3({
-		Bucket: bucket,
-		StorageClass: 'STANDARD',
-		maps: {
-			CacheControl: (keyname) => {
-				if (keyname.indexOf('index.html') > -1) return 'max-age=300'; // 10 minutes
-				if (keyname.indexOf('.mp3') > -1) return 'max-age=31536000'; // 1 year for mp3 files
-				return 'max-age=2592000'; // 1 month
-			},
-		},
-	}));
-
 const imageSources = [
 	'server/fonts/**',
 	'server/images/**',
 	'!server/images/gimp/**',
 ];
 
-const upload = uploadCreator(process.env.BUCKET);
-const uploadPreview = uploadCreator(process.env.BUCKET_PREVIEW);
-
-const uploadImagesCreator = (bucket) => () => src(imageSources, { base: './server', encoding: false })
-	.pipe(
-		s3({
-			Bucket: bucket,
-			StorageClass: 'STANDARD',
-			maps: {
-				CacheControl: () => 'max-age=31536000',
-			},
-		}),
-	);
-
-const uploadImages = uploadImagesCreator(process.env.BUCKET);
-const uploadImagesPreview = uploadImagesCreator(process.env.BUCKET_PREVIEW);
-
 const copyImageSources = () => src(imageSources, { base: './server', encoding: false })
 	.pipe(dest('./dist'));
 
-const invalidateCreator = (distributionId) => () => cloudfront.send(new CreateInvalidationCommand({
-	DistributionId: distributionId,
-	InvalidationBatch: {
-		CallerReference: (new Date()).toLocaleString(),
-		Paths: {
-			Quantity: 1,
-			Items: ['/*'],
-		},
-	},
-}));
-
-const invalidate = invalidateCreator(process.env.DISTRIBUTION_ID);
-const invalidatePreview = invalidateCreator(process.env.DISTRIBUTION_ID_PREVIEW);
-
 const buildPlaylist = async () => {
 	const availableFiles = await reader();
 	const playlist = { availableFiles };
@@ -214,20 +196,13 @@ const buildPlaylist = async () => {
 };
 
 const logVersion = async () => {
-	log(`Version Published: ${version}`);
+	log(`Built version: ${await getVersion()}`);
 };
 
-const buildDist = series(clean, parallel(buildJs, compressJsVendor, buildCss, compressHtml, copyOtherFiles, copyDataFiles, copyImageSources, buildPlaylist));
+const buildDist = series(clean, parallel(buildJs, compressJsVendor, buildCss, compressHtml, copyOtherFiles, copyDataFiles, copyImageSources, buildPlaylist), logVersion);
 
-// 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, logVersion);
-
-export default publishFrontend;
+export default buildDist;
 
 export {
-	buildDist,
-	invalidate,
-	stageFrontend,
+	logVersion,
 };

gulp/update-vendor.mjs

@@ -7,7 +7,7 @@ const clean = () => deleteAsync(['./server/scripts/vendor/auto/**']);
 const vendorFiles = [
 	'./node_modules/luxon/build/es6/luxon.mjs',
 	'./node_modules/luxon/build/es6/luxon.mjs.map',
-	'./node_modules/nosleep.js/dist/NoSleep.js',
+	'./node_modules/@zakj/no-sleep/dist/no-sleep.js',
 	'./node_modules/suncalc/suncalc.js',
 	'./node_modules/swiped-events/src/swiped-events.js',
 ];

gulpfile.mjs

@@ -1,10 +1,7 @@
 import updateVendor from './gulp/update-vendor.mjs';
-import publishFrontend, { buildDist, invalidate, stageFrontend } from './gulp/publish-frontend.mjs';
+import buildDist from './gulp/build.mjs';
 
 export {
 	updateVendor,
-	publishFrontend,
 	buildDist,
-	invalidate,
-	stageFrontend,
 };

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "6.5.7",
+	"version": "6.5.9",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",
@@ -27,34 +27,30 @@
 	},
 	"homepage": "https://github.com/netbymatt/ws4kp#readme",
 	"devDependencies": {
-		"@aws-sdk/client-cloudfront": "^3.609.0",
 		"@eslint/eslintrc": "^3.3.1",
+		"@zakj/no-sleep": "^0.13.6",
 		"ajv": "^8.17.1",
 		"del": "^8.0.0",
-		"eslint": "^10.0.3",
+		"eslint": "^9.0.0",
 		"eslint-config-airbnb-base": "15.0.0",
 		"eslint-plugin-import": "^2.10.0",
-		"fancy-log": "^2.0.0",
 		"gulp": "^5.0.0",
-		"gulp-awspublish": "^9.0.0",
 		"gulp-concat": "^2.6.1",
 		"gulp-ejs": "^5.1.0",
 		"gulp-file": "^0.4.0",
 		"gulp-html-minifier-terser": "^8.0.0",
 		"gulp-rename": "^2.0.0",
-		"gulp-s3-uploader": "^1.0.6",
 		"gulp-sass": "^6.0.0",
-		"gulp-sourcemaps": "^3.0.0",
 		"gulp-terser": "^2.0.0",
 		"luxon": "^3.0.0",
 		"metar-taf-parser": "^9.0.0",
-		"nosleep.js": "^0.12.0",
 		"sass": "^1.54.0",
 		"suncalc": "^1.8.0",
 		"swiped-events": "^1.1.4",
 		"terser-webpack-plugin": "^5.3.6",
 		"webpack": "^5.99.9",
-		"webpack-stream": "^7.0.0"
+		"webpack-stream": "^7.0.0",
+		"fancy-log": "^2.0.0"
 	},
 	"dependencies": {
 		"dotenv": "^17.0.1",

server/scripts/index.mjs

@@ -72,7 +72,7 @@ const init = async () => {
 	if (!navigator.geolocation) btnGetGps.style.display = 'none';
 
 	document.querySelector('#divTwc').addEventListener('mousemove', () => {
-		if (document.fullscreenElement) updateFullScreenNavigate();
+		if (document.fullscreenElement || settings.kiosk?.value) updateFullScreenNavigate();
 	});
 
 	document.querySelector('#btnGetLatLng').addEventListener('click', () => autoComplete.directFormSubmit());
@@ -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') {
@@ -384,7 +384,7 @@ const updateFullScreenNavigate = () => {
 	}
 
 	navigateFadeIntervalId = setTimeout(() => {
-		if (document.fullscreenElement) {
+		if (document.fullscreenElement || settings.kiosk?.value) {
 			divTwcBottom.classList.remove('visible');
 			divTwcBottom.classList.add('hidden');
 			document.querySelector('#divTwc').classList.add('no-cursor');

server/scripts/modules/almanac.mjs

@@ -30,12 +30,13 @@ class Almanac extends WeatherDisplay {
 		const superResponse = super.getData(weatherParameters, refresh);
 
 		// get sun/moon data
-		const { sun, moon } = this.calcSunMoonData(this.weatherParameters);
+		const { sun, moon, moonTransit } = this.calcSunMoonData(this.weatherParameters);
 
 		// store the data
 		this.data = {
 			sun,
 			moon,
+			moonTransit,
 		};
 		// share data
 		this.getDataCallback();
@@ -47,7 +48,9 @@ class Almanac extends WeatherDisplay {
 	}
 
 	calcSunMoonData(weatherParameters) {
-		const sun = [0, 1, 2, 3, 4, 5, 6].map((days) => SunCalc.getTimes(DateTime.local().plus({ days }).toJSDate(), weatherParameters.latitude, weatherParameters.longitude));
+		const dayOffsets = [0, 1, 2, 3, 4, 5, 6];
+		const sun = dayOffsets.map((days) => SunCalc.getTimes(DateTime.local().plus({ days }).toJSDate(), weatherParameters.latitude, weatherParameters.longitude));
+		const moonTransit = dayOffsets.map((days) => SunCalc.getMoonTimes(DateTime.local().plus({ days }).toJSDate(), weatherParameters.latitude, weatherParameters.longitude));
 
 		// brute force the moon phases by scanning the next 30 days
 		const moon = [];
@@ -74,6 +77,7 @@ class Almanac extends WeatherDisplay {
 		return {
 			sun,
 			moon,
+			moonTransit,
 		};
 	}
 
@@ -121,21 +125,52 @@ class Almanac extends WeatherDisplay {
 
 		// Generate sun data grid in reading order (left-to-right, top-to-bottom)
 
-		// Set day names
+		// Set day names and sunset times
 		const Today = DateTime.local();
-		// 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 portraitLines = [];
+		const moonPortraitLines = [];
+		// fill all days, even if some are hidden by the mode selection.
+		for (let i = 0; i < 7; i += 1) {
+			// format some data
+			const dayName = Today.plus({ days: i }).toLocaleString({ weekday: 'long' });
+			const sunrise = formatTimeForColumn(DateTime.fromJSDate(info.sun[i].sunrise));
+			const sunset = formatTimeForColumn(DateTime.fromJSDate(info.sun[i].sunset));
 
-			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;
+			// these only use the first 3 for standard and wide
+			if (i < 3) {
+				this.elem.querySelector(`.day-${i}`).textContent = dayName;
+				this.elem.querySelector(`.rise-${i}`).textContent = sunrise;
+				this.elem.querySelector(`.set-${i}`).textContent = sunset;
+			}
+
+			// and also fill the portrait oriented info
+			portraitLines.push(this.fillTemplate('dayname', { 'grid-item': dayName }));
+			portraitLines.push(this.fillTemplate('sunrise', { 'grid-item': sunrise }));
+			portraitLines.push(this.fillTemplate('sunset', { 'grid-item': sunset }));
+
+			// including the bonus moon rise/set data in portrait
+			const moonrise = formatTimeForColumn(DateTime.fromJSDate(info.moonTransit[i].rise));
+			const moonset = formatTimeForColumn(DateTime.fromJSDate(info.moonTransit[i].set));
+
+			moonPortraitLines.push(this.fillTemplate('dayname', { 'grid-item': dayName }));
+			moonPortraitLines.push(this.fillTemplate('sunrise', { 'grid-item': moonrise }));
+			moonPortraitLines.push(this.fillTemplate('sunset', { 'grid-item': moonset }));
 		}
 
+		// add the portrait lines to the page
+		const sunPortrait = this.elem.querySelector('.sun-portrait');
+		const replaceable = sunPortrait.querySelectorAll(':has(.replaceable)');
+		replaceable.forEach((elem) => elem.remove());
+		sunPortrait.append(...portraitLines);
+
+		// and the moon too
+		const moonPortrait = this.elem.querySelector('.moonrise.sun-portrait');
+		const moonReplaceable = moonPortrait.querySelectorAll(':has(.replaceable)');
+		moonReplaceable.forEach((elem) => elem.remove());
+		moonPortrait.append(...moonPortraitLines);
+
 		// Moon data
-		const days = info.moon.map((MoonPhase) => {
+		const days = info.moon.map((MoonPhase, idx) => {
 			const fill = {};
 
 			const date = MoonPhase.date.toLocaleString({ month: 'short', day: 'numeric' });
@@ -144,7 +179,14 @@ class Almanac extends WeatherDisplay {
 			fill.type = MoonPhase.phase;
 			fill.icon = { type: 'img', src: this.iconPaths[MoonPhase.phase] };
 
-			return this.fillTemplate('day', fill);
+			const filledTemplate = this.fillTemplate('day', fill);
+
+			// add class to hide >4 moon phases when not wide-enhanced
+			if (idx > 3) {
+				filledTemplate.classList.add('wide-enhanced');
+			}
+
+			return filledTemplate;
 		});
 
 		const daysContainer = this.elem.querySelector('.moon .days');
@@ -181,19 +223,16 @@ const imageName = (type) => {
 	}
 };
 
-const formatTimesForColumn = (times) => {
-	const formatted = times.map((dt) => dt.setZone(timeZone()).toFormat('h:mm a').toUpperCase());
-
-	// Check if any time has a 2-digit hour (starts with '1')
-	const hasTwoDigitHour = formatted.some((time) => time.startsWith('1'));
+const formatTimeForColumn = (time) => {
+	// moonrise and set may not have a time each day
+	if (!time.isValid) return '-';
+	const formatted = time.setZone(timeZone()).toFormat('h:mm a').toUpperCase();
 
 	// If mixed digit lengths, pad single-digit hours with non-breaking space
-	if (hasTwoDigitHour) {
-		return formatted.map((time) => (time.startsWith('1') ? time : `\u00A0${time}`));
+	if (formatted.length === 8) {
+		return formatted;
 	}
-
-	// Otherwise, no padding needed
-	return formatted;
+	return `\u00A0${formatted}`;
 };
 
 // register display

server/scripts/modules/currentweather.mjs

@@ -103,9 +103,8 @@ class CurrentWeather extends WeatherDisplay {
 				});
 
 				// 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) => {
@@ -195,14 +194,16 @@ class CurrentWeather extends WeatherDisplay {
 
 		// get location (city name) from StationInfo if available (allows for overrides)
 		// longer name allowed if in wide-enhanced
-		const locationLimit = (settings.wide?.value && settings.enhancedScreens?.value) ? 25 : 20;
+		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),
 			condition,
 			wind,
+			'wind-portrait': wind,
 			location,
+			'portrait-location': location,
 			humidity: `${this.data.Humidity}%`,
 			dewpoint: this.data.DewPoint + String.fromCharCode(176),
 			ceiling: (this.data.Ceiling === 0 ? 'Unlimited' : this.data.Ceiling + this.data.CeilingUnit),
@@ -211,7 +212,9 @@ class CurrentWeather extends WeatherDisplay {
 			icon: { type: 'img', src: this.data.Icon },
 		};
 
-		if (this.data.WindGust !== '-') fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
+		if (this.data.WindGust !== '-') {
+			fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
+		}
 
 		if (this.data.observations.heatIndex.value && this.data.HeatIndex !== this.data.Temperature) {
 			fill['heat-index-label'] = 'Heat Index:';

server/scripts/modules/custom-scroll-text.mjs

@@ -17,7 +17,7 @@ const changeEnable = (newValue) => {
 		// hide the string entry
 		newDisplay = 'none';
 	}
-	const stringEntry = document.getElementById('settings-customText-label');
+	const stringEntry = document.getElementById('settings-customText-string');
 	if (stringEntry) {
 		stringEntry.style.display = newDisplay;
 	}

server/scripts/modules/extendedforecast.mjs

@@ -19,7 +19,7 @@ class ExtendedForecast extends WeatherDisplay {
 		// set timings
 		if (settings.portrait?.value) {
 			this.timing.totalScreens = 1;
-			this.perPage = 4;
+			this.perPage = 6;
 		} else {
 			this.timing.totalScreens = 2;
 			this.perPage = 3;

server/scripts/modules/hourly-graph.mjs

@@ -7,6 +7,12 @@ import { registerDisplay, timeZone } from './navigation.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
 import settings from './settings.mjs';
 
+// two chart areas
+const chartAreas = [
+	'.top',
+	'.bottom',
+];
+
 // set up spacing and scales
 const scaling = () => {
 	const available = {
@@ -18,12 +24,17 @@ const scaling = () => {
 		xTicks: 4,
 	};
 
-	if (settings.wide?.value && settings.enhancedScreens?.value) {
+	if (settings.wide?.value && settings.enhanced?.value) {
 		available.width = available.width + 107 + 107;
 		available.height = 285;
 		dataLength.hours = 48;
 		dataLength.xTicks = 6;
 	}
+
+	if (settings.portrait?.value && settings.enhanced?.value) {
+		available.height = 450;
+	}
+
 	return {
 		available,
 		dataLength,
@@ -85,10 +96,13 @@ class HourlyGraph extends WeatherDisplay {
 
 		// get the image
 		if (!this.image) this.image = this.elem.querySelector('.chart img');
+		if (!this.portraitImage) this.portraitImage = this.elem.querySelector('.bottom .chart img');
 
-		// set up image
+		// set up images
 		this.image.width = available.width;
 		this.image.height = available.height;
+		this.portraitImage.width = available.width;
+		this.portraitImage.height = available.height;
 
 		// get context
 		const canvas = document.createElement('canvas');
@@ -97,31 +111,57 @@ class HourlyGraph extends WeatherDisplay {
 		const ctx = canvas.getContext('2d');
 		ctx.imageSmoothingEnabled = false;
 
+		// set the canvas for each graph to the top one by default
+		const contexts = [
+			ctx,
+			ctx,
+			ctx,
+			ctx,
+		];
+
+		// if in portrait-enhanced, change out the second two contexts with a second canvas
+		let portraitCanvas;
+		if (settings.portrait?.value && settings.enhanced?.value) {
+			portraitCanvas = document.createElement('canvas');
+			portraitCanvas.width = available.width;
+			portraitCanvas.height = available.height;
+			const portraitCtx = portraitCanvas.getContext('2d');
+			portraitCtx.imageSmoothingEnabled = false;
+
+			contexts[2] = portraitCtx;
+			contexts[3] = portraitCtx;
+		}
+
 		// calculate time scale
 		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(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;
-			// write to page
-			document.querySelector(`.x-axis .l-${idx + 1}`).innerHTML = label.formatted;
+
+		// there are two x axes in portrait
+		chartAreas.forEach((area) => {
+			let prevTime = startTime;
+			const elem = this.elem.querySelector(area);
+			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;
+				// write to page
+				elem.querySelector(`.x-axis .l-${idx + 1}`).innerHTML = label.formatted;
+			});
 		});
 
 		// order is important last line drawn is on top
 		// clouds
 		const percentScale = calcScale(0, available.height - 10, 100, 10);
 		const cloud = createPath(this.data.skyCover, timeScale, percentScale);
-		drawPath(cloud, ctx, {
+		drawPath(cloud, contexts[3], {
 			strokeStyle: 'lightgrey',
 			lineWidth: 3,
 		});
 
 		// precip
 		const precip = createPath(this.data.probabilityOfPrecipitation, timeScale, percentScale);
-		drawPath(precip, ctx, {
+		drawPath(precip, contexts[2], {
 			strokeStyle: 'aqua',
 			lineWidth: 3,
 		});
@@ -136,14 +176,14 @@ class HourlyGraph extends WeatherDisplay {
 
 		// dewpoint
 		const dewpointPath = createPath(this.data.dewpoint, timeScale, tempScale);
-		drawPath(dewpointPath, ctx, {
+		drawPath(dewpointPath, contexts[1], {
 			strokeStyle: 'green',
 			lineWidth: 3,
 		});
 
 		// temperature
 		const tempPath = createPath(this.data.temperature, timeScale, tempScale);
-		drawPath(tempPath, ctx, {
+		drawPath(tempPath, contexts[0], {
 			strokeStyle: 'red',
 			lineWidth: 3,
 		});
@@ -151,6 +191,8 @@ class HourlyGraph extends WeatherDisplay {
 		// temperature axis labels
 		// limited to 3 characters, sacraficing degree character
 		const degree = String.fromCharCode(176);
+
+		// only fill the upper chart with temperatures
 		this.elem.querySelector('.y-axis .l-1').innerHTML = (maxScale + degree).substring(0, 3);
 		this.elem.querySelector('.y-axis .l-2').innerHTML = (midScale2 + degree).substring(0, 3);
 		this.elem.querySelector('.y-axis .l-3').innerHTML = (midScale1 + degree).substring(0, 3);
@@ -159,6 +201,11 @@ class HourlyGraph extends WeatherDisplay {
 		// set the image source
 		this.image.src = canvas.toDataURL();
 
+		// if a portrait canvas was created set that image as well
+		if (portraitCanvas) {
+			this.portraitImage.src = portraitCanvas.toDataURL();
+		}
+
 		// change the units in the header
 		this.elem.querySelector('.temperature').innerHTML = `Temperature ${String.fromCharCode(176)}${this.data.temperatureUnit}`;
 		this.elem.querySelector('.dewpoint').innerHTML = `Dewpoint ${String.fromCharCode(176)}${this.data.temperatureUnit}`;

server/scripts/modules/latestobservations.mjs

@@ -39,9 +39,10 @@ class LatestObservations extends WeatherDisplay {
 		// We start with the 7 closest stations and only fetch more if some fail,
 		// stopping as soon as we have 7 valid stations with data.
 		const actualConditions = [];
-		let lastStation = Math.min(regionalStations.length, 7);
+		const stationLimit = this.MaximumRegionalStations * ((settings.portrait?.value) ? 2 : 1);
+		let lastStation = Math.min(regionalStations.length, stationLimit);
 		let firstStation = 0;
-		while (actualConditions.length < 7 && (lastStation) <= regionalStations.length) {
+		while (actualConditions.length < stationLimit && (lastStation) <= regionalStations.length) {
 			// Sequential fetching is intentional here - we want to try closest stations first
 			// and only fetch additional batches if needed, rather than hitting all 30 stations at once
 			// eslint-disable-next-line no-await-in-loop
@@ -50,11 +51,11 @@ class LatestObservations extends WeatherDisplay {
 			actualConditions.push(...someStations);
 			// update counters
 			firstStation += lastStation;
-			lastStation = Math.min(regionalStations.length + 1, firstStation + 7 - actualConditions.length);
+			lastStation = Math.min(regionalStations.length + 1, firstStation + stationLimit - actualConditions.length);
 		}
 
-		// cut down to the maximum of 7
-		this.data = actualConditions.slice(0, this.MaximumRegionalStations);
+		// cut down to the maximum that fit on the page
+		this.data = actualConditions.slice(0, stationLimit);
 
 		// test for at least one station
 		if (this.data.length === 0) {
@@ -162,8 +163,8 @@ class LatestObservations extends WeatherDisplay {
 			const Like = likeTemperature(condition.heatIndex?.value, condition.windChill?.value, Temperature, temperatureConverter);
 			const WindSpeed = windConverter(condition.windSpeed.value);
 
-			const locationLimit = (settings.wide?.value && settings.enhancedScreens?.value) ? 20 : 14;
-			const weatherLimit = (settings.wide?.value && settings.enhancedScreens?.value) ? 10 : 9;
+			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, locationLimit),
@@ -183,7 +184,7 @@ class LatestObservations extends WeatherDisplay {
 			const filledRow = this.fillTemplate('observation-row', fill);
 
 			// add the feels like class
-			filledRow.querySelector('.like').classList.add(Like.cssClass);
+			if (Like.cssClass) filledRow.querySelector('.like').classList.add(Like.cssClass);
 
 			return filledRow;
 		});

server/scripts/modules/localforecast.mjs

@@ -37,13 +37,30 @@ class LocalForecast extends WeatherDisplay {
 		// read each text
 		this.screenTexts = conditions.map((condition) => {
 			// process the text
-			let text = `${condition.DayName.toUpperCase()}...`;
+			let text = `${condition.DayName}...`;
 			const conditionText = condition.Text;
-			text += conditionText.toUpperCase().replace('...', ' ');
+			text += conditionText.replace('...', ' ');
 
 			return text;
 		});
 
+		// if in portrait combine to 2 days on one screen
+
+		if (settings.portrait?.value && settings.enhanced?.value) {
+			const newScreenTexts = [];
+			this.screenTexts.forEach((text, idx) => {
+				// even is passed through
+				if ((idx % 2) === 0) {
+					newScreenTexts.push(text);
+				} else {
+					// odd is added to the previous index
+					newScreenTexts[Math.floor(idx / 2)] += `<br/><br/>${text}`;
+				}
+			});
+			// reassign the screens
+			this.screenTexts = newScreenTexts;
+		}
+
 		// fill the forecast texts
 		const templates = this.screenTexts.map((text) => this.fillTemplate('forecast', { text }));
 		const forecastsElem = this.elem.querySelector('.forecasts');
@@ -51,7 +68,10 @@ class LocalForecast extends WeatherDisplay {
 		forecastsElem.append(...templates);
 
 		// Get page height for screen calculations
-		this.pageHeight = forecastsElem.parentNode.offsetHeight;
+		this.pageHeight = 280;
+		if (settings.portrait?.value && settings.enhanced?.value) {
+			this.pageHeight = 960;
+		}
 
 		this.calculateContentAwareTiming(templates);
 
@@ -125,11 +145,14 @@ class LocalForecast extends WeatherDisplay {
 
 		// Measure each forecast period to get actual line counts
 		const forecastLineCounts = [];
+
+		const maxLinesPerScreen = this.pageHeight / 40; // page height / 40px line height
+
 		templates.forEach((template, index) => {
 			const currentHeight = template.offsetHeight;
 			const currentLines = Math.round(currentHeight / lineHeight);
 
-			if (currentLines > 7) {
+			if (currentLines > maxLinesPerScreen) {
 				// Multi-page forecasts measure correctly, so use the measurement directly
 				forecastLineCounts.push(currentLines);
 
@@ -141,7 +164,7 @@ class LocalForecast extends WeatherDisplay {
 				// Short forecasts are capped by CSS min-height: 280px (7 lines)
 				// Add 7 <br> tags to force height beyond the minimum, then subtract the padding
 				const originalHTML = template.innerHTML;
-				const paddingBRs = '<br/>'.repeat(7);
+				const paddingBRs = '<br/>'.repeat(maxLinesPerScreen);
 				template.innerHTML = originalHTML + paddingBRs;
 
 				// Measure the padded height
@@ -149,7 +172,7 @@ class LocalForecast extends WeatherDisplay {
 				const paddedLines = Math.round(paddedHeight / lineHeight);
 
 				// Calculate actual content lines by subtracting the 7 BR lines we added
-				const actualLines = Math.max(1, paddedLines - 7);
+				const actualLines = Math.max(1, paddedLines - maxLinesPerScreen);
 
 				// Restore original content
 				template.innerHTML = originalHTML;
@@ -174,7 +197,6 @@ class LocalForecast extends WeatherDisplay {
 		this.timing.totalScreens = Math.round(totalHeight / this.pageHeight);
 
 		// Now calculate timing based on actual measured line counts, ignoring padding
-		const maxLinesPerScreen = 7; // 280px / 40px line height
 		const screenTimings = []; forecastLineCounts.forEach((lines, forecastIndex) => {
 			if (lines <= maxLinesPerScreen) {
 				// Single screen for this forecast
@@ -257,7 +279,7 @@ const parse = (forecast, forecastUrl) => {
 
 	return activePeriods.slice(0, 6).map((text) => ({
 		// format day and text
-		DayName: text.name.toUpperCase(),
+		DayName: text.name,
 		Text: text.detailedForecast,
 	}));
 };

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

server/scripts/modules/progress.mjs

@@ -33,7 +33,7 @@ class Progress extends WeatherDisplay {
 		// if no displays provided just draw the backgrounds (above)
 		if (!displays) return;
 		const lines = displays.map((display, index) => {
-			if (display.showOnProgress === false) return false;
+			// all displays are drawn, some are tagged as only showing on the progress page in portrait
 			const fill = {
 				name: display.name,
 			};
@@ -50,6 +50,8 @@ class Progress extends WeatherDisplay {
 			links.classList.remove(...statusClasses);
 			links.classList.add(statusClass);
 			links.dataset.index = index;
+			// hide items not shown unless in portrait
+			if (!display.showOnProgress) line.classList.add('portrait-only');
 			return line;
 		}).filter((d) => d);
 

server/scripts/modules/radar-constants.mjs

@@ -4,8 +4,13 @@ const radarFinalSize = () => {
 	const size = {
 		width: 640, height: 367,
 	};
-	if (settings.wide?.value && settings.enhancedScreens?.value) {
-		size.width = 854;
+	if (settings.enhanced?.value) {
+		if (settings.wide?.value) {
+			size.width = 854;
+		}
+		if (settings.portrait?.value) {
+			size.height = 1024;
+		}
 	}
 	return size;
 };
@@ -15,8 +20,13 @@ const radarSourceSize = () => {
 		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
+	if (settings.enhanced?.value) {
+		if (settings.wide?.value) {
+			size.width = 240 / 640 * 854; // original size of 640 scaled up to wide at 854
+		}
+		if (settings.portrait?.value) {
+			size.height = 163 / 367 * 1024;// original size of 367 scaled up to portrait at 1024
+		}
 	}
 	return size;
 };
@@ -26,9 +36,15 @@ const radarOffset = () => {
 		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;
+	if (settings.enhanced?.value) {
+		if (settings.wide?.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;
+		}
+		if (settings.portrait?.value) {
+			// 825 is the margins shift, 367/1024 is the scaling factor normal => portrait, /2 is because of the fixed 2:1 scaling between source radar and map tiles
+			offset.y = 138 + (815 * 367 / 1024 / 2);
+		}
 	}
 
 	return offset;
@@ -40,8 +56,13 @@ const radarShift = () => {
 		x: 0,
 		y: 0,
 	};
-	if (settings.wide?.value && settings.enhancedScreens?.value) {
-		shift.x = 107;
+	if (settings.enhanced?.value) {
+		if (settings.wide?.value) {
+			shift.x = 107;
+		}
+		if (settings.portrait?.value) {
+			shift.y = 328;
+		}
 	}
 	return shift;
 };

server/scripts/modules/radar-tiles.mjs

@@ -37,6 +37,12 @@ const setTiles = (data) => {
 		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),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y * 2),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y * 2),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y * 2),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y * 3),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y * 3),
+		pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y * 3),
 	];
 
 	// do some calculations
@@ -48,16 +54,19 @@ const setTiles = (data) => {
 	const tileShift = modTile(sourceXY.x, sourceXY.y);
 
 	// determine which tiles are used
-	const secondRow = tileShift.y + TILE_SIZE.y > RADAR_FINAL_SIZE().height;
+	const secondRow = TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE().height;
+	const thirdRow = (TILE_SIZE.y * 2) - tileShift.y < RADAR_FINAL_SIZE().height;
+	const fourthRow = (TILE_SIZE.y * 3) - tileShift.y < RADAR_FINAL_SIZE().height;
 	const usedTiles = [
 		true,
-		tileShift.x + TILE_SIZE.x > RADAR_FINAL_SIZE.width,
-		tileShift.x + (TILE_SIZE.x * 2) > RADAR_FINAL_SIZE.width,
-		secondRow,
+		TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE().width,
+		(TILE_SIZE.x * 2) - tileShift.x < RADAR_FINAL_SIZE().width,
 	];
-	// second row is a copy of the first row when in use
+	// rows 2, 3 and 4 are a copy of the first row when in use
 	// calculate T[4] and T[5]
-	usedTiles.push(secondRow && usedTiles[1], secondRow && usedTiles[2]);
+	usedTiles.push(secondRow && usedTiles[0], secondRow && usedTiles[1], secondRow && usedTiles[2]);
+	usedTiles.push(thirdRow && usedTiles[0], thirdRow && usedTiles[1], thirdRow && usedTiles[2]);
+	usedTiles.push(fourthRow && usedTiles[0], fourthRow && usedTiles[1], fourthRow && usedTiles[2]);
 
 	// helper function for populating tiles
 	const populateTile = (tileName) => (elem, index) => {

server/scripts/modules/regionalforecast-utils.mjs

@@ -209,14 +209,14 @@ const getMinMaxLatitudeLongitudeHI = (X, Y, OffsetX, OffsetY) => {
 	};
 };
 
-const getXYForCity = (City, MaxLatitude, MinLongitude, state, maxX = 580) => {
+const getXYForCity = (City, MaxLatitude, MinLongitude, state, maxX = 580, maxY = 282) => {
 	if (state === 'AK') getXYForCityAK(City, MaxLatitude, MinLongitude);
 	if (state === 'HI') getXYForCityHI(City, MaxLatitude, MinLongitude);
 	let x = (City.lon - MinLongitude) * 57;
 	let y = (MaxLatitude - City.lat) * 70;
 
 	if (y < 30) y = 30;
-	if (y > 282) y = 282;
+	if (y > maxY) y = maxY;
 
 	if (x < 40) x = 40;
 	if (x > maxX) x = maxX;

server/scripts/modules/regionalforecast.mjs

@@ -21,6 +21,7 @@ const scaling = () => {
 	// available space
 	const available = {
 		x: 640,
+		y: 282,
 	};
 
 	// map offset
@@ -29,9 +30,16 @@ const scaling = () => {
 		y: 117,
 	};
 
-	if (settings.wide?.value && settings.enhancedScreens?.value) {
-		mapOffsetXY.x = 320;
-		available.x = 854;
+	if (settings.enhanced?.value) {
+		if (settings.wide?.value) {
+			mapOffsetXY.x = 320;
+			available.x = 854;
+		}
+
+		if (settings.portrait?.value) {
+			mapOffsetXY.y = 400;
+			available.y = 970;
+		}
 	}
 	return {
 		mapOffsetXY,
@@ -121,7 +129,7 @@ class RegionalForecast extends WeatherDisplay {
 				}
 
 				// get XY on map for city
-				const cityXY = utils.getXYForCity(city, minMaxLatLon.maxLat, minMaxLatLon.minLon, this.weatherParameters.state, available - 60);
+				const cityXY = utils.getXYForCity(city, minMaxLatLon.maxLat, minMaxLatLon.minLon, this.weatherParameters.state, available.x - 60, available.y);
 
 				// wait for the regional observation if it's not done yet
 				const observation = await observationPromise;

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,12 +37,31 @@ const wideScreenChange = (value) => {
 	window.dispatchEvent(new Event('resize'));
 };
 
-const enhancedScreenChange = (value) => {
+const portraitChange = (value) => {
 	const container = document.querySelector('#divTwc');
 	if (!container) {
 		// DOM not ready; defer enabling if set
 		if (value) {
-			deferredDomSettings.add('enhancedScreens');
+			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;
 	}
@@ -51,6 +75,31 @@ const enhancedScreenChange = (value) => {
 	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) {
@@ -63,9 +112,11 @@ const kioskChange = (value) => {
 
 	if (value) {
 		body.classList.add('kiosk');
+		document.querySelector('#divTwc')?.classList.add('no-cursor');
 		window.dispatchEvent(new Event('resize'));
 	} else {
 		body.classList.remove('kiosk');
+		document.querySelector('#divTwc')?.classList.remove('no-cursor');
 		window.dispatchEvent(new Event('resize'));
 	}
 
@@ -151,15 +202,37 @@ const init = () => {
 	});
 	settings.portrait = new Setting('portrait', {
 		name: 'Allow Portrait',
+		changeAction: portraitChange,
 		defaultValue: false,
 		sticky: true,
 	});
-	settings.enhancedScreens = new Setting('enhancedScreens', {
+	settings.enhanced = new Setting('enhanced', {
 		name: 'Enhanced Screens',
 		defaultValue: false,
-		changeAction: enhancedScreenChange,
+		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,
@@ -202,6 +275,7 @@ const init = () => {
 			['medium', 'Medium (2x)'],
 			['thick', 'Thick (3x)'],
 		],
+		visible: false,
 	});
 	settings.units = new Setting('units', {
 		name: 'Units',
@@ -251,7 +325,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
@@ -269,7 +343,6 @@ document.addEventListener('DOMContentLoaded', () => {
 	} else if (modeSelect) {
 		modeSelect.style.display = 'none';
 	}
-	registerHiddenSetting('settings-scanLineMode-select', settings.scanLineMode);
 });
 
 export default settings;

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

server/scripts/modules/utils/mapclick.mjs

@@ -650,7 +650,7 @@ export const enhanceObservationWithMapClick = async (observationData, options =
 	}
 
 	return {
-		data: mapClickProps,
+		data: { ...mapClickProps, timestamp: observationData.timestamp },
 		wasImproved: true,
 		improvements,
 		missingFields: [...mapClickMissingRequired, ...mapClickMissingOptional],

server/scripts/modules/utils/nosleep.mjs

@@ -1,5 +1,7 @@
 // track state of nosleep locally to avoid a null case error
 // when nosleep.disable is called without first calling .enable
+// eslint-disable-next-line import/extensions
+import NoSleep from '../../vendor/auto/no-sleep.js';
 
 let wakeLock = false;
 

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

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

server/styles/scss/_almanac.scss

@@ -4,9 +4,14 @@
 #almanac-html.weather-display {
 	background-image: url('../images/backgrounds/3.png');
 
-	// repeat the background if wide-enhanced
+	// change the backgrounds for enhanced modes
 	.wide.enhanced & {
-		background-repeat: repeat-x;
+		background-image: url('../images/backgrounds/3-wide-enhanced.png');
+	}
+
+	// change background for portrait
+	.portrait.enhanced & {
+		background-image: url(../images/backgrounds/3-portrait.png);
 	}
 }
 
@@ -30,6 +35,10 @@
 			grid-template-columns: repeat(4, auto);
 		}
 
+		.portrait.enhanced & {
+			display: none;
+		}
+
 		.grid-item {
 			// Reset inherited styles that interfere with grid layout
 			width: auto;
@@ -65,6 +74,23 @@
 		}
 	}
 
+	.portrait.enhanced & {
+		font-size: 28pt;
+
+	}
+
+	.sun.sun-portrait {
+		display: none;
+
+		.portrait.enhanced & {
+			display: grid;
+		}
+
+		.grid-item {
+			margin: 8px 0px;
+		}
+	}
+
 	.moon {
 		position: relative;
 		padding: 7px 50px;
@@ -73,6 +99,8 @@
 		.title {
 			color: c.$column-header-text;
 			padding-left: 13px;
+
+
 		}
 
 		.days {
@@ -93,6 +121,14 @@
 				position: relative;
 				top: -10px;
 			}
+
+			&.wide-enhanced {
+				display: none;
+
+				.wide.enhanced & {
+					display: inline-block;
+				}
+			}
 		}
 	}
 

server/styles/scss/_current-weather.scss

@@ -5,9 +5,17 @@
 .weather-display .main.current-weather {
 	&.main {
 		width: calc(p.$standard-width - (2 * p.$blue-box-margin));
+		@include u.text-shadow();
+
+		.portrait-location {
+			text-align: center;
+			margin-top: 175px;
+			font-family: "Star4000 Large";
+			font-size: 32pt;
+			color: c.$title-color;
+		}
 
 		.col {
-			height: 50px;
 			width: 255px;
 			display: inline-block;
 			margin-top: 10px;
@@ -20,11 +28,32 @@
 				margin-right: 25px;
 			}
 
-			@include u.text-shadow();
+			.portrait.enhanced & {
+				margin-left: 20px;
+				width: calc(p.$blue-box-width - 40px);
+				display: block;
+				position: relative;
+
+				.wind-container {
+					margin-left: 50px;
+					width: calc(p.$blue-box-width - 140px);
+				}
+			}
 
 			&.left {
 				font-family: 'Star4000 Extended';
 				font-size: 24pt;
+
+				.portrait.enhanced & {
+					font-size: 30pt;
+					line-height: 40px;
+
+					.icon {
+						margin-top: 50px;
+						transform: scale(1.5);
+						margin-bottom: 50px;
+					}
+				}
 			}
 
 			&.right {
@@ -34,6 +63,14 @@
 				font-weight: bold;
 				line-height: 24px;
 
+				.portrait.enhanced & {
+					font-family: "Star4000 Extended";
+					font-size: 28pt;
+					font-weight: 300;
+					line-height: 36px;
+				}
+
+
 				.row {
 					margin-bottom: 12px;
 
@@ -48,6 +85,7 @@
 
 					.value {
 						float: right;
+						text-align: right;
 						margin-right: 10px;
 					}
 

server/styles/scss/_extended-forecast.scss

@@ -1,14 +1,27 @@
 @use 'shared/_colors'as c;
 @use 'shared/_utils'as u;
 
+$portrait-gap-adder: 20px;
+
 #extended-forecast-html.weather-display {
 	background-image: url('../images/backgrounds/2.png');
+
+	// change background for portrait
+	.portrait.enhanced & {
+		background-image: url(../images/backgrounds/2-portrait.png);
+		background-position-x: 0px;
+	}
 }
 
 .weather-display .main.extended-forecast {
 	.day-container {
 		margin-top: 16px;
 		margin-left: 27px;
+
+		// taller for portrait
+		.portrait.enhanced & {
+			margin-top: 90px;
+		}
 	}
 
 	.day {
@@ -21,6 +34,12 @@
 		font-family: 'Star4000';
 		font-size: 24pt;
 
+		// taller for portrait
+		.portrait.enhanced & {
+			height: 360px;
+			margin-bottom: 75px;
+		}
+
 		.date {
 			text-transform: uppercase;
 			text-align: center;
@@ -31,6 +50,10 @@
 			text-align: center;
 			height: 74px;
 			margin-top: 5px;
+
+			.portrait.enhanced & {
+				margin-top: $portrait-gap-adder;
+			}
 		}
 
 		.icon {
@@ -40,11 +63,19 @@
 			img {
 				max-height: 75px;
 			}
+
+			.portrait.enhanced & {
+				margin-top: $portrait-gap-adder;
+			}
 		}
 
 		.temperatures {
 			width: 100%;
 
+			.portrait.enhanced & {
+				margin-top: $portrait-gap-adder;
+			}
+
 			.temperature-block {
 				display: inline-block;
 				width: 44%;

server/styles/scss/_hazards.scss

@@ -4,6 +4,7 @@
 
 #hazards-html.weather-display {
 	background-image: url('../images/backgrounds/7.png');
+
 }
 
 .weather-display .main.hazards {
@@ -12,6 +13,11 @@
 		height: p.$standard-height;
 		background-color: rgb(112, 35, 35);
 
+		width: p.$standard-width;
+
+		.wide.enhanced & {
+			left: 0px;
+		}
 
 		.hazard-lines {
 			min-height: 400px;

server/styles/scss/_hourly-graph.scss

@@ -1,5 +1,6 @@
 @use 'shared/_colors'as c;
 @use 'shared/_utils'as u;
+@use 'shared/_positions'as p;
 
 #hourly-graph-html {
 	background-image: url(../images/backgrounds/1-chart.png);
@@ -10,36 +11,54 @@
 		background-position-x: 0px;
 	}
 
-	.header {
-		.right {
-			position: absolute;
+	// change background for portrait
+	.portrait.enhanced & {
+		background-image: url(../images/backgrounds/1-chart-portrait.png);
+		background-position-x: 0px;
+	}
+
+}
+
+.legend {
+	.right & {
+		position: absolute;
+
+		.header & {
 			top: 35px;
-			right: 60px;
-			width: 360px;
-			font-family: 'Star4000 Small';
-			font-size: 28px;
-			@include u.text-shadow();
-			text-align: right;
+		}
 
-			div {
-				margin-top: -18px;
-			}
+		right: 60px;
+		width: 360px;
+		font-family: 'Star4000 Small';
+		font-size: 28px;
+		@include u.text-shadow();
+		text-align: right;
 
-			.temperature {
-				color: red;
-			}
+		div {
+			margin-top: -18px;
+		}
 
-			.dewpoint {
-				color: green;
-			}
+		.temperature {
+			color: red;
 
-			.cloud {
-				color: lightgrey;
+			// shift down when only 2 legend elements are shown in portrait
+			.header & {
+				.portrait.enhanced & {
+					margin-top: 12px;
+				}
 			}
+		}
 
-			.rain {
-				color: aqua;
-			}
+		.dewpoint {
+			color: green;
+		}
+
+		.cloud {
+			color: lightgrey;
+		}
+
+		.rain {
+			color: aqua;
 		}
 	}
 }
@@ -47,136 +66,216 @@
 .weather-display .main.hourly-graph {
 
 	&.main {
-		>div {
-			position: absolute;
-		}
 
-		.label {
-			font-family: 'Star4000 Small';
-			font-size: 24pt;
-			color: c.$column-header-text;
-			@include u.text-shadow();
-			margin-top: -15px;
-			position: absolute;
-		}
+		.chart-container {
+
+			position: absolute;
+			top: 0px;
+			height: p.$standard-scroll-height;
+
+			&.portrait-only {
+				top: 495px;
+			}
+
+			>div {
+				position: absolute;
+			}
+
+			.portrait.enhanced & {
+				height: 470px;
+			}
 
-		.x-axis {
-			bottom: 0px;
-			left: 54px;
-			width: 532px;
-			height: 20px;
 
 			.label {
-				text-align: center;
-				transform: translateX(-50%);
-				white-space: nowrap;
+				font-family: 'Star4000 Small';
+				font-size: 24pt;
+				color: c.$column-header-text;
+				@include u.text-shadow();
+				margin-top: -15px;
+				position: absolute;
+			}
 
-				&.l-1 {
-					left: 0px;
-				}
+			.x-axis {
+				bottom: 0px;
+				left: 54px;
+				width: 532px;
+				height: 20px;
 
-				&.l-2 {
-					left: calc(532px / 4 * 1);
-				}
-
-				&.l-3 {
-					left: calc(532px / 4 * 2);
-				}
-
-				&.l-4 {
-					left: calc(532px / 4 * 3);
-				}
-
-				&.l-5 {
-					left: calc(532px / 4 * 4);
-				}
-
-				// adjust when enhanced
-				.wide.enhanced & {
+				.label {
+					text-align: center;
+					transform: translateX(-50%);
+					white-space: nowrap;
 
 					&.l-1 {
 						left: 0px;
 					}
 
 					&.l-2 {
-						left: calc(726px / 6 * 1);
+						left: calc(532px / 4 * 1);
 					}
 
 					&.l-3 {
-						left: calc(726px / 6 * 2);
+						left: calc(532px / 4 * 2);
 					}
 
 					&.l-4 {
-						left: calc(726px / 6 * 3);
+						left: calc(532px / 4 * 3);
 					}
 
 					&.l-5 {
-						left: calc(726px / 6 * 4);
+						left: calc(532px / 4 * 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;
-
+					// adjust when enhanced
 					.wide.enhanced & {
-						display: block;
+
+						&.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 {
+				top: 0px;
+				left: 50px;
 
-		.chart {
-			top: 0px;
-			left: 50px;
+				img {
+					width: 532px;
+					height: 285px;
 
-			img {
-				width: 532px;
+					// wide and enhanced
+					.wide.enhanced & {
+						width: 746px;
+					}
+
+					.portrait.enhanced & {
+						height: 450px;
+					}
+				}
+			}
+
+			.y-axis {
+				top: 0px;
+				left: 0px;
+				width: 50px;
 				height: 285px;
 
-				// wide and enhanced
-				.wide.enhanced & {
-					width: 746px;
+				.portrait.enhanced & {
+					height: 450px;
+				}
+
+				.label {
+					text-align: right;
+					right: 0px;
+
+					&.l-1 {
+						top: 0px;
+					}
+
+					&.l-2 {
+						top: calc(280px / 3);
+					}
+
+					&.l-3 {
+						bottom: calc(280px / 3 - 11px);
+					}
+
+					&.l-4 {
+						bottom: 0px;
+					}
+
+					.portrait.enhanced & {
+						&.l-1 {
+							top: 0px;
+						}
+
+						&.l-2 {
+							top: calc(445px / 3);
+						}
+
+						&.l-3 {
+							bottom: calc(445px / 3 - 11px);
+						}
+
+						&.l-4 {
+							bottom: 0px;
+						}
+					}
+				}
+			}
+
+			&.bottom {
+				.y-axis .label {
+					.portrait.enhanced & {
+						&.l-1 {
+							top: 0px;
+						}
+
+						&.l-2 {
+							top: calc(445px / 4);
+						}
+
+						&.l-3 {
+							top: calc(445px / 2 - 11px);
+						}
+
+						&.l-4 {
+							bottom: calc(445px / 4 - 11px);
+						}
+
+						&.l-5 {
+							bottom: 0px;
+						}
+
+						;
+					}
 				}
 			}
 		}
 
-		.y-axis {
-			top: 0px;
-			left: 0px;
-			width: 50px;
-			height: 285px;
+		.chart-container.bottom {
 
-			.label {
-				text-align: right;
-				right: 0px;
-
-				&.l-1 {
-					top: 0px;
-				}
-
-				&.l-2 {
-					top: calc(280px / 3);
-				}
-
-				&.l-3 {
-					bottom: calc(280px / 3 - 11px);
-				}
-
-				&.l-4 {
-					bottom: 0px;
-				}
+			.right {
+				width: p.$standard-width;
+				position: absolute;
+				top: -25px;
 			}
 		}
 

server/styles/scss/_latest-observations.scss

@@ -1,11 +1,22 @@
 @use 'shared/_colors'as c;
 @use 'shared/_utils'as u;
+@use 'shared/_positions'as p;
 
 .weather-display .latest-observations {
 
 	&.main {
 		overflow-y: hidden;
 
+		.container {
+			// adjust for the height of the column headers
+			max-height: calc(p.$standard-scroll-height - 10px);
+			overflow: hidden;
+
+			.portrait.enhanced & {
+				max-height: calc(p.$portrait-scroll-height - 20px);
+			}
+		}
+
 		.column-headers {
 			height: 20px;
 			position: absolute;
@@ -32,6 +43,12 @@
 					display: inline-block;
 				}
 			}
+
+			.like {
+				display: none;
+			}
+
+
 		}
 
 		.temp {
@@ -62,9 +79,11 @@
 
 				&.heat-index {
 					color: c.$heat-index;
+					display: block;
 				}
 
 				&.wind-chill {
+					display: block;
 					color: c.$wind-chill;
 				}
 			}
@@ -83,6 +102,10 @@
 			min-height: 338px;
 			padding-top: 10px;
 
+			.portrait.enhanced & {
+				padding-top: 40px;
+			}
+
 			.observation-row {
 				font-family: 'Star4000';
 				font-size: 24pt;
@@ -99,6 +122,13 @@
 					white-space: pre;
 					text-align: right;
 				}
+
+				.portrait.enhanced & {
+					font-family: 'Star4000 Large';
+					font-size: 16pt;
+					height: 48px;
+					font-weight: bold;
+				}
 			}
 		}
 	}

server/styles/scss/_local-forecast.scss

@@ -16,6 +16,10 @@
 		box-sizing: border-box;
 		height: 280px;
 		overflow: hidden;
+
+		.portrait.enhanced & {
+			height: 960px;
+		}
 	}
 
 	.forecasts {
@@ -25,7 +29,6 @@
 	.forecast {
 		font-family: 'Star4000';
 		font-size: 24pt;
-		text-transform: uppercase;
 		@include u.text-shadow();
 		min-height: 280px;
 		line-height: 40px;

server/styles/scss/_page.scss

@@ -167,6 +167,10 @@ body {
 	.wide & {
 		width: p.$wide-width;
 	}
+
+	.enhanced.portrait & {
+		height: p.$portrait-height;
+	}
 }
 
 .kiosk #divTwc {
@@ -209,6 +213,12 @@ body {
 	flex-direction: row;
 	background-color: #000000;
 
+	// stick the nav bar to the bottom of the window in portrait
+	.portrait.enhanced & {
+		position: sticky;
+		bottom: 0px;
+	}
+
 	color: #ffffff;
 	width: p.$standard-width;
 
@@ -343,6 +353,12 @@ body {
 	background-image: url(../images/backgrounds/1.png);
 	transform-origin: 0 0;
 	background-repeat: no-repeat;
+
+	.portrait.enhanced & {
+		width: p.$portrait-width;
+		height: p.$portrait-height;
+		background-image: url(../images/backgrounds/1-portrait.png);
+	}
 }
 
 .wide #container {
@@ -826,3 +842,34 @@ body.kiosk #loading .instructions {
 	grid-template-columns: 1fr 1fr;
 	max-width: 250px;
 }
+
+.lower-flex-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	align-items: flex-start;
+	align-content: stretch;
+	gap: 8px;
+	column-gap: 64px;
+
+	.item {
+		display: inline-block;
+	}
+}
+
+.portrait-only {
+	display: none;
+
+	.portrait.enhanced & {
+		display: block;
+	}
+}
+
+.standard-only {
+	display: block;
+
+	.portrait.enhanced & {
+		display: none;
+	}
+}

server/styles/scss/_progress.scss

@@ -21,6 +21,11 @@
 		overflow: hidden;
 		line-height: 28px;
 
+		.portrait.enhanced & {
+			// variable height to keep the progress bar visible
+			height: unset;
+		}
+
 		.item {
 			position: relative;
 
@@ -86,6 +91,10 @@
 			display: block;
 		}
 
+		.portrait.enhanced & {
+			margin-top: 40px;
+		}
+
 		.progress-bar {
 			height: 20px;
 			margin: 2px;

server/styles/scss/_radar.scss

@@ -5,6 +5,10 @@
 #radar-html.weather-display {
 	background-image: url('../images/backgrounds/4.png');
 
+	.wide & {
+		background: url(../images/backgrounds/4-wide.png);
+	}
+
 	.header {
 		height: 83px;
 
@@ -107,6 +111,10 @@
 	height: 367px;
 	width: p.$standard-width;
 
+	.portrait.enhanced & {
+		height: 1024px;
+	}
+
 	.container {
 
 		.tiles {
@@ -123,7 +131,3 @@
 		}
 	}
 }
-
-.wide.radar #container {
-	background: url(../images/backgrounds/4-wide.png);
-}

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 {
 
 

server/styles/scss/_weather-display.scss

@@ -26,8 +26,17 @@
 	/* this method is required to hide blocks so they can be measured while off screen */
 	height: 0px;
 
+	.enhanced.portrait & {
+
+		background-image: url(../images/backgrounds/1-portrait.png);
+	}
+
 	&.show {
 		height: p.$standard-height;
+
+		.enhanced.portrait & {
+			height: p.$portrait-height;
+		}
 	}
 
 	.template {
@@ -133,8 +142,18 @@
 			overflow: hidden;
 
 			&.no-header {
-				height: 400px;
+				height: calc(p.$standard-scroll-height + 90px);
 				margin-top: 0; // Reset for no-header case since the gap issue is header-related
+
+				.portrait.enhanced & {
+					height: calc(p.$portrait-scroll-height + 90px);
+				}
+			}
+
+			.portrait.enhanced & {
+				height: p.$portrait-scroll-height;
+
+
 			}
 		}
 
@@ -168,6 +187,21 @@
 	// adjust for wide
 	.wide & {
 		left: p.$wide-margin;
+		width: p.$wide-width;
+		margin-left: -1*p.$wide-margin;
+
+		.scroll-container {
+			margin-left: p.$wide-margin;
+		}
+
+	}
+
+	.wide.enhanced & {
+
+		&:has(.scroll-area) .scroll-container {
+			width: p.$wide-width;
+			margin-left: 0px;
+		}
 	}
 
 	&.hazard {
@@ -209,12 +243,3 @@
 
 
 }
-
-.wide #container>.scroll {
-	width: p.$wide-width;
-	margin-left: -1*p.$wide-margin;
-
-	.scroll-container {
-		margin-left: p.$wide-margin;
-	}
-}

server/styles/scss/shared/_positions.scss

@@ -4,11 +4,17 @@ $standard-height: 480px;
 
 // height with scroll
 $standard-scroll-height: 310px;
+$portrait-scroll-height: 967px;
 
 // blue box size
 $blue-box-margin: 64px;
+$blue-box-width: calc($standard-width - 2 * $blue-box-margin);
 
 // wide screen positioning
 $wide-padding: 107px;
 $wide-margin: 107px;
 $wide-width: 854px;
+
+// portrait positioning
+$portrait-width: 640px;
+$portrait-height: 1137px;

views/index.ejs

@@ -31,7 +31,10 @@
   <% if (production) { %>
   <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
   <script type="text/javascript" src="resources/vendor.min.js?_=<%=production%>"></script>
-  <script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
+  <script type="text/javascript" src="resources/index.min.js?_=<%=production%>"></script>
+  <script type="text/javascript" src="resources/displays.min.js?_=<%=production%>"></script>
+  <script type="text/javascript" src="resources/features.min.js?_=<%=production%>"></script>
+  <script type="text/javascript" src="resources/shared.min.js?_=<%=production%>"></script>
   <script type="text/javascript">
     const OVERRIDES = <%- JSON.stringify(OVERRIDES ?? {}) %>;
   </script>
@@ -41,7 +44,6 @@
   <script type="text/javascript">
     OVERRIDES = <%- JSON.stringify(OVERRIDES ?? {}) %>;
   </script>
-  <script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
   <script type="text/javascript" src="scripts/vendor/auto/swiped-events.js"></script>
   <script type="text/javascript" src="scripts/vendor/auto/suncalc.js"></script>
   <script type="module" src="scripts/modules/hazards.mjs"></script>
@@ -68,10 +70,10 @@
 
 </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" />
@@ -174,21 +176,25 @@
     </div>
     <div class="media"></div>
 
-    <div class='heading'>Selected displays</div>
-    <div id='enabledDisplays'>
+    <div class='lower-flex-container'>
+      <div class='item'>
+        <div class='heading'>Selected displays</div>
+        <div id='enabledDisplays'>
 
-    </div>
-
-    <div class='heading'>Settings</div>
-    <div id='settings'>
-    </div>
-
-    <div class='heading'>Sharing</div>
-    <div class='info'>
-      <a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
-      <div id="share-link-instructions">
-        Copy this long URL:
-        <input type='text' id="share-link-url">
+        </div>
+      </div>
+      <div class='item'>
+        <div class='heading'>Settings</div>
+        <div id='settings'>
+          <div class='heading'>Sharing</div>
+        </div>
+        <div class='item'>
+          <a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
+          <div id="share-link-instructions">
+            Copy this long URL:
+            <input type='text' id="share-link-url">
+          </div>
+        </div>
       </div>
     </div>
 
@@ -211,7 +217,6 @@
       <div class="header">Ws4kp Version:</div>
       <div class="header"><span><%- version %></span></div>
     </div>
-  </div>
 
 </body>
 

views/partials/almanac.ejs

@@ -14,6 +14,14 @@
     <div class="grid-item time set-1"></div>
     <div class="grid-item time set-2 wide-enhanced"></div>
   </div>
+	<div class="sun sun-portrait portrait-only">
+		<div class="grid-item empty"></div>
+    <div class="grid-item header sunrise">Sunrise</div>
+    <div class="grid-item header sunset">Sunset</div>
+		<div class="dayname template"><div class="grid-item row-label replaceable"></div></div>
+		<div class="sunrise template"><div class="grid-item time replaceable"></div></div>
+		<div class="sunset template"><div class="grid-item time replaceable"></div></div>
+	</div>
   <div class="moon">
     <div class="title">Moon Data:</div>
     <div class="days">
@@ -24,4 +32,12 @@
       </div>
     </div>
   </div>
+		<div class="sun moonrise sun-portrait portrait-only">
+		<div class="grid-item empty"></div>
+    <div class="grid-item header sunrise">Moonrise</div>
+    <div class="grid-item header sunset">Moonset</div>
+		<div class="dayname template"><div class="grid-item row-label replaceable"></div></div>
+		<div class="moonrise template"><div class="grid-item time replaceable"></div></div>
+		<div class="moonset template"><div class="grid-item time replaceable"></div></div>
+	</div>
 </div>

views/partials/current-weather.ejs

@@ -1,18 +1,23 @@
 <%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true, hasTime: true}) %>
 <div class="main has-scroll has-box current-weather can-enhance">
   <div class="weather template">
+		<div class="portrait-location portrait-only"></div>
     <div class="left col">
       <div class="temp center"></div>
       <div class="condition center"></div>
       <div class="icon center"><img src="" /></div>
-      <div class="wind-container">
+      <div class="wind-container standard-only">
         <div class="wind-label">Wind:</div>
         <div class="wind"></div>
       </div>
       <div class="wind-gusts"></div>
     </div>
     <div class="right col">
-      <div class="location"></div>
+      <div class="location standard-only"></div>
+			<div class="row portrait-only">
+				<div class="label">Wind:</div>
+				<div class="wind-portrait value"></div>
+			</div>
       <div class="row">
         <div class="label">Humidity:</div>
         <div class="humidity value"></div>

views/partials/hazards.ejs

@@ -1,7 +1,7 @@
-	<div class="main hazards no-header">
-		<div class="hazard-lines">
-			<div class="hazard template">
-				<div class="hazard-text"></div>
-			</div>
-		</div>
+	<div class="main hazards no-header can-enhance">
+	  <div class="hazard-lines">
+	    <div class="hazard template">
+	      <div class="hazard-text"></div>
+	    </div>
+	  </div>
 	</div>

views/partials/hourly-graph.ejs

@@ -1,27 +1,57 @@
 <%- include('header.ejs', {title: 'Hourly Graph' , hasTime: false }) %>
 <div class="main has-scroll hourly-graph can-enhance">
-  <div class="top-right template ">
+  <div class="top-right legend template ">
     <div class="temperature">Temperature</div>
     <div class="dewpoint">Dewpoint</div>
-    <div class="cloud">Cloud %</div>
-    <div class="rain">Precip %</div>
-  </div>
-  <div class="y-axis">
-    <div class="label l-1">75</div>
-    <div class="label l-2">65</div>
-    <div class="label l-3">55</div>
-    <div class="label l-4">45</div>
-  </div>
-  <div class="chart">
-    <img id="chart-area"></img>
-  </div>
-  <div class="x-axis">
-    <div class="label l-1">12a</div>
-    <div class="label l-2">6a</div>
-    <div class="label l-3">12p</div>
-    <div class="label l-4">6p</div>
-    <div class="label l-5">12a</div>
-    <div class="label l-6">6a</div>
-    <div class="label l-7">12p</div>
+    <div class="cloud standard-only">Cloud %</div>
+    <div class="rain standard-only">Precip %</div>
   </div>
+	<div class="top chart-container">
+		<div class="y-axis">
+			<div class="label l-1">75</div>
+			<div class="label l-2">65</div>
+			<div class="label l-3">55</div>
+			<div class="label l-4">45</div>
+		</div>
+		<div class="chart">
+			<img id="chart-area"></img>
+		</div>
+		<div class="x-axis">
+			<div class="label l-1">12a</div>
+			<div class="label l-2">6a</div>
+			<div class="label l-3">12p</div>
+			<div class="label l-4">6p</div>
+			<div class="label l-5">12a</div>
+			<div class="label l-6">6a</div>
+			<div class="label l-7">12p</div>
+		</div>
+	</div>
+	<div class="bottom chart-container portrait-only">
+		<div class="right">
+			<div class="legend portrait-only">
+				<div class="cloud">Cloud %</div>
+				<div class="rain">Precip %</div>
+			</div>
+		</div>
+		<div class="y-axis">
+			<div class="label l-1">100</div>
+			<div class="label l-2">75%</div>
+			<div class="label l-3">50%</div>
+			<div class="label l-4">25%</div>
+			<div class="label l-5">0%</div>
+		</div>
+		<div class="chart">
+			<img id="chart-area"></img>
+		</div>
+		<div class="x-axis">
+			<div class="label l-1">12a</div>
+			<div class="label l-2">6a</div>
+			<div class="label l-3">12p</div>
+			<div class="label l-4">6p</div>
+			<div class="label l-5">12a</div>
+			<div class="label l-6">6a</div>
+			<div class="label l-7">12p</div>
+		</div>
+	</div>
+
 </div>

views/partials/radar.ejs

@@ -32,7 +32,7 @@
 
 <div class="main radar can-enhance">
   <div class="container">
-    <div class="map-tiles tiles"><img /><img /><img /><img /><img /><img /></div>
+    <div class="map-tiles tiles"><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /></div>
     <div class="scroll-area">
       <div class="frame template">
         <div class="map">
@@ -40,6 +40,6 @@
         </div>
       </div>
     </div>
-    <div class="overlay-tiles tiles"><img /><img /><img /><img /><img /></div>
+    <div class="overlay-tiles tiles"><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /></div>
   </div>
 </div>

ws4kp.code-workspace

@@ -12,7 +12,8 @@
 			"**/bower_components": true,
 			"**/node_modules": true,
 			"**/vendor": true,
-			"dist/**": true
+			"dist/**": true,
+			"package-lock.json": true,
 		},
 		"cSpell.enabledFileTypes": {
 			"markdown": true,
@@ -76,7 +77,8 @@
 			"source.fixAll.eslint": "explicit"
 		},
 		"cSpell.words": [
-			"hibyehihi"
+			"hibyehihi",
+			"zakj"
 		]
 	},
 	"extensions": {