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

radar expanded, to do fix number of tiles

Browse Source
This commit is contained in:
Matt Walsh
2026-04-06 16:41:03 -05:00
parent 8158afd039
commit 97ac0a1656
6 changed files with 111 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
server/scripts/modules/radar-constants.mjs
View File

@@ -1,5 +1,56 @@
import settings from './settings.mjs';
const radarFinalSize = () => {
const size = {
width: 640, height: 367,
};
if (settings.wide?.value && settings.enhancedScreens?.value) {
size.width = 854;
}
return size;
};
const radarSourceSize = () => {
const size = {
width: 240,
height: 163,
};
if (settings.wide?.value && settings.enhancedScreens?.value) {
size.width = 240 / 640 * 854; // original size of 640 scaled up to wide at 854
}
return size;
};
const radarOffset = () => {
const offset = {
x: 240,
y: 138,
};
if (settings.wide?.value && settings.enhancedScreens?.value) {
// 107 is the margins shift, 640/854 is the scaling factor normal => wide, /2 is because of the fixed 2:1 scaling between source radar and map tiles
offset.x = 240 + (107 * 640 / 854 / 2); // original size of 640 scaled up to wide at 854;
}
return offset;
};
// shift the base coordinates to align with enhanced radar window sizes
const radarShift = () => {
const shift = {
x: 0,
y: 0,
};
if (settings.wide?.value && settings.enhancedScreens?.value) {
shift.x = 107;
}
return shift;
};
export const TILE_SIZE = { x: 680, y: 387 };
export const TILE_COUNT = { x: 10, y: 11 };
export const TILE_FULL_SIZE = { x: 6800, y: 4255 };
export const RADAR_FULL_SIZE = { width: 2550, height: 1600 };
export const RADAR_FINAL_SIZE = { width: 640, height: 367 };
export const RADAR_FINAL_SIZE = radarFinalSize;
export const RADAR_SOURCE_SIZE = radarSourceSize;
export const RADAR_OFFSET = radarOffset;
export const RADAR_SHIFT = radarShift;

12
server/scripts/modules/radar-processor.mjs
View File

@@ -1,5 +1,5 @@
import { removeDopplerRadarImageNoise } from './radar-utils.mjs';
import { RADAR_FULL_SIZE, RADAR_FINAL_SIZE } from './radar-constants.mjs';
import { RADAR_FULL_SIZE, RADAR_FINAL_SIZE, RADAR_SOURCE_SIZE } from './radar-constants.mjs';
// process a single radar image and place it on the provided canvas
const processRadar = async (data) => {
@@ -13,8 +13,8 @@ const processRadar = async (data) => {
// calculate offsets and sizes
const radarSource = {
width: 240,
height: 163,
width: RADAR_SOURCE_SIZE().width,
height: RADAR_SOURCE_SIZE().height,
x: Math.round(radarSourceXY.x / 2),
y: Math.round(radarSourceXY.y / 2),
};
@@ -52,11 +52,11 @@ const processRadar = async (data) => {
// stretch the radar image
const stretchCanvas = document.createElement('canvas');
stretchCanvas.width = RADAR_FINAL_SIZE.width;
stretchCanvas.height = RADAR_FINAL_SIZE.height;
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);
stretchContext.drawImage(croppedRadarCanvas, 0, 0, radarSource.width, radarSource.height, 0, 0, RADAR_FINAL_SIZE().width, RADAR_FINAL_SIZE().height);
return stretchCanvas.toDataURL();
};

4
server/scripts/modules/radar-tiles.mjs
View File

@@ -46,8 +46,8 @@ const setTiles = (data) => {
// determine which tiles are used
const usedTiles = [
true,
TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE.width,
TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE.width,
TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE().width,
TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE().width,
];
// if we need t[1] and t[2] then we also need t[3]
usedTiles.push(usedTiles[1] && usedTiles[2]);

16
server/scripts/modules/radar-utils.mjs
View File

@@ -1,4 +1,6 @@
import { TILE_SIZE, TILE_FULL_SIZE } from './radar-constants.mjs';
import {
TILE_SIZE, TILE_FULL_SIZE, RADAR_OFFSET, RADAR_SHIFT,
} from './radar-constants.mjs';
// limit a value to within a range
const coerce = (low, value, high) => Math.max(Math.min(value, high), low);
@@ -9,16 +11,16 @@ const getXYFromLatitudeLongitudeMap = (pos) => {
// 589 466 -122.3615246 47.63177832
// 5288 3638 -80.18297384 25.77018996
// map position is calculated as a regresion from the above values (=/- a manual adjustment factor)
// map position is calculated as a regresion from the above values (+/- a manual adjustment factor) and shifting for enhanced views
// then shifted by half of the tile size (to center the map)
// then they are limited to values between 0 and the width or height of the map
const y = coerce(0, (-145.095 * pos.latitude + 7377.117) - 27 - (TILE_SIZE.y / 2), TILE_FULL_SIZE.y - (TILE_SIZE.y));
const x = coerce(0, (111.407 * pos.longitude + 14220.972) + 4 - (TILE_SIZE.x / 2), TILE_FULL_SIZE.x - (TILE_SIZE.x));
const y = coerce(0, (-145.095 * pos.latitude + 7377.117) - 27 - (TILE_SIZE.y / 2) - RADAR_SHIFT().y, TILE_FULL_SIZE.y - (TILE_SIZE.y));
const x = coerce(0, (111.407 * pos.longitude + 14220.972) + 4 - (TILE_SIZE.x / 2) - RADAR_SHIFT().x, TILE_FULL_SIZE.x - (TILE_SIZE.x));
return { x, y };
};
const getXYFromLatitudeLongitudeDoppler = (pos, offsetX, offsetY) => {
const getXYFromLatitudeLongitudeDoppler = (pos) => {
const imgHeight = 6000;
const imgWidth = 2800;
@@ -26,8 +28,8 @@ const getXYFromLatitudeLongitudeDoppler = (pos, offsetX, offsetY) => {
// then shifted by half of the tile size (to center the map)
// then they are limited to values between 0 and the width or height of the map
const y = coerce(0, (51 - pos.latitude) * 61.4481 - offsetY, imgHeight);
const x = coerce(0, ((-129.138 - pos.longitude) * 42.1768) * -1 - offsetX, imgWidth);
const y = coerce(0, (51 - pos.latitude) * 61.4481 - RADAR_OFFSET().y, imgHeight);
const x = coerce(0, ((-129.138 - pos.longitude) * 42.1768) * -1 - RADAR_OFFSET().x, imgWidth);
return { x: x * 2, y: y * 2 };
};

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

@@ -128,10 +128,8 @@ class Radar extends WeatherDisplay {
const urls = sortedPngs.slice(-(this.dopplerRadarImageMax));
// calculate offsets and sizes
const offsetX = 120 * 2;
const offsetY = 69 * 2;
const sourceXY = utils.getXYFromLatitudeLongitudeMap(this.weatherParameters);
const radarSourceXY = utils.getXYFromLatitudeLongitudeDoppler(this.weatherParameters, offsetX, offsetY);
const radarSourceXY = utils.getXYFromLatitudeLongitudeDoppler(this.weatherParameters);
// set up the base map and overlay tiles
setTiles({

82
views/partials/radar.ejs
View File

@@ -1,45 +1,45 @@
<div class="header">
<div class="logo"><img src="images/logos/logo-corner.png" /></div>
<div class="title dual">
<div class="top">
Local
</div>
<div class="bottom">
Radar
</div>
</div>
<div class="right">
<div class="precip">
<div class="precip-header">PRECIP</div>
<div class="scale">
<div class="text">Light</div>
<div class="scale-table">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
<div class="box box-6"></div>
<div class="box box-7"></div>
<div class="box box-7"></div>
</div>
<div class="text">Heavy</div>
</div>
<div class="time"></div>
</div>
</div>
<div class="logo"><img src="images/logos/logo-corner.png" /></div>
<div class="title dual">
<div class="top">
Local
</div>
<div class="bottom">
Radar
</div>
</div>
<div class="right">
<div class="precip">
<div class="precip-header">PRECIP</div>
<div class="scale">
<div class="text">Light</div>
<div class="scale-table">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
<div class="box box-6"></div>
<div class="box box-7"></div>
<div class="box box-7"></div>
</div>
<div class="text">Heavy</div>
</div>
<div class="time"></div>
</div>
</div>
</div>
<div class="main radar">
<div class="container">
<div class="map-tiles tiles"><img/><img/><img/><img/></div>
<div class="scroll-area">
<div class="frame template">
<div class="map">
<img/>
</div>
</div>
</div>
<div class="overlay-tiles tiles"><img/><img/><img/><img/></div>
</div>
<div class="main radar can-enhance">
<div class="container">
<div class="map-tiles tiles"><img /><img /><img /><img /></div>
<div class="scroll-area">
<div class="frame template">
<div class="map">
<img />
</div>
</div>
</div>
<div class="overlay-tiles tiles"><img /><img /><img /><img /></div>
</div>
</div>