add speed setting close #49

server/scripts/modules/settings.mjs

@@ -4,20 +4,28 @@ document.addEventListener('DOMContentLoaded', () => {
 	init();
 });
 
-const settings = {};
+// default speed
+const settings = { speed: { value: 1.0 } };
 
 const init = () => {
 	// create settings
 	settings.wide = new Setting('wide', 'Widescreen', 'boolean', false, wideScreenChange, true);
 	settings.kiosk = new Setting('kiosk', 'Kiosk', 'boolean', false, kioskChange, false);
+	settings.speed = new Setting('speed', 'Speed', 'select', 1.0, null, true, [
+		[0.5, 'Very Fast'],
+		[0.75, 'Fast'],
+		[1.0, 'Normal'],
+		[1.25, 'Slow'],
+		[1.5, 'Very Slow'],
+	]);
 
-	// generate checkboxes
-	const checkboxes = Object.values(settings).map((d) => d.generateCheckbox());
+	// generate html objects
+	const settingHtml = Object.values(settings).map((d) => d.generate());
 
 	// write to page
 	const settingsSection = document.querySelector('#settings');
 	settingsSection.innerHTML = '';
-	settingsSection.append(...checkboxes);
+	settingsSection.append(...settingHtml);
 };
 
 const wideScreenChange = (value) => {

server/scripts/modules/share.mjs

@@ -31,6 +31,14 @@ const createLink = async (e) => {
 		}
 	});
 
+	// get all select boxes
+	const selects = document.querySelectorAll('select');
+	[...selects].forEach((elem) => {
+		if (elem?.id) {
+			queryStringElements[elem.id] = elem?.value ?? 0;
+		}
+	});
+
 	// add the location string
 	queryStringElements.latLonQuery = localStorage.getItem('latLonQuery');
 	queryStringElements.latLon = localStorage.getItem('latLon');

server/scripts/modules/utils/setting.mjs

@@ -3,23 +3,27 @@ import { parseQueryString } from '../share.mjs';
 const SETTINGS_KEY = 'Settings';
 
 class Setting {
-	constructor(shortName, name, type, defaultValue, changeAction, sticky) {
+	constructor(shortName, name, type, defaultValue, changeAction, sticky, values) {
 		// store values
 		this.shortName = shortName;
 		this.name = name;
 		this.defaultValue = defaultValue;
 		this.myValue = defaultValue;
-		this.type = type;
+		this.type = type ?? 'checkbox';
 		this.sticky = sticky;
+		this.values = values;
 		// a default blank change function is provided
 		this.changeAction = changeAction ?? (() => { });
 
 		// get value from url
-		const urlValue = parseQueryString()?.[`settings-${shortName}-checkbox`];
+		const urlValue = parseQueryString()?.[`settings-${shortName}-${type}`];
 		let urlState;
-		if (urlValue !== undefined) {
+		if (type === 'checkbox' && urlValue !== undefined) {
 			urlState = urlValue === 'true';
 		}
+		if (type === 'select' && urlValue !== undefined) {
+			urlState = parseFloat(urlValue);
+		}
 
 		// get existing value if present
 		const storedValue = urlState ?? this.getFromLocalStorage();
@@ -28,7 +32,46 @@ class Setting {
 		}
 
 		// call the change function on startup
-		this.checkboxChange({ target: { checked: this.myValue } });
+		switch (type) {
+		case 'select':
+			this.selectChange({ target: { value: this.myValue } });
+			break;
+		case 'checkbox':
+		default:
+			this.checkboxChange({ target: { checked: this.myValue } });
+		}
+	}
+
+	generateSelect() {
+		// create a radio button set in the selected displays area
+		const label = document.createElement('label');
+		label.for = `settings-${this.shortName}-select`;
+		label.id = `settings-${this.shortName}-label`;
+
+		const span = document.createElement('span');
+		span.innerHTML = `${this.name} `;
+		label.append(span);
+
+		const select = document.createElement('select');
+		select.id = `settings-${this.shortName}-select`;
+		select.name = `settings-${this.shortName}-select`;
+		select.addEventListener('change', (e) => this.selectChange(e));
+
+		this.values.forEach(([value, text]) => {
+			const option = document.createElement('option');
+			option.value = value.toFixed(2);
+
+			option.innerHTML = text;
+			select.append(option);
+		});
+		label.append(select);
+
+		this.element = label;
+
+		// set the initial value
+		this.selectHighlight(this.myValue);
+
+		return label;
 	}
 
 	generateCheckbox() {
@@ -48,7 +91,7 @@ class Setting {
 
 		label.append(checkbox, span);
 
-		this.checkbox = label;
+		this.element = label;
 
 		return label;
 	}
@@ -62,6 +105,15 @@ class Setting {
 		this.changeAction(this.myValue);
 	}
 
+	selectChange(e) {
+		// update the value
+		this.myValue = parseFloat(e.target.value);
+		this.storeToLocalStorage(this.myValue);
+
+		// call the change action
+		this.changeAction(this.myValue);
+	}
+
 	storeToLocalStorage(value) {
 		if (!this.sticky) return;
 		const allSettingsString = localStorage?.getItem(SETTINGS_KEY) ?? '{}';
@@ -79,7 +131,7 @@ class Setting {
 					switch (this.type) {
 					case 'boolean':
 						return storedValue;
-					case 'int':
+					case 'select':
 						return storedValue;
 					default:
 						return null;
@@ -99,12 +151,36 @@ class Setting {
 	set value(newValue) {
 		// update the state
 		this.myValue = newValue;
-		this.checkbox.checked = newValue;
+		switch (this.type) {
+		case 'select':
+			this.selectHighlight(newValue);
+			break;
+		case 'checkbox':
+		default:
+			this.element.checked = newValue;
+		}
 		this.storeToLocalStorage(this.myValue);
 
 		// call change action
 		this.changeAction(this.myValue);
 	}
+
+	selectHighlight(newValue) {
+		// set the dropdown to the provided value
+		this.element.querySelectorAll('option').forEach((elem) => {
+			elem.selected = newValue.toFixed(2) === elem.value;
+		});
+	}
+
+	generate() {
+		switch (this.type) {
+		case 'select':
+			return this.generateSelect();
+		case 'checkbox':
+		default:
+			return this.generateCheckbox();
+		}
+	}
 }
 
 export default Setting;

server/scripts/modules/weatherdisplay.mjs

@@ -6,6 +6,7 @@ import {
 	msg, displayNavMessage, isPlaying, updateStatus, timeZone,
 } from './navigation.mjs';
 import { parseQueryString } from './share.mjs';
+import settings from './settings.mjs';
 
 class WeatherDisplay {
 	constructor(navId, elemId, name, defaultEnabled) {
@@ -358,7 +359,7 @@ class WeatherDisplay {
 
 	// start and stop base counter
 	startNavCount() {
-		if (!this.navInterval) this.navInterval = setInterval(() => this.navBaseTime(), this.timing.baseDelay);
+		if (!this.navInterval) this.navInterval = setInterval(() => this.navBaseTime(), this.timing.baseDelay * settings.speed.value);
 	}
 
 	resetNavBaseCount() {