5.24.1

gulp/publish-frontend.mjs

@@ -97,13 +97,25 @@ const buildJs = () => src(mjsSources)
 	.pipe(dest(RESOURCES_PATH));
 
 const workerSources = [
-	'server/scripts/modules/radar-worker.mjs',
+	'./server/scripts/modules/radar-worker.mjs',
+	'./server/scripts/modules/radar-worker-bg-fg.mjs',
 ];
 
 const buildWorkers = () => {
 	// update the file name in the webpack options
-	const output = { filename: 'radar-worker.mjs' };
-	const workerWebpackOptions = { ...webpackOptions, output };
+	const output = {
+		chunkFilename: '[id].mjs',
+		chunkFormat: 'module',
+		filename: '[name].mjs',
+	};
+	const workerWebpackOptions = {
+		...webpackOptions,
+		output,
+		entry: {
+			'radar-worker': workerSources[0],
+			'radar-worker-bg-fg': workerSources[1],
+		},
+	};
 	return src(workerSources)
 		.pipe(webpack(workerWebpackOptions))
 		.pipe(dest(RESOURCES_PATH));

package-lock.json

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

package.json

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

server/scripts/modules/radar-utils.mjs

@@ -206,6 +206,11 @@ const mapSizeToFinalSize = (x, y) => ({
 	y: Math.round(y * scaling.width),
 });
 
+const fetchAsBlob = async (url) => {
+	const response = await fetch(url);
+	return response.blob();
+};
+
 export {
 	getXYFromLatitudeLongitudeDoppler,
 	getXYFromLatitudeLongitudeMap,
@@ -217,4 +222,5 @@ export {
 	tileSize,
 	radarFinalSize,
 	radarFullSize,
+	fetchAsBlob,
 };

server/scripts/modules/radar-worker-bg-fg.mjs

@@ -0,0 +1,139 @@
+import {
+	radarFinalSize, pixelToFile, modTile, tileSize, mapSizeToFinalSize, fetchAsBlob,
+} from './radar-utils.mjs';
+
+// creates the radar background map image and overlay transparency
+// which remain fixed on the page as the radar image changes in layered divs
+// it returns 4 ImageBitmaps that represent the base map, and 4 ImageBitmaps that are the overlay
+// the main thread pushes these ImageBitmaps into the image placeholders on the page
+
+const baseMapImages = (tile) => new Promise((resolve) => {
+	if (tile === false) resolve(false);
+	fetchAsBlob(`/images/maps/radar-tiles/${tile}.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({
+				base: imageBitmap,
+				overlay: canvas.transferToImageBitmap(),
+			});
+		});
+	});
+});
+
+onmessage = async (e) => {
+	const {
+		sourceXY, offsetX, offsetY,
+	} = e.data;
+
+	// determine the basemap images needed
+	const baseMapTiles = [
+		pixelToFile(sourceXY.x, sourceXY.y),
+		pixelToFile(sourceXY.x + offsetX * 2, sourceXY.y),
+		pixelToFile(sourceXY.x, sourceXY.y + offsetY * 2),
+		pixelToFile(sourceXY.x + offsetX * 2, sourceXY.y + offsetY * 2),
+	];
+
+	// get the base maps
+	const baseMapsPromise = Promise.allSettled(baseMapTiles.map(baseMapImages));
+
+	// do some more calculations for assembling the tiles
+	// the tiles are arranged as follows, with the horizontal axis as x, and correlating with the second set of digits in the image file number
+	// T[0] T[1]
+	// T[2] T[3]
+	// tile 0 gets special treatment, it's placement is the basis for all downstream calculations
+	const t0Source = modTile(sourceXY.x, sourceXY.y);
+	const t0Width = tileSize.x - t0Source.x;
+	const t0Height = tileSize.y - t0Source.y;
+	const t0FinalSize = mapSizeToFinalSize(t0Width, t0Height);
+
+	// these will all be used again for the overlay, calculate them once here
+	const mapCoordinates = [];
+	// t[0]
+	mapCoordinates.push({
+		sx: t0Source.x,
+		sw: t0Width,
+		dx: 0,
+		dw: t0FinalSize.x,
+
+		sy: t0Source.y,
+		sh: t0Height,
+		dy: 0,
+		dh: t0FinalSize.y,
+	});
+	// t[1]
+	mapCoordinates.push({
+		sx: 0,
+		sw: tileSize.x - t0Width,
+		dx: t0FinalSize.x,
+		dw: mapSizeToFinalSize(tileSize.x - t0Width, 0).x,
+
+		sy: t0Source.y,
+		sh: t0Height,
+		dy: 0,
+		dh: t0FinalSize.y,
+	});
+	// t[2]
+	mapCoordinates.push({
+		sx: t0Source.x,
+		sw: t0Width,
+		dx: 0,
+		dw: t0FinalSize.x,
+
+		sy: 0,
+		sh: tileSize.y - t0Height,
+		dy: t0FinalSize.y,
+		dh: mapSizeToFinalSize(0, tileSize.y - t0Height).y,
+	});
+	// t[3]
+	mapCoordinates.push({
+		sx: 0,
+		sw: tileSize.x - t0Width,
+		dx: t0FinalSize.x,
+		dw: mapSizeToFinalSize(tileSize.x - t0Width, 0).x,
+
+		sy: 0,
+		sh: tileSize.y - t0Height,
+		dy: t0FinalSize.y,
+		dh: mapSizeToFinalSize(0, tileSize.y - t0Height).y,
+	});
+
+	// wait for the basemaps to arrive
+	const baseMaps = (await baseMapsPromise).map((map) => map.value ?? false);
+
+	// build the response
+	const t0Base = baseMaps[0].base;
+	const t0Overlay = baseMaps[0].overlay;
+	let t1Base; let t1Overlay; let t2Base; let t2Overlay; let t3Base; let t3Overlay;
+	if (mapCoordinates[1].dx < radarFinalSize.width && baseMaps[1]) {
+		t1Base = baseMaps[1].base;
+		t1Overlay = baseMaps[1].overlay;
+	}
+	if (mapCoordinates[2].dy < radarFinalSize.height && baseMaps[2]) {
+		t2Base = baseMaps[2].base;
+		t2Overlay = baseMaps[2].overlay;
+		if (mapCoordinates[1].dx < radarFinalSize.width && baseMaps[3]) {
+			t3Base = baseMaps[3].base;
+			t3Overlay = baseMaps[3].overlay;
+		}
+	}
+	// baseContext.drawImage(baseMaps.fullMap, sourceXY.x, sourceXY.y, offsetX * 2, offsetY * 2, 0, 0, radarFinalSize.width, radarFinalSize.height);
+
+	postMessage({
+		t0Base, t0Overlay, t1Base, t1Overlay, t2Base, t2Overlay, t3Base, t3Overlay,
+	}, [t0Base, t0Overlay, t1Base, t1Overlay, t2Base, t2Overlay, t3Base, t3Overlay]);
+};

server/scripts/modules/radar-worker.mjs

@@ -1,47 +1,10 @@
 import {
-	radarFinalSize, radarFullSize, pixelToFile, modTile, tileSize, removeDopplerRadarImageNoise, mapSizeToFinalSize,
+	radarFinalSize, radarFullSize, removeDopplerRadarImageNoise,
 } from './radar-utils.mjs';
 
-const fetchAsBlob = async (url) => {
-	const response = await fetch(url);
-	return response.blob();
-};
-
-const baseMapImages = (tile) => new Promise((resolve) => {
-	if (tile === false) resolve(false);
-	fetchAsBlob(`/images/maps/radar-tiles/${tile}.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({
-				base: imageBitmap,
-				overlay: canvas,
-			});
-		});
-	});
-});
-
-const drawOnBasemap = (baseContext, drawImage, positions) => {
-	baseContext.drawImage(drawImage, positions.sx, positions.sy, positions.sw, positions.sh, positions.dx, positions.dy, positions.dw, positions.dh);
-};
-
 onmessage = async (e) => {
 	const {
-		url, RADAR_HOST, OVERRIDES, radarSourceXY, sourceXY, offsetX, offsetY,
+		url, RADAR_HOST, OVERRIDES, radarSourceXY,
 	} = e.data;
 
 	// get the image
@@ -49,7 +12,6 @@ onmessage = async (e) => {
 	const radarResponsePromise = fetch(modifiedRadarUrl);
 
 	// calculate offsets and sizes
-
 	const radarSource = {
 		width: 240,
 		height: 163,
@@ -57,104 +19,11 @@ onmessage = async (e) => {
 		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
+	// create radar context for manipulation
 	const radarCanvas = new OffscreenCanvas(radarFullSize.width, radarFullSize.height);
 	const radarContext = radarCanvas.getContext('2d');
 	radarContext.imageSmoothingEnabled = false;
 
-	// determine the basemap images needed
-	const baseMapTiles = [
-		pixelToFile(sourceXY.x, sourceXY.y),
-		pixelToFile(sourceXY.x + offsetX * 2, sourceXY.y),
-		pixelToFile(sourceXY.x, sourceXY.y + offsetY * 2),
-		pixelToFile(sourceXY.x + offsetX * 2, sourceXY.y + offsetY * 2),
-	];
-
-	// get the base maps
-	const baseMapsPromise = Promise.allSettled(baseMapTiles.map(baseMapImages));
-
-	// do some more calculations for assembling the tiles
-	// the tiles are arranged as follows, with the horizontal axis as x, and correlating with the second set of digits in the image file number
-	// T[0] T[1]
-	// T[2] T[3]
-	// tile 0 gets special treatment, it's placement is the basis for all downstream calculations
-	const t0Source = modTile(sourceXY.x, sourceXY.y);
-	const t0Width = tileSize.x - t0Source.x;
-	const t0Height = tileSize.y - t0Source.y;
-	const t0FinalSize = mapSizeToFinalSize(t0Width, t0Height);
-
-	// these will all be used again for the overlay, calculate them once here
-	const mapCoordinates = [];
-	// t[0]
-	mapCoordinates.push({
-		sx: t0Source.x,
-		sw: t0Width,
-		dx: 0,
-		dw: t0FinalSize.x,
-
-		sy: t0Source.y,
-		sh: t0Height,
-		dy: 0,
-		dh: t0FinalSize.y,
-	});
-	// t[1]
-	mapCoordinates.push({
-		sx: 0,
-		sw: tileSize.x - t0Width,
-		dx: t0FinalSize.x,
-		dw: mapSizeToFinalSize(tileSize.x - t0Width, 0).x,
-
-		sy: t0Source.y,
-		sh: t0Height,
-		dy: 0,
-		dh: t0FinalSize.y,
-	});
-	// t[2]
-	mapCoordinates.push({
-		sx: t0Source.x,
-		sw: t0Width,
-		dx: 0,
-		dw: t0FinalSize.x,
-
-		sy: 0,
-		sh: tileSize.y - t0Height,
-		dy: t0FinalSize.y,
-		dh: mapSizeToFinalSize(0, tileSize.y - t0Height).y,
-	});
-	// t[3]
-	mapCoordinates.push({
-		sx: 0,
-		sw: tileSize.x - t0Width,
-		dx: t0FinalSize.x,
-		dw: mapSizeToFinalSize(tileSize.x - t0Width, 0).x,
-
-		sy: 0,
-		sh: tileSize.y - t0Height,
-		dy: t0FinalSize.y,
-		dh: mapSizeToFinalSize(0, tileSize.y - t0Height).y,
-	});
-
-	// wait for the basemaps to arrive
-	const baseMaps = (await baseMapsPromise).map((map) => map.value ?? false);
-
-	// draw each tile if needed
-	drawOnBasemap(baseContext, baseMaps[0].base, mapCoordinates[0]);
-	if (mapCoordinates[1].dx < radarFinalSize.width && baseMaps[1]) {
-		drawOnBasemap(baseContext, baseMaps[1].base, mapCoordinates[1]);
-	}
-	if (mapCoordinates[2].dy < radarFinalSize.height && baseMaps[2]) {
-		drawOnBasemap(baseContext, baseMaps[2].base, mapCoordinates[2]);
-		if (mapCoordinates[1].dx < radarFinalSize.width && baseMaps[3]) {
-			drawOnBasemap(baseContext, baseMaps[3].base, mapCoordinates[3]);
-		}
-	}
-	// 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}`);
@@ -183,21 +52,7 @@ onmessage = async (e) => {
 	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 as needed
-	drawOnBasemap(baseContext, baseMaps[0].overlay, mapCoordinates[0]);
-	if (mapCoordinates[1].dx < radarFinalSize.width && baseMaps[1]) {
-		drawOnBasemap(baseContext, baseMaps[1].overlay, mapCoordinates[1]);
-	}
-	if (mapCoordinates[2].dy < radarFinalSize.height && baseMaps[2]) {
-		drawOnBasemap(baseContext, baseMaps[2].overlay, mapCoordinates[2]);
-		if (mapCoordinates[1].dx < radarFinalSize.width && baseMaps[3]) {
-			drawOnBasemap(baseContext, baseMaps[3].overlay, mapCoordinates[3]);
-		}
-	}
+	const stretchedRadar = stretchCanvas.transferToImageBitmap();
 
-	const processedRadar = baseCanvas.transferToImageBitmap();
-
-	postMessage(processedRadar, [processedRadar]);
+	postMessage(stretchedRadar, [stretchedRadar]);
 };

server/scripts/modules/radar.mjs

@@ -6,6 +6,7 @@ import WeatherDisplay from './weatherdisplay.mjs';
 import { registerDisplay, timeZone } from './navigation.mjs';
 import * as utils from './radar-utils.mjs';
 import { version } from './progress.mjs';
+import { elemForEach } from './utils/elem.mjs';
 
 // TEMPORARY fix to disable radar on ios safari. The same engine (webkit) is
 // used for all ios browers (chrome, brave, firefox, etc) so it's safe to skip
@@ -73,6 +74,10 @@ class Radar extends WeatherDisplay {
 			// get some web workers started
 			this.workers = (new Array(this.dopplerRadarImageMax)).fill(null).map(() => radarWorker());
 		}
+		if (!this.fixedWorker) {
+			// get the fixed background, overlay worker started
+			this.fixedWorker = fixedRadarWorker();
+		}
 
 		const baseUrl = `https://${RADAR_HOST}/archive/data/`;
 		const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png';
@@ -126,16 +131,19 @@ class Radar extends WeatherDisplay {
 		const sourceXY = utils.getXYFromLatitudeLongitudeMap(this.weatherParameters, offsetX, offsetY);
 		const radarSourceXY = utils.getXYFromLatitudeLongitudeDoppler(this.weatherParameters, offsetX, offsetY);
 
+		const baseAndOverlayPromise = this.fixedWorker.processAssets({
+			sourceXY,
+			offsetX,
+			offsetY,
+		});
+
 		// Load the most recent doppler radar images.
 		const radarInfo = await Promise.all(urls.map(async (url, index) => {
 			const processedRadar = await this.workers[index].processRadar({
 				url,
 				RADAR_HOST,
 				OVERRIDES,
-				sourceXY,
 				radarSourceXY,
-				offsetX,
-				offsetY,
 			});
 
 			// store the time
@@ -164,6 +172,50 @@ class Radar extends WeatherDisplay {
 				elem,
 			};
 		}));
+		// wait for the base and overlay
+		const baseAndOverlay = await baseAndOverlayPromise;
+
+		// calculate final tile size
+		const finalTileSize = utils.mapSizeToFinalSize(utils.tileSize.x, utils.tileSize.y);
+		// fill the tiles with the map
+		elemForEach('.map-tiles img', (elem, index) => {
+			// get the base image
+			const base = baseAndOverlay[`t${index}Base`];
+			// put it on a canvas
+			const canvas = document.createElement('canvas');
+			const context = canvas.getContext('bitmaprenderer');
+			context.transferFromImageBitmap(base);
+			// if it's not there, return (tile not needed)
+			if (!base) return;
+			// assign the bitmap to the image
+			elem.width = finalTileSize.x;
+			elem.height = finalTileSize.y;
+			elem.src = canvas.toDataURL();
+		});
+		elemForEach('.overlay-tiles img', (elem, index) => {
+			// get the base image
+			const base = baseAndOverlay[`t${index}Overlay`];
+			// put it on a canvas
+			const canvas = document.createElement('canvas');
+			const context = canvas.getContext('bitmaprenderer');
+			context.transferFromImageBitmap(base);
+			// if it's not there, return (tile not needed)
+			if (!base) return;
+			// assign the bitmap to the image
+			elem.width = finalTileSize.x;
+			elem.height = finalTileSize.y;
+			elem.src = canvas.toDataURL();
+		});
+		// fill the tiles with the overlay
+		// shift the map tile containers
+		const tileShift = utils.modTile(sourceXY.x, sourceXY.y);
+		const tileShiftStretched = utils.mapSizeToFinalSize(tileShift.x, tileShift.y);
+		const mapTileContainer = this.elem.querySelector('.map-tiles');
+		mapTileContainer.style.top = `${-tileShiftStretched.y}px`;
+		mapTileContainer.style.left = `${-tileShiftStretched.x}px`;
+		const overlayTileContainer = this.elem.querySelector('.overlay-tiles');
+		overlayTileContainer.style.top = `${-tileShiftStretched.y}px`;
+		overlayTileContainer.style.left = `${-tileShiftStretched.x}px`;
 
 		// put the elements in the container
 		const scrollArea = this.elem.querySelector('.scroll-area');
@@ -199,7 +251,7 @@ const radarWorker = () => {
 	// create the worker
 	const worker = new Worker(`/resources/radar-worker.mjs?_=${version()}`, { type: 'module' });
 
-	const processRadar = (url) => new Promise((resolve, reject) => {
+	const processRadar = (data) => new Promise((resolve, reject) => {
 		// prepare for done message
 		worker.onmessage = (e) => {
 			if (e?.data instanceof Error) {
@@ -210,7 +262,7 @@ const radarWorker = () => {
 		};
 
 		// start up the worker
-		worker.postMessage(url);
+		worker.postMessage(data);
 	});
 
 	// return the object
@@ -219,6 +271,31 @@ const radarWorker = () => {
 	};
 };
 
+// create a radar worker for the fixed background images
+const fixedRadarWorker = () => {
+	// create the worker
+	const worker = new Worker(`/resources/radar-worker-bg-fg.mjs?_=${version()}`, { type: 'module' });
+
+	const processAssets = (data) => new Promise((resolve, reject) => {
+		// prepare for done message
+		worker.onmessage = (e) => {
+			if (e?.data instanceof Error) {
+				reject(e.data);
+			} else if (e?.data?.t0Base instanceof ImageBitmap) {
+				resolve(e.data);
+			}
+		};
+
+		// start up the worker
+		worker.postMessage(data);
+	});
+
+	// return the object
+	return {
+		processAssets,
+	};
+};
+
 // register display
 // TEMPORARY: except on IOS and bots
 if (!isIos && !isBot) {

server/styles/scss/_radar.scss

@@ -107,6 +107,15 @@
 
 	.container {
 
+		.tiles {
+			position: absolute;
+			width: 1400px;
+
+			img {
+				vertical-align: middle;
+			}
+		}
+
 		.scroll-area {
 			position: relative;
 		}

views/partials/radar.ejs

@@ -32,11 +32,13 @@
 
 <div class="main radar">
 	<div class="container">
+		<div class="map-tiles tiles"><img/><img/><img/><img/></div>
 		<div class="scroll-area">
 			<div class="frame template">
 				<div class="map">
 				</div>
 			</div>
 		</div>
+		<div class="overlay-tiles tiles"><img/><img/><img/><img/></div>
 	</div>
 </div>

ws4kp.code-workspace

@@ -43,7 +43,8 @@
 			"Malek",
 			"mwood",
 			"unmuted",
-			"dumpio"
+			"dumpio",
+			"mesonet"
 		],
 		"cSpell.ignorePaths": [
 			"**/package-lock.json",