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/MapView.tsx
+3 -3
View File
@@ -94,12 +94,12 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
function downloadPng() {
const canvas = getCanvas()!;
if (productionTemplate && (canvas.width !== 3840 || canvas.height !== 1440)) {
console.error(`Faktiskā export blocked: expected 3840 × 1440, received ${canvas.width} × ${canvas.height}`);
if (productionTemplate && (canvas.width !== props.width || canvas.height !== props.height)) {
console.error(`Faktiskā export blocked: expected ${props.width} × ${props.height}, received ${canvas.width} × ${canvas.height}`);
return;
}
const filename = productionTemplate ? "faktiska-3840x1440.png" : `weather-${type}.png`;
const filename = productionTemplate ? `faktiska-${props.width}x${props.height}.png` : `weather-${type}.png`;
canvas.toBlob(blob => blob && download(blob, filename), 'image/png')
}
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));
web/src/components/map/mapConsts.ts
+6 -1
View File
@@ -2,8 +2,9 @@ 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 { faktiskaTemplates } from "../../pages/map-graphics/faktiskaTemplates";
export type MapResolution = "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";
export type MapResolution = "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind" | "faktiska_1920x1080" | "faktiska_3840x1440";
export type ResolutionPropsValue = {
offsetX: number;
@@ -23,6 +24,8 @@ export const resolutionProps: Record<string, ResolutionPropsValue> = {
"map_1920x1080_wind": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, fontSize: 30, boxSize: 80, showWind: true, map: map_1920x1080_wind, windFontSize: 45, },
"map_3840x1440": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, fontSize: 68, boxSize: 140, showWind: false, map: map_3840x1440, windFontSize: 60, },
"map_3840x1440_wind": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, fontSize: 68, boxSize: 140, showWind: true, map: map_3840x1440_wind, windFontSize: 60, },
"faktiska_1920x1080": { offsetX: 0, offsetY: 0, width: 1920, height: 1080, scale: 1, fontSize: faktiskaTemplates.faktiska_1920x1080.fontSize, boxSize: faktiskaTemplates.faktiska_1920x1080.badgeSize, showWind: true, map: faktiskaTemplates.faktiska_1920x1080.map, windFontSize: faktiskaTemplates.faktiska_1920x1080.wind.fontSize },
"faktiska_3840x1440": { offsetX: 0, offsetY: 0, width: 3840, height: 1440, scale: 1, fontSize: faktiskaTemplates.faktiska_3840x1440.fontSize, boxSize: faktiskaTemplates.faktiska_3840x1440.badgeSize, showWind: true, map: faktiskaTemplates.faktiska_3840x1440.map, windFontSize: faktiskaTemplates.faktiska_3840x1440.wind.fontSize },
}
export type WindProps = {
@@ -34,4 +37,6 @@ export type WindProps = {
export const windProps: Record<string, WindProps> = {
"map_1920x1080_wind": { offsetX: 0, offsetY: 0, scaleY: 1, },
"map_3840x1440_wind": { offsetX: 1610, offsetY: 75, scaleY: 1.24, },
"faktiska_1920x1080": { offsetX: 0, offsetY: 0, scaleY: 1 },
"faktiska_3840x1440": { offsetX: 0, offsetY: 0, scaleY: 1 },
}