add event type to hazard scroll #92

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/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>