eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-14 07:39:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

add instrumentation

Browse Source
This commit is contained in:
Matt Walsh
2025-05-24 09:22:23 -05:00
parent 2dcc33f210
commit 5567fe37a6
2 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
server/scripts/modules/radar.mjs
View File

@@ -1,7 +1,7 @@
// current weather conditions display
import STATUS from './status.mjs';
import { DateTime } from '../vendor/auto/luxon.mjs';
import { loadImg } from './utils/image.mjs';
import { loadImgElement, loadImg } from './utils/image.mjs';
import { text } from './utils/fetch.mjs';
import { rewriteUrl } from './utils/cors.mjs';
import WeatherDisplay from './weatherdisplay.mjs';
@@ -54,7 +54,7 @@ class Radar extends WeatherDisplay {
// get the base map
const src = 'images/maps/radar.webp';
this.baseMap = await loadImg(src);
this.baseMapImageElem = await loadImgElement(src);
const baseUrl = `https://${RADAR_HOST}/archive/data/`;
const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png';
@@ -115,30 +115,35 @@ class Radar extends WeatherDisplay {
const radarOffsetX = 120;
const radarOffsetY = 70;
const radarSourceXY = utils.getXYFromLatitudeLongitudeDoppler(this.weatherParameters, offsetX, offsetY);
const radarSourceX = radarSourceXY.x / 2;
const radarSourceY = radarSourceXY.y / 2;
const radarSourceX = Math.round(radarSourceXY.x / 2);
const radarSourceY = Math.round(radarSourceXY.y / 2);
// Load the most recent doppler radar images.
const radarInfo = await Promise.all(urls.map(async (url, index) => {
console.time(`Radar-${index}`);
// create destination context
const canvas = new OffscreenCanvas(640, 367);
const context = canvas.getContext('2d');
context.imageSmoothingEnabled = false;
const baseCanvas = new OffscreenCanvas(640, 367);
const baseContext = baseCanvas.getContext('2d', { alpha: false });
baseContext.imageSmoothingEnabled = false;
// create working context for manipulation
const workingCanvas = new OffscreenCanvas(width, height);
const workingContext = workingCanvas.getContext('2d');
workingContext.imageSmoothingEnabled = false;
const radarCanvas = new OffscreenCanvas(width, height);
const radarContext = radarCanvas.getContext('2d', { alpha: false });
radarContext.imageSmoothingEnabled = false;
// get the image
const modifiedUrl = OVERRIDES.RADAR_HOST ? url.replace(RADAR_HOST, OVERRIDES.RADAR_HOST) : url;
console.time(`Radar-${index}-fetch`);
const response = await fetch(rewriteUrl(modifiedUrl));
console.timeEnd(`Radar-${index}-fetch`);
// 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();
console.time(`Radar-${index}-blob`);
const radarImgBlob = await response.blob();
console.timeEnd(`Radar-${index}-blob`);
// store the time
const timeMatch = url.match(/_(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)\./);
@@ -157,49 +162,47 @@ class Radar extends WeatherDisplay {
} else {
time = DateTime.fromHTTP(response.headers.get('last-modified')).setZone(timeZone());
}
console.time(`Radar-${index}`);
// assign to an html image element
console.time(`Radar-${index}-loadimg`);
const imgBlob = await loadImg(blob);
console.timeEnd(`Radar-${index}-loadimg`);
console.time(`Radar-${index}-loadimg-element`);
const radarImgElement = await loadImg(radarImgBlob);
console.timeEnd(`Radar-${index}-loadimg-element`);
// draw the entire image
workingContext.clearRect(0, 0, width, 1600);
radarContext.clearRect(0, 0, width, 1600);
console.time(`Radar-${index}-drawimage`);
workingContext.drawImage(imgBlob, 0, 0, width, 1600);
radarContext.drawImage(radarImgElement, 0, 0, width, 1600);
console.timeEnd(`Radar-${index}-drawimage`);
// get the base map
console.time(`Radar-${index}-drawbasemap`);
context.drawImage(this.baseMap, sourceXY.x, sourceXY.y, offsetX * 2, offsetY * 2, 0, 0, 640, 367);
baseContext.drawImage(this.baseMapImageElem, sourceXY.x, sourceXY.y, offsetX * 2, offsetY * 2, 0, 0, 640, 367);
console.timeEnd(`Radar-${index}-drawbasemap`);
// crop the radar image
const cropCanvas = document.createElement('canvas');
cropCanvas.width = 640;
cropCanvas.height = 367;
const cropCanvas = new OffscreenCanvas(640, 367);
const cropContext = cropCanvas.getContext('2d', { willReadFrequently: true });
cropContext.imageSmoothingEnabled = false;
console.time(`Radar-${index}-copy-radar`);
cropContext.drawImage(workingCanvas, radarSourceX, radarSourceY, (radarOffsetX * 2), (radarOffsetY * 2.33), 0, 0, 640, 367);
cropContext.drawImage(radarCanvas, radarSourceX, radarSourceY, (radarOffsetX * 2), Math.round(radarOffsetY * 2.33), 0, 0, 640, 367);
console.timeEnd(`Radar-${index}-copy-radar`);
// clean the im`age
// clean the image
console.time(`Radar-${index}-clean-image`);
utils.removeDopplerRadarImageNoise(cropContext);
console.timeEnd(`Radar-${index}-clean-image`);
// merge the radar and map
console.time(`Radar-${index}-merge`);
utils.mergeDopplerRadarImage(context, cropContext);
utils.mergeDopplerRadarImage(baseContext, cropContext);
console.timeEnd(`Radar-${index}-merge`);
console.time(`Radar-${index}-dataurl`);
console.time(`Radar-${index}-transfer-canvas`);
const onscreenCanvas = document.createElement('canvas');
onscreenCanvas.width = canvas.width;
onscreenCanvas.height = canvas.height;
onscreenCanvas.getContext('bitmaprenderer').transferFromImageBitmap(canvas.transferToImageBitmap());
onscreenCanvas.width = baseCanvas.width;
onscreenCanvas.height = baseCanvas.height;
onscreenCanvas.getContext('bitmaprenderer').transferFromImageBitmap(baseCanvas.transferToImageBitmap());
const elem = this.fillTemplate('frame', { map: { type: 'canvas', canvas: onscreenCanvas } });
console.timeEnd(`Radar-${index}-dataurl`);
console.timeEnd(`Radar-${index}-transfer-canvas`);
console.timeEnd(`Radar-${index}`);
return {
canvas,
canvas: baseCanvas,
time,
elem,
};

8
server/scripts/modules/utils/image.mjs
View File

@@ -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,
};