From b5fa3e49d6e69b971fcb7d5f0f9b35a78ca7916b Mon Sep 17 00:00:00 2001 From: Matt Walsh Date: Fri, 20 Jun 2025 22:04:00 -0500 Subject: [PATCH] remove radar-worker and offscreen canvas to make things easier for ios #74 --- .../{radar-worker.mjs => radar-processor.mjs} | 23 +++--- server/scripts/modules/radar.mjs | 71 ++----------------- 2 files changed, 21 insertions(+), 73 deletions(-) rename server/scripts/modules/{radar-worker.mjs => radar-processor.mjs} (75%) diff --git a/server/scripts/modules/radar-worker.mjs b/server/scripts/modules/radar-processor.mjs similarity index 75% rename from server/scripts/modules/radar-worker.mjs rename to server/scripts/modules/radar-processor.mjs index c81aba4..ee80387 100644 --- a/server/scripts/modules/radar-worker.mjs +++ b/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(); - - postMessage(stretchedRadar, [stretchedRadar]); + return stretchCanvas.toDataURL(); }; + +export default processRadar; diff --git a/server/scripts/modules/radar.mjs b/server/scripts/modules/radar.mjs index 3e22a13..de838e3 100644 --- a/server/scripts/modules/radar.mjs +++ b/server/scripts/modules/radar.mjs @@ -5,30 +5,13 @@ 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'; - -// 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 -// any subsequent narrowing of the user-agent. -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); +import processRadar from './radar-processor.mjs'; 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 +52,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 = []; @@ -134,8 +111,8 @@ class Radar extends WeatherDisplay { }); // Load the most recent doppler radar images. - const radarInfo = await Promise.all(urls.map(async (url, index) => { - const processedRadar = await this.workers[index].processRadar({ + const radarInfo = await Promise.all(urls.map(async (url) => { + const processedRadar = await processRadar({ url, RADAR_HOST, OVERRIDES, @@ -156,15 +133,7 @@ class Radar extends WeatherDisplay { zone: 'UTC', }).setZone(timeZone()); - const onscreenCanvas = document.createElement('canvas'); - 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 } }); + const elem = this.fillTemplate('frame', { map: { type: 'img', src: processedRadar } }); return { time, elem, @@ -200,33 +169,5 @@ class Radar extends WeatherDisplay { } } -// create a radar worker with helper functions -const radarWorker = () => { - // create the worker - const worker = new Worker(`/resources/radar-worker.mjs?_=${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 -if (!isIos && !isBot) { - registerDisplay(new Radar(11, 'radar')); -} +registerDisplay(new Radar(11, 'radar'));