add images and widescreen cleanup close #32

server/scripts/modules/navigation.mjs

@@ -4,6 +4,7 @@ import STATUS from './status.mjs';
 import { wrap } from './utils/calc.mjs';
 import { json } from './utils/fetch.mjs';
 import { getPoint } from './utils/weather.mjs';
+import settings from './settings.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
@@ -269,7 +270,8 @@ const getDisplay = (index) => displays[index];
 
 // resize the container on a page resize
 const resize = () => {
-	const widthZoomPercent = (document.querySelector('#divTwcBottom').getBoundingClientRect().width) / 640;
+	const targetWidth = settings.wide.value ? 640 + 107 + 107 : 640;
+	const widthZoomPercent = (document.querySelector('#divTwcBottom').getBoundingClientRect().width) / targetWidth;
 	const heightZoomPercent = (window.innerHeight) / 480;
 
 	const scale = Math.min(widthZoomPercent, heightZoomPercent);

server/scripts/modules/settings.mjs

@@ -0,0 +1,31 @@
+import Setting from './utils/setting.mjs';
+
+document.addEventListener('DOMContentLoaded', () => {
+	init();
+});
+
+const settings = {};
+
+const init = () => {
+	// create settings
+	settings.wide = new Setting('wide', 'Widescreen', 'boolean', false, wideScreenChange);
+
+	// generate checkboxes
+	const checkboxes = Object.values(settings).map((d) => d.generateCheckbox());
+
+	// write to page
+	const settingsSection = document.querySelector('#settings');
+	settingsSection.innerHTML = '';
+	settingsSection.append(...checkboxes);
+};
+
+const wideScreenChange = (value) => {
+	const container = document.querySelector('#divTwc');
+	if (value) {
+		container.classList.add('wide');
+	} else {
+		container.classList.remove('wide');
+	}
+};
+
+export default settings;

server/scripts/modules/status.mjs

@@ -4,7 +4,7 @@ const STATUS = {
 	failed: Symbol('failed'),
 	noData: Symbol('noData'),
 	disabled: Symbol('disabled'),
-	retrying: Symbol('retyring'),
+	retrying: Symbol('retrying'),
 };
 
 const calcStatusClass = (statusCode) => {

server/scripts/modules/utils/setting.mjs

@@ -0,0 +1,93 @@
+const SETTINGS_KEY = 'Settings';
+
+class Setting {
+	constructor(shortName, name, type, defaultValue, changeAction) {
+		// store values
+		this.shortName = shortName;
+		this.name = name;
+		this.defaultValue = defaultValue;
+		this.myValue = defaultValue;
+		this.type = type;
+		// a defualt blank change function is provded
+		this.changeAction = changeAction ?? (() => {});
+
+		// get existing value if present
+		const storedValue = this.getFromLocalStorage();
+		if (storedValue !== null) {
+			this.myValue = storedValue;
+		}
+
+		// call the change function on startup
+		this.changeAction(this.myValue);
+	}
+
+	generateCheckbox() {
+		// create a checkbox in the selected displays area
+		const label = document.createElement('label');
+		label.for = `settings-${this.shortName}-checkbox`;
+		label.id = `settings-${this.shortName}-label`;
+		const checkbox = document.createElement('input');
+		checkbox.type = 'checkbox';
+		checkbox.value = true;
+		checkbox.id = `settings-${this.shortName}-checkbox`;
+		checkbox.name = `settings-${this.shortName}-checkbox`;
+		checkbox.checked = this.myValue;
+		checkbox.addEventListener('change', (e) => this.checkboxChange(e));
+		const span = document.createElement('span');
+		span.innerHTML = this.name;
+
+		label.append(checkbox, span);
+
+		this.checkbox = label;
+
+		return label;
+	}
+
+	checkboxChange(e) {
+		// update the state
+		this.myValue = e.target.checked;
+		this.storeToLocalStorage(this.myValue);
+
+		// call change action
+		this.changeAction(this.myValue);
+	}
+
+	storeToLocalStorage(value) {
+		const allSettingsString = localStorage?.getItem(SETTINGS_KEY) ?? '{}';
+		const allSettings = JSON.parse(allSettingsString);
+		allSettings[this.shortName] = value;
+		localStorage?.setItem(SETTINGS_KEY, JSON.stringify(allSettings));
+	}
+
+	getFromLocalStorage() {
+		const allSettings = localStorage?.getItem(SETTINGS_KEY);
+		try {
+			if (allSettings) {
+				const storedValue = JSON.parse(allSettings)?.[this.shortName];
+				if (storedValue !== undefined) {
+					switch (this.type) {
+					case 'boolean':
+						return storedValue;
+					case 'int':
+						return storedValue;
+					default:
+						return null;
+					}
+				}
+			}
+		} catch {
+			return null;
+		}
+		return null;
+	}
+
+	get value() {
+		return this.myValue;
+	}
+
+	set value(newValue) {
+		this.myValue = newValue;
+	}
+}
+
+export default Setting;

server/scripts/modules/weatherdisplay.mjs

@@ -198,11 +198,14 @@ class WeatherDisplay {
 		this.startNavCount();
 
 		this.elem.classList.add('show');
+		document.querySelector('#divTwc').classList.add(this.elemId);
 	}
 
 	hideCanvas() {
 		this.resetNavBaseCount();
 		this.elem.classList.remove('show');
+		// used to change backgrounds for widescreen
+		document.querySelector('#divTwc').classList.remove(this.elemId);
 	}
 
 	get active() {