diff --git a/web/src/assets/bg-table2-left.webp b/web/src/assets/bg-table2-left.webp new file mode 100644 index 0000000..b153b71 Binary files /dev/null and b/web/src/assets/bg-table2-left.webp differ diff --git a/web/src/assets/bg-table2-right.webp b/web/src/assets/bg-table2-right.webp new file mode 100644 index 0000000..7f46249 Binary files /dev/null and b/web/src/assets/bg-table2-right.webp differ diff --git a/web/src/components/table/Table.tsx b/web/src/components/table/TableFour.tsx similarity index 99% rename from web/src/components/table/Table.tsx rename to web/src/components/table/TableFour.tsx index ddf3b08..e828997 100644 --- a/web/src/components/table/Table.tsx +++ b/web/src/components/table/TableFour.tsx @@ -12,7 +12,7 @@ type TableWeather = { icon: string, } -export const Table: Component<{ +export const TableFour: Component<{ getCsvLines: Accessor, }> = ({ getCsvLines, diff --git a/web/src/components/table/TableTwo.tsx b/web/src/components/table/TableTwo.tsx new file mode 100644 index 0000000..db7e88f --- /dev/null +++ b/web/src/components/table/TableTwo.tsx @@ -0,0 +1,115 @@ +import { Accessor, Component, createEffect } from 'solid-js' +import { codeToIcon } from '../weatherIcons/iconConsts' +import table2BgUrl from '../../assets/bg-table2-left.webp' +import arrowUrl from '../../assets/arrow.webp' +import { drawRotatedImage, getAngleFromString } from '../map/windAngles' + +type TableWeather = { + temperature: string, + windDirection: string, + windSpeed: string, + icon: string, +} + +export const TableTwo: Component<{ + getCsvLines: Accessor, +}> = ({ + getCsvLines, +}) => { + let canvas: HTMLCanvasElement | undefined + const table2Bg = new Image() + table2Bg.src = table2BgUrl + const arrowImg = new Image() + arrowImg.src = arrowUrl + + createEffect(() => { + const csvLines = getCsvLines() + if (csvLines.length <= 0) return; + const dateStr = csvLines[0].split(';')[0].split('.').reverse().join('.') + const weekDay = new Date(dateStr).getDay() + const weekDayLV = weekDaysLV.get(weekDay)?.toUpperCase() ?? '' + + const tempParts = csvLines[2].split(';') + const iconParts = csvLines[3].split(';') + const windDirParts = csvLines[4].split(';') + const windSpeedParts = csvLines[5].split(';') + + const data: TableWeather[] = [ + { + temperature: tempParts[2], + windDirection: windDirParts[2], + windSpeed: windSpeedParts[2], + icon: codeToIcon(Number(iconParts[2])), + }, + { + temperature: tempParts[5], + windDirection: windDirParts[5], + windSpeed: windSpeedParts[5], + icon: codeToIcon(Number(iconParts[5])), + }, + ] + + drawTable(canvas!, table2Bg, arrowImg, data, weekDayLV) + }) + + return <> + + +} + + +function drawTable( + canvas: HTMLCanvasElement, + rigaBg: HTMLImageElement, + arrowImg: HTMLImageElement, + data: TableWeather[], + title: string, +) { + if (!data.length) throw new Error('Empty data for drawing table!') + canvas.width = rigaBg.width + canvas.height = rigaBg.height + const ctx = canvas.getContext('2d')! + ctx.drawImage(rigaBg, 0, 0) + + ctx.textAlign = 'center' + ctx.textBaseline = 'middle' + ctx.font = 'bold 30px Rubik' + ctx.fillStyle = '#000000' + ctx.letterSpacing = '10px' + ctx.fillText(title, rigaBg.width/2, rigaBg.height*0.065) + + ctx.letterSpacing = '0px' + const colWidth = rigaBg.width / data.length + data.forEach((weather, i) => { + const midX = colWidth * (i + 0.5) + ctx.textAlign = 'center' + ctx.fillStyle = '#FFFFFF' + + ctx.font = `normal 240px Daira by LTV grafika` + ctx.fillText(weather.icon, midX, rigaBg.height * 0.4) + + ctx.font = 'normal 50px Rubik' + ctx.fillText(weather.temperature, midX, rigaBg.height * 0.7) + + const bottomLineY = rigaBg.height * 0.85 + ctx.font = 'bold 30px Rubik' + ctx.textAlign = 'center' + ctx.fillText(weather.windDirection, midX, bottomLineY) + const dirWidth = ctx.measureText(weather.windDirection).width + const windAngle = getAngleFromString(weather.windDirection) + ctx.textAlign = 'right' + drawRotatedImage(ctx, arrowImg, midX-dirWidth/2-arrowImg.width-10, bottomLineY-arrowImg.height/2, windAngle) + ctx.textAlign = 'left' + ctx.fillText(weather.windSpeed, midX+dirWidth/2+10, bottomLineY) + }) +} + +const weekDaysLV = new Map([ + [0, 'svētdiena'], + [1, 'pirmdiena'], + [2, 'otrdiena'], + [3, 'trešdiena'], + [4, 'ceturtdiena'], + [5, 'piektdiena'], + [6, 'sestdiena'], +]) \ No newline at end of file diff --git a/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx b/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx index 05f7057..59f5e51 100644 --- a/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx +++ b/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx @@ -1,11 +1,13 @@ -import { Component, createEffect, createSignal, Setter } from 'solid-js' +import { Component, createSignal, Setter } from 'solid-js' import dayBgMap from '../../assets/map_3840x1440_wind.webp' import nightBgMap from '../../assets/map_night_3840x1440_wind.webp' import { CsvMapData } from './CsvMapData' -import { Table } from '../../components/table/Table' +import { TableFour } from '../../components/table/TableFour' import { apiHost } from '../../consts' import { fetchText } from '../../helpers/fetch' +import { TableTwo } from '../../components/table/TableTwo' +import styles from './lvgmc.module.css' // Eiropa_LTV_pilsetas_nakama_dn.csv // Eiropa_LTV_pilsetas_tekosa_dn.csv @@ -27,13 +29,13 @@ export const LvgmcForecast: Component<{}> = () => { .catch(console.warn) ) - createEffect(() => { - console.log(getMorningLines()) - }) - - return <>

Vakara ēters

+ +
+ getEveningLines().slice(60, 67)} /> + getEveningLines().slice(69, 76)} /> +
getEveningLines().slice(4, 22)} getWindLine={() => getEveningLines()[26]} @@ -44,7 +46,7 @@ export const LvgmcForecast: Component<{}> = () => { getWindLine={() => getEveningLines()[57]} bgImgUrl={dayBgMap} /> - getEveningLines()} /> + getEveningLines()} />

Rīta ēters

= () => { getWindLine={() => getMorningLines()[23]} bgImgUrl={dayBgMap} /> -
getMorningLines()} /> + getMorningLines()} /> +
+ getMorningLines().slice(33, 40)} /> + getMorningLines().slice(42, 49)} /> +
} diff --git a/web/src/pages/lvgmc-forecast/lvgmc.module.css b/web/src/pages/lvgmc-forecast/lvgmc.module.css new file mode 100644 index 0000000..df32655 --- /dev/null +++ b/web/src/pages/lvgmc-forecast/lvgmc.module.css @@ -0,0 +1,6 @@ +.twoCanvas { + display: flex; + justify-content: space-between; + gap: 20px; + width: 1040px; +} \ No newline at end of file