Hi, I’m building a small widget for a weather forecast, based on the data from ‘Brightsky.dev’ (German-DWD ). The widget works so far, except for the following problem:
The data is always available from the current day (0 o’clock) to the 7th day (23 o’clock). When displaying the data, however, it always starts at the current hour of the current day. How can I set the start time to 0 o’clock of the current day (to display the data parallel to the daily data. see screenshot). Any ideas?
uid: DWD_Weather_Simple_V2
tags: []
props:
parameters:
- description: z.B. OWM_Alert
label: Item für Warnungen/Alerts
name: hazardsItem
required: false
type: TEXT
groupName: general
- default: "7"
description: Füge hier deine x Tage Forecast-Items
label: Forecast for x days
name: numberforecasts
required: false
groupName: general
- default: Temperaturverlauf
label: Überschrift für das Diagramm
name: chartLabel
required: false
type: TEXT
groupName: chart
- default: ""
description: z.B. OWM_Current_Temp, OWM_ForecastHour0, OWM_ForecastHour1,...
label: Temperatur-Items für Diagramm (Kommagetrennt)
name: chartItems
required: false
type: TEXT
groupName: chart
parameterGroups:
- name: general
label: Allgemein
- name: chart
label: Diagramm
timestamp: Feb 24, 2025, 5:11:38 PM
component: f7-card
config:
style:
height: 200px
slots:
default:
- component: f7-row
config:
style:
height: 20%
slots:
default:
- component: f7-col
config:
large: "15"
medium: "33"
small: "10"
style:
background-color: white
justify-content: right
width: "30"
xlarge: "15"
slots:
default:
- component: f7-chip
config:
color: white
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: thermometer
iconSize: 18
style:
color: black
font-weight: bold
justify-content: left
text: =items['BewegungssensorEinfahrt_temperature'].displayState
tooltip: Aktuelle Temperatur
- component: f7-chip
config:
color: white
iconColor: red
iconF7: thermometer
iconSize: 18
style:
color: black
justify-content: left
text: =items['BewegungssensorEinfahrt_temperatureMax'].displayState
tooltip: Max. Temperatur (12 Std.)
- component: f7-chip
config:
color: white
iconColor: lightblue
iconF7: thermometer
iconSize: 18
style:
color: black
justify-content: left
text: =items['BewegungssensorEinfahrt_temperatureMin'].displayState
tooltip: Min. Temperatur (12 Std.)
- component: f7-chip
config:
color: white
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: drop
iconSize: 18
style:
color: black
font-weight: bold
justify-content: left
text: =items['TemperaturSensor_Terrasse_humidity'].displayState
tooltip: Aktuelle Luftfeuchtigkeit
- component: f7-chip
config:
color: white
iconColor: red
iconF7:
- null
iconSize: 18
style:
color: black
justify-content: left
text: =items['TemperaturSensor_Terrasse_pressure'].displayState + ' hPa'
tooltip: Aktueller Luftdruck
- component: f7-col
config:
large: "85"
medium: "67"
small: "90"
style:
background-color: white
width: "70"
xlarge: "85"
slots:
default:
- component: f7-row
config:
style:
background-color: white
height: 50%
padding-left: 5%
width: 90%
slots:
default:
- component: f7-col
config:
style:
height: 100%
slots:
default:
- component: f7-swiper
config:
navigation: false
params:
grabCursor: true
initalSlide: 0
keyboard: true
left: 0px
mousewheel: true
observeSlideChildren: true
observer: true
rewind: true
runCallbacksOnInit: true
slidesPerView: 7
spaceBetween: 2
speed: 500
updateOnWindowResize: true
watchOverflow: true
scrollbars: true
style:
--swiper-navigation-color: black
--swiper-navigation-size: 50px
background-color: gray
slots:
default:
- component: oh-repeater
config:
for: i
fragment: true
rangeStart: 0
rangeStep: 1
rangeStop: =props.numberforecasts-1
sourceType: range
slots:
default:
- component: f7-swiper-slide
config:
style:
background: lightblue
slots:
default:
- component: Label
config:
comment: =dayjs(JSON.parse(items['brightskydata_day'+loop.i+'_overview'].state).weatherToday).format('dd')
style:
font-size: 14px
text-align: center
text: "=(loop.i === 0) ? 'Heute' :
dayjs(JSON.parse(items['brightskydata_day'+lo\
op.i+'_overview'].state).we\
atherToday).format('dd')"
- component: oh-image
config:
justify-content: center
no-margin: false
no-padding: false
style:
height: 32px
max-width: 40%
padding-left: 35%
padding-right: 30%
width: 32px
url: ='http://raspberrypi:8080/static/weathericons/' +
JSON.parse(items['brightskydata_day'+loop.i+'_overview'].state).dominantIcon
+ '.svg'
- component: Label
config:
style:
font-size: 12px
font-weight: 400
text-align: center
text: =JSON.parse(items['brightskydata_day'+loop.i+'_overview'].state).minTemp +
' / ' +
JSON.parse(items['brightskydata_day'+loop.i+'_overview'].state).maxTemp
+ ' °C'
- component: f7-row
config:
style:
background-color: white
height: 50%
max-height: 124px
slots:
default:
- component: f7-col
config:
style:
height: 10%
slots:
default:
- component: oh-chart
config:
future: true
name: A1
period: 7d
slots:
grid:
- component: oh-chart-grid
config:
bottom: 10%
height: 29%
left: 35px
name: gridLeft
top: 5%
width: 90%
- component: oh-chart-grid
config:
height: 29%
left: 35px
name: gridRight
top: 5%
width: 90%
legend:
- component: oh-chart-legend
config:
show: false
series:
- component: oh-data-series
config:
boundaryGap: false
comment: image://http://192.168.178.177:8080/static/hr3.png
data: =JSON.parse(items["brightskydata_days_gesamt"].state).temperature.map(item
=> [item.timestamp, item.temperature])
gridIndex: 0
name: Temperatur
smooth: true
symbol: none
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-data-series
config:
boundaryGap: false
color: lightblue
comment: =JSON.stringify(JSON.parse(items['brightskydata_days_gesamt'].state).precipitation)
data: =JSON.parse(items["brightskydata_days_gesamt"].state).precipitation.map(item
=> [item.timestamp, item.precipitation])
gridIndex: 1
name: Niederschlag
symbol: none
type: bar
xAxisIndex: 1
yAxisIndex: 1
- component: oh-data-series
config:
boundaryGap: false
animation: true
data: "=JSON.parse(items['brightskydata_days_gesamt'].state).icons.map(item =>
({ value: [item.timestamp, 0.9],
symbol:'image://http://raspberrypi:8080\
/static/weathericons/' + item.icon +
'.svg', symbolSize: 20 }))"
gridIndex: 1
name: Bewölkung
type: scatter
xAxisIndex: 1
yAxisIndex: 2
title:
- component: oh-chart-title
config:
comment: =JSON.parse(items["brightskydata_days_gesamt"].state).icons.map(item =>
[item.timestamp, item.icon])
show: false
text: Vellmar
toolbox:
- component: oh-chart-toolbox
config:
bottom: "0"
left: "0"
presetFeatures:
- saveAsImage
- restore
- dataView
- dataZoom
- magicType
show: false
tooltip:
- component: oh-chart-tooltip
config:
confine: true
orient: vertical
show: true
xAxis:
- component: oh-time-axis
config:
boundaryGap: false
min: dataMin
max: dataMax
startValue: "2025-02-24T00:00:00+00:00"
axisLabel:
formatter: "{ee}"
show: false
axisLine:
onZero: false
show: false
gridIndex: 0
weekdayFormat: short
- component: oh-time-axis
config:
boundaryGap: false
min: dataMin
max: dataMax
axisLabel:
formatter: "{ee}"
axisLine:
onZero: false
show: true
gridIndex: 1
weekdayFormat: short
yAxis:
- component: oh-value-axis
config:
axisLine:
onZero: false
show: true
gridIndex: 0
max: dataMax
min: dataMin
name: °C
nameGap: 8
nameLocation: start
type: value
- component: oh-value-axis
config:
axisLine:
show: true
gridIndex: 1
max: dataMax
min: dataMin
name: mm
nameGap: 8
nameLocation: start
position: right
type: value
- component: oh-value-axis
config:
axisLine:
show: false
gridIndex: 1
max: 1
min: 0
name: Icons
show: false
type: value
