From 38a3d1ccc36808673bf6d24a114ca32067b4ef5d Mon Sep 17 00:00:00 2001 From: Guntis Smaukstelis Date: Fri, 28 Feb 2025 13:01:08 +0200 Subject: [PATCH] Refactor crop bounds --- web/src/harmonie/DrawView.tsx | 6 ++--- web/src/harmonie/ReferenceTimes.tsx | 3 +-- web/src/harmonie/draw/bounds.ts | 3 +-- web/src/harmonie/draw/drawGrib.ts | 8 +++--- web/src/harmonie/draw/windDirection.ts | 35 +++++++++++++------------- web/src/harmonie/interfaces.ts | 3 +++ 6 files changed, 27 insertions(+), 31 deletions(-) diff --git a/web/src/harmonie/DrawView.tsx b/web/src/harmonie/DrawView.tsx index 3e0d1de..416a41c 100644 --- a/web/src/harmonie/DrawView.tsx +++ b/web/src/harmonie/DrawView.tsx @@ -1,11 +1,9 @@ -import { Component, createEffect, createSignal, Signal } from 'solid-js' +import { Component, createEffect, Signal } from 'solid-js' import { LoadingSpinner } from '../components/LoadingSpinner' -import { DrawOptions, GribMessage } from './interfaces' +import { CROP_BOUNDS, DrawOptions, GribMessage } from './interfaces' import { drawGrib } from './draw/drawGrib' -export const CROP_BOUNDS = { x: 1906-1-440, y: 895, width: 440, height: 380 } - export const DrawView: Component<{ isLoadingSignal: Signal, options: DrawOptions; diff --git a/web/src/harmonie/ReferenceTimes.tsx b/web/src/harmonie/ReferenceTimes.tsx index b897b5e..ef59774 100644 --- a/web/src/harmonie/ReferenceTimes.tsx +++ b/web/src/harmonie/ReferenceTimes.tsx @@ -1,9 +1,8 @@ import { Accessor, Component, createSignal, Setter, Signal } from 'solid-js' -import { DrawOptions, GribMessage, MeteoParam } from './interfaces' +import { CROP_BOUNDS, DrawOptions, GribMessage, MeteoParam } from './interfaces' import { fetchGribBinaries } from './fetchGrib' import { drawGrib } from './draw/drawGrib' -import { CROP_BOUNDS } from './DrawView' import styles from './harmonie.module.css' import { processPromisesInBatches } from '../helpers/progressivePromises' diff --git a/web/src/harmonie/draw/bounds.ts b/web/src/harmonie/draw/bounds.ts index 96d6ff1..a7cab4c 100644 --- a/web/src/harmonie/draw/bounds.ts +++ b/web/src/harmonie/draw/bounds.ts @@ -1,5 +1,4 @@ -import { GribMessage } from '../interfaces' -import { CropBounds } from './drawGrib' +import { CropBounds, GribMessage } from '../interfaces' export function extractFromBounds( grib: GribMessage, diff --git a/web/src/harmonie/draw/drawGrib.ts b/web/src/harmonie/draw/drawGrib.ts index 4fa1194..142097b 100644 --- a/web/src/harmonie/draw/drawGrib.ts +++ b/web/src/harmonie/draw/drawGrib.ts @@ -1,5 +1,5 @@ import { interpolateColors } from '../../helpers/interpolateColors' -import { GribMessage, MeteoParam } from '../interfaces' +import { CropBounds, GribMessage, MeteoParam } from '../interfaces' import { applyBitmask } from './bitmask' import { extractFromBounds } from './bounds' import { categoricalRainColors } from './categoricalRain' @@ -12,8 +12,6 @@ const latviaBoderImg = new Image() latviaBoderImg.onload = () => console.log('latvia_contour loaded...') latviaBoderImg.src = latvia_border -export type CropBounds = { x: number, y: number, width: number, height: number } - /* * final cropped size should be 1365x576px - divided by 3 (455x192) or 3.5 (390x165) * image should be rotade 26 degrees @@ -70,7 +68,7 @@ export function drawGrib( ctx.restore() if (cropBounds) { - drawRotate(canvas, ctx, isInterpolated) + drawRotate(canvas, ctx, cropBounds.angle, isInterpolated) } if (isContour && cropBounds) { @@ -161,8 +159,8 @@ function fillImageData( function drawRotate( canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, + angleDegrees: number, isInterpolated = false, - angleDegrees = 26, ) { const tempCanvas = document.createElement('canvas') tempCanvas.width = canvas.width diff --git a/web/src/harmonie/draw/windDirection.ts b/web/src/harmonie/draw/windDirection.ts index be1dc9d..61abb7c 100644 --- a/web/src/harmonie/draw/windDirection.ts +++ b/web/src/harmonie/draw/windDirection.ts @@ -5,12 +5,11 @@ import { GribMessage, MeteoConversion } from '../interfaces' import { WIND_SPEED } from './constants' import { rotateWind } from './windRotate' -const CELL_SIZE = 12 - export function windDirectionArrows( imgData: ImageData, messages: GribMessage[], buffers: Uint8Array[], + cellSize = 16, ) { const [, metaU, metaV] = messages const { conversion: convU } = metaU @@ -52,17 +51,17 @@ export function windDirectionArrows( } } - const gridH = Math.floor(directions.length/CELL_SIZE) - const gridW = Math.floor(directions[0].length/CELL_SIZE) + const gridH = Math.floor(directions.length/cellSize) + const gridW = Math.floor(directions[0].length/cellSize) for (let row = 0; row < gridH; row++) { for (let col = 0; col < gridW; col++) { const directionAvg = true - ? getAvgDirection(directions, row, col) - : getDirection(directions, row, col) + ? getAvgDirection(directions, row, col, cellSize) + : getDirection(directions, row, col, cellSize) - const centerX = col * CELL_SIZE + CELL_SIZE/2 - const centerY = row * CELL_SIZE + CELL_SIZE/2 - const arrowLength = CELL_SIZE*0.9 + const centerX = col * cellSize + cellSize/2 + const centerY = row * cellSize + cellSize/2 + const arrowLength = cellSize*0.9 ctx.save() ctx.translate(centerX, centerY) @@ -73,7 +72,7 @@ export function windDirectionArrows( ctx.lineTo(arrowLength / 2, 0) ctx.stroke() - const arrowheadSize = CELL_SIZE/4 + const arrowheadSize = cellSize/3.5 ctx.beginPath() ctx.moveTo(arrowLength / 2, 0) ctx.lineTo(arrowLength / 2 - arrowheadSize, -arrowheadSize / 2) @@ -88,21 +87,21 @@ export function windDirectionArrows( return ctx.getImageData(0, 0, imgData.width, imgData.height) } -function getDirection(directions: number[][], gridRow: number, gridCol: number) { - const directionRow = gridRow * CELL_SIZE + Math.round(CELL_SIZE/2) - const directionCol = gridCol * CELL_SIZE + Math.round(CELL_SIZE/2) +function getDirection(directions: number[][], gridRow: number, gridCol: number, cellSize: number) { + const directionRow = gridRow * cellSize + Math.round(cellSize/2) + const directionCol = gridCol * cellSize + Math.round(cellSize/2) return directions[directionRow][directionCol] } // in radians -function getAvgDirection(directions: number[][], gridRow: number, gridCol: number) { +function getAvgDirection(directions: number[][], gridRow: number, gridCol: number, cellSize: number) { let sumSin = 0; // Sum of sine components let sumCos = 0; // Sum of cosine components - for (let row = 0; row < CELL_SIZE; row++) { - for (let col = 0; col < CELL_SIZE; col++) { - const directionRow = gridRow * CELL_SIZE + row; - const directionCol = gridCol * CELL_SIZE + col; + for (let row = 0; row < cellSize; row++) { + for (let col = 0; col < cellSize; col++) { + const directionRow = gridRow * cellSize + row; + const directionCol = gridCol * cellSize + col; const directionRad = directions[directionRow][directionCol] diff --git a/web/src/harmonie/interfaces.ts b/web/src/harmonie/interfaces.ts index b86de46..ccde95a 100644 --- a/web/src/harmonie/interfaces.ts +++ b/web/src/harmonie/interfaces.ts @@ -51,3 +51,6 @@ export type DrawOptions = { getIsContour: Accessor, getIsInterpolated: Accessor, } + +export const CROP_BOUNDS = { x: 1906-1-440, y: 895, width: 440, height: 380, angle: 26 } +export type CropBounds = typeof CROP_BOUNDS