5.26.2

fix: radar mime-type in chrome in Docker

gulp/publish-frontend.mjs

@@ -96,29 +96,6 @@ const buildJs = () => src(mjsSources)
 	.pipe(webpack(webpackOptions))
 	.pipe(dest(RESOURCES_PATH));
 
-const workerSources = [
-	'./server/scripts/modules/radar-worker.mjs',
-];
-
-const buildWorkers = () => {
-	// update the file name in the webpack options
-	const output = {
-		chunkFilename: '[id].mjs',
-		chunkFormat: 'module',
-		filename: '[name].mjs',
-	};
-	const workerWebpackOptions = {
-		...webpackOptions,
-		output,
-		entry: {
-			'radar-worker': workerSources[0],
-		},
-	};
-	return src(workerSources)
-		.pipe(webpack(workerWebpackOptions))
-		.pipe(dest(RESOURCES_PATH));
-};
-
 const cssSources = [
 	'server/styles/main.css',
 ];
@@ -163,9 +140,10 @@ const uploadSources = [
 	'!dist/images/**/*',
 	'!dist/fonts/**/*',
 ];
-const upload = () => src(uploadSources, { base: './dist', encoding: false })
+
+const uploadCreator = (bucket) => () => src(uploadSources, { base: './dist', encoding: false })
 	.pipe(s3({
-		Bucket: process.env.BUCKET,
+		Bucket: bucket,
 		StorageClass: 'STANDARD',
 		maps: {
 			CacheControl: (keyname) => {
@@ -181,10 +159,14 @@ const imageSources = [
 	'server/images/**',
 	'!server/images/gimp/**',
 ];
-const uploadImages = () => src(imageSources, { base: './server', encoding: false })
+
+const upload = uploadCreator(process.env.BUCKET);
+const uploadPreview = uploadCreator(process.env.BUCKET_PREVIEW);
+
+const uploadImagesCreator = (bucket) => () => src(imageSources, { base: './server', encoding: false })
 	.pipe(
 		s3({
-			Bucket: process.env.BUCKET,
+			Bucket: bucket,
 			StorageClass: 'STANDARD',
 			maps: {
 				CacheControl: () => 'max-age=31536000',
@@ -192,11 +174,14 @@ const uploadImages = () => src(imageSources, { base: './server', encoding: false
 		}),
 	);
 
+const uploadImages = uploadImagesCreator(process.env.BUCKET);
+const uploadImagesPreview = uploadImagesCreator(process.env.BUCKET_PREVIEW);
+
 const copyImageSources = () => src(imageSources, { base: './server', encoding: false })
 	.pipe(dest('./dist'));
 
-const invalidate = () => cloudfront.send(new CreateInvalidationCommand({
+const invalidateCreator = (distributionId) => () => cloudfront.send(new CreateInvalidationCommand({
-	DistributionId: process.env.DISTRIBUTION_ID,
+	DistributionId: distributionId,
 	InvalidationBatch: {
 		CallerReference: (new Date()).toLocaleString(),
 		Paths: {
@@ -206,21 +191,26 @@ const invalidate = () => cloudfront.send(new CreateInvalidationCommand({
 	},
 }));
 
+const invalidate = invalidateCreator(process.env.DISTRIBUTION_ID);
+const invalidatePreview = invalidateCreator(process.env.DISTRIBUTION_ID_PREVIEW);
+
 const buildPlaylist = async () => {
 	const availableFiles = await reader();
 	const playlist = { availableFiles };
 	return file('playlist.json', JSON.stringify(playlist)).pipe(dest('./dist'));
 };
 
-const buildDist = series(clean, parallel(buildJs, buildWorkers, compressJsData, compressJsVendor, copyCss, compressHtml, copyOtherFiles, copyImageSources, buildPlaylist));
+const buildDist = series(clean, parallel(buildJs, compressJsData, compressJsVendor, copyCss, compressHtml, copyOtherFiles, copyImageSources, buildPlaylist));
 
 // upload_images could be in parallel with upload, but _images logs a lot and has little changes
 // by running upload last the majority of the changes will be at the bottom of the log for easy viewing
 const publishFrontend = series(buildDist, uploadImages, upload, invalidate);
+const stageFrontend = series(buildDist, uploadImagesPreview, uploadPreview, invalidatePreview);
 
 export default publishFrontend;
 
 export {
 	buildDist,
 	invalidate,
+	stageFrontend,
 };

gulpfile.mjs

@@ -1,9 +1,10 @@
 import updateVendor from './gulp/update-vendor.mjs';
-import publishFrontend, { buildDist, invalidate } from './gulp/publish-frontend.mjs';
+import publishFrontend, { buildDist, invalidate, stageFrontend } from './gulp/publish-frontend.mjs';
 
 export {
 	updateVendor,
 	publishFrontend,
 	buildDist,
 	invalidate,
+	stageFrontend,
 };

nginx.conf

@@ -1,6 +1,10 @@
 server {
     listen 8080;
     server_name localhost;
+    include mime.types;
+    types {
+        text/javascript mjs;
+    }
 
     root /usr/share/nginx/html;
 

package-lock.json

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

package.json

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

server/scripts/modules/currentweather.mjs

@@ -112,10 +112,12 @@ class CurrentWeather extends WeatherDisplay {
 			condition = shortConditions(condition);
 		}
 
+		const wind = (typeof this.data.WindSpeed === 'number') ? this.data.WindDirection.padEnd(3, '') + this.data.WindSpeed.toString().padStart(3, ' ') : this.data.WindSpeed;
+
 		const fill = {
 			temp: this.data.Temperature + String.fromCharCode(176),
 			condition,
-			wind: this.data.WindDirection.padEnd(3, '') + this.data.WindSpeed.toString().padStart(3, ' '),
+			wind,
 			location: locationCleanup(this.data.station.properties.name).substr(0, 20),
 			humidity: `${this.data.Humidity}%`,
 			dewpoint: this.data.DewPoint + String.fromCharCode(176),
@@ -202,13 +204,15 @@ const parseData = (data) => {
 	data.WindSpeed = windConverter(observations.windSpeed.value);
 	data.WindDirection = directionToNSEW(observations.windDirection.value);
 	data.WindGust = windConverter(observations.windGust.value);
-	data.WindSpeed = windConverter(data.WindSpeed);
 	data.WindUnit = windConverter.units;
 	data.Humidity = Math.round(observations.relativeHumidity.value);
 	data.Icon = getLargeIcon(observations.icon);
 	data.PressureDirection = '';
 	data.TextConditions = observations.textDescription;
 
+	// set wind speed of 0 as calm
+	if (data.WindSpeed === 0) data.WindSpeed = 'Calm';
+
 	// difference since last measurement (pascals, looking for difference of more than 150)
 	const pressureDiff = (observations.barometricPressure.value - data.features[1].properties.barometricPressure.value);
 	if (pressureDiff > 150) data.PressureDirection = 'R';

server/scripts/modules/radar-processor.mjs

@@ -1,10 +1,11 @@
 import { removeDopplerRadarImageNoise } from './radar-utils.mjs';
 import { RADAR_FULL_SIZE, RADAR_FINAL_SIZE } from './radar-constants.mjs';
 
-onmessage = async (e) => {
+// process a single radar image and place it on the provided canvas
+const processRadar = async (data) => {
 	const {
 		url, RADAR_HOST, OVERRIDES, radarSourceXY,
-	} = e.data;
+	} = data;
 
 	// get the image
 	const modifiedRadarUrl = OVERRIDES.RADAR_HOST ? url.replace(RADAR_HOST, OVERRIDES.RADAR_HOST) : url;
@@ -19,7 +20,9 @@ onmessage = async (e) => {
 	};
 
 	// create radar context for manipulation
-	const radarCanvas = new OffscreenCanvas(RADAR_FULL_SIZE.width, RADAR_FULL_SIZE.height);
+	const radarCanvas = document.createElement('canvas');
+	radarCanvas.width = RADAR_FULL_SIZE.width;
+	radarCanvas.height = RADAR_FULL_SIZE.height;
 	const radarContext = radarCanvas.getContext('2d');
 	radarContext.imageSmoothingEnabled = false;
 
@@ -37,7 +40,9 @@ onmessage = async (e) => {
 	radarContext.drawImage(radarImgElement, 0, 0, RADAR_FULL_SIZE.width, RADAR_FULL_SIZE.height);
 
 	// crop the radar image without scaling
-	const croppedRadarCanvas = new OffscreenCanvas(radarSource.width, radarSource.height);
+	const croppedRadarCanvas = document.createElement('canvas');
+	croppedRadarCanvas.width = radarSource.width;
+	croppedRadarCanvas.height = 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);
@@ -46,12 +51,14 @@ onmessage = async (e) => {
 	removeDopplerRadarImageNoise(croppedRadarContext);
 
 	// stretch the radar image
-	const stretchCanvas = new OffscreenCanvas(RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
+	const stretchCanvas = document.createElement('canvas');
+	stretchCanvas.width = RADAR_FINAL_SIZE.width;
+	stretchCanvas.height = RADAR_FINAL_SIZE.height;
 	const stretchContext = stretchCanvas.getContext('2d', { willReadFrequently: true });
 	stretchContext.imageSmoothingEnabled = false;
 	stretchContext.drawImage(croppedRadarCanvas, 0, 0, radarSource.width, radarSource.height, 0, 0, RADAR_FINAL_SIZE.width, RADAR_FINAL_SIZE.height);
 
-	const stretchedRadar = stretchCanvas.transferToImageBitmap();
+	return stretchCanvas.toDataURL();
-
-	postMessage(stretchedRadar, [stretchedRadar]);
 };
+
+export default processRadar;

server/scripts/modules/radar-tiles.mjs

@@ -39,80 +39,35 @@ const setTiles = (data) => {
 	// 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 = TILE_SIZE.x - t0Source.x;
-	const t0Height = TILE_SIZE.y - t0Source.y;
-	const t0FinalSize = { x: t0Width, y: t0Height };
 
-	// these will all be used again for the overlay, calculate them once here
+	// calculate the shift of tile 0 (upper left)
-	const mapCoordinates = [];
+	const tileShift = modTile(sourceXY.x, sourceXY.y);
-	// 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: TILE_SIZE.x - t0Width,
-		dx: t0FinalSize.x,
-		dw: TILE_SIZE.x - t0Width,
-
-		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: TILE_SIZE.y - t0Height,
-		dy: t0FinalSize.y,
-		dh: TILE_SIZE.y - t0Height,
-	});
-	// t[3]
-	mapCoordinates.push({
-		sx: 0,
-		sw: TILE_SIZE.x - t0Width,
-		dx: t0FinalSize.x,
-		dw: TILE_SIZE.x - t0Width,
-
-		sy: 0,
-		sh: TILE_SIZE.y - t0Height,
-		dy: t0FinalSize.y,
-		dh: TILE_SIZE.y - t0Height,
-	});
 
 	// determine which tiles are used
 	const usedTiles = [
 		true,
-		mapCoordinates[1].dx < RADAR_FINAL_SIZE.width,
+		TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE.width,
-		mapCoordinates[2].dy < RADAR_FINAL_SIZE.height,
+		TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE.width,
-		mapCoordinates[2].dy < RADAR_FINAL_SIZE.height && mapCoordinates[1].dx < RADAR_FINAL_SIZE.width,
 	];
+	// if we need t[1] and t[2] then we also need t[3]
+	usedTiles.push(usedTiles[1] && usedTiles[2]);
 
 	// helper function for populating tiles
 	const populateTile = (tileName) => (elem, index) => {
-		// check if the tile is used
+		// always set the size to flow the images correctly
-		if (!usedTiles[index]) return;
-
-		// set the image source and size
-		elem.src = `/images/maps/radar/${tileName}-${baseMapTiles[index]}.webp`;
 		elem.width = TILE_SIZE.x;
 		elem.height = TILE_SIZE.y;
+
+		// check if the tile is used
+		if (!usedTiles[index]) {
+			elem.src = '';
+			return;
+		}
+
+		// set the image source and size
+		const newSource = `/images/maps/radar/${tileName}-${baseMapTiles[index]}.webp`;
+		if (elem.src === newSource) return;
+		elem.src = newSource;
 	};
 
 	// populate the map and overlay tiles
@@ -122,7 +77,6 @@ const setTiles = (data) => {
 
 	// fill the tiles with the overlay
 	// shift the map tile containers
-	const tileShift = modTile(sourceXY.x, sourceXY.y);
 	const mapTileContainer = document.querySelector(`#${elemIdFull} .map-tiles`);
 	mapTileContainer.style.top = `${-tileShift.y}px`;
 	mapTileContainer.style.left = `${-tileShift.x}px`;
@@ -130,12 +84,6 @@ const setTiles = (data) => {
 	const overlayTileContainer = document.querySelector(`#${elemIdFull} .overlay-tiles`);
 	overlayTileContainer.style.top = `${-tileShift.y}px`;
 	overlayTileContainer.style.left = `${-tileShift.x}px`;
-
-	// return some useful data
-	return {
-		usedTiles,
-		baseMapTiles,
-	};
 };
 
 export default setTiles;

server/scripts/modules/radar-worker.js

@@ -1 +0,0 @@
-import './radar-worker.mjs';

server/scripts/modules/radar.mjs

@@ -5,30 +5,17 @@ import { text } from './utils/fetch.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
 import { registerDisplay, timeZone } from './navigation.mjs';
 import * as utils from './radar-utils.mjs';
-import { version } from './progress.mjs';
 import setTiles from './radar-tiles.mjs';
+import processRadar from './radar-processor.mjs';
 
-// TEMPORARY fix to disable radar on ios safari. The same engine (webkit) is
+// store processed radar as dataURLs to avoid re-processing frames as they slide backwards in time
-// used for all ios browers (chrome, brave, firefox, etc) so it's safe to skip
+// this is cleared upon changing the location displayed
-// any subsequent narrowing of the user-agent.
+let processedRadars = [];
-const isIos = /iP(ad|od|hone)/i.test(window.navigator.userAgent);
-// NOTE: iMessages/Messages preview is provided by an Apple scraper that uses a
-// user-agent similar to: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1)
-// AppleWebKit/601.2.4 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.4
-// facebookexternalhit/1.1 Facebot Twitterbot/1.0`. There is currently a bug in
-// Messages macos/ios where a constantly crashing website seems to cause an
-// entire Messages thread to permanently lockup until the individual website
-// preview is deleted! Messages ios will judder but allows the message to be
-// deleted eventually. Messages macos beachballs forever and prevents the
-// successful deletion. See
-// https://github.com/netbymatt/ws4kp/issues/74#issuecomment-2921154962 for more
-// context.
-const isBot = /twitterbot|Facebot/i.test(window.navigator.userAgent);
 
 const RADAR_HOST = 'mesonet.agron.iastate.edu';
 class Radar extends WeatherDisplay {
 	constructor(navId, elemId) {
-		super(navId, elemId, 'Local Radar', !isIos && !isBot);
+		super(navId, elemId, 'Local Radar');
 
 		this.okToDrawCurrentConditions = false;
 		this.okToDrawCurrentDateTime = false;
@@ -69,12 +56,6 @@ class Radar extends WeatherDisplay {
 			return;
 		}
 
-		// get the workers started
-		if (!this.workers) {
-			// get some web workers started
-			this.workers = (new Array(this.dopplerRadarImageMax)).fill(null).map(() => radarWorker());
-		}
-
 		const baseUrl = `https://${RADAR_HOST}/archive/data/`;
 		const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png';
 		const baseUrls = [];
@@ -133,19 +114,44 @@ class Radar extends WeatherDisplay {
 			elemId: this.elemId,
 		});
 
+		const radarKey = `${radarSourceXY.x.toFixed(0)}-${radarSourceXY.y.toFixed(0)}`;
+
+		// reset the "used" flag on pre-processed radars
+		// items that were not used during this process are deleted (either expired via time or change of location)
+		processedRadars.forEach((radar) => { radar.used = false; });
+		// remove any radars that aren't
+
 		// Load the most recent doppler radar images.
-		const radarInfo = await Promise.all(urls.map(async (url, index) => {
+		const radarInfo = await Promise.all(urls.map(async (url) => {
-			const processedRadar = await this.workers[index].processRadar({
+			// store the time
+			const timeMatch = url.match(/_(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)\./);
+			const [, year, month, day, hour, minute] = timeMatch;
+
+			const radarKeyedTimestamp = `${radarKey}:${year}${month}${day}${hour}${minute}`;
+
+			// check for a pre-processed radar
+			const preProcessed = processedRadars.find((radar) => radar.key === radarKeyedTimestamp);
+
+			// use the pre-processed radar, or get a new one
+			const processedRadar = preProcessed?.dataURL ?? await processRadar({
 				url,
 				RADAR_HOST,
 				OVERRIDES,
 				radarSourceXY,
 			});
 
-			// store the time
+			// store the radar
-			const timeMatch = url.match(/_(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)\./);
+			if (!preProcessed) {
+				processedRadars.push({
+					key: radarKeyedTimestamp,
+					dataURL: processedRadar,
+					used: true,
+				});
+			} else {
+				// set used flag
+				preProcessed.used = true;
+			}
 
-			const [, year, month, day, hour, minute] = timeMatch;
 			const time = DateTime.fromObject({
 				year,
 				month,
@@ -156,15 +162,7 @@ class Radar extends WeatherDisplay {
 				zone: 'UTC',
 			}).setZone(timeZone());
 
-			const onscreenCanvas = document.createElement('canvas');
+			const elem = this.fillTemplate('frame', { map: { type: 'img', src: processedRadar } });
-			onscreenCanvas.width = processedRadar.width;
-			onscreenCanvas.height = processedRadar.height;
-			const onscreenContext = onscreenCanvas.getContext('bitmaprenderer');
-			onscreenContext.transferFromImageBitmap(processedRadar);
-
-			const dataUrl = onscreenCanvas.toDataURL();
-
-			const elem = this.fillTemplate('frame', { map: { type: 'img', src: dataUrl } });
 			return {
 				time,
 				elem,
@@ -181,12 +179,15 @@ class Radar extends WeatherDisplay {
 
 		this.times = radarInfo.map((radar) => radar.time);
 		this.setStatus(STATUS.loaded);
+
+		// clean up any unused stored radars
+		processedRadars = processedRadars.filter((radar) => radar.used);
 	}
 
 	async drawCanvas() {
 		super.drawCanvas();
 		const time = this.times[this.screenIndex].toLocaleString(DateTime.TIME_SIMPLE);
-		const timePadded = time.length >= 8 ? time : ` ${time}`;
+		const timePadded = time.length >= 8 ? time : ` ${time} `;
 		this.elem.querySelector('.header .right .time').innerHTML = timePadded;
 
 		// get image offset calculation
@@ -200,33 +201,5 @@ class Radar extends WeatherDisplay {
 	}
 }
 
-// create a radar worker with helper functions
-const radarWorker = () => {
-	// create the worker
-        const worker = new Worker(`/resources/radar-worker.js?_=${version()}`, { type: 'module' });
-
-	const processRadar = (data) => 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(data);
-	});
-
-	// return the object
-	return {
-		processRadar,
-	};
-};
-
 // register display
-// TEMPORARY: except on IOS and bots
+registerDisplay(new Radar(11, 'radar'));
-if (!isIos && !isBot) {
-	registerDisplay(new Radar(11, 'radar'));
-}