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

Add map 3840x1440

Browse Source
This commit is contained in:
Guntis Smaukstelis
2024-01-23 22:58:26 +02:00
parent 68decb613c
commit bd090f0138
3 changed files with 57 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/assets/map_3840x1440.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

web/src/cities/map/MapView.tsx
+32 -11
View File
@@ -4,14 +4,33 @@ import { ResultKeyVal } from "../../consts";
import { drawRotatedImage, getAngleFromString } from "./windAngles";
import { WindInputs, WindSignals } from "./WindInputs";
import mapUrl from "../../assets/map_1920x1080.webp";
import map_1920x1080 from "../../assets/map_1920x1080.webp";
import map_3840x1440 from "../../assets/map_3840x1440.webp";
import arrowUrl from "../../assets/arrow.webp";
import { cityCoords } from "../../components/cityCoords";
export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) => {
type MapResolution = "map_1920x1080" | "map_3840x1440";
type ResolutionPropsValue = {
offsetX: number;
offsetY: number;
width: number;
height: number;
scale: number;
showWind: boolean;
map: string;
};
const resolutionProps: Record<string, ResolutionPropsValue> = {
"map_1920x1080": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: true, map: map_1920x1080 },
"map_3840x1440": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, showWind: false, map: map_3840x1440 },
}
export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => {
const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
const [getImg, setImg] = createSignal(new Image());
let lastCoords: [string, {x: number, y: number }, number][] = [];
const props = resolutionProps[type];
const arrowImg = new Image();
arrowImg.src = arrowUrl;
@@ -42,9 +61,10 @@ export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) =>
[img, arrowImg],
lastCoords,
getWindData(),
props,
);
};
img.src = mapUrl;
img.src = props.map;
});
createEffect(() => {
@@ -61,13 +81,14 @@ export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) =>
[getImg(),arrowImg],
coordsAndData,
getWindData(),
props,
);
});
return (
<>
<WindInputs signals={windSignals} />
<canvas ref={setCanvas} width="1920px" height="1080px" />
<canvas ref={setCanvas} width={props.width+"px"} height={props.height+"px"} />
</>
);
}
@@ -77,11 +98,9 @@ function drawOnMap(
imgArr: [HTMLImageElement, HTMLImageElement],
coords: [string, {x: number, y: number }, number][],
windData: [string, string, string, boolean],
props: ResolutionPropsValue,
): void {
const boxSize = 80;
const offsetX = 90;
const offsetY = 120;
const scale = 1.35;
const [windDirection, windSpeed, windGusts, roundValues] = windData;
const [bgImg, arrowImg] = imgArr;
@@ -92,8 +111,8 @@ function drawOnMap(
// city boxes
ctx.fillStyle = "#FFFFFF";
coords.forEach(([, {x, y}, value]) => {
const localX = offsetX + x * scale;
const localY = offsetY + y * scale;
const localX = props.offsetX + x * props.scale;
const localY = props.offsetY + y * props.scale;
ctx.beginPath();
ctx.fillStyle = "#FFFFFF";
@@ -107,8 +126,8 @@ function drawOnMap(
ctx.textAlign = "center";
ctx.textBaseline = "middle";
coords.forEach(([, {x, y}, value]) => {
const localX = offsetX + x * scale;
const localY = offsetY + y * scale;
const localX = props.offsetX + x * props.scale;
const localY = props.offsetY + y * props.scale;
ctx.fillStyle = "#000000";
const numericValue = roundValues ? Math.round(value) : value;
@@ -116,6 +135,8 @@ function drawOnMap(
ctx.fillText(stringValue, localX, localY);
});
if (!props.showWind) return;
// wind values
ctx.font = "bold 45px Rubik";
ctx.textAlign = "left";
web/src/cities/result/Result.tsx
+21 -9
View File
@@ -1,4 +1,4 @@
import { Component, createSignal, Resource } from "solid-js";
import { Component, createSignal, Resource, Show } from "solid-js";
import "../../css/Result.css"
import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../consts";
@@ -11,7 +11,7 @@ export const Result: Component<{
result: Resource<QueryResult>
}> = ({ result: resultResource }) => {
const [getOrderKey, setOrderKey] = createSignal<ResultOrderKeys>("A -> Z");
type ResultView = "text" | "map";
type ResultView = "text" | "map_1920x1080" | "map_3840x1440";
const [getResultView, setResultView] = createSignal<ResultView>("text");
const cityData = () =>
@@ -34,8 +34,15 @@ export const Result: Component<{
<input
type="button"
class="secondary"
value="map"
onClick={() => setResultView("map")}
value="map 1920x1080"
onClick={() => setResultView("map_1920x1080")}
/>
&nbsp; | &nbsp;
<input
type="button"
class="secondary"
value="map 3840x1440"
onClick={() => setResultView("map_3840x1440")}
/>
</span>
<span style={{ visibility: getResultView() === "text" ? "visible" : "hidden" }}>
@@ -43,15 +50,20 @@ export const Result: Component<{
</span>
</div>
<div class={getResultView() === "text" ? "result-container" : ""}>
{ getResultView() === "text"
? cityData().map(([city, data]) =>
<Show when={getResultView() === "text"}>
{cityData().map(([city, data]) =>
<CityResult
city={city}
query={resultResource()!.query}
result={data}
/>)
: <MapView data={cityData} />
}
/>)}
</Show>
<Show when={getResultView() === "map_1920x1080"}>
<MapView type="map_1920x1080" data={cityData} />
</Show>
<Show when={getResultView() === "map_3840x1440"}>
<MapView type="map_3840x1440" data={cityData} />
</Show>
</div>
</div>
);