restructure wide/enhanced settings close #205

server/scripts/modules/currentweather.mjs

@@ -195,7 +195,7 @@ 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 = {

server/scripts/modules/hourly-graph.mjs

@@ -18,7 +18,7 @@ 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;

server/scripts/modules/latestobservations.mjs

@@ -162,8 +162,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),

server/scripts/modules/radar-constants.mjs

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

server/scripts/modules/regionalforecast.mjs

@@ -29,7 +29,7 @@ const scaling = () => {
 		y: 117,
 	};
 
-	if (settings.wide?.value && settings.enhancedScreens?.value) {
+	if (settings.wide?.value && settings.enhanced?.value) {
 		mapOffsetXY.x = 320;
 		available.x = 854;
 	}

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) {
@@ -151,15 +200,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,