5.21.1

.eslintrc

@@ -12,7 +12,8 @@
 		"RegionalCities": "readonly",
 		"StationInfo": "readonly",
 		"SunCalc": "readonly",
-		"NoSleep": "readonly"
+		"NoSleep": "readonly",
+		"OVERRIDES": "readonly"
 	},
 	"parserOptions": {
 		"ecmaVersion": "latest",

gulp/publish-frontend.mjs

@@ -14,9 +14,10 @@ import webpack from 'webpack-stream';
 import TerserPlugin from 'terser-webpack-plugin';
 import { readFile } from 'fs/promises';
 import file from 'gulp-file';
+import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
+import OVERRIDES from '../src/overrides.mjs';
 
 // get cloudfront
-import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
 import reader from '../src/playlist-reader.mjs';
 
 const clean = () => deleteAsync(['./dist/**/*', '!./dist/readme.txt']);
@@ -113,6 +114,7 @@ const compressHtml = async () => {
 		.pipe(ejs({
 			production: version,
 			version,
+			OVERRIDES,
 		}))
 		.pipe(rename({ extname: '.html' }))
 		.pipe(htmlmin({ collapseWhitespace: true }))

index.mjs

@@ -5,6 +5,7 @@ import corsPassThru from './cors/index.mjs';
 import radarPassThru from './cors/radar.mjs';
 import outlookPassThru from './cors/outlook.mjs';
 import playlist from './src/playlist.mjs';
+import OVERRIDES from './src/overrides.mjs';
 
 const app = express();
 const port = process.env.WS4KP_PORT ?? 8080;
@@ -57,6 +58,7 @@ const index = (req, res) => {
 	res.render('index', {
 		production: false,
 		version,
+		OVERRIDES,
 	});
 };
 

package-lock.json

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

package.json

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

server/scripts/modules/hazards.mjs

@@ -39,9 +39,9 @@ class Hazards extends WeatherDisplay {
 			// get the forecast
 			const url = new URL('https://api.weather.gov/alerts/active');
 			url.searchParams.append('point', `${this.weatherParameters.latitude},${this.weatherParameters.longitude}`);
-			url.searchParams.append('limit', 5);
 			const alerts = await json(url, { retryCount: 3, stillWaiting: () => this.stillWaiting() });
-			const unsortedAlerts = alerts.features ?? [];
+			const allUnsortedAlerts = alerts.features ?? [];
+			const unsortedAlerts = allUnsortedAlerts.slice(0, 5);
 			const hasImmediate = unsortedAlerts.reduce((acc, hazard) => acc || hazard.properties.urgency === 'Immediate', false);
 			const sortedAlerts = unsortedAlerts.sort((a, b) => (calcSeverity(b.properties.severity, b.properties.event)) - (calcSeverity(a.properties.severity, a.properties.event)));
 			const filteredAlerts = sortedAlerts.filter((hazard) => hazard.properties.severity !== 'Unknown' && (!hasImmediate || (hazard.properties.urgency === 'Immediate')));

server/scripts/modules/radar-worker.mjs

@@ -0,0 +1,106 @@
+import * as utils from './radar-utils.mjs';
+
+const radarFullSize = { width: 2550, height: 1600 };
+const radarFinalSize = { width: 640, height: 367 };
+
+const fetchAsBlob = async (url) => {
+	const response = await fetch(url);
+	return response.blob();
+};
+
+const baseMapImages = new Promise((resolve) => {
+	fetchAsBlob('/images/maps/radar.webp').then((blob) => {
+		createImageBitmap(blob).then((imageBitmap) => {
+			// extract the black pixels to overlay on to the final image (boundaries)
+			const canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
+			const context = canvas.getContext('2d');
+			context.drawImage(imageBitmap, 0, 0);
+			const imageData = context.getImageData(0, 0, imageBitmap.width, imageBitmap.height);
+
+			// go through the image data and preserve the black pixels, making the rest transparent
+			for (let i = 0; i < imageData.data.length; i += 4) {
+				if (imageData.data[i + 0] >= 116 || imageData.data[i + 1] >= 116 || imageData.data[i + 2] >= 116) {
+					// make it transparent
+					imageData.data[i + 3] = 0;
+				}
+			}
+			// write the image data back
+			context.putImageData(imageData, 0, 0);
+
+			resolve({
+				fullMap: imageBitmap,
+				overlay: canvas,
+			});
+		});
+	});
+});
+
+onmessage = async (e) => {
+	const {
+		url, RADAR_HOST, OVERRIDES, radarSourceXY, sourceXY, offsetX, offsetY,
+	} = e.data;
+
+	// get the image
+	const modifiedRadarUrl = OVERRIDES.RADAR_HOST ? url.replace(RADAR_HOST, OVERRIDES.RADAR_HOST) : url;
+	const radarResponsePromise = fetch(modifiedRadarUrl);
+
+	// calculate offsets and sizes
+
+	const radarSource = {
+		width: 240,
+		height: 163,
+		x: Math.round(radarSourceXY.x / 2),
+		y: Math.round(radarSourceXY.y / 2),
+	};
+
+	// create destination context
+	const baseCanvas = new OffscreenCanvas(radarFinalSize.width, radarFinalSize.height);
+	const baseContext = baseCanvas.getContext('2d');
+	baseContext.imageSmoothingEnabled = false;
+
+	// create working context for manipulation
+	const radarCanvas = new OffscreenCanvas(radarFullSize.width, radarFullSize.height);
+	const radarContext = radarCanvas.getContext('2d');
+	radarContext.imageSmoothingEnabled = false;
+
+	// get the base map
+	const baseMaps = await baseMapImages;
+	baseContext.drawImage(baseMaps.fullMap, sourceXY.x, sourceXY.y, offsetX * 2, offsetY * 2, 0, 0, radarFinalSize.width, radarFinalSize.height);
+
+	// test response
+	const radarResponse = await radarResponsePromise;
+	if (!radarResponse.ok) throw new Error(`Unable to fetch radar error ${radarResponse.status} ${radarResponse.statusText} from ${radarResponse.url}`);
+
+	// get the blob
+	const radarImgBlob = await radarResponse.blob();
+
+	// assign to an html image element
+	const radarImgElement = await createImageBitmap(radarImgBlob);
+	// draw the entire image
+	radarContext.clearRect(0, 0, radarFullSize.width, radarFullSize.height);
+	radarContext.drawImage(radarImgElement, 0, 0, radarFullSize.width, radarFullSize.height);
+
+	// crop the radar image without scaling
+	const croppedRadarCanvas = new OffscreenCanvas(radarSource.width, radarSource.height);
+	const croppedRadarContext = croppedRadarCanvas.getContext('2d');
+	croppedRadarContext.imageSmoothingEnabled = false;
+	croppedRadarContext.drawImage(radarCanvas, radarSource.x, radarSource.y, croppedRadarCanvas.width, croppedRadarCanvas.height, 0, 0, croppedRadarCanvas.width, croppedRadarCanvas.height);
+
+	// clean the image
+	utils.removeDopplerRadarImageNoise(croppedRadarContext);
+
+	// stretch the radar image
+	const stretchCanvas = new OffscreenCanvas(radarFinalSize.width, radarFinalSize.height);
+	const stretchContext = stretchCanvas.getContext('2d', { willReadFrequently: true });
+	stretchContext.imageSmoothingEnabled = false;
+	stretchContext.drawImage(croppedRadarCanvas, 0, 0, radarSource.width, radarSource.height, 0, 0, radarFinalSize.width, radarFinalSize.height);
+
+	// put the radar on the base map
+	baseContext.drawImage(stretchCanvas, 0, 0);
+	// put the road/boundaries overlay on the map
+	baseContext.drawImage(baseMaps.overlay, sourceXY.x, sourceXY.y, offsetX * 2, offsetY * 2, 0, 0, radarFinalSize.width, radarFinalSize.height);
+
+	const processedRadar = baseCanvas.transferToImageBitmap();
+
+	postMessage(processedRadar, [processedRadar]);
+};

server/scripts/modules/radar.mjs

@@ -1,13 +1,12 @@
 // current weather conditions display
 import STATUS from './status.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
-import { loadImg } from './utils/image.mjs';
 import { text } from './utils/fetch.mjs';
-import { rewriteUrl } from './utils/cors.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
 import { registerDisplay, timeZone } from './navigation.mjs';
 import * as utils from './radar-utils.mjs';
 
+const RADAR_HOST = 'mesonet.agron.iastate.edu';
 class Radar extends WeatherDisplay {
 	constructor(navId, elemId) {
 		super(navId, elemId, 'Local Radar', true);
@@ -40,6 +39,9 @@ class Radar extends WeatherDisplay {
 			{ time: 1, si: 4 },
 			{ time: 12, si: 5 },
 		];
+
+		// get some web workers started
+		this.workers = (new Array(this.dopplerRadarImageMax)).fill(null).map(() => radarWorker());
 	}
 
 	async getData(weatherParameters, refresh) {
@@ -51,12 +53,8 @@ class Radar extends WeatherDisplay {
 			return;
 		}
 
-		// get the base map
+		const baseUrl = `https://${RADAR_HOST}/archive/data/`;
-		const src = 'images/maps/radar.webp';
+		const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png';
-		this.baseMap = await loadImg(src);
-
-		const baseUrl = 'https://mesonet.agron.iastate.edu/archive/data/';
-		const baseUrlEnd = '/GIS/uscomp/';
 		const baseUrls = [];
 		let date = DateTime.utc().minus({ days: 1 }).startOf('day');
 
@@ -104,89 +102,45 @@ class Radar extends WeatherDisplay {
 		// calculate offsets and sizes
 		let offsetX = 120;
 		let offsetY = 69;
-		const width = 2550;
-		const height = 1600;
 		offsetX *= 2;
 		offsetY *= 2;
 		const sourceXY = utils.getXYFromLatitudeLongitudeMap(this.weatherParameters, offsetX, offsetY);
-
-		// calculate radar offsets
-		const radarOffsetX = 120;
-		const radarOffsetY = 70;
 		const radarSourceXY = utils.getXYFromLatitudeLongitudeDoppler(this.weatherParameters, offsetX, offsetY);
-		const radarSourceX = radarSourceXY.x / 2;
-		const radarSourceY = radarSourceXY.y / 2;
 
 		// Load the most recent doppler radar images.
-		const radarInfo = await Promise.all(urls.map(async (url) => {
+		const radarInfo = await Promise.all(urls.map(async (url, index) => {
-			// create destination context
+			const processedRadar = await this.workers[index].processRadar({
-			const canvas = document.createElement('canvas');
+				url,
-			canvas.width = 640;
+				RADAR_HOST,
-			canvas.height = 367;
+				OVERRIDES,
-			const context = canvas.getContext('2d');
+				sourceXY,
-			context.imageSmoothingEnabled = false;
+				radarSourceXY,
-
+				offsetX,
-			// create working context for manipulation
+				offsetY,
-			const workingCanvas = document.createElement('canvas');
+			});
-			workingCanvas.width = width;
-			workingCanvas.height = height;
-			const workingContext = workingCanvas.getContext('2d');
-			workingContext.imageSmoothingEnabled = false;
-
-			// get the image
-			const response = await fetch(rewriteUrl(url));
-
-			// test response
-			if (!response.ok) throw new Error(`Unable to fetch radar error ${response.status} ${response.statusText} from ${response.url}`);
-
-			// get the blob
-			const blob = await response.blob();
 
 			// store the time
 			const timeMatch = url.match(/_(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)\./);
-			let time;
-			if (timeMatch) {
-				const [, year, month, day, hour, minute] = timeMatch;
-				time = DateTime.fromObject({
-					year,
-					month,
-					day,
-					hour,
-					minute,
-				}, {
-					zone: 'UTC',
-				}).setZone(timeZone());
-			} else {
-				time = DateTime.fromHTTP(response.headers.get('last-modified')).setZone(timeZone());
-			}
 
-			// assign to an html image element
+			const [, year, month, day, hour, minute] = timeMatch;
-			const imgBlob = await loadImg(blob);
+			const time = DateTime.fromObject({
+				year,
+				month,
+				day,
+				hour,
+				minute,
+			}, {
+				zone: 'UTC',
+			}).setZone(timeZone());
 
-			// draw the entire image
+			const onscreenCanvas = document.createElement('canvas');
-			workingContext.clearRect(0, 0, width, 1600);
+			onscreenCanvas.width = processedRadar.width;
-			workingContext.drawImage(imgBlob, 0, 0, width, 1600);
+			onscreenCanvas.height = processedRadar.height;
-
+			const onscreenContext = onscreenCanvas.getContext('bitmaprenderer');
-			// get the base map
+			onscreenContext.transferFromImageBitmap(processedRadar);
-			context.drawImage(this.baseMap, sourceXY.x, sourceXY.y, offsetX * 2, offsetY * 2, 0, 0, 640, 367);
-
-			// crop the radar image
-			const cropCanvas = document.createElement('canvas');
-			cropCanvas.width = 640;
-			cropCanvas.height = 367;
-			const cropContext = cropCanvas.getContext('2d', { willReadFrequently: true });
-			cropContext.imageSmoothingEnabled = false;
-			cropContext.drawImage(workingCanvas, radarSourceX, radarSourceY, (radarOffsetX * 2), (radarOffsetY * 2.33), 0, 0, 640, 367);
-			// clean the image
-			utils.removeDopplerRadarImageNoise(cropContext);
-
-			// merge the radar and map
-			utils.mergeDopplerRadarImage(context, cropContext);
-
-			const elem = this.fillTemplate('frame', { map: { type: 'img', src: canvas.toDataURL() } });
 
+			const elem = this.fillTemplate('frame', { map: { type: 'canvas', canvas: onscreenCanvas } });
 			return {
-				canvas,
 				time,
 				elem,
 			};
@@ -199,8 +153,6 @@ class Radar extends WeatherDisplay {
 
 		// set max length
 		this.timing.totalScreens = radarInfo.length;
-		// store the images
-		this.data = radarInfo.map((radar) => radar.canvas);
 
 		this.times = radarInfo.map((radar) => radar.time);
 		this.setStatus(STATUS.loaded);
@@ -223,5 +175,30 @@ class Radar extends WeatherDisplay {
 	}
 }
 
+// create a radar worker with helper functions
+const radarWorker = () => {
+	// create the worker
+	const worker = new Worker(new URL('./radar-worker.mjs', import.meta.url), { type: 'module' });
+
+	const processRadar = (url) => new Promise((resolve, reject) => {
+		// prepare for done message
+		worker.onmessage = (e) => {
+			if (e?.data instanceof Error) {
+				reject(e.data);
+			} else if (e?.data instanceof ImageBitmap) {
+				resolve(e.data);
+			}
+		};
+
+		// start up the worker
+		worker.postMessage(url);
+	});
+
+	// return the object
+	return {
+		processRadar,
+	};
+};
+
 // register display
 registerDisplay(new Radar(11, 'radar'));

server/scripts/modules/utils/image.mjs

@@ -28,7 +28,15 @@ const preloadImg = (src) => {
 	return true;
 };
 
+const loadImgElement = (url) => new Promise((resolve, reject) => {
+	const image = new Image();
+	image.onload = () => resolve(image);
+	image.onerror = reject;
+	image.src = url;
+});
+
 export {
 	loadImg,
 	preloadImg,
+	loadImgElement,
 };

server/scripts/modules/weatherdisplay.mjs

@@ -421,6 +421,8 @@ class WeatherDisplay {
 			} else if (value?.type === 'img') {
 				// fill the image source
 				elem.querySelector('img').src = value.src;
+			} else if (value?.type === 'canvas') {
+				elem.append(value.canvas);
 			}
 		});
 

server/styles/scss/_page.scss

@@ -260,7 +260,7 @@ body {
 
 @font-face {
 	font-family: 'Star4000 Large';
-	src: url('../fonts/Star4000 Large.woff') format('woff');
+	src: url('../fonts/Star4000 Large.ttf') format('truetype');
 	font-display: swap;
 }
 

src/overrides.mjs

@@ -0,0 +1,10 @@
+// read overrides from environment variables
+
+const OVERRIDES = {};
+Object.entries(process.env).forEach(([key, value]) => {
+	if (key.match(/^OVERRIDE_/)) {
+		OVERRIDES[key.replace('OVERRIDE_', '')] = value;
+	}
+});
+
+export default OVERRIDES;

views/index.ejs

@@ -18,19 +18,22 @@
 	<meta property="og:image" content="https://weatherstar.netbymatt.com/images/social/1200x600.png">
 	<meta property="og:image:width" content="1200">
 	<meta property="og:image:height" content="627">
-	<link rel="preload" href="fonts/Star4000.woff" as="font" type="font/woff" crossorigin>
+	<link rel="prefetch" href="fonts/Star4000.woff" as="font" type="font/woff" crossorigin>
-	<link rel="preload" href="fonts/Star4000 Extended.woff" as="font" type="font/woff" crossorigin>
+	<link rel="prefetch" href="fonts/Star4000 Extended.woff" as="font" type="font/woff" crossorigin>
-	<link rel="preload" href="fonts/Star4000 Large.woff" as="font" type="font/woff" crossorigin>
+	<link rel="prefetch" href="fonts/Star4000 Large.ttf" as="font" type="font/ttf" crossorigin>
-	<link rel="preload" href="fonts/Star4000 Small.woff" as="font" type="font/woff" crossorigin>
+	<link rel="prefetch" href="fonts/Star4000 Small.woff" as="font" type="font/woff" crossorigin>
 
   <% if (production) { %>
   <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
   <script type="text/javascript" src="resources/data.min.js?_=<%=production%>"></script>
   <script type="text/javascript" src="resources/vendor.min.js?_=<%=production%>"></script>
   <script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
+	<script type="text/javascript">const OVERRIDES=<%-JSON.stringify(OVERRIDES)%>;</script>
   <% } else { %>
   <link rel="stylesheet" type="text/css" href="styles/main.css" />
-  <script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
+	<!--<script type="text/javascript">const OVERRIDES={};</script>-->
+	<script type="text/javascript">OVERRIDES=<%-JSON.stringify(OVERRIDES)%>;</script>
+	<script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
   <script type="text/javascript" src="scripts/vendor/auto/swiped-events.js"></script>
   <script type="text/javascript" src="scripts/vendor/auto/suncalc.js"></script>
   <script type="module" src="scripts/modules/hazards.mjs"></script>

views/partials/radar.ejs

@@ -35,7 +35,7 @@
 		<div class="scroll-area">
 			<div class="frame template">
 				<div class="map">
-					<img src="images/maps/radar.webp" />
+					<!-- <img src="images/maps/radar.webp" /> -->
 				</div>
 			</div>
 		</div>