5.23.3

README.md

@@ -139,6 +139,11 @@ Ws4kp is muted by default, but if it was unmuted on the last visit it is coded t
 
 Chrome seems to be more lenient on auto play and will eventually let a site auto-play music if you're visited it enough recently and manually clicked to start playing music on each visit. It also has a flag you can add to the command line when launching Chrome: `chrome.exe --autoplay-policy=no-user-gesture-required`. This is the best solution when using Kiosk-style setup.
 
+If you're unable to pre-set the play state before entering kiosk mode (such as with a home dashboard implemenation) you can add the query string value below to the url. The browser will still follow the auto play rules outlined above.
+```
+?settings-mediaPlaying-boolean=true
+```
+
 ## Community Notes
 
 Thanks to the WeatherStar community for providing these discussions to further extend your retro forecasts!

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.23.0",
+	"version": "5.23.3",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.23.0",
+			"version": "5.23.3",
 			"license": "MIT",
 			"dependencies": {
 				"dotenv": "^16.5.0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.23.0",
+	"version": "5.23.3",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",

server/scripts/modules/currentweatherscroll.mjs

@@ -99,6 +99,12 @@ const drawScreen = async () => {
 				break;
 			default: drawCondition(thisScreen);
 		}
+		// add the header if available
+		if (thisScreen.header) {
+			setHeader(thisScreen.header);
+		} else {
+			setHeader('');
+		}
 	} else {
 		// can't identify screen, get another one
 		incrementInterval(true);
@@ -115,6 +121,7 @@ const hazards = (data) => {
 		text: hazard,
 		type: 'scroll',
 		classes: ['hazard'],
+		header: data.hazards[0].properties.event,
 	};
 };
 
@@ -167,6 +174,13 @@ const drawCondition = (text) => {
 	elemForEach('.weather-display .scroll .fixed', (elem) => {
 		elem.innerHTML = text;
 	});
+	setHeader('');
+};
+
+const setHeader = (text) => {
+	elemForEach('.weather-display .scroll .scroll-header', (elem) => {
+		elem.innerHTML = text ?? '';
+	});
 };
 
 // store the original number of screens

server/scripts/modules/utils/setting.mjs

@@ -38,6 +38,9 @@ class Setting {
 		if (this.type === 'checkbox' && urlValue !== undefined) {
 			urlState = urlValue === 'true';
 		}
+		if (this.type === 'boolean' && urlValue !== undefined) {
+			urlState = urlValue === 'true';
+		}
 		if (this.type === 'select' && urlValue !== undefined) {
 			urlState = parseFloat(urlValue);
 		}

server/styles/scss/_current-weather.scss

@@ -22,9 +22,10 @@
 
 			&.right {
 				right: 0px;
-				font-family: 'Star4000 Large';
-				font-size: 16pt;
+				font-family: "Star4000 Large";
+				font-size: 20px;
 				font-weight: bold;
+				line-height: 24px;
 
 				.row {
 					margin-bottom: 12px;

server/styles/scss/_weather-display.scss

@@ -117,18 +117,28 @@
 		height: 70px;
 		overflow: hidden;
 		margin-top: 3px;
-		padding-top: 7px;
 
 		&.hazard {
 			background-color: rgb(112, 35, 35);
 		}
 
-		.fixed {
-			font-family: 'Star4000';
-			font-size: 24pt;
+		.fixed,
+		.scroll-header {
 			margin-left: 55px;
 			margin-right: 55px;
 			overflow: hidden;
+		}
+
+		.scroll-header {
+			height: 26px;
+			font-family: "Star4000 Small";
+			font-size: 20pt;
+			margin-top: -10px;
+		}
+
+		.fixed {
+			font-family: 'Star4000';
+			font-size: 24pt;
 
 			.scroll-area {
 				text-wrap: nowrap;

views/partials/scroll.ejs

@@ -1,4 +1,5 @@
 <div class="scroll">
 	<div class="scrolling template"></div>
+	<div class="scroll-header"></div>
 	<div class="fixed"></div>
 </div>