6.2.2

Update README.md clarifying displays if you're within one of the high…

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,4 +11,4 @@ Please do not report issues with api.weather.gov being down. It's a new service
 
 Please include:
 * Web browser and OS
-* Forecast Information text block from the very bottom of the web page
+* Headend Information text block from the very bottom of the web page

README.md

@@ -179,7 +179,7 @@ I've made several changes to this Weather Star 4000 simulation compared to the o
 * Radar displays the timestamp of the image.
 * A new hour-by-hour graph of the temperature, cloud cover and precipitation chances for the next 24 hours.
 * A new hourly forecast display for the next 24 hours is available, and is shown in the style of the travel cities forecast. (off by default because it duplicates the hourly graph)
-* The SPC Outlook is shown in the style of the old air quality screen. This shows the probability of severe weather over the next 3 days at your location.
+* The SPC Outlook is shown in the style of the old air quality screen. This shows the probability of severe weather over the next 3 days at your location. SPC outlook only displays if you're within one of the highlight areas over the next 3 day. You can view the [maps](https://www.weather.gov/crh/outlooks) and pick a location within one of the risk categories to see if the screen is working for you.
 * The "Local Forecast" and "Extended Forecast" provide several additional days of information compared to the original format in the 90s.
 * The original music has been replaced. More info in [Music](#music).
 * Marine forecast (tides) is not available as it is not reliably part of the new API.
@@ -321,6 +321,7 @@ Thanks to the WeatherStar+ community for providing these discussions to further
 * [ws4channels](https://github.com/rice9797/ws4channels) A Dockerized Node.js application to stream WeatherStar 4000 data into Channels DVR using Puppeteer and FFmpeg.
 * [SSL Certificates](https://github.com/netbymatt/ws4kp/issues/135) Discussion about how to host with an SSL certificate (enables geolocation).
 * [Changing playlists](https://github.com/netbymatt/ws4kp/issues/138) Possible ways to automatically change the playlist on a schedule.
+* [Customize Travel Forecast Cities](https://github.com/netbymatt/ws4kp/issues/146#issuecomment-3363940202)
 
 ## Customization
 

datagenerators/output/travelcities.json

@@ -84,8 +84,8 @@
 		"Latitude": 29.7633,
 		"Longitude": -95.3633,
 		"point": {
-			"x": 65,
-			"y": 97,
+			"x": 63,
+			"y": 95,
 			"wfo": "HGX"
 		}
 	},

gulp/update-vendor.mjs

@@ -5,8 +5,8 @@ import rename from 'gulp-rename';
 const clean = () => deleteAsync(['./server/scripts/vendor/auto/**']);
 
 const vendorFiles = [
-	'./node_modules/luxon/build/es6/luxon.js',
-	'./node_modules/luxon/build/es6/luxon.js.map',
+	'./node_modules/luxon/build/es6/luxon.mjs',
+	'./node_modules/luxon/build/es6/luxon.mjs.map',
 	'./node_modules/nosleep.js/dist/NoSleep.js',
 	'./node_modules/suncalc/suncalc.js',
 	'./node_modules/swiped-events/src/swiped-events.js',
@@ -23,7 +23,6 @@ const copy = () => src(vendorFiles)
 		path.dirname = path.dirname.toLowerCase();
 		path.basename = path.basename.toLowerCase();
 		path.extname = path.extname.toLowerCase();
-		if (path.basename === 'luxon') path.extname = '.mjs';
 	}))
 	.pipe(dest('./server/scripts/vendor/auto'));
 

index.mjs

@@ -8,6 +8,7 @@ import {
 import playlist from './src/playlist.mjs';
 import OVERRIDES from './src/overrides.mjs';
 import cache from './proxy/cache.mjs';
+import devTools from './src/com.chrome.devtools.mjs';
 
 const travelCities = JSON.parse(await readFile('./datagenerators/output/travelcities.json'));
 const regionalCities = JSON.parse(await readFile('./datagenerators/output/regionalcities.json'));
@@ -168,6 +169,7 @@ if (process.env?.DIST === '1') {
 	app.use('/geoip', geoip);
 	app.use('/resources', express.static('./server/scripts/modules'));
 	app.get('/', index);
+	app.get('/.well-known/appspecific/com.chrome.devtools.json', devTools);
 	app.get('*name', express.static('./server', staticOptions));
 }
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "6.1.10",
+	"version": "6.2.2",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",
@@ -8,6 +8,7 @@
 		"start": "node index.mjs",
 		"stop": "pkill -f 'node index.mjs' || echo 'No process found'",
 		"test": "echo \"Error: no test specified\" && exit 1",
+		"build:travelcities": "node datagenerators/travelcities.mjs",
 		"build:css": "sass --style=compressed ./server/styles/scss/main.scss ./server/styles/main.css",
 		"build": "gulp buildDist",
 		"lint": "eslint ./server/scripts/**/*.mjs ./proxy/**/*.mjs ./src/**/*.mjs *.mjs",
@@ -50,13 +51,12 @@
 		"swiped-events": "^1.1.4",
 		"terser-webpack-plugin": "^5.3.6",
 		"webpack": "^5.99.9",
-		"webpack-stream": "^7.0.0"
+		"webpack-stream": "^7.0.0",
+		"metar-taf-parser": "^9.0.0"
 	},
 	"dependencies": {
 		"dotenv": "^17.0.1",
 		"ejs": "^3.1.5",
-		"express": "^5.1.0",
-		"metar-taf-parser": "^9.0.0",
-		"npm": "^11.6.0"
+		"express": "^5.1.0"
 	}
 }

server/scripts/modules/currentweatherscroll.mjs

@@ -1,5 +1,4 @@
 import { locationCleanup } from './utils/string.mjs';
-import { elemForEach } from './utils/elem.mjs';
 import getCurrentWeather from './currentweather.mjs';
 import { currentDisplay } from './navigation.mjs';
 import getHazards from './hazards.mjs';
@@ -12,6 +11,16 @@ const TICK_INTERVAL_MS = 500; // milliseconds per tick
 const secondsToTicks = (seconds) => Math.ceil((seconds * 1000) / TICK_INTERVAL_MS);
 const DEFAULT_UPDATE = secondsToTicks(4.0); // 4 second default for each current conditions
 
+// items on page
+let mainScroll;
+let fixedScroll;
+let header;
+document.addEventListener('DOMContentLoaded', () => {
+	mainScroll = document.querySelector('#container>.scroll');
+	fixedScroll = document.querySelector('#container>.scroll .fixed');
+	header = document.querySelector('#container>.scroll .scroll-header');
+});
+
 // local variables
 let interval;
 let screenIndex = 0;
@@ -23,6 +32,8 @@ let defaultScreensLoaded = true;
 // start drawing conditions
 // reset starts from the first item in the text scroll list
 const start = () => {
+	// show the block
+	show();
 	// if already started, draw the screen on a reset flag and return
 	if (interval) {
 		if (resetFlag) drawScreen();
@@ -62,6 +73,7 @@ const incrementInterval = (force) => {
 	const display = currentDisplay();
 	if (!display?.okToDrawCurrentConditions) {
 		stop(display?.elemId === 'progress');
+		hide();
 		return;
 	}
 	screenIndex = (screenIndex + 1) % (workingScreens.length);
@@ -91,18 +103,8 @@ const drawScreen = async () => {
 	const thisScreen = workingScreens[screenIndex](scrollData);
 
 	// update classes on the scroll area
-	elemForEach('.weather-display .scroll', (elem) => {
-		elem.classList.forEach((cls) => { if (cls !== 'scroll') elem.classList.remove(cls); });
-		// no scroll on progress
-		if (elem.parentElement.id === 'progress-html') return;
-		thisScreen?.classes?.forEach((cls) => elem.classList.add(cls));
-	});
-	// special case for red background on hazard scroll
-	const mainScrollBg = document.getElementById('scroll-bg');
-	mainScrollBg.className = '';
-	if (thisScreen?.classes?.includes('hazard')) {
-		mainScrollBg.classList.add('hazard');
-	}
+	mainScroll.classList.forEach((cls) => { if (cls !== 'scroll') mainScroll.classList.remove(cls); });
+	thisScreen?.classes?.forEach((cls) => mainScroll.classList.add(cls));
 
 	if (typeof thisScreen === 'string') {
 		// only a string
@@ -131,9 +133,7 @@ const hazards = (data) => {
 	// test for data
 	if (!data.hazards || data.hazards.length === 0) return false;
 
-	// since the hazard scroll element has no left/right margins, pad the beginning and end with non-breaking spaces
-	const padding = ' '.repeat(4);
-	const hazard = `${padding}${data.hazards[0].properties.event} ${data.hazards[0].properties.description}${padding}`;
+	const hazard = `${data.hazards[0].properties.event} ${data.hazards[0].properties.description}`;
 
 	return {
 		text: hazard,
@@ -196,17 +196,12 @@ let workingScreens = [...baseScreens, ...additionalScreens];
 
 // internal draw function with preset parameters
 const drawCondition = (text) => {
-	// update all html scroll elements
-	elemForEach('.weather-display .scroll .fixed', (elem) => {
-		elem.innerHTML = text;
-	});
+	fixedScroll.innerHTML = text;
 	setHeader('');
 };
 
 const setHeader = (text) => {
-	elemForEach('.weather-display .scroll .scroll-header', (elem) => {
-		elem.innerHTML = text ?? '';
-	});
+	header.innerHTML = text ?? '';
 };
 
 // reset the screens back to the original set
@@ -229,14 +224,14 @@ const drawScrollCondition = (screen) => {
 	scrollElement.classList.add('scroll-area');
 	scrollElement.innerHTML = screen.text;
 	// add it to the page to get the width
-	document.querySelector('.weather-display .scroll .fixed').innerHTML = scrollElement.outerHTML;
+	fixedScroll.innerHTML = scrollElement.outerHTML;
 	// grab the width
-	const { scrollWidth, clientWidth } = document.querySelector('.weather-display .scroll .fixed .scroll-area');
+	const { scrollWidth, clientWidth } = document.querySelector('#container>.scroll .fixed .scroll-area');
 
 	// calculate the scroll distance and set a minimum scroll
 	const scrollDistance = Math.max(scrollWidth - clientWidth, 0);
-	// calculate the scroll time (scaled by global speed setting)
-	const scrollTime = scrollDistance / SCROLL_SPEED * settings.speed.value;
+	// calculate the scroll time (scaled by global speed setting), minimum 2s (4s when added to start and end delays)
+	const scrollTime = Math.max(scrollDistance / SCROLL_SPEED * settings.speed.value, 2);
 	// add 1 second pause at the end of the scroll animation
 	const endPauseTime = 1.0;
 	const totalAnimationTime = scrollTime + endPauseTime;
@@ -252,17 +247,13 @@ const drawScrollCondition = (screen) => {
 	scrollElement.style.backfaceVisibility = 'hidden'; // Force hardware acceleration
 	scrollElement.style.perspective = '1000px'; // Enable 3D rendering context
 
-	elemForEach('.weather-display .scroll .fixed', (elem) => {
-		elem.innerHTML = '';
-		elem.append(scrollElement.cloneNode(true));
-	});
+	fixedScroll.innerHTML = '';
+	fixedScroll.append(scrollElement.cloneNode(true));
 
 	// start the scroll after the specified delay
 	setTimeout(() => {
 		// change the transform to trigger the scroll
-		elemForEach('.weather-display .scroll .fixed .scroll-area', (elem) => {
-			elem.style.transform = `translateX(-${scrollDistance.toFixed(0)}px)`;
-		});
+		document.querySelector('#container>.scroll .fixed .scroll-area').style.transform = `translateX(-${scrollDistance.toFixed(0)}px)`;
 	}, startDelayTime * 1000);
 };
 
@@ -270,9 +261,19 @@ const parseMessage = (event) => {
 	if (event?.data?.type === 'current-weather-scroll') {
 		if (event.data?.method === 'start') start();
 		if (event.data?.method === 'reload') stop(true);
+		if (event.data?.method === 'show') show();
+		if (event.data?.method === 'hide') hide();
 	}
 };
 
+const show = () => {
+	mainScroll.style.display = 'block';
+};
+
+const hide = () => {
+	mainScroll.style.display = 'none';
+};
+
 const screenCount = () => workingScreens.length;
 const atDefault = () => defaultScreensLoaded;
 
@@ -283,6 +284,8 @@ window.CurrentWeatherScroll = {
 	addScreen,
 	reset,
 	start,
+	show,
+	hide,
 	screenCount,
 	atDefault,
 };
@@ -291,6 +294,8 @@ export {
 	addScreen,
 	reset,
 	start,
+	show,
+	hide,
 	screenCount,
 	atDefault,
 };

server/scripts/modules/navigation.mjs

@@ -330,6 +330,7 @@ const handleNavButton = (button) => {
 			break;
 		case 'menu':
 			setPlaying(false);
+			postMessage({ type: 'current-weather-scroll', method: 'hide' });
 			if (progress) {
 				progress.showCanvas();
 			} else if (settings?.kiosk?.value) {
@@ -559,7 +560,9 @@ const resize = (force = false) => {
 	// Apply shared properties to the target element
 	targetElement.style.setProperty('transform', `scale(${scale})`, 'important');
 	targetElement.style.setProperty('transform-origin', transformOrigin, 'important');
-	targetElement.style.setProperty('width', `${wrapperWidth}px`, 'important');
+	// the width of the target element does not change it is the fixed width of the 4:3 display which is then scaled
+	// the wrapper adds margins and padding to achieve widescreen
+	// targetElement.style.setProperty('width', `${wrapperWidth}px`, 'important');
 	targetElement.style.setProperty('height', `${wrapperHeight}px`, 'important');
 	targetElement.style.setProperty('position', 'absolute', 'important');
 	targetElement.style.setProperty('left', leftPosition, 'important');

server/scripts/modules/progress.mjs

@@ -22,7 +22,9 @@ class Progress extends WeatherDisplay {
 	}
 
 	async drawCanvas(displays, loadedCount) {
+		// skip drawing if not displayed, or not yet available
 		if (!this.elem) return;
+		if (this.elem.classList.contains('show') === false) return;
 		super.drawCanvas();
 
 		// get the progress bar cover (makes percentage)

server/scripts/modules/spc-outlook.mjs

@@ -57,6 +57,7 @@ class SpcOutlook extends WeatherDisplay {
 	}
 
 	async getData(weatherParameters, refresh) {
+		if (weatherParameters) this.weatherParameters = weatherParameters;
 		if (!super.getData(weatherParameters, refresh)) return;
 
 		// SPC outlook data does not need to be reloaded on a location change, only during silent refresh
@@ -93,7 +94,7 @@ class SpcOutlook extends WeatherDisplay {
 			}
 		}
 		// parse the data
-		this.data = testAllPoints([weatherParameters.longitude, weatherParameters.latitude], this.rawOutlookData);
+		this.data = testAllPoints([this.weatherParameters.longitude, this.weatherParameters.latitude], this.rawOutlookData);
 
 		// check if there's a "risk" for any of the three days, otherwise skip the SPC Outlook screen
 		if (this.data.reduce((prev, cur) => prev || !!cur, false)) {

server/scripts/modules/weatherdisplay.mjs

@@ -172,6 +172,7 @@ class WeatherDisplay {
 		if (this.screenIndex < 0) this.screenIndex = 0;
 		if (this.okToDrawCurrentDateTime) this.drawCurrentDateTime();
 		if (this.okToDrawCurrentConditions) postMessage({ type: 'current-weather-scroll', method: 'start' });
+		if (this.okToDrawCurrentConditions === false) postMessage({ type: 'current-weather-scroll', method: 'hide' });
 	}
 
 	finishDraw() {

server/scripts/vendor/auto/luxon.mjs

@@ -8127,7 +8127,7 @@ function friendlyDateTime(dateTimeish) {
   }
 }
 
-const VERSION = "3.7.1";
+const VERSION = "3.7.2";
 
 export { DateTime, Duration, FixedOffsetZone, IANAZone, Info, Interval, InvalidZone, Settings, SystemZone, VERSION, Zone };
-//# sourceMappingURL=luxon.js.map
+//# sourceMappingURL=luxon.mjs.map

server/styles/scss/_page.scss

@@ -341,13 +341,14 @@ body {
 	// overflow: hidden;
 	background-image: url(../images/backgrounds/1.png);
 	transform-origin: 0 0;
+	background-repeat: no-repeat;
 }
 
 .wide #container {
 	padding-left: 107px;
 	padding-right: 107px;
+	background: url(../images/backgrounds/1-wide.png);
 	background-repeat: no-repeat;
-	background: url(../images/backgrounds/1-wide.png)
 }
 
 #divTwc:fullscreen #container,

server/styles/scss/_weather-display.scss

@@ -112,31 +112,32 @@
 
 	}
 
+}
 
-	.scroll {
-		@include u.text-shadow(3px, 1.5px);
+#container>.scroll {
+	display: none;
+	@include u.text-shadow(3px, 1.5px);
+	width: 640px;
+	height: 77px;
+	overflow: hidden;
+	margin-top: 3px;
+	position: absolute;
+	bottom: 0px;
+	z-index: 1;
+
+	&.hazard {
+		background-color: rgb(112, 35, 35);
+	}
+
+	.scroll-container {
 		width: 640px;
-		height: 77px;
-		overflow: hidden;
-		margin-top: 3px;
-		position: relative;
-		z-index: 1;
-
-		&.hazard {
-			background-color: rgb(112, 35, 35);
-		}
 
 		.fixed,
 		.scroll-header {
 			margin-left: 55px;
 			margin-right: 55px;
 			overflow: hidden;
-		}
-
-		// Remove margins for hazard scrolls to maximize text space
-		&.hazard .fixed {
-			margin-left: 0;
-			margin-right: 0;
+			white-space: nowrap;
 		}
 
 		.scroll-header {
@@ -158,21 +159,17 @@
 				// left: calc((elem width) - 640px);
 			}
 		}
-
 	}
+
+
+
 }
 
-#scroll-bg {
-	position: absolute;
-	bottom: 0px;
-	height: 77px;
-	width: 640px;
-
-	&.hazard {
-		background-color: rgb(112, 35, 35);
-	}
-}
-
-.wide #scroll-bg {
+.wide #container>.scroll {
 	width: 854px;
+	margin-left: -107px;
+
+	.scroll-container {
+		margin-left: 107px;
+	}
 }

src/com.chrome.devtools.mjs

@@ -0,0 +1,25 @@
+import path from 'path';
+
+// get values for devtools json
+const uuid = 'd2bd1130-560f-4c8e-b2c5-e91073784964';
+const root = path.resolve('server');
+
+const DEVTOOLS_CONFIG = {
+	workspace: {
+		uuid,
+		root,
+	},
+};
+
+const devTools = (req, res) => {
+	// test for localhost
+	if (['127.0.0.1', '::1', '::ffff:127.0.0.1'].includes(req.ip)) {
+		console.log(DEVTOOLS_CONFIG);
+		res.json(DEVTOOLS_CONFIG);
+	} else {
+		// not localhost
+		res.status(404).send('File not found');
+	}
+};
+
+export default devTools;

views/index.ejs

@@ -133,8 +133,8 @@
         <div id="hazards-html" class="weather-display">
           <%- include('partials/hazards.ejs') %>
         </div>
+        <%- include('partials/scroll.ejs') %>
       </div>
-			<div id="scroll-bg"></div>
     </div>
     <div id="divTwcBottom">
       <div id="divTwcBottomLeft">
@@ -186,16 +186,24 @@
       </div>
     </div>
 
-    <div class='heading'>Forecast Information</div>
+    <div class='heading'>Headend Information</div>
     <div id="divInfo">
-      Location: <span id="spanCity"></span> <span id="spanState"></span><br />
-      Station Id: <span id="spanStationId"></span><br />
-      Radar Id: <span id="spanRadarId"></span><br />
-      Zone Id: <span id="spanZoneId"></span><br />
-      Office Id: <span id="spanOfficeId"></span><br />
-      Grid X,Y: <span id="spanGridPoint"></span><br />
-      Music: <span id="musicTrack">Not playing</span><br />
-      Ws4kp Version: <span><%- version %></span>
+      <div class="header">Location:</div>
+      <div class="header"><span id="spanCity"></span> <span id="spanState"></span></div>
+      <div class="header">Station Id:</div>
+      <div class="header"><span id="spanStationId"></span></div>
+      <div class="header">Radar Id:</div>
+      <div class="header"><span id="spanRadarId"></span></div>
+      <div class="header">Zone Id:</div>
+      <div class="header"><span id="spanZoneId"></span></div>
+      <div class="header">Office Id:</div>
+      <div class="header"><span id="spanOfficeId"></span></div>
+      <div class="header">Grid X,Y:</div>
+      <div class="header"><span id="spanGridPoint"></span></div>
+      <div class="header">Music:</div>
+      <div class="header"><span id="musicTrack">Not playing</span></div>
+      <div class="header">Ws4kp Version:</div>
+      <div class="header"><span><%- version %></span></div>
     </div>
   </div>
 

views/partials/almanac.ejs

@@ -21,5 +21,4 @@
       </div>
     </div>
   </div>
-</div>
-<%- include('scroll.ejs') %>
+</div>

views/partials/current-weather.ejs

@@ -1,43 +1,42 @@
 <%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true, hasTime: true}) %>
-	<div class="main has-scroll has-box current-weather">
-		<div class="weather template">
-			<div class="left col">
-				<div class="temp center"></div>
-				<div class="condition center"></div>
-				<div class="icon center"><img src="" /></div>
-				<div class="wind-container">
-					<div class="wind-label">Wind:</div>
-					<div class="wind"></div>
-				</div>
-				<div class="wind-gusts"></div>
-			</div>
-			<div class="right col">
-				<div class="location"></div>
-				<div class="row">
-					<div class="label">Humidity:</div>
-					<div class="humidity value"></div>
-				</div>
-				<div class="row">
-					<div class="label">Dewpoint:</div>
-					<div class="dewpoint value"></div>
-				</div>
-				<div class="row">
-					<div class="label">Ceiling:</div>
-					<div class="ceiling value"></div>
-				</div>
-				<div class="row">
-					<div class="label">Visibility:</div>
-					<div class="visibility value"></div>
-				</div>
-				<div class="row">
-					<div class="label">Pressure:</div>
-					<div class="pressure value"></div>
-				</div>
-				<div class="row">
-					<div class="heat-index-label label"></div>
-					<div class="heat-index value"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll has-box current-weather">
+  <div class="weather template">
+    <div class="left col">
+      <div class="temp center"></div>
+      <div class="condition center"></div>
+      <div class="icon center"><img src="" /></div>
+      <div class="wind-container">
+        <div class="wind-label">Wind:</div>
+        <div class="wind"></div>
+      </div>
+      <div class="wind-gusts"></div>
+    </div>
+    <div class="right col">
+      <div class="location"></div>
+      <div class="row">
+        <div class="label">Humidity:</div>
+        <div class="humidity value"></div>
+      </div>
+      <div class="row">
+        <div class="label">Dewpoint:</div>
+        <div class="dewpoint value"></div>
+      </div>
+      <div class="row">
+        <div class="label">Ceiling:</div>
+        <div class="ceiling value"></div>
+      </div>
+      <div class="row">
+        <div class="label">Visibility:</div>
+        <div class="visibility value"></div>
+      </div>
+      <div class="row">
+        <div class="label">Pressure:</div>
+        <div class="pressure value"></div>
+      </div>
+      <div class="row">
+        <div class="heat-index-label label"></div>
+        <div class="heat-index value"></div>
+      </div>
+    </div>
+  </div>
+</div>

views/partials/extended-forecast.ejs

@@ -19,5 +19,4 @@
       </div>
     </div>
   </div>
-</div>
-<%- include('scroll.ejs') %>
+</div>

views/partials/hourly-graph.ejs

@@ -1,24 +1,23 @@
 <%- include('header.ejs', {title: 'Hourly Graph' , hasTime: false }) %>
 <div class="main has-scroll hourly-graph">
-		<div class="top-right template ">
-			<div class="temperature">Temperature</div>
-			<div class="cloud">Cloud %</div>
-			<div class="rain">Precip %</div>
-		</div>
-		<div class="y-axis">
-			<div class="label l-1">75</div>
-			<div class="label l-2">65</div>
-			<div class="label l-3">55</div>
-		</div>
-		<div class="chart">
-			<img id="chart-area"></img>
-		</div>
-		<div class="x-axis">
-			<div class="label l-1">12a</div>
-			<div class="label l-2">6a</div>
-			<div class="label l-3">12p</div>
-			<div class="label l-4">6p</div>
-			<div class="label l-5">12a</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+  <div class="top-right template ">
+    <div class="temperature">Temperature</div>
+    <div class="cloud">Cloud %</div>
+    <div class="rain">Precip %</div>
+  </div>
+  <div class="y-axis">
+    <div class="label l-1">75</div>
+    <div class="label l-2">65</div>
+    <div class="label l-3">55</div>
+  </div>
+  <div class="chart">
+    <img id="chart-area"></img>
+  </div>
+  <div class="x-axis">
+    <div class="label l-1">12a</div>
+    <div class="label l-2">6a</div>
+    <div class="label l-3">12p</div>
+    <div class="label l-4">6p</div>
+    <div class="label l-5">12a</div>
+  </div>
+</div>

views/partials/hourly.ejs

@@ -1,18 +1,17 @@
 <%- include('header.ejs', {title: 'Hourly Forecast' , hasTime: true }) %>
-	<div class="main has-scroll hourly">
-		<div class="column-headers">
-			<div class="temp">TEMP</div>
-			<div class="like">LIKE</div>
-			<div class="wind">WIND</div>
-		</div>
-		<div class="hourly-lines">
-			<div class="hourly-row template">
-				<div class="hour"></div>
-				<div class="icon"><img /></div>
-				<div class="temp"></div>
-				<div class="like"></div>
-				<div class="wind"></div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll hourly">
+  <div class="column-headers">
+    <div class="temp">TEMP</div>
+    <div class="like">LIKE</div>
+    <div class="wind">WIND</div>
+  </div>
+  <div class="hourly-lines">
+    <div class="hourly-row template">
+      <div class="hour"></div>
+      <div class="icon"><img /></div>
+      <div class="temp"></div>
+      <div class="like"></div>
+      <div class="wind"></div>
+    </div>
+  </div>
+</div>

views/partials/latest-observations.ejs

@@ -1,20 +1,19 @@
 <%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true, hasTime: true }) %>
-	<div class="main has-scroll latest-observations has-box">
-		<div class="container">
-			<div class="column-headers">
-				<div class="temp english">&deg;F</div>
-				<div class="temp metric">&deg;C</div>
-				<div class="weather">Weather</div>
-				<div class="wind">Wind</div>
-			</div>
-			<div class="observation-lines">
-				<div class="observation-row template">
-					<div class="location"></div>
-					<div class="temp"></div>
-					<div class="weather"></div>
-					<div class="wind"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll latest-observations has-box">
+  <div class="container">
+    <div class="column-headers">
+      <div class="temp english">&deg;F</div>
+      <div class="temp metric">&deg;C</div>
+      <div class="weather">Weather</div>
+      <div class="wind">Wind</div>
+    </div>
+    <div class="observation-lines">
+      <div class="observation-row template">
+        <div class="location"></div>
+        <div class="temp"></div>
+        <div class="weather"></div>
+        <div class="wind"></div>
+      </div>
+    </div>
+  </div>
+</div>

views/partials/regional-forecast.ejs

@@ -1,14 +1,13 @@
 <%- include('header.ejs', {titleDual:{ top: 'Regional' , bottom: 'Observations' }, hasTime: true }) %>
-	<div class="main has-scroll regional-forecast">
-		<div class="map"><img src="images/maps/basemap.webp" /></div>
-		<div class="location-container">
-			<div class="location template">
-				<div class="icon">
-					<img src="" />
-				</div>
-				<div class="city"></div>
-				<div class="temp"></div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll regional-forecast">
+  <div class="map"><img src="images/maps/basemap.webp" /></div>
+  <div class="location-container">
+    <div class="location template">
+      <div class="icon">
+        <img src="" />
+      </div>
+      <div class="city"></div>
+      <div class="temp"></div>
+    </div>
+  </div>
+</div>

views/partials/scroll.ejs

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

views/partials/spc-outlook.ejs

@@ -1,20 +1,19 @@
 <%- include('header.ejs', {titleDual:{ top: 'Storm Prediction' , bottom: 'Center Outlook' }, hasTime: true}) %>
-	<div class="main has-scroll spc-outlook">
-		<div class="container">
-			<div class="risk-levels">
-				<div class="risk-level">High</div>
-				<div class="risk-level">Moderate</div>
-				<div class="risk-level">Enhanced</div>
-				<div class="risk-level">Slight</div>
-				<div class="risk-level">Marginal</div>
-				<div class="risk-level">T'Storm</div>
-			</div>
-			<div class="days">
-				<div class="day template">
-					<div class="day-name">Monday</div>
-					<div class="risk-bar"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll spc-outlook">
+  <div class="container">
+    <div class="risk-levels">
+      <div class="risk-level">High</div>
+      <div class="risk-level">Moderate</div>
+      <div class="risk-level">Enhanced</div>
+      <div class="risk-level">Slight</div>
+      <div class="risk-level">Marginal</div>
+      <div class="risk-level">T'Storm</div>
+    </div>
+    <div class="days">
+      <div class="day template">
+        <div class="day-name">Monday</div>
+        <div class="risk-bar"></div>
+      </div>
+    </div>
+  </div>
+</div>

views/partials/travel.ejs

@@ -12,5 +12,4 @@
       <div class="temp high"></div>
     </div>
   </div>
-</div>
-<%- include('scroll.ejs') %>
+</div>