add scanlines

server/scripts/index.mjs

@@ -38,6 +38,7 @@ const init = () => {
 	document.querySelector('#NavigateNext').addEventListener('click', btnNavigateNextClick);
 	document.querySelector('#NavigatePrevious').addEventListener('click', btnNavigatePreviousClick);
 	document.querySelector('#NavigatePlay').addEventListener('click', btnNavigatePlayClick);
+	document.querySelector('#ToggleScanlines').addEventListener('click', btnNavigateToggleScanlines);
 	document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR).addEventListener('click', btnFullScreenClick);
 	const btnGetGps = document.querySelector(BNT_GET_GPS_SELECTOR);
 	btnGetGps.addEventListener('click', btnGetGpsClick);
@@ -344,6 +345,11 @@ const btnNavigatePlayClick = () => {
 	return false;
 };
 
+const btnNavigateToggleScanlines = () => {
+	settings.scanLines.value = !settings.scanLines.value;
+	return false;
+};
+
 // post a message to the iframe
 const postMessage = (type, myMessage = {}) => {
 	navMessage({ type, message: myMessage });

server/scripts/modules/settings.mjs

@@ -33,6 +33,12 @@ const init = () => {
 			[1.5, 'Very Slow'],
 		],
 	});
+	settings.scanLines = new Setting('scanLines', {
+		name: 'Scan Lines',
+		defaultValue: false,
+		changeAction: scanLineChange,
+		sticky: true,
+	});
 	settings.units = new Setting('units', {
 		name: 'Units',
 		type: 'select',
@@ -85,6 +91,18 @@ const kioskChange = (value) => {
 	}
 };
 
+const scanLineChange = (value) => {
+	const container = document.getElementById('container');
+	const navIcons = document.getElementById('ToggleScanlines');
+	if (value) {
+		container.classList.add('scanlines');
+		navIcons.classList.add('on');
+	} else {
+		container.classList.remove('scanlines');
+		navIcons.classList.remove('on');
+	}
+};
+
 const unitChange = () => {
 	// reload the data at the top level to refresh units
 	// after the initial load

server/scripts/modules/utils/fetch.mjs

@@ -7,7 +7,7 @@ const blob = (url, params) => fetchAsync(url, 'blob', params);
 const fetchAsync = async (_url, responseType, _params = {}) => {
 	// add user agent header to json request at api.weather.gov
 	const headers = {};
-	if (_url.match(/api\.weather\.gov/)) {
+	if (_url.toString().match(/api\.weather\.gov/)) {
 		headers['user-agent'] = 'Weatherstar 4000+; weatherstar@netbymatt.com';
 	}
 	// combine default and provided parameters

server/scripts/modules/utils/setting.mjs

@@ -189,7 +189,7 @@ class Setting {
 				break;
 			case 'checkbox':
 			default:
-				this.element.checked = newValue;
+				this.element.querySelector('input').checked = newValue;
 		}
 		this.storeToLocalStorage(this.myValue);