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

change to offscreen canvas

Browse Source
This commit is contained in:
Matt Walsh
2025-05-23 23:13:50 -05:00
parent 8f86f80eb5
commit 2dcc33f210
3 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -119,18 +119,14 @@ class Radar extends WeatherDisplay {
const radarSourceY = radarSourceXY.y / 2; const radarSourceY = 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) => { const radarInfo = await Promise.all(urls.map(async (url, index) => {
// create destination context // create destination context
const canvas = document.createElement('canvas'); const canvas = new OffscreenCanvas(640, 367);
canvas.width = 640;
canvas.height = 367;
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
context.imageSmoothingEnabled = false; context.imageSmoothingEnabled = false;
// create working context for manipulation // create working context for manipulation
const workingCanvas = document.createElement('canvas'); const workingCanvas = new OffscreenCanvas(width, height);
workingCanvas.width = width;
workingCanvas.height = height;
const workingContext = workingCanvas.getContext('2d'); const workingContext = workingCanvas.getContext('2d');
workingContext.imageSmoothingEnabled = false; workingContext.imageSmoothingEnabled = false;
@@ -161,32 +157,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`);
const imgBlob = await loadImg(blob); const imgBlob = await loadImg(blob);
console.timeEnd(`Radar-${index}-loadimg`);
// draw the entire image // draw the entire image
workingContext.clearRect(0, 0, width, 1600); workingContext.clearRect(0, 0, width, 1600);
console.time(`Radar-${index}-drawimage`);
workingContext.drawImage(imgBlob, 0, 0, width, 1600); workingContext.drawImage(imgBlob, 0, 0, width, 1600);
console.timeEnd(`Radar-${index}-drawimage`);
// get the base map // 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); context.drawImage(this.baseMap, sourceXY.x, sourceXY.y, offsetX * 2, offsetY * 2, 0, 0, 640, 367);
console.timeEnd(`Radar-${index}-drawbasemap`);
// crop the radar image // crop the radar image
const cropCanvas = document.createElement('canvas'); const cropCanvas = document.createElement('canvas');
cropCanvas.width = 640; cropCanvas.width = 640;
cropCanvas.height = 367; 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`);
cropContext.drawImage(workingCanvas, radarSourceX, radarSourceY, (radarOffsetX * 2), (radarOffsetY * 2.33), 0, 0, 640, 367); cropContext.drawImage(workingCanvas, radarSourceX, radarSourceY, (radarOffsetX * 2), (radarOffsetY * 2.33), 0, 0, 640, 367);
// clean the image console.timeEnd(`Radar-${index}-copy-radar`);
// clean the im`age
console.time(`Radar-${index}-clean-image`);
utils.removeDopplerRadarImageNoise(cropContext); utils.removeDopplerRadarImageNoise(cropContext);
console.timeEnd(`Radar-${index}-clean-image`);
// merge the radar and map // merge the radar and map
console.time(`Radar-${index}-merge`);
utils.mergeDopplerRadarImage(context, cropContext); utils.mergeDopplerRadarImage(context, cropContext);
console.timeEnd(`Radar-${index}-merge`);
const elem = this.fillTemplate('frame', { map: { type: 'img', src: canvas.toDataURL() } }); console.time(`Radar-${index}-dataurl`);
const onscreenCanvas = document.createElement('canvas');
onscreenCanvas.width = canvas.width;
onscreenCanvas.height = canvas.height;
onscreenCanvas.getContext('bitmaprenderer').transferFromImageBitmap(canvas.transferToImageBitmap());
const elem = this.fillTemplate('frame', { map: { type: 'canvas', canvas: onscreenCanvas } });
console.timeEnd(`Radar-${index}-dataurl`);
console.timeEnd(`Radar-${index}`);
return { return {
canvas, canvas,
time, time,

2
server/scripts/modules/weatherdisplay.mjs
View File

@@ -421,6 +421,8 @@ class WeatherDisplay {
} else if (value?.type === 'img') { } else if (value?.type === 'img') {
// fill the image source // fill the image source
elem.querySelector('img').src = value.src; elem.querySelector('img').src = value.src;
} else if (value?.type === 'canvas') {
elem.append(value.canvas);
} }
}); });

2
views/partials/radar.ejs
View File

@@ -35,7 +35,7 @@
<div class="scroll-area"> <div class="scroll-area">
<div class="frame template"> <div class="frame template">
<div class="map"> <div class="map">
<img src="images/maps/radar.webp" /> <!-- <img src="images/maps/radar.webp" /> -->
</div> </div>
</div> </div>
</div> </div>