bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract constants for different maps

Browse Source
This commit is contained in:
Guntis Smaukstelis
2024-02-08 15:25:51 +02:00
parent f9f05b2a78
commit b631c039c0
3 changed files with 109 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/cities/map/MapView.tsx
+5 -94
View File
@@ -1,34 +1,12 @@
import { Component, createEffect, createSignal, onMount } from "solid-js";
import { ResultKeyVal } from "../../consts";
import { drawRotatedImage, getAngleFromString } from "./windAngles";
import { WindInputs, WindSignals } from "./WindInputs";
import map_1920x1080 from "../../assets/map_1920x1080.webp";
import map_1920x1080_wind from "../../assets/map_1920x1080_wind.webp";
import map_3840x1440 from "../../assets/map_3840x1440.webp";
import map_3840x1440_wind from "../../assets/map_3840x1440_wind.webp";
import arrowUrl from "../../assets/arrow.webp";
import { cityCoords } from "../../components/cityCoords";
type MapResolution = "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";
type ResolutionPropsValue = {
offsetX: number;
offsetY: number;
width: number;
height: number;
scale: number;
showWind: boolean;
map: string;
};
const resolutionProps: Record<string, ResolutionPropsValue> = {
"map_1920x1080": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: false, map: map_1920x1080 },
"map_1920x1080_wind": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: true, map: map_1920x1080_wind },
"map_3840x1440": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, showWind: false, map: map_3840x1440 },
"map_3840x1440_wind": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, showWind: true, map: map_3840x1440_wind },
}
import { MapResolution, resolutionProps, ResolutionPropsValue, windProps, WindProps } from "./mapConsts";
import { drawOnMap } from "./canvasDraw";
export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => {
const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
@@ -46,12 +24,13 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
roundValues: createSignal(false),
}
function getWindData(): [string, string, string, boolean] {
function getWindData(): [string, string, string, boolean, WindProps] {
return [
windSignals.direction[0](),
windSignals.speed[0](),
windSignals.gusts[0](),
windSignals.roundValues[0](),
windProps[type],
];
}
@@ -91,7 +70,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
return (
<>
<WindInputs signals={windSignals} />
{ props.showWind && <WindInputs signals={windSignals} /> }
<canvas
ref={setCanvas}
width={props.width+"px"}
@@ -101,71 +80,3 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
</>
);
}
function drawOnMap(
ctx: CanvasRenderingContext2D,
imgArr: [HTMLImageElement, HTMLImageElement],
coords: [string, {x: number, y: number }, number][],
windData: [string, string, string, boolean],
props: ResolutionPropsValue,
): void {
const boxSize = 80;
const [windDirection, windSpeed, windGusts, roundValues] = windData;
const [bgImg, arrowImg] = imgArr;
// bg
ctx.drawImage(bgImg, 0, 0);
// city boxes
ctx.fillStyle = "#FFFFFF";
coords.forEach(([, {x, y}, value]) => {
const localX = props.offsetX + x * props.scale;
const localY = props.offsetY + y * props.scale;
ctx.beginPath();
ctx.fillStyle = "#FFFFFF";
ctx.rect(localX-boxSize/2, localY-boxSize/2, boxSize, boxSize);
ctx.fill();
});
ctx.fill();
// weather values
ctx.font = "bold 30px Rubik";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
coords.forEach(([, {x, y}, value]) => {
const localX = props.offsetX + x * props.scale;
const localY = props.offsetY + y * props.scale;
ctx.fillStyle = "#000000";
const numericValue = roundValues ? Math.round(value) : value;
const stringValue = numericValue.toString().replace(".", ",");
ctx.fillText(stringValue, localX, localY);
});
if (!props.showWind) return;
// wind values
ctx.font = "bold 45px Rubik";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillStyle = "#FFFFFF";
const boxMiddleX = 1675;
const directionWidth = ctx.measureText(windDirection).width;
ctx.fillText(windDirection, boxMiddleX - directionWidth / 2 + 30, 370);
const angleInDegrees = getAngleFromString(windDirection);
drawRotatedImage(ctx, arrowImg, boxMiddleX - directionWidth / 2 - 30, 370, angleInDegrees);
const speedWidth = ctx.measureText(windSpeed).width;
ctx.fillText(windSpeed, boxMiddleX - speedWidth / 2 - 30, 575);
ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", boxMiddleX + speedWidth / 2 - 22, 590);
ctx.font = "bold 45px Rubik";
const gustsWidth = ctx.measureText(windGusts).width;
ctx.fillText(windGusts, boxMiddleX - gustsWidth / 2 - 30, 790);
ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", boxMiddleX + gustsWidth / 2 - 22, 805);
}
web/src/cities/map/canvasDraw.ts
+70
View File
@@ -0,0 +1,70 @@
import { ResolutionPropsValue, WindProps, windProps } from "./mapConsts";
import { drawRotatedImage, getAngleFromString } from "./windAngles";
export function drawOnMap(
ctx: CanvasRenderingContext2D,
imgArr: [HTMLImageElement, HTMLImageElement],
coords: [string, {x: number, y: number }, number][],
windData: [string, string, string, boolean, WindProps],
props: ResolutionPropsValue,
): void {
const boxSize = 80;
const [windDirection, windSpeed, windGusts, roundValues, windProp] = windData;
const [bgImg, arrowImg] = imgArr;
// bg
ctx.drawImage(bgImg, 0, 0);
// city boxes
ctx.fillStyle = "#FFFFFF";
coords.forEach(([, {x, y}, value]) => {
const localX = props.offsetX + x * props.scale;
const localY = props.offsetY + y * props.scale;
ctx.beginPath();
ctx.fillStyle = "#FFFFFF";
ctx.rect(localX-boxSize/2, localY-boxSize/2, boxSize, boxSize);
ctx.fill();
});
ctx.fill();
// weather values
ctx.font = "bold 30px Rubik";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
coords.forEach(([, {x, y}, value]) => {
const localX = props.offsetX + x * props.scale;
const localY = props.offsetY + y * props.scale;
ctx.fillStyle = "#000000";
const numericValue = roundValues ? Math.round(value) : value;
const stringValue = numericValue.toString().replace(".", ",");
ctx.fillText(stringValue, localX, localY);
});
if (!props.showWind) return;
// wind values
ctx.font = "bold 45px Rubik";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillStyle = "#FFFFFF";
const boxMiddleX = 1675;
const directionWidth = ctx.measureText(windDirection).width;
ctx.fillText(windDirection, windProp.offsetX + boxMiddleX - directionWidth / 2 + 30, (windProp.offsetY + 370)*windProp.scaleY);
const angleInDegrees = getAngleFromString(windDirection);
drawRotatedImage(ctx, arrowImg, windProp.offsetX + boxMiddleX - directionWidth / 2 - 30, (windProp.offsetY + 370)*windProp.scaleY, angleInDegrees);
const speedWidth = ctx.measureText(windSpeed).width;
ctx.fillText(windSpeed, windProp.offsetX + boxMiddleX - speedWidth / 2 - 30, (windProp.offsetY + 575)*windProp.scaleY);
ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", windProp.offsetX + boxMiddleX + speedWidth / 2 - 22, (windProp.offsetY + 590)*windProp.scaleY);
ctx.font = "bold 45px Rubik";
const gustsWidth = ctx.measureText(windGusts).width;
ctx.fillText(windGusts, windProp.offsetX + boxMiddleX - gustsWidth / 2 - 30, (windProp.offsetY + 790)*windProp.scaleY);
ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", windProp.offsetX + boxMiddleX + gustsWidth / 2 - 22, (windProp.offsetY + 805)*windProp.scaleY);
}
web/src/cities/map/mapConsts.ts
+34
View File
@@ -0,0 +1,34 @@
import map_1920x1080 from "../../assets/map_1920x1080.webp";
import map_1920x1080_wind from "../../assets/map_1920x1080_wind.webp";
import map_3840x1440 from "../../assets/map_3840x1440.webp";
import map_3840x1440_wind from "../../assets/map_3840x1440_wind.webp";
export type MapResolution = "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";
export type ResolutionPropsValue = {
offsetX: number;
offsetY: number;
width: number;
height: number;
scale: number;
showWind: boolean;
map: string;
};
export const resolutionProps: Record<string, ResolutionPropsValue> = {
"map_1920x1080": { offsetX: 290, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: false, map: map_1920x1080 },
"map_1920x1080_wind": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: true, map: map_1920x1080_wind },
"map_3840x1440": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, showWind: false, map: map_3840x1440 },
"map_3840x1440_wind": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, showWind: true, map: map_3840x1440_wind },
}
export type WindProps = {
offsetX: number;
offsetY: number;
scaleY: number;
};
export const windProps: Record<string, WindProps> = {
"map_1920x1080_wind": { offsetX: 0, offsetY: 0, scaleY: 1, },
"map_3840x1440_wind": { offsetX: 1610, offsetY: 80, scaleY: 1.24, },
}