Refine broadcast map labels and overlays
This commit is contained in:
b0txec
@@ -15,6 +15,8 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
|
||||
const [getImg, setImg] = createSignal(new Image());
|
||||
const weatherIconsSingal = createSignal<{[key: string]: string;}>({});
|
||||
const [getWeatherIcons] = weatherIconsSingal;
|
||||
const [getTitle, setTitle] = createSignal("");
|
||||
const [getSource, setSource] = createSignal("");
|
||||
|
||||
let lastCoords: CityData[] = [];
|
||||
const props = resolutionProps[type];
|
||||
@@ -49,6 +51,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
|
||||
[img, arrowImg],
|
||||
lastCoords,
|
||||
getWindData(),
|
||||
[getTitle(), getSource()],
|
||||
props,
|
||||
);
|
||||
};
|
||||
@@ -71,6 +74,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
|
||||
[getImg(), arrowImg],
|
||||
coordsAndData,
|
||||
getWindData(),
|
||||
[getTitle(), getSource()],
|
||||
props,
|
||||
);
|
||||
});
|
||||
@@ -89,6 +93,10 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
|
||||
<details class="broadcastControls">
|
||||
<summary><span><strong>Broadcast overlay controls</strong><small>Optional manual wind and weather-symbol overrides</small></span></summary>
|
||||
<p class="controlHelp">These settings do not change the queried city values. Use them only when preparing a finished broadcast graphic.</p>
|
||||
<div class="overlayFields">
|
||||
<label><span>Title</span><input type="text" placeholder="19. APRĪĻA GAISA TEMPERATŪRAS REKORDI" value={getTitle()} onInput={e => setTitle(e.target.value)} /></label>
|
||||
<label><span>Source</span><input type="text" placeholder="LVĢMC" value={getSource()} onInput={e => setSource(e.target.value)} /></label>
|
||||
</div>
|
||||
<div class="grid-1-2">
|
||||
<div>
|
||||
<div>
|
||||
|
||||
@@ -9,26 +9,28 @@ export function drawOnMap(
|
||||
imgArr: [HTMLImageElement, HTMLImageElement],
|
||||
cityData: CityData[],
|
||||
windData: [string, string, string, boolean, WindProps],
|
||||
overlayData: [string, string],
|
||||
props: ResolutionPropsValue,
|
||||
): void {
|
||||
const [windDirection, windSpeed, windGusts, roundValues, windProp] = windData;
|
||||
const [bgImg, arrowImg] = imgArr;
|
||||
const [title, source] = overlayData;
|
||||
|
||||
// bg
|
||||
ctx.drawImage(bgImg, 0, 0);
|
||||
|
||||
// city boxes
|
||||
ctx.fillStyle = "#FFFFFF";
|
||||
cityData.forEach(([, {x, y}]) => {
|
||||
// City value badges use a consistent height and expand horizontally to fit the value.
|
||||
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);
|
||||
const stringValue = numericValue.toString().replace(".", ",");
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.font = `bold ${props.fontSize}px Rubik`;
|
||||
const badgeWidth = Math.max(props.boxSize, Math.ceil(ctx.measureText(stringValue).width + props.fontSize * 0.8));
|
||||
ctx.fillStyle = "#FFFFFF";
|
||||
ctx.rect(localX-props.boxSize/2, localY-props.boxSize/2, props.boxSize, props.boxSize);
|
||||
ctx.fill();
|
||||
ctx.fillRect(localX - badgeWidth / 2, localY - props.boxSize / 2, badgeWidth, props.boxSize);
|
||||
});
|
||||
ctx.fill();
|
||||
|
||||
// weather values
|
||||
cityData.forEach(([, {x, y}, value, icon]) => {
|
||||
@@ -51,6 +53,8 @@ export function drawOnMap(
|
||||
}
|
||||
});
|
||||
|
||||
drawTitleOverlay(ctx, title, source, props.width);
|
||||
|
||||
if (!props.showWind) return;
|
||||
|
||||
// wind values
|
||||
@@ -76,3 +80,37 @@ export function drawOnMap(
|
||||
ctx.font = "bold 25px Rubik";
|
||||
ctx.fillText("M/S", windProp.offsetX + boxMiddleX + gustsWidth / 2 - 22, (windProp.offsetY + 805)*windProp.scaleY);
|
||||
}
|
||||
|
||||
function drawTitleOverlay(ctx: CanvasRenderingContext2D, title: string, source: string, canvasWidth: number): void {
|
||||
if (!title.trim() && !source.trim()) return;
|
||||
|
||||
const scale = canvasWidth / 1920;
|
||||
const right = 34 * scale;
|
||||
const top = 38 * scale;
|
||||
const horizontalPadding = 24 * scale;
|
||||
const titleHeight = 62 * scale;
|
||||
const sourceHeight = 38 * scale;
|
||||
|
||||
ctx.textAlign = "left";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.font = `bold ${30 * scale}px Rubik`;
|
||||
const titleText = title.trim().toUpperCase();
|
||||
const titleWidth = Math.max(360 * scale, ctx.measureText(titleText).width + horizontalPadding * 2);
|
||||
const titleX = canvasWidth - right - titleWidth;
|
||||
|
||||
ctx.fillStyle = "#9b0008";
|
||||
ctx.fillRect(titleX, top, titleWidth, titleHeight);
|
||||
ctx.fillStyle = "#FFFFFF";
|
||||
ctx.fillText(titleText, titleX + horizontalPadding, top + titleHeight / 2);
|
||||
|
||||
if (source.trim()) {
|
||||
ctx.font = `bold ${19 * scale}px Rubik`;
|
||||
const sourceText = source.trim().toUpperCase();
|
||||
const sourceWidth = Math.max(130 * scale, ctx.measureText(sourceText).width + horizontalPadding * 2);
|
||||
const sourceX = canvasWidth - right - sourceWidth;
|
||||
ctx.fillStyle = "#FFFFFF";
|
||||
ctx.fillRect(sourceX, top + titleHeight, sourceWidth, sourceHeight);
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.fillText(sourceText, sourceX + horizontalPadding, top + titleHeight + sourceHeight / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,4 +12,5 @@
|
||||
.timeRangeTitle div {
|
||||
font-size: 11px;
|
||||
}
|
||||
.overlayFields{display:grid;grid-template-columns:minmax(260px,2fr) minmax(160px,1fr);gap:12px;padding:16px 16px 0}.overlayFields label,.overlayFields span{display:block}.overlayFields span{margin-bottom:6px;font-size:12px;font-weight:700}.overlayFields input{width:100%}
|
||||
.pageWorkspace{max-width:1800px;margin:auto;padding:34px 28px 70px}.pageHeading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.pageHeading h1{margin:5px 0 6px;font-size:34px}.pageHeading p{margin:0;color:var(--text-muted)}.selectionCount{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-weight:700}.aggregator>.container{display:grid;grid-template-columns:240px 300px minmax(0,1fr);gap:18px;align-items:start}.panel{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.panel h2{margin:0 0 18px;font-size:16px}.cityPanel{max-height:calc(100vh - 160px);overflow:auto}.cityPanel ul{margin:12px 0;padding:0;columns:1}.cityPanel li{padding:3px 0}.queryPanel h4{margin:22px 0 9px}.queryPanel p{margin:10px 0}.resultsPanel{min-width:0}.emptyState{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;gap:8px;margin-top:18px;padding:30px;border:1px dashed #bac6d4;border-radius:16px;background:rgba(255,255,255,.55);color:var(--text-muted);text-align:center}.emptyState strong{color:var(--text);font-size:18px}.mapWorkspace{margin-top:14px}.mapToolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mapToolbar strong,.mapToolbar span{display:block}.mapToolbar span{margin-top:3px;color:var(--text-muted);font-size:12px}.broadcastControls{margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.broadcastControls summary{padding:14px 16px;cursor:pointer}.broadcastControls summary span,.broadcastControls summary strong,.broadcastControls summary small{display:block}.broadcastControls summary small,.controlHelp,.fieldHint{color:var(--text-muted);font-size:12px}.broadcastControls[open] summary{border-bottom:1px solid var(--border)}.broadcastControls .grid-1-2{padding:16px}.controlHelp{margin:16px 16px 0}.canvasFrame{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#d8dee6;box-shadow:var(--shadow-sm)}.canvasFrame canvas{display:block}.weatherIconButton{border-radius:7px}.fieldHint{margin:4px 0 10px}@media(max-width:1200px){.aggregator>.container{grid-template-columns:220px 1fr}.resultsPanel{grid-column:1/-1}.cityPanel{max-height:none}}@media(max-width:700px){.pageWorkspace{padding:24px 14px}.pageHeading{align-items:start;flex-direction:column}.aggregator>.container{grid-template-columns:1fr}.resultsPanel{grid-column:auto}}
|
||||
|
||||
@@ -9,7 +9,7 @@ import { GridResult } from "./GridResult";
|
||||
|
||||
type ResultView = "grid" | "list" | "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";
|
||||
const resultViews: Array<ResultView> = ["grid", "list", "map_1920x1080", "map_1920x1080_wind", "map_3840x1440", "map_3840x1440_wind"];
|
||||
const viewLabels: Record<ResultView,string> = {grid:'Cards',list:'List',map_1920x1080:'HD map',map_1920x1080_wind:'HD map + wind',map_3840x1440:'Ultrawide map',map_3840x1440_wind:'Ultrawide + wind'}
|
||||
const viewLabels: Record<ResultView,string> = {grid:'grid',list:'list',map_1920x1080:'map_1920x1080',map_1920x1080_wind:'map_1920x1080_wind',map_3840x1440:'map_3840x1440',map_3840x1440_wind:'map_3840x1440_wind'}
|
||||
|
||||
export const ResultView: Component<{
|
||||
result: Resource<QueryResult>
|
||||
|
||||
Reference in New Issue
Block a user