lastest observations in html

server/scripts/modules/latestobservations.js

@@ -1,12 +1,10 @@
 // current weather conditions display
-/* globals WeatherDisplay, utils, STATUS, UNITS, draw, navigation, StationInfo */
+/* globals WeatherDisplay, utils, STATUS, UNITS, navigation, StationInfo */
 
 // eslint-disable-next-line no-unused-vars
 class LatestObservations extends WeatherDisplay {
 	constructor(navId, elemId) {
-		super(navId, elemId, 'Latest Observations');
+		super(navId, elemId, 'Latest Observations', true, true);
-		// pre-load background image (returns promise)
-		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
 
 		// constants
 		this.MaximumRegionalStations = 7;
@@ -67,25 +65,15 @@ class LatestObservations extends WeatherDisplay {
 		// sort array by station name
 		const sortedConditions = conditions.sort((a, b) => ((a.Name < b.Name) ? -1 : 1));
 
-		this.context.drawImage(await this.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, 52, 399, draw.sideColor1, draw.sideColor2);
-		draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
-
-		draw.titleText(this.context, 'Latest', 'Observations');
-
 		if (navigation.units() === UNITS.english) {
-			draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 295, 105, `${String.fromCharCode(176)}F`, 2);
+			this.elem.querySelector('.column-headers .temp.english').classList.add('show');
+			this.elem.querySelector('.column-headers .temp.metric').classList.remove('show');
 		} else {
-			draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 295, 105, `${String.fromCharCode(176)}C`, 2);
+			this.elem.querySelector('.column-headers .temp.english').classList.remove('show');
+			this.elem.querySelector('.column-headers .temp.metric').classList.add('show');
 		}
-		draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 345, 105, 'WEATHER', 2);
-		draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 495, 105, 'WIND', 2);
 
-		let y = 140;
+		const lines = sortedConditions.map((condition) => {
-
-		sortedConditions.forEach((condition) => {
 			let Temperature = condition.temperature.value;
 			let WindSpeed = condition.windSpeed.value;
 			const windDirection = utils.calc.directionToNSEW(condition.windDirection.value);
@@ -95,22 +83,25 @@ class LatestObservations extends WeatherDisplay {
 				WindSpeed = utils.units.kphToMph(WindSpeed);
 			}
 
-			draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 65, y, condition.city.substr(0, 14), 2);
+			const fill = {};
-			draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 345, y, LatestObservations.shortenCurrentConditions(condition.textDescription).substr(0, 9), 2);
+			fill.location = utils.string.locationCleanup(condition.city).substr(0, 14);
-
+			fill.temp = Temperature;
+			fill.weather = LatestObservations.shortenCurrentConditions(condition.textDescription).substr(0, 9);
 			if (WindSpeed > 0) {
-				draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, windDirection + (Array(6 - windDirection.length - WindSpeed.toString().length).join(' ')) + WindSpeed.toString(), 2);
+				fill.wind = windDirection + (Array(6 - windDirection.length - WindSpeed.toString().length).join(' ')) + WindSpeed.toString();
 			} else if (WindSpeed === 'NA') {
-				draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, 'NA', 2);
+				fill.wind = 'NA';
 			} else {
-				draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, 'Calm', 2);
+				fill.wind = 'Calm';
 			}
 
-			const x = (325 - (Temperature.toString().length * 15));
+			return this.fillTemplate('observation-row', fill);
-			draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', x, y, Temperature, 2);
-
-			y += 40;
 		});
+
+		const linesContainer = this.elem.querySelector('.observation-lines');
+		linesContainer.innerHTML = '';
+		linesContainer.append(...lines);
+
 		this.finishDraw();
 	}
 

server/scripts/modules/navigation.js

@@ -97,7 +97,7 @@ const navigation = (() => {
 			almanac = new Almanac(7, 'almanac');
 			displays = [
 				currentWeather,
-				new LatestObservations(1, 'latestObservations'),
+				new LatestObservations(1, 'latest-observations'),
 				new Hourly(2, 'hourly'),
 				new TravelForecast(3, 'travelForecast', false),	// not active by default
 				new RegionalForecast(4, 'regionalForecast'),

server/scripts/modules/utilities.js

@@ -136,99 +136,21 @@ const utils = (() => {
 	const wrap = (x, m) => ((x % m) + m) % m;
 
 	// ********************************* strings *********************************************
-	const wordWrap = (_str, ...rest) => {
+	const locationCleanup = (input) => {
-		//  discuss at: https://locutus.io/php/wordwrap/
+		// regexes to run
-		// original by: Jonas Raoni Soares Silva (https://www.jsfromhell.com)
+		const regexes = [
-		// improved by: Nick Callen
+			// "Chicago / West Chicago", removes before slash
-		// improved by: Kevin van Zonneveld (https://kvz.io)
+			/^[A-Za-z ]+ \/ /,
-		// improved by: Sakimori
+			// "Chicago/Waukegan" removes before slash
-		//  revised by: Jonas Raoni Soares Silva (https://www.jsfromhell.com)
+			/^[A-Za-z ]+\//,
-		// bugfixed by: Michael Grier
+			// "Chicago, Chicago O'hare" removes before comma
-		// bugfixed by: Feras ALHAEK
+			/^[A-Za-z ]+, /,
-		// improved by: Rafał Kukawski (https://kukawski.net)
+		];
-		//   example 1: wordwrap('Kevin van Zonneveld', 6, '|', true)
-		//   returns 1: 'Kevin|van|Zonnev|eld'
-		//   example 2: wordwrap('The quick brown fox jumped over the lazy dog.', 20, '<br />\n')
-		//   returns 2: 'The quick brown fox<br />\njumped over the lazy<br />\ndog.'
-		//   example 3: wordwrap('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
-		//   returns 3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\nveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\ncommodo consequat.'
-		const intWidth = rest[0] ?? 75;
-		const strBreak = rest[1] ?? '\n';
-		const cut = rest[2] ?? false;
 
-		let i;
+		// run all regexes
-		let j;
+		return regexes.reduce((value, regex) => value.replace(regex, ''), input);
-		let line;
-
-		let str = _str;
-		str += '';
-
-		if (intWidth < 1) {
-			return str;
-		}
-
-		const reLineBreaks = /\r\n|\n|\r/;
-		const reBeginningUntilFirstWhitespace = /^\S*/;
-		const reLastCharsWithOptionalTrailingWhitespace = /\S*(\s)?$/;
-
-		const lines = str.split(reLineBreaks);
-		const l = lines.length;
-		let match;
-
-		// for each line of text
-		// eslint-disable-next-line no-plusplus
-		for (i = 0; i < l; lines[i++] += line) {
-			line = lines[i];
-			lines[i] = '';
-
-			while (line.length > intWidth) {
-				// get slice of length one char above limit
-				const slice = line.slice(0, intWidth + 1);
-
-				// remove leading whitespace from rest of line to parse
-				let ltrim = 0;
-				// remove trailing whitespace from new line content
-				let rtrim = 0;
-
-				match = slice.match(reLastCharsWithOptionalTrailingWhitespace);
-
-				// if the slice ends with whitespace
-				if (match[1]) {
-					// then perfect moment to cut the line
-					j = intWidth;
-					ltrim = 1;
-				} else {
-					// otherwise cut at previous whitespace
-					j = slice.length - match[0].length;
-
-					if (j) {
-						rtrim = 1;
-					}
-
-					// but if there is no previous whitespace
-					// and cut is forced
-					// cut just at the defined limit
-					if (!j && cut && intWidth) {
-						j = intWidth;
-					}
-
-					// if cut wasn't forced
-					// cut at next possible whitespace after the limit
-					if (!j) {
-						const charsUntilNextWhitespace = (line.slice(intWidth).match(reBeginningUntilFirstWhitespace) || [''])[0];
-
-						j = slice.length + charsUntilNextWhitespace.length;
-					}
-				}
-
-				lines[i] += line.slice(0, j - rtrim);
-				line = line.slice(j + ltrim);
-				lines[i] += line.length ? strBreak : '';
-			}
-		}
-
-		return lines.join('\n');
 	};
+
 	// ********************************* cors ********************************************
 	// rewrite some urls for local server
 	const rewriteUrl = (_url) => {
@@ -325,7 +247,7 @@ const utils = (() => {
 			wrap,
 		},
 		string: {
-			wordWrap,
+			locationCleanup,
 		},
 		cors: {
 			rewriteUrl,

server/styles/compiled.css

@@ -265,4 +265,64 @@
   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;
   min-height: 280px;
   line-height: 40px;
+}
+
+.weather-display .latest-observations.main {
+  overflow-y: hidden;
+}
+.weather-display .latest-observations.main .column-headers {
+  height: 20px;
+  position: absolute;
+  width: 100%;
+}
+.weather-display .latest-observations.main .column-headers {
+  top: 0px;
+}
+.weather-display .latest-observations.main .column-headers div {
+  display: inline-block;
+  font-family: "Star4000 Small";
+  font-size: 24pt;
+  position: absolute;
+  top: -14px;
+  /* 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;
+}
+.weather-display .latest-observations.main .column-headers .temp {
+  display: none;
+}
+.weather-display .latest-observations.main .column-headers .temp.show {
+  display: inline-block;
+}
+.weather-display .latest-observations.main .temp {
+  left: 230px;
+}
+.weather-display .latest-observations.main .weather {
+  left: 280px;
+}
+.weather-display .latest-observations.main .wind {
+  left: 430px;
+}
+.weather-display .latest-observations.main .observation-lines {
+  min-height: 338px;
+  padding-top: 10px;
+}
+.weather-display .latest-observations.main .observation-lines .observation-row {
+  font-family: "Star4000";
+  font-size: 24pt;
+  /* 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;
+  position: relative;
+  height: 40px;
+}
+.weather-display .latest-observations.main .observation-lines .observation-row > div {
+  position: absolute;
+  top: 8px;
+}
+.weather-display .latest-observations.main .observation-lines .observation-row .wind {
+  white-space: pre;
+  text-align: right;
 }/*# 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"],"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"],"names":[],"mappings":"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","file":"compiled.css"}

server/styles/scss/_latest-observations.scss

@@ -0,0 +1,72 @@
+@use 'colors'as c;
+@use 'utils'as u;
+
+.weather-display .latest-observations {
+
+	&.main {
+		overflow-y: hidden;
+
+		.column-headers {
+			height: 20px;
+			position: absolute;
+			width: 100%;
+		}
+
+		.column-headers {
+			top: 0px;
+
+			div {
+				display: inline-block;
+				font-family: 'Star4000 Small';
+				font-size: 24pt;
+				position: absolute;
+				top: -14px;
+				@include u.text-shadow();
+			}
+
+			.temp {
+				// hidden initially for english/metric switching
+				display: none;
+
+				&.show {
+					display: inline-block;
+				}
+			}
+		}
+
+		.temp {
+			left: 230px;
+		}
+
+		.weather {
+			left: 280px;
+		}
+
+		.wind {
+			left: 430px;
+		}
+
+		.observation-lines {
+			min-height: 338px;
+			padding-top: 10px;
+
+			.observation-row {
+				font-family: 'Star4000';
+				font-size: 24pt;
+				@include u.text-shadow();
+				position: relative;
+				height: 40px;
+
+				>div {
+					position: absolute;
+					top: 8px;
+				}
+
+				.wind {
+					white-space: pre;
+					text-align: right;
+				}
+			}
+		}
+	}
+}

server/styles/scss/_weatherdisplay.scss

@@ -24,8 +24,6 @@
 		height: 60px;
 		padding-top: 30px;
 
-
-
 		.title {
 			color: c.$title-color;
 			@include u.text-shadow(3px, 1.5px);
@@ -104,6 +102,7 @@
 			margin-right: 64px;
 			width: calc(100% - 128px);
 		}
+
 	}
 
 

server/styles/scss/compiled.scss

@@ -1,4 +1,5 @@
 @use '_weatherdisplay';
 @use '_hourly';
 @use '_current-weather';
-@use '_local-forecast';
+@use '_local-forecast';
+@use '_latest-observations';

views/index.ejs

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

views/partials/latest-observations.ejs

@@ -0,0 +1,20 @@
+<%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: 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') %>

ws4kp.code-workspace

@@ -28,7 +28,8 @@
 			"T",
 			"T'storm",
 			"uscomp",
-			"Visib"
+			"Visib",
+			"Waukegan"
 		],
 		"cSpell.ignorePaths": [
 			"**/package-lock.json",