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

Fix vite image import

Browse Source
This commit is contained in:
Guntis Smaukstelis
2023-08-08 19:00:22 +03:00
parent eb85edf680
commit 1d6293f698
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/aggregator/map/MapView.tsx
+12 -7
View File
@@ -5,14 +5,17 @@ import { cityCoords } from "./cityCoords";
import { drawRotatedImage, getAngleFromString } from "./windAngles"; import { drawRotatedImage, getAngleFromString } from "./windAngles";
import { WindInputs, WindSignals } from "./WindInputs"; import { WindInputs, WindSignals } from "./WindInputs";
const arrowImg = new Image(); import mapUrl from "../../assets/map_1920x1080.webp";
arrowImg.src = "src/assets/arrow.webp"; import arrowUrl from "../../assets/arrow.webp";
export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) => { export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) => {
const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>(); const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
const [getImg, setImg] = createSignal(new Image()); const [getImg, setImg] = createSignal(new Image());
let lastCoords: [string, {x: number, y: number }, number][] = []; let lastCoords: [string, {x: number, y: number }, number][] = [];
const arrowImg = new Image();
arrowImg.src = arrowUrl;
const windSignals: WindSignals = { const windSignals: WindSignals = {
direction: createSignal(""), direction: createSignal(""),
speed: createSignal(""), speed: createSignal(""),
@@ -32,9 +35,9 @@ export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) =>
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
setImg(img); setImg(img);
drawOnMap(ctx, img, lastCoords, getWindData()); drawOnMap(ctx, [img, arrowImg], lastCoords, getWindData());
}; };
img.src = "src/assets/map_1920x1080.webp"; img.src = mapUrl;
}); });
createEffect(() => { createEffect(() => {
@@ -46,7 +49,7 @@ export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) =>
typeof value === "number" ? value : -99, typeof value === "number" ? value : -99,
]); ]);
lastCoords = coordsAndData; lastCoords = coordsAndData;
drawOnMap(ctx, getImg(), coordsAndData, getWindData()); drawOnMap(ctx, [getImg(), arrowImg], coordsAndData, getWindData());
}); });
return ( return (
@@ -59,14 +62,16 @@ export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) =>
function drawOnMap( function drawOnMap(
ctx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D,
img: HTMLImageElement, imgArr: [HTMLImageElement, HTMLImageElement],
coords: [string, {x: number, y: number }, number][], coords: [string, {x: number, y: number }, number][],
windData: [string, string, string], windData: [string, string, string],
): void { ): void {
const size = 80; const size = 80;
const [bgImg, arrowImg] = imgArr;
// bg // bg
ctx.drawImage(img, 0, 0); ctx.drawImage(bgImg, 0, 0);
// city boxes // city boxes
ctx.fillStyle = "#FFFFFF"; ctx.fillStyle = "#FFFFFF";