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

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

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