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/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);
}