add images and widescreen cleanup close #32

server/scripts/index.mjs

@@ -9,8 +9,6 @@ document.addEventListener('DOMContentLoaded', () => {
 	init();
 });
 
-let fullScreenOverride = false;
-
 const categories = [
 	'Land Features',
 	'Bay', 'Channel', 'Cove', 'Dam', 'Delta', 'Gulf', 'Lagoon', 'Lake', 'Ocean', 'Reef', 'Reservoir', 'Sea', 'Sound', 'Strait', 'Waterfall', 'Wharf', // Water Features
@@ -51,7 +49,7 @@ const init = () => {
 	document.querySelector('#btnGetLatLng').addEventListener('click', () => formSubmit());
 
 	document.addEventListener('keydown', documentKeydown);
-	document.addEventListener('touchmove', (e) => { if (fullScreenOverride) e.preventDefault(); });
+	document.addEventListener('touchmove', (e) => { if (document.fullscreenElement) e.preventDefault(); });
 
 	$(TXT_ADDRESS_SELECTOR).devbridgeAutocomplete({
 		serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
@@ -186,7 +184,6 @@ const enterFullScreen = () => {
 	} else {
 		// iOS doesn't support FullScreen API.
 		window.scrollTo(0, 0);
-		fullScreenOverride = true;
 	}
 	resize();
 	updateFullScreenNavigate();
@@ -200,10 +197,6 @@ const enterFullScreen = () => {
 const exitFullscreen = () => {
 	// exit full-screen
 
-	if (fullScreenOverride) {
-		fullScreenOverride = false;
-	}
-
 	if (document.exitFullscreen) {
 		// Chrome 71 broke this if the user pressed F11 to enter full screen mode.
 		document.exitFullscreen();
@@ -219,6 +212,9 @@ const exitFullscreen = () => {
 	const img = document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR);
 	img.src = 'images/nav/ic_fullscreen_white_24dp_2x.png';
 	img.title = 'Enter fullscreen';
+	const divTwcBottom = document.querySelector('#divTwcBottom');
+	divTwcBottom.classList.remove('hidden');
+	divTwcBottom.classList.add('visible');
 };
 
 const btnNavigateMenuClick = () => {

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

server/styles/scss/_page.scss

@@ -129,16 +129,11 @@ body {
 
 	&.wide {
 		max-width: 854px;
-		background-color: red;
+		// background: url(../images/BackGround1_1_wide.png);
+		;
 	}
 }
 
-.wide #container {
-	padding-left: 107px;
-	padding-right: 107px;
-	background-repeat: no-repeat;
-}
-
 #divTwcLeft {
 	display: none;
 	text-align: right;
@@ -299,8 +294,15 @@ body {
 	transform-origin: 0 0;
 }
 
+.wide #container {
+	padding-left: 107px;
+	padding-right: 107px;
+	background-repeat: no-repeat;
+	background: url(../images/BackGround1_1_wide.png)
+}
+
 #divTwc:fullscreen #container {
-	background-image: none;
+	// background-image: none;
 	width: unset;
 	height: unset;
 	transform-origin: unset;
@@ -337,6 +339,10 @@ body {
 	margin-top: 15px;
 }
 
+#settings {
+	margin-bottom: 15px;
+}
+
 #enabledDisplays {
 	margin-bottom: 15px;
 	@include u.status-colors();

server/styles/scss/_radar.scss

@@ -112,3 +112,7 @@
 		}
 	}
 }
+
+.wide.radar #container {
+	background: url(../images/BackGround4_1_wide.png);
+}

views/index.ejs

@@ -43,6 +43,7 @@
   <script type="module" src="scripts/modules/travelforecast.mjs"></script>
   <script type="module" src="scripts/modules/progress.mjs"></script>
   <script type="module" src="scripts/modules/radar.mjs"></script>
+  <script type="module" src="scripts/modules/settings.mjs"></script>
 	<script type="module" src="scripts/index.mjs"></script>
 
   <!-- data -->
@@ -146,6 +147,10 @@
 
   </div>
 
+	<div class='heading'>Settings</div>
+	<div id='settings'>
+	</div>
+
   <div id="divInfo">
     Location: <span id="spanCity"></span> <span id="spanState"></span><br />
     Station Id: <span id="spanStationId"></span><br />