extended forecast as html

server/scripts/modules/extendedforecast.js

@@ -1,18 +1,15 @@
 // display extended forecast graphically
 // technically uses the same data as the local forecast, we'll let the browser do the caching of that
 
-/* globals WeatherDisplay, utils, STATUS, UNITS, draw, icons, navigation, luxon */
+/* globals WeatherDisplay, utils, STATUS, UNITS, icons, navigation, luxon */
 
 // eslint-disable-next-line no-unused-vars
 class ExtendedForecast extends WeatherDisplay {
 	constructor(navId, elemId) {
-		super(navId, elemId, 'Extended Forecast');
+		super(navId, elemId, 'Extended Forecast', true, true);
 
 		// set timings
 		this.timing.totalScreens = 2;
-
-		// pre-load background image (returns promise)
-		this.backgroundImage = utils.image.load('images/BackGround2_1.png');
 	}
 
 	async getData(_weatherParameters) {
@@ -85,14 +82,18 @@ class ExtendedForecast extends WeatherDisplay {
 	}
 
 	static shortenExtendedForecastText(long) {
-		let short = long;
+		const regexList = [
-		short = short.replace(/ and /g, ' ');
+			[/ and /ig, ' '],
-		short = short.replace(/Slight /g, '');
+			[/Slight /ig, ''],
-		short = short.replace(/Chance /g, '');
+			[/Chance /ig, ''],
-		short = short.replace(/Very /g, '');
+			[/Very /ig, ''],
-		short = short.replace(/Patchy /g, '');
+			[/Patchy /ig, ''],
-		short = short.replace(/Areas /g, '');
+			[/Areas /ig, ''],
-		short = short.replace(/Dense /g, '');
+			[/Dense /ig, ''],
+			[/Thunderstorm/g, 'T\'Storm'],
+		];
+		// run all regexes
+		const short = regexList.reduce((working, [regex, replace]) => working.replace(regex, replace), long);
 
 		let conditions = short.split(' ');
 		if (short.indexOf('then') !== -1) {
@@ -113,12 +114,12 @@ class ExtendedForecast extends WeatherDisplay {
 				short2 = '';
 			}
 		}
-		short = short1;
+		let result = short1;
 		if (short2 !== '') {
-			short += ` ${short2}`;
+			result += ` ${short2}`;
 		}
 
-		return [short, short1, short2];
+		return result;
 	}
 
 	async drawCanvas() {
@@ -128,45 +129,32 @@ class ExtendedForecast extends WeatherDisplay {
 		// grab the first three or second set of three array elements
 		const forecast = this.data.slice(0 + 3 * this.screenIndex, 3 + this.screenIndex * 3);
 
-		const backgroundImage = await this.backgroundImage;
+		// create each day template
+		const days = forecast.map((Day) => {
+			const fill = {};
+			fill.date = Day.dayName;
 
-		this.context.drawImage(backgroundImage, 0, 0);
-		draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
-		draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
-		draw.horizontalGradientSingle(this.context, 0, 90, 640, 399, draw.sideColor1, draw.sideColor2);
-		this.context.drawImage(backgroundImage, 38, 100, 174, 297, 38, 100, 174, 297);
-		this.context.drawImage(backgroundImage, 232, 100, 174, 297, 232, 100, 174, 297);
-		this.context.drawImage(backgroundImage, 426, 100, 174, 297, 426, 100, 174, 297);
-
-		draw.titleText(this.context, 'Extended', 'Forecast');
-
-		await Promise.all(forecast.map(async (Day, Index) => {
-			const offset = Index * 195;
-			draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 100 + offset, 135, Day.dayName.toUpperCase(), 2);
-			draw.text(this.context, 'Star4000', '24pt', '#8080FF', 85 + offset, 345, 'Lo', 2, 'center');
-			draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 165 + offset, 345, 'Hi', 2, 'center');
 			let { low } = Day;
 			if (low !== undefined) {
 				if (navigation.units() === UNITS.metric) low = utils.units.fahrenheitToCelsius(low);
-				draw.text(this.context, 'Star4000 Large', '24pt', '#FFFFFF', 85 + offset, 385, low, 2, 'center');
+				fill['value-lo'] = Math.round(low);
 			}
 			let { high } = Day;
 			if (navigation.units() === UNITS.metric) high = utils.units.fahrenheitToCelsius(high);
-			draw.text(this.context, 'Star4000 Large', '24pt', '#FFFFFF', 165 + offset, 385, high, 2, 'center');
+			fill['value-hi'] = Math.round(high);
-			draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120 + offset, 270, Day.text[1], 2, 'center');
+			fill.condition = Day.text;
-			draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120 + offset, 310, Day.text[2], 2, 'center');
 
 			// draw the icon
-			this.gifs.push(await utils.image.superGifAsync({
+			fill.icon = { type: 'img', src: Day.icon };
-				src: Day.icon,
-				auto_play: true,
-				canvas: this.canvas,
-				x: 70 + Index * 195,
-				y: 150,
-				max_height: 75,
-			}));
-		}));
 
+			// return the filled template
+			return this.fillTemplate('day', fill);
+		});
+
+		// empty and update the container
+		const dayContainer = this.elem.querySelector('.day-container');
+		dayContainer.innerHTML = '';
+		dayContainer.append(...days);
 		this.finishDraw();
 	}
 }

server/scripts/modules/navigation.js

@@ -102,7 +102,7 @@ const navigation = (() => {
 				new TravelForecast(3, 'travelForecast', false),	// not active by default
 				new RegionalForecast(4, 'regional-forecast'),
 				new LocalForecast(5, 'local-forecast'),
-				new ExtendedForecast(6, 'extendedForecast'),
+				new ExtendedForecast(6, 'extended-forecast'),
 				almanac,
 				new Radar(8, 'radar'),
 			];

server/scripts/modules/utilities.js

@@ -42,9 +42,8 @@ const utils = (() => {
 	const cachedImages = [];
 	const preload = (src) => {
 		if (cachedImages.includes(src)) return false;
-		const img = new Image();
+		blob(src);
-		img.scr = src;
+		// cachedImages.push(src);
-		cachedImages.push(src);
 		return true;
 	};
 
@@ -177,7 +176,7 @@ const utils = (() => {
 		// build a url, including the rewrite for cors if necessary
 		let corsUrl = _url;
 		if (params.cors === true) corsUrl = rewriteUrl(_url);
-		const url = new URL(corsUrl);
+		const url = new URL(corsUrl, `${window.location.origin}/`);
 		// match the security protocol
 		url.protocol = window.location.protocol;
 		// add parameters if necessary

server/styles/compiled.css

@@ -378,4 +378,64 @@
 .weather-display .main.regional-forecast .location .city {
   font-family: Star4000;
   font-size: 20px;
+}
+
+#extended-forecast-html.weather-display {
+  background-image: url("../images/BackGround2_1.png");
+}
+
+.weather-display .main.extended-forecast .day-container {
+  margin-top: 16px;
+  margin-left: 27px;
+}
+.weather-display .main.extended-forecast .day {
+  /* eventually, when chrome supports paint-order for html elements */
+  /* -webkit-text-stroke: 2px black; */
+  /* paint-order: stroke fill; */
+  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
+  padding: 5px;
+  height: 285px;
+  width: 155px;
+  display: inline-block;
+  margin: 0px 15px;
+  font-family: "Star4000";
+  font-size: 24pt;
+}
+.weather-display .main.extended-forecast .day .date {
+  text-transform: uppercase;
+  text-align: center;
+  color: yellow;
+}
+.weather-display .main.extended-forecast .day .condition {
+  text-align: center;
+  height: 74px;
+  margin-top: 10px;
+}
+.weather-display .main.extended-forecast .day .icon {
+  text-align: center;
+  height: 75px;
+}
+.weather-display .main.extended-forecast .day .icon img {
+  max-height: 75px;
+}
+.weather-display .main.extended-forecast .day .temperatures {
+  width: 100%;
+  margin-top: 5px;
+}
+.weather-display .main.extended-forecast .day .temperatures .temperature-block {
+  display: inline-block;
+  width: 44%;
+}
+.weather-display .main.extended-forecast .day .temperatures .temperature-block > div {
+  text-align: center;
+}
+.weather-display .main.extended-forecast .day .temperatures .temperature-block .value {
+  font-family: "Star4000 Large";
+  margin-top: 4px;
+}
+.weather-display .main.extended-forecast .day .temperatures .temperature-block.lo .label {
+  color: #8080FF;
+}
+.weather-display .main.extended-forecast .day .temperatures .temperature-block.hi .label {
+  color: yellow;
 }/*# sourceMappingURL=compiled.css.map */

server/styles/compiled.css.map

@@ -1 +1 @@
-{"version":3,"sources":["scss/_weatherdisplay.scss","compiled.css","scss/_colors.scss","scss/_utils.scss","scss/_hourly.scss","scss/_current-weather.scss","scss/_local-forecast.scss","scss/_latest-observations.scss","scss/_regional-forecast.scss"],"names":[],"mappings":"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","file":"compiled.css"}
+{"version":3,"sources":["scss/_weatherdisplay.scss","compiled.css","scss/_colors.scss","scss/_utils.scss","scss/_hourly.scss","scss/_current-weather.scss","scss/_local-forecast.scss","scss/_latest-observations.scss","scss/_regional-forecast.scss","scss/_extended-forecast.scss"],"names":[],"mappings":"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","file":"compiled.css"}

server/styles/scss/_colors.scss

@@ -6,3 +6,5 @@ $column-header: rgb(32, 0, 87);
 
 $gradient-main-background-1: #102080;
 $gradient-main-background-2: #001040;
+
+$extended-low: #8080FF;

server/styles/scss/_extended-forecast.scss

@@ -0,0 +1,73 @@
+@use 'colors'as c;
+@use 'utils'as u;
+
+#extended-forecast-html.weather-display {
+	background-image: url('../images/BackGround2_1.png');
+}
+
+.weather-display .main.extended-forecast {
+	.day-container {
+		margin-top: 16px;
+		margin-left: 27px;
+	}
+
+	.day {
+		@include u.text-shadow();
+		padding: 5px;
+		height: 285px;
+		width: 155px;
+		display: inline-block;
+		margin: 0px 15px;
+		font-family: 'Star4000';
+		font-size: 24pt;
+
+		.date {
+			text-transform: uppercase;
+			text-align: center;
+			color: c.$title-color;
+		}
+
+		.condition {
+			text-align: center;
+			height: 74px;
+			margin-top: 10px;
+		}
+
+		.icon {
+			text-align: center;
+			height: 75px;
+
+			img {
+				max-height: 75px;
+			}
+		}
+
+		.temperatures {
+			width: 100%;
+			margin-top: 5px;
+
+			.temperature-block {
+				display: inline-block;
+				width: 44%;
+
+				>div {
+					text-align: center;
+					;
+				}
+
+				.value {
+					font-family: 'Star4000 Large';
+					margin-top: 4px;
+				}
+
+				&.lo .label {
+					color: c.$extended-low;
+				}
+
+				&.hi .label {
+					color: c.$title-color;
+				}
+			}
+		}
+	}
+}

server/styles/scss/compiled.scss

@@ -4,3 +4,4 @@
 @use '_local-forecast';
 @use '_latest-observations';
 @use '_regional-forecast';
+@use '_extended-forecast';

views/index.ejs

@@ -105,6 +105,9 @@
 			<div id="regional-forecast-html" class="weather-display">
 				<%- include('partials/regional-forecast.ejs') %>
 			</div>
+			<div id="extended-forecast-html" class="weather-display">
+				<%- include('partials/extended-forecast.ejs') %>
+			</div>
 		</div>
 		<div id="divTwcBottom">
 			<div id="divTwcBottomLeft">

views/partials/extended-forecast.ejs

@@ -0,0 +1,23 @@
+<%- include('header.ejs', {titleDual:{ top: 'Extended' , bottom: 'Forecast' }, hasTime: true }) %>
+	<div class="main has-scroll extended-forecast">
+		<div class="day-container">
+			<div class="day template">
+				<div class="date"></div>
+				<div class="icon">
+					<img src="" />
+				</div>
+				<div class="condition"></div>
+				<div class="temperatures">
+					<div class="temperature-block lo">
+						<div class="label">Lo</div>
+						<div class="value value-hi"></div>
+					</div>
+					<div class="temperature-block hi">
+						<div class="label">Hi</div>
+						<div class="value value-lo"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<%- include('scroll.ejs') %>