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

Use approved production map and branding assets

Browse Source
This commit is contained in:
b0txec
2026-08-20 22:23:23 +03:00
parent 568d880d3b
commit 16a8c685e7
20 changed files with 290 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/map/canvasDraw.ts
+73 -8
View File
@@ -1,6 +1,7 @@
import { ResolutionPropsValue, WindProps, windProps } from "./mapConsts";
import { drawRotatedImage, getAngleFromString } from "./windAngles";
import { faktiskaMarkerLayout, FaktiskaStation } from "../../pages/map-graphics/faktiskaConfig";
import { faktiskaTemplates, FaktiskaTemplate } from "../../pages/map-graphics/faktiskaTemplates";
import { getLoadedWeatherIcon } from "../weatherIcons/weatherIconAssets";
// cityName, {x, y}, weatherValue, icon
@@ -18,12 +19,15 @@ export function drawOnMap(
const [windDirection, windSpeed, windGusts, roundValues, windProp] = windData;
const [bgImg, arrowImg] = imgArr;
const [title, source] = overlayData;
const template = productionTemplate
? faktiskaTemplates[(props.width === 1920 ? "faktiska_1920x1080" : "faktiska_3840x1440") as FaktiskaTemplate]
: undefined;
// bg
ctx.drawImage(bgImg, 0, 0);
// City value badges use a consistent height and expand horizontally to fit the value.
cityData.forEach(([, {x, y}, value]) => {
if (!template) cityData.forEach(([, {x, y}, value]) => {
const localX = props.offsetX + x * props.scale;
const localY = props.offsetY + y * props.scale;
const numericValue = roundValues ? Math.round(value) : value.toFixed(1);
@@ -37,8 +41,9 @@ export function drawOnMap(
// weather values
cityData.forEach(([city, {x, y}, value, icon]) => {
const localX = props.offsetX + x * props.scale;
const localY = props.offsetY + y * props.scale;
const fixedMarker = template?.markers[city as FaktiskaStation];
const localX = fixedMarker?.x ?? props.offsetX + x * props.scale;
const localY = fixedMarker?.y ?? props.offsetY + y * props.scale;
ctx.font = `bold ${props.fontSize}px Monda`;
ctx.textAlign = "center";
@@ -51,13 +56,13 @@ export function drawOnMap(
if (icon) {
const iconImage = getLoadedWeatherIcon(icon);
if (!iconImage) return;
const iconSize = productionTemplate ? 190 : props.boxSize * 1.35;
const badgeWidth = getBadgeWidth(ctx, stringValue, props);
const iconSize = template?.iconSize ?? props.boxSize * 1.35;
const badgeWidth = template?.badgeSize ?? getBadgeWidth(ctx, stringValue, props);
if (productionTemplate) {
const layout = faktiskaMarkerLayout[city as FaktiskaStation];
const side = layout?.iconSide ?? "right";
const gap = layout?.iconGap ?? 22;
const gap = layout?.iconGap ?? template!.iconGap;
const offsetX = layout?.iconOffsetX ?? 0;
const offsetY = layout?.iconOffsetY ?? 0;
const iconCenterX = side === "right"
@@ -70,11 +75,16 @@ export function drawOnMap(
}
});
drawTitleOverlay(ctx, title, source, props.width);
if (!template) drawTitleOverlay(ctx, title, source, props.width);
if (!props.showWind) return;
// wind values
if (template) {
drawFaktiskaWind(ctx, arrowImg, windDirection, windSpeed, windGusts, template);
return;
}
// generic wind values
ctx.font = `bold ${props.windFontSize}px Monda`;
ctx.textAlign = "left";
ctx.textBaseline = "top";
@@ -98,6 +108,61 @@ export function drawOnMap(
ctx.fillText("M/S", windProp.offsetX + boxMiddleX + gustsWidth / 2 - 22, (windProp.offsetY + 805)*windProp.scaleY);
}
function drawFaktiskaWind(
ctx: CanvasRenderingContext2D,
arrowImg: HTMLImageElement,
direction: string,
speed: string,
gusts: string,
template: (typeof faktiskaTemplates)[FaktiskaTemplate],
) {
const { wind } = template;
ctx.fillStyle = "#FFFFFF";
ctx.textBaseline = "middle";
if (direction.trim()) {
ctx.font = `bold ${wind.fontSize}px Monda`;
const label = direction.trim().toUpperCase();
const labelWidth = ctx.measureText(label).width;
const gap = wind.arrowSize * 0.28;
const groupWidth = wind.arrowSize + gap + labelWidth;
const arrowX = wind.x - groupWidth / 2 + wind.arrowSize / 2;
const labelX = wind.x + groupWidth / 2 - labelWidth / 2;
drawScaledRotatedImage(ctx, arrowImg, arrowX, wind.directionY, wind.arrowSize, getAngleFromString(label));
ctx.textAlign = "center";
ctx.fillText(label, labelX, wind.directionY);
}
drawWindMeasurement(ctx, speed, wind.x, wind.speedY, wind.fontSize, wind.unitFontSize);
drawWindMeasurement(ctx, gusts, wind.x, wind.gustsY, wind.fontSize, wind.unitFontSize);
}
function drawScaledRotatedImage(ctx: CanvasRenderingContext2D, image: HTMLImageElement, centerX: number, centerY: number, size: number, angleInDegrees: number) {
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angleInDegrees * Math.PI / 180);
ctx.drawImage(image, -size / 2, -size / 2, size, size);
ctx.restore();
}
function drawWindMeasurement(ctx: CanvasRenderingContext2D, value: string, x: number, y: number, fontSize: number, unitFontSize: number) {
if (!value.trim()) return;
const label = value.trim();
ctx.font = `bold ${fontSize}px Monda`;
const valueWidth = ctx.measureText(label).width;
ctx.font = `bold ${unitFontSize}px Monda`;
const unit = "M/S";
const unitWidth = ctx.measureText(unit).width;
const gap = unitFontSize * 0.45;
const totalWidth = valueWidth + gap + unitWidth;
const startX = x - totalWidth / 2;
ctx.textAlign = "left";
ctx.font = `bold ${fontSize}px Monda`;
ctx.fillText(label, startX, y);
ctx.font = `bold ${unitFontSize}px Monda`;
ctx.fillText(unit, startX + valueWidth + gap, y + fontSize * 0.12);
}
function getBadgeWidth(ctx: CanvasRenderingContext2D, value: string, props: ResolutionPropsValue): number {
ctx.font = `bold ${props.fontSize}px Monda`;
return Math.max(props.boxSize, Math.ceil(ctx.measureText(value).width + props.fontSize * 0.8));