From 19c3e451229daeafee29c65a957539416f571b78 Mon Sep 17 00:00:00 2001 From: Guntis Smaukstelis Date: Sun, 11 Feb 2024 21:44:29 +0200 Subject: [PATCH] Add weather icon inputs to cities on map --- web/src/App.tsx | 26 ++++++---- web/src/assets/ltv_meteo.otf | Bin 0 -> 36544 bytes web/src/cities/map/MapView.tsx | 23 ++++++--- web/src/cities/map/canvasDraw.ts | 22 +++++--- web/src/cities/result/ResultView.tsx | 1 - .../components/weatherIcons/IconInputs.tsx | 47 ++++++++++++++++++ .../weatherIcons/WeatherIconStub.tsx | 8 +++ web/src/components/weatherIcons/iconConsts.ts | 3 ++ web/src/css/index.css | 20 ++++++++ web/src/css/weatherIcons.css | 25 ++++++++++ 10 files changed, 152 insertions(+), 23 deletions(-) create mode 100644 web/src/assets/ltv_meteo.otf create mode 100644 web/src/components/weatherIcons/IconInputs.tsx create mode 100644 web/src/components/weatherIcons/WeatherIconStub.tsx create mode 100644 web/src/components/weatherIcons/iconConsts.ts create mode 100644 web/src/css/weatherIcons.css diff --git a/web/src/App.tsx b/web/src/App.tsx index 9e06b58..7c40c95 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -6,6 +6,7 @@ import { Cities } from './cities/Cities'; import { Database } from './database/Database'; import { Station } from './station/Station'; import { apiHost } from './consts'; +import { WeatherIconStub } from './components/weatherIcons/WeatherIconStub'; console.log("env:", import.meta.env.MODE); console.log("api host:", apiHost); @@ -30,16 +31,21 @@ const App: Component = () => { return (
- +
+
+
+
    + { pages.map(([pageTitle]) => +
  • setPageTitle(pageTitle)} + > + {pageTitle} +
    • + )} +
+
+
{ getPageContent() }
); diff --git a/web/src/assets/ltv_meteo.otf b/web/src/assets/ltv_meteo.otf new file mode 100644 index 0000000000000000000000000000000000000000..4da23379c8c36b3daeb01fb31a843d99ab2b063a GIT binary patch literal 36544 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 literal 0 HcmV?d00001 diff --git a/web/src/cities/map/MapView.tsx b/web/src/cities/map/MapView.tsx index 8557823..b2cb0ff 100644 --- a/web/src/cities/map/MapView.tsx +++ b/web/src/cities/map/MapView.tsx @@ -5,13 +5,17 @@ import { WindInputs, WindSignals } from "./WindInputs"; import arrowUrl from "../../assets/arrow.webp"; import { cityCoords } from "../../components/cityCoords"; -import { MapResolution, resolutionProps, ResolutionPropsValue, windProps, WindProps } from "./mapConsts"; -import { drawOnMap } from "./canvasDraw"; +import { MapResolution, resolutionProps, windProps, WindProps } from "./mapConsts"; +import { CityData, drawOnMap } from "./canvasDraw"; +import { IconInputs } from "../../components/weatherIcons/IconInputs"; export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => { const [getCanvas, setCanvas] = createSignal(); const [getImg, setImg] = createSignal(new Image()); - let lastCoords: [string, {x: number, y: number }, number][] = []; + const weatherIconsSingal = createSignal<{[key: string]: string;}>({}); + const [getWeatherIcons] = weatherIconsSingal; + + let lastCoords: CityData = []; const props = resolutionProps[type]; const arrowImg = new Image(); @@ -52,16 +56,18 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[ createEffect(() => { const ctx = getCanvas()!.getContext("2d")!; - const coordsAndData: [string, {x: number, y: number }, number][] = data() + const weatherIcons = getWeatherIcons(); + const coordsAndData: CityData = data() .map(([city, value]) => [ city, cityCoords[city as keyof typeof cityCoords], typeof value === "number" ? value : -99, + weatherIcons[city], ]); lastCoords = coordsAndData; drawOnMap( ctx, - [getImg(),arrowImg], + [getImg(), arrowImg], coordsAndData, getWindData(), props, @@ -76,7 +82,12 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[ return ( <> - { props.showWind && } +
+
+ { props.showWind && } +
+
+
{ + cityData.forEach(([, {x, y}]) => { const localX = props.offsetX + x * props.scale; const localY = props.offsetY + y * props.scale; @@ -28,17 +31,24 @@ export function drawOnMap( ctx.fill(); // weather values - ctx.font = `bold ${props.fontSize}px Rubik`; - ctx.textAlign = "center"; - ctx.textBaseline = "middle"; - coords.forEach(([, {x, y}, value]) => { + cityData.forEach(([, {x, y}, value, icon]) => { const localX = props.offsetX + x * props.scale; const localY = props.offsetY + y * props.scale; + ctx.font = `bold ${props.fontSize}px Rubik`; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; ctx.fillStyle = "#000000"; const numericValue = roundValues ? Math.round(value) : value; const stringValue = numericValue.toString().replace(".", ","); ctx.fillText(stringValue, localX, localY); + + if (icon) { + ctx.fillStyle = "#FFFFFF"; + ctx.font = `normal ${props.fontSize * 5}px Daira by LTV grafika`; + const iconSize = ctx.measureText(icon); + ctx.fillText(icon, localX + props.boxSize/2 + 10 + iconSize.width/2, localY); + } }); if (!props.showWind) return; diff --git a/web/src/cities/result/ResultView.tsx b/web/src/cities/result/ResultView.tsx index b0373ba..0c90f2a 100644 --- a/web/src/cities/result/ResultView.tsx +++ b/web/src/cities/result/ResultView.tsx @@ -34,7 +34,6 @@ export const ResultView: Component<{ return (
-

Result:

{resultViews.map(viewName => <> diff --git a/web/src/components/weatherIcons/IconInputs.tsx b/web/src/components/weatherIcons/IconInputs.tsx new file mode 100644 index 0000000..bee8cc9 --- /dev/null +++ b/web/src/components/weatherIcons/IconInputs.tsx @@ -0,0 +1,47 @@ +import { Component, Signal } from "solid-js"; +import { weatherIconCities, weatherIcons } from "./iconConsts"; + +import "../../css/weatherIcons.css"; + +export const IconInputs: Component<{ weatherIconsSingal: Signal<{[key: string]: string;}>; }> = ({ + weatherIconsSingal: [getWeatherIcons, setWeatherIcons] +}) => { + + function onIconChange(city: string, icon: string) { + const weatherIcons = { ...getWeatherIcons() }; + weatherIcons[city] = icon; + if (icon === "") delete weatherIcons[city]; + + setWeatherIcons(weatherIcons); + } + + return ( + <> +
+ { weatherIcons.map(icon => + copyToClipboard(icon)}>{ icon }) + } +
+
+ { weatherIconCities.map(city => +
+ {city}: +   + onIconChange(city, e.target.value)} + /> +   +
) + } +
+ + ) +} + +function copyToClipboard(icon: string) { + navigator.clipboard.writeText(icon); +} diff --git a/web/src/components/weatherIcons/WeatherIconStub.tsx b/web/src/components/weatherIcons/WeatherIconStub.tsx new file mode 100644 index 0000000..2c80645 --- /dev/null +++ b/web/src/components/weatherIcons/WeatherIconStub.tsx @@ -0,0 +1,8 @@ +import { Component } from "solid-js"; + +/* Put this in page so browser actually downloads ltv font */ +export const WeatherIconStub: Component<{}> = () => { + return ( +
ABCDEF
+ ) +} diff --git a/web/src/components/weatherIcons/iconConsts.ts b/web/src/components/weatherIcons/iconConsts.ts new file mode 100644 index 0000000..bc1650f --- /dev/null +++ b/web/src/components/weatherIcons/iconConsts.ts @@ -0,0 +1,3 @@ +/* font-family: 'Daira by LTV grafika'; */ +export const weatherIcons = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i"]; +export const weatherIconCities = ['Ainaži', 'Alūksne', 'Bauska', 'Daugavpils', 'Liepāja', 'Madona', 'Priekuļi', 'Rēzekne', 'Rīga', 'Saldus', 'Stende', 'Ventspils', 'Zīlāni']; \ No newline at end of file diff --git a/web/src/css/index.css b/web/src/css/index.css index 16d04fe..a1fc09d 100644 --- a/web/src/css/index.css +++ b/web/src/css/index.css @@ -55,10 +55,30 @@ table tr:hover { background: #c0c0c0; } +@font-face { + font-family: 'Daira by LTV grafika'; + src: url('../assets/ltv_meteo.otf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + .hidden { display: none; } .visible { display: block; +} + +.grid-1-1 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.grid-1-2 { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 10px; } \ No newline at end of file diff --git a/web/src/css/weatherIcons.css b/web/src/css/weatherIcons.css new file mode 100644 index 0000000..e791efe --- /dev/null +++ b/web/src/css/weatherIcons.css @@ -0,0 +1,25 @@ +.weatherIconButton { + font-family: 'Daira by LTV grafika'; + font-size: 30px; + display: inline-block; + background-color: #ccc; + padding: 3px 4px; + margin: 0 3px; + cursor: pointer; +} + +.weatherIconButton:hover { + background-color: #333; + color: white; +} + +.weatherIconInput { + font-family: 'Daira by LTV grafika'; + font-size: 30px; +} + +.weatherIconStub { + font-family: 'Daira by LTV grafika'; + font-size: 20px; + color: white; +} \ No newline at end of file