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/index.html
+19 -4
View File
@@ -1,12 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<html lang="lv">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<meta name="theme-color" content="#eaf4ff" />
<meta name="description" content="Laikapstākļu datu un ētera grafiku sagatavošanas rīks." />
<meta property="og:type" content="website" />
<meta property="og:locale" content="lv_LV" />
<meta property="og:url" content="https://laikapstak.li/" />
<meta property="og:title" content="Laikapstākļi" />
<meta property="og:description" content="Laikapstākļu datu un ētera grafiku sagatavošanas rīks." />
<meta property="og:image" content="https://laikapstak.li/social-preview.png" />
<meta property="og:image:width" content="953" />
<meta property="og:image:height" content="898" />
<meta property="og:image:alt" content="Laikapstākļi" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Laikapstākļi" />
<meta name="twitter:description" content="Laikapstākļu datu un ētera grafiku sagatavošanas rīks." />
<meta name="twitter:image" content="https://laikapstak.li/social-preview.png" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="preload" href="/src/assets/Rubik-Medium.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
<title><{ VITE_APP_TITLE }></title>
<title>Laikapstākļi</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
web/public/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

web/public/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

web/public/social-preview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

web/src/assets/production/FAKTISKA_map_base_1920.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

web/src/assets/production/FAKTISKA_map_base_3840.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 MiB

web/src/assets/production/UDENS_KARTE_PAMATS_1920.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

web/src/assets/production/UDENS_KARTE_PAMATS_3840.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 MiB

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 },
}
web/src/pages/map-graphics/MapGraphics.tsx
+13 -2
View File
@@ -3,6 +3,7 @@ import { MapView } from "../../components/map/MapView";
import { apiHost, ResultKeyVal } from "../../consts";
import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
import { faktiskaExport, faktiskaStations, FaktiskaStation } from "./faktiskaConfig";
import type { FaktiskaTemplate } from "./faktiskaTemplates";
import "./mapGraphics.css";
type LatestTemperature = { city: FaktiskaStation; observedAt: string; value: number | null };
@@ -13,6 +14,10 @@ const emptyValues = (): Record<FaktiskaStation, string> =>
export function Faktiska() {
const [values, setValues] = createSignal(emptyValues());
const [overrides, setOverrides] = createSignal<Set<FaktiskaStation>>(new Set());
const [template, setTemplate] = createSignal<FaktiskaTemplate>(faktiskaExport.defaultTemplate);
const productionSize = () => template() === "faktiska_1920x1080"
? { width: 1920, height: 1080 }
: { width: 3840, height: 1440 };
const fetchLatest = async (): Promise<LatestTemperature[]> => {
const response = await fetch(`${apiHost}/api/query/latest-temperatures/${faktiskaStations.join(",")}`);
@@ -63,7 +68,7 @@ export function Faktiska() {
return <div class="mapGraphicsPage pageWorkspace faktiskaWorkspace">
<div class="pageHeading">
<div><span class="eyebrow">Daily newsroom production</span><h1>Faktiskā</h1><p>Current temperatures with manually prepared weather symbols and wind.</p></div>
<div class="productionSize">{faktiskaExport.width} × {faktiskaExport.height} PNG</div>
<div class="productionSize">{productionSize().width} × {productionSize().height} PNG</div>
</div>
<section class="faktiskaDataBand">
@@ -87,7 +92,13 @@ export function Faktiska() {
<section class="mapProduction faktiskaProduction">
<h2>2. Add weather symbols and wind, then export</h2>
<MapView type={faktiskaExport.mapType} data={cityData} mode="faktiska" productionTemplate/>
<div class="resolutionChoices faktiskaResolutionChoices" aria-label="Faktiskā export size">
<button classList={{ active: template() === "faktiska_1920x1080" }} onClick={() => setTemplate("faktiska_1920x1080")}>1920 × 1080</button>
<button classList={{ active: template() === "faktiska_3840x1440" }} onClick={() => setTemplate("faktiska_3840x1440")}>3840 × 1440</button>
</div>
<Show when={template()} keyed>{currentTemplate =>
<MapView type={currentTemplate} data={cityData} mode="faktiska" productionTemplate/>
}</Show>
</section>
</div>;
}
web/src/pages/map-graphics/faktiskaConfig.ts
+1 -3
View File
@@ -38,7 +38,5 @@ export const faktiskaMarkerLayout: Record<FaktiskaStation, FaktiskaMarkerLayout>
};
export const faktiskaExport = {
width: 3840,
height: 1440,
mapType: "map_3840x1440_wind" as const,
defaultTemplate: "faktiska_3840x1440" as const,
};
web/src/pages/map-graphics/faktiskaTemplates.ts
+79
View File
@@ -0,0 +1,79 @@
import faktiska1920 from '../../assets/production/FAKTISKA_map_base_1920.png';
import faktiska3840 from '../../assets/production/FAKTISKA_map_base_3840.png';
import type { FaktiskaStation } from './faktiskaConfig';
export type FaktiskaTemplate = 'faktiska_1920x1080' | 'faktiska_3840x1440';
type TemplateDefinition = {
width: number;
height: number;
map: string;
fontSize: number;
badgeSize: number;
iconSize: number;
iconGap: number;
markers: Record<FaktiskaStation, { x: number; y: number }>;
wind: {
x: number;
directionY: number;
speedY: number;
gustsY: number;
fontSize: number;
unitFontSize: number;
arrowSize: number;
};
};
export const faktiskaTemplates: Record<FaktiskaTemplate, TemplateDefinition> = {
faktiska_1920x1080: {
width: 1920,
height: 1080,
map: faktiska1920,
fontSize: 46,
badgeSize: 84,
iconSize: 112,
iconGap: 10,
markers: {
'Liepāja': { x: 167, y: 680 },
'Ventspils': { x: 253, y: 370 },
'Stende': { x: 444, y: 453 },
'Saldus': { x: 426, y: 623 },
'Rīga': { x: 732, y: 459 },
'Jelgava': { x: 763, y: 650 },
'Ainaži': { x: 728, y: 187 },
'Valmiera': { x: 874, y: 283 },
'Madona': { x: 1047, y: 474 },
'Alūksne': { x: 1218, y: 335 },
'Zīlāni': { x: 1027, y: 623 },
'Daugavpils': { x: 1183, y: 781 },
'Rēzekne': { x: 1272, y: 585 },
},
wind: { x: 1663, directionY: 386, speedY: 600, gustsY: 810, fontSize: 45, unitFontSize: 18, arrowSize: 44 },
},
faktiska_3840x1440: {
width: 3840,
height: 1440,
map: faktiska3840,
fontSize: 72,
badgeSize: 134,
iconSize: 190,
iconGap: 14,
markers: {
'Liepāja': { x: 952, y: 1026 },
'Ventspils': { x: 1086, y: 540 },
'Stende': { x: 1388, y: 671 },
'Saldus': { x: 1359, y: 905 },
'Rīga': { x: 1838, y: 681 },
'Jelgava': { x: 1888, y: 979 },
'Ainaži': { x: 1833, y: 253 },
'Valmiera': { x: 2061, y: 404 },
'Madona': { x: 2333, y: 703 },
'Alūksne': { x: 2603, y: 486 },
'Zīlāni': { x: 2301, y: 937 },
'Daugavpils': { x: 2548, y: 1185 },
'Rēzekne': { x: 2686, y: 878 },
},
wind: { x: 3258, directionY: 570, speedY: 830, gustsY: 1090, fontSize: 64, unitFontSize: 25, arrowSize: 64 },
},
};
web/src/pages/map-graphics/mapGraphics.css
+1
View File
@@ -52,6 +52,7 @@
.resetTemperature{grid-area:reset;align-self:start;min-height:0;padding:3px 5px;background:transparent;color:var(--accent-strong);font-family:Inter,sans-serif;font-size:10px}
.inlineNotice{margin:10px 0;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.62)}.inlineNotice.error{color:var(--danger)}
.faktiskaProduction{margin-top:20px}.faktiskaProduction>h2{font-size:22px}
.faktiskaResolutionChoices{display:flex;gap:8px;margin:0 0 14px}.faktiskaResolutionChoices button{min-width:150px}.faktiskaResolutionChoices button.active{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-strong)}
@media(max-width:1450px){.temperatureEditor{grid-template-columns:repeat(5,minmax(150px,1fr))}}
@media(max-width:1050px){.temperatureEditor{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:650px){.faktiskaStatus{align-items:flex-start;flex-direction:column}.temperatureEditor{grid-template-columns:1fr 1fr}}
web/src/pages/water-temperature/WaterTemperature.tsx
+27 -62
View File
@@ -1,7 +1,7 @@
import { createEffect, createSignal, For, onMount } from 'solid-js';
import map1920 from '../../assets/map_1920x1080.webp';
import map3840 from '../../assets/map_3840x1440.webp';
import map1920 from '../../assets/production/UDENS_KARTE_PAMATS_1920.png';
import map3840 from '../../assets/production/UDENS_KARTE_PAMATS_3840.png';
import { download } from '../../helpers/download';
import './waterTemperature.css';
@@ -9,17 +9,22 @@ type OutputSize = '1920x1080' | '3840x1440';
type WaterArea = 'Jūra' | 'Līcis' | 'Kurzeme' | 'Zemgale' | 'Vidzeme' | 'Latgale';
type RangeValue = { min: string; max: string };
const areas: Array<{ name: WaterArea; x: number; y: number }> = [
{ name: 'Jūra', x: 690, y: 720 },
{ name: 'Līcis', x: 1640, y: 455 },
{ name: 'Kurzeme', x: 1275, y: 785 },
{ name: 'Zemgale', x: 1880, y: 920 },
{ name: 'Vidzeme', x: 2235, y: 525 },
{ name: 'Latgale', x: 2540, y: 985 },
];
const areaNames: WaterArea[] = ['Jūra', 'Līcis', 'Kurzeme', 'Zemgale', 'Vidzeme', 'Latgale'];
const layouts: Record<OutputSize, { fontSize: number; positions: Record<WaterArea, { x: number; y: number }> }> = {
'1920x1080': { fontSize: 52, positions: {
'Jūra': { x: 237, y: 439 }, 'Līcis': { x: 815, y: 355 },
'Kurzeme': { x: 601, y: 523 }, 'Zemgale': { x: 981, y: 587 },
'Vidzeme': { x: 1236, y: 397 }, 'Latgale': { x: 1393, y: 673 },
} },
'3840x1440': { fontSize: 88, positions: {
'Jūra': { x: 693, y: 721 }, 'Līcis': { x: 1643, y: 455 },
'Kurzeme': { x: 1274, y: 786 }, 'Zemgale': { x: 1815, y: 914 },
'Vidzeme': { x: 2234, y: 525 }, 'Latgale': { x: 2539, y: 987 },
} },
};
const emptyRanges = (): Record<WaterArea, RangeValue> => Object.fromEntries(
areas.map(({ name }) => [name, { min: '', max: '' }]),
areaNames.map(name => [name, { min: '', max: '' }]),
) as Record<WaterArea, RangeValue>;
export function WaterTemperature() {
@@ -32,7 +37,7 @@ export function WaterTemperature() {
? { width: 3840, height: 1440, map: map3840 }
: { width: 1920, height: 1080, map: map1920 };
const complete = () => areas.every(({ name }) => ranges()[name].min.trim() && ranges()[name].max.trim());
const complete = () => areaNames.every(name => ranges()[name].min.trim() && ranges()[name].max.trim());
const updateRange = (name: WaterArea, key: keyof RangeValue, value: string) => {
setRanges(current => ({ ...current, [name]: { ...current[name], [key]: value } }));
@@ -57,8 +62,7 @@ export function WaterTemperature() {
const ctx = canvas.getContext('2d')!;
ctx.clearRect(0, 0, width, height);
ctx.drawImage(image, 0, 0, width, height);
drawNameplate(ctx, width, height);
drawRanges(ctx, width, height, ranges());
drawRanges(ctx, output(), ranges());
};
onMount(loadBackground);
@@ -74,7 +78,7 @@ export function WaterTemperature() {
return <section class="pageWorkspace waterPage">
<div class="pageHeading waterHeading">
<div><span class="eyebrow">ĒTERA GRAFIKA</span><h1>Ūdens temperatūra</h1><p>Manuāli ievadi temperatūras diapazonus un sagatavo karti eksportam.</p></div>
<span class="selectionCount">{complete() ? '6 diapazoni aizpildīti' : `${areas.filter(({ name }) => ranges()[name].min && ranges()[name].max).length} no 6 aizpildīti`}</span>
<span class="selectionCount">{complete() ? '6 diapazoni aizpildīti' : `${areaNames.filter(name => ranges()[name].min && ranges()[name].max).length} no 6 aizpildīti`}</span>
</div>
<section class="waterSetup" aria-labelledby="water-settings">
@@ -87,7 +91,7 @@ export function WaterTemperature() {
</div>
<div class="waterFields">
<h2>2. Ievadi temperatūras</h2>
<div class="rangeGrid"><For each={areas}>{({ name }) => <fieldset class="rangeField">
<div class="rangeGrid"><For each={areaNames}>{name => <fieldset class="rangeField">
<legend>{name}</legend>
<label><span>No</span><input type="number" step="1" inputmode="numeric" value={ranges()[name].min} onInput={event => updateRange(name, 'min', event.currentTarget.value)} /></label>
<span class="rangeSeparator">...</span>
@@ -104,57 +108,18 @@ export function WaterTemperature() {
</section>;
}
function drawRanges(ctx: CanvasRenderingContext2D, width: number, height: number, values: Record<WaterArea, RangeValue>) {
const scaleX = width / 3840;
const scaleY = height / 1440;
// Backgrounds use their target aspect ratio, but production graphics scale
// uniformly so boxes and type are never stretched vertically or horizontally.
const graphicScale = scaleX;
const fontSize = 88 * graphicScale;
const badgeHeight = 132 * graphicScale;
const padding = 56 * graphicScale;
function drawRanges(ctx: CanvasRenderingContext2D, output: OutputSize, values: Record<WaterArea, RangeValue>) {
const layout = layouts[output];
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = `700 ${fontSize}px Monda`;
ctx.font = `700 ${layout.fontSize}px Monda`;
ctx.fillStyle = '#000';
areas.forEach(({ name, x, y }) => {
areaNames.forEach(name => {
const range = values[name];
if (!range.min.trim() || !range.max.trim()) return;
const text = `${range.min}...${range.max}`;
const localX = x * scaleX;
const localY = y * scaleY;
const badgeWidth = Math.max(300 * scaleX, ctx.measureText(text).width + padding * 2);
ctx.fillStyle = '#f4f4f4';
ctx.fillRect(localX - badgeWidth / 2, localY - badgeHeight / 2, badgeWidth, badgeHeight);
ctx.fillStyle = '#000';
ctx.fillText(text, localX, localY + 2 * scaleY);
const { x, y } = layout.positions[name];
ctx.fillText(text, x, y);
});
}
function drawNameplate(ctx: CanvasRenderingContext2D, width: number, height: number) {
const scaleX = width / 3840;
const scaleY = height / 1440;
const graphicScale = scaleX;
const x = 2698 * scaleX;
const y = 145 * scaleY;
const titleWidth = 1062 * graphicScale;
const titleHeight = 124 * graphicScale;
const sourceWidth = 290 * graphicScale;
const sourceHeight = 60 * graphicScale;
ctx.fillStyle = '#8f090b';
ctx.fillRect(x, y, titleWidth, titleHeight);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = `700 ${56 * graphicScale}px Monda`;
ctx.fillStyle = '#fff';
ctx.fillText('ŪDENS TEMPERATŪRA', x + titleWidth / 2, y + titleHeight / 2);
const sourceX = x + titleWidth - sourceWidth;
ctx.fillStyle = '#f4f4f4';
ctx.fillRect(sourceX, y + titleHeight, sourceWidth, sourceHeight);
ctx.fillStyle = '#000';
ctx.font = `700 ${39 * graphicScale}px Monda`;
ctx.textAlign = 'center';
ctx.fillText('LVĢMC', sourceX + sourceWidth / 2, y + titleHeight + sourceHeight / 2);
}