radar expanded, to do fix number of tiles

server/scripts/modules/radar-constants.mjs

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

server/scripts/modules/radar-processor.mjs

@@ -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,
+		width: RADAR_SOURCE_SIZE().width,
-		height: 163,
+		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.width = RADAR_FINAL_SIZE().width;
-	stretchCanvas.height = RADAR_FINAL_SIZE.height;
+	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();
 };

server/scripts/modules/radar-tiles.mjs

@@ -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.x - tileShift.x < RADAR_FINAL_SIZE().width,
-		TILE_SIZE.y - tileShift.y < 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]);

server/scripts/modules/radar-utils.mjs

@@ -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 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), TILE_FULL_SIZE.x - (TILE_SIZE.x));
+	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 y = coerce(0, (51 - pos.latitude) * 61.4481 - RADAR_OFFSET().y, imgHeight);
-	const x = coerce(0, ((-129.138 - pos.longitude) * 42.1768) * -1 - offsetX, imgWidth);
+	const x = coerce(0, ((-129.138 - pos.longitude) * 42.1768) * -1 - RADAR_OFFSET().x, imgWidth);
 
 	return { x: x * 2, y: y * 2 };
 };

server/scripts/modules/radar.mjs

@@ -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({

views/partials/radar.ejs

@@ -30,7 +30,7 @@
   </div>
 </div>
 
-<div class="main radar">
+<div class="main radar can-enhance">
   <div class="container">
     <div class="map-tiles tiles"><img /><img /><img /><img /></div>
     <div class="scroll-area">