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

Day and night data forecast on map

Browse Source
This commit is contained in:
Guntis Smaukstelis
2025-03-12 14:36:30 +02:00
parent 066f1bedc1
commit 968a06c0f0
4 changed files with 99 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/assets/map_night_3840x1440_wind.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 600 KiB

web/src/lvgmc-forecast/CsvMapData.tsx
+83
View File
@@ -0,0 +1,83 @@
import { Component, createSignal, onMount } from 'solid-js'
import { apiHost } from '../consts'
import { fetchText } from '../helpers/fetch'
import { codeToIcon } from '../components/weatherIcons/iconConsts'
import { cityCoords } from '../components/cityCoords'
import { CityData, drawOnMap } from '../cities/map/canvasDraw'
import { citiesToShow, csvCityListInOrder } from './consts'
import arrowUrl from '../assets/arrow.webp'
import { resolutionProps, windProps, WindProps } from '../cities/map/mapConsts'
export const CsvMapData: Component<{
csvUrl: string,
bgImgUrl: string,
}> = ({
csvUrl,
bgImgUrl,
}) => {
const [getCityData, setCityData] = createSignal<CityData[]>([])
const [getWindData, setWindData] = createSignal<[string, string, string]>(['', '', ''])
fetchText(`${apiHost}/api/show/lvgmc-forecast/${csvUrl}`)
.then(csv => {
const csvLines = csv.split('\n')
const dayOrNight = csvLines[2].split(';')[1]
console.log(csvLines)
const citiesOffset = 4
const cityData: CityData[] = csvCityListInOrder
.map((city, i): CityData => {
const parts = csvLines[i + citiesOffset].split(';')
const temperature = Number(parts[1])
const iconCode = Number(parts[2])
const icon = codeToIcon(iconCode)
const coord = cityCoords[city]
if (!coord) throw new Error(`No coord found for city: ${city}`)
return [city, coord, temperature, icon]
})
.filter(([city]) => citiesToShow.includes(city))
const windOffset = dayOrNight === 'DIENA' ? 30 : 26
const windParts = csvLines[windOffset].split(';')
const windSpped = windParts[1]
const windGusts = windParts[3]
const windDirection = windParts[5]
setWindData([windDirection, windSpped, windGusts])
setCityData(cityData)
draw()
})
const arrowImg = new Image()
arrowImg.src = arrowUrl
let canvas: HTMLCanvasElement
let ctx: CanvasRenderingContext2D
onMount(() => {
ctx = canvas!.getContext('2d')!
})
function draw(){
const img = new Image()
const tmpWindData: [string, string, string, boolean, WindProps] = [...getWindData(), true, windProps.map_3840x1440_wind]
img.onload = () => {
drawOnMap(
ctx,
[img, arrowImg],
getCityData(),
tmpWindData,
resolutionProps.map_3840x1440_wind,
)
}
img.src = bgImgUrl
}
return <>
<canvas
ref={c =>canvas=c}
width={'3840px'}
height={'1440px'}
style={{ 'width': '1000px', 'height': '374px' }}
/>
</>
}
web/src/lvgmc-forecast/LvgmcForecast.tsx
+14 -75
View File
@@ -1,13 +1,8 @@
import { Component, createEffect, createSignal, onMount } from 'solid-js'
import { apiHost } from '../consts'
import { fetchText } from '../helpers/fetch'
import { codeToIcon } from '../components/weatherIcons/iconConsts'
import { cityCoords } from '../components/cityCoords'
import { CityData, drawOnMap } from '../cities/map/canvasDraw'
import { Component } from 'solid-js'
import arrowUrl from '../assets/arrow.webp'
import bgMap from '../assets/map_3840x1440_wind.webp'
import { resolutionProps, WindProps, windProps } from '../cities/map/mapConsts'
import dayBgMap from '../assets/map_3840x1440_wind.webp'
import nightBgMap from '../assets/map_night_3840x1440_wind.webp'
import { CsvMapData } from './CsvMapData'
// Eiropa_LTV_pilsetas_nakama_dn.csv
// Eiropa_LTV_pilsetas_tekosa_dn.csv
@@ -15,74 +10,18 @@ import { resolutionProps, WindProps, windProps } from '../cities/map/mapConsts'
// Latvija_LTV_pilsetas_tekosa_dn.csv
// Latvija_faktiskais_laiks.csv
export const csvCityListInOrder = ['Alūksne', 'Bauska', 'Cēsis', 'Daugavpils', 'Jelgava', 'Rīga', 'Liepāja', 'Madona', 'Rēzekne', 'Saldus', 'Valmiera', 'Ventspils', 'Ainaži', 'Dobele', 'Gulbene', 'Sigulda', 'Talsi', 'Jēkabpils']
export const citiesToShow = ['Liepāja', 'Ventspils', 'Saldus', 'Talsi', 'Bauska', 'Rīga', 'Ainaži', 'Valmiera', 'Alūksne', 'Madona', 'Jēkabpils', 'Daugavpils']
export const LvgmcForecast: Component<{}> = () => {
const [getCityData, setCityData] = createSignal<CityData[]>([])
const [getWindData, setWindData] = createSignal<[string, string, string]>(['', '', ''])
fetchText(`${apiHost}/api/show/lvgmc-forecast/Latvija_LTV_pilsetas_tekosa_dn.csv`)
.then(csv => {
const csvLines = csv.split('\n')
console.log(csvLines)
const citiesOffset = 4
const cityData: CityData[] = csvCityListInOrder
.map((city, i): CityData => {
const parts = csvLines[i + citiesOffset].split(';')
const temperature = Number(parts[1])
const iconCode = Number(parts[2])
const icon = codeToIcon(iconCode)
const coord = cityCoords[city]
if (!coord) throw new Error(`No coord found for city: ${city}`)
return [city, coord, temperature, icon]
})
.filter(([city]) => citiesToShow.includes(city))
const windOffset = 30
const windParts = csvLines[windOffset].split(';')
const windSpped = windParts[1]
const windGusts = windParts[3]
const windDirection = windParts[5]
setWindData([windDirection, windSpped, windGusts])
setCityData(cityData)
draw()
})
const arrowImg = new Image()
arrowImg.src = arrowUrl
let canvas: HTMLCanvasElement
let ctx: CanvasRenderingContext2D
onMount(() => {
ctx = canvas!.getContext('2d')!
})
function draw(){
const img = new Image()
const tmpWindData: [string, string, string, boolean, WindProps] = [...getWindData(), true, windProps.map_3840x1440_wind]
img.onload = () => {
drawOnMap(
ctx,
[img, arrowImg],
getCityData(),
tmpWindData,
resolutionProps.map_3840x1440_wind,
)
}
img.src = bgMap
}
return <>
LvgmcForecast
<br/>
<canvas
ref={c =>canvas=c}
width={'3840px'}
height={'1440px'}
style={{ 'width': '1000px', 'height': '374px' }}
<p>Night</p>
<CsvMapData
csvUrl='Latvija_LTV_pilsetas_nakama_dnn.csv'
bgImgUrl={nightBgMap}
/>
<p>Day</p>
<CsvMapData
csvUrl='Latvija_LTV_pilsetas_tekosa_dn.csv'
bgImgUrl={dayBgMap}
/>
</>
}
web/src/lvgmc-forecast/consts.ts
+2
View File
@@ -0,0 +1,2 @@
export const csvCityListInOrder = ['Alūksne', 'Bauska', 'Cēsis', 'Daugavpils', 'Jelgava', 'Rīga', 'Liepāja', 'Madona', 'Rēzekne', 'Saldus', 'Valmiera', 'Ventspils', 'Ainaži', 'Dobele', 'Gulbene', 'Sigulda', 'Talsi', 'Jēkabpils']
export const citiesToShow = ['Liepāja', 'Ventspils', 'Saldus', 'Talsi', 'Bauska', 'Rīga', 'Ainaži', 'Valmiera', 'Alūksne', 'Madona', 'Rēzekne', 'Jēkabpils', 'Daugavpils']