The next iteration of the weather widget:
- Optional Information Item (Example BME680 Temperature)
- The background image can be changed with the “TimeOfDay” funktion
Backgroundfiles (example):
Imagefiles: zug_sunrise_sw.jpg (without TimeOfDay change)
zug_sunrise_sw_MORNING.jpg
zug_sunrise_sw_DAY.jpg
zug_sunrise_sw_EVENING.jpg
…
Widget YAML
uid: weather_card
tags: []
props:
parameters:
- description: <b>Optional prefix</b> for item names.
label: Item prefix
name: itemPrefix
required: false
type: TEXT
groupName: general
- description: The number of hours you want to forecast <b>(<u>default:</u> 11)</b>
label: Number of hours to forecast
name: forecastHours
required: false
type: TEXT
groupName: general
- description: The number of days you want to forecast <b>(<u>default:</u> 5)</b>
label: Number of days to forecast
name: forecastDays
required: false
type: TEXT
groupName: general
- label: Background image-url
name: backgroundUrl
required: false
type: TEXT
groupName: general
- description: Background blur
label: Intensity of the background-blur (0 - 10)
name: backgroundBlur
required: false
type: TEXT
groupName: general
- description: Acitvate 24-hour clock-format <b>(<u>default:</u> 12-hour clock-format)</b>
label: 24h clock-format
name: dateFormat
required: false
type: BOOLEAN
groupName: general
- description: Acitvate Sun-Indicator <b>(<u>default:</u> no)</b>
label: Sun-Indicator
name: sunIndicator
required: false
type: BOOLEAN
groupName: general
- description: Item for extra Information eg. local Temperature Sensor
label: Information Item (optional)
name: itemInform
required: false
type: TEXT
groupName: general
advanced: true
- description: Alternative title for 'Hourly' within the segmented control <b>(<u>default:</u> Hourly)</b>
label: Alternative text for 'Hourly'
name: wordingForecastHours
required: false
type: TEXT
groupName: wording
advanced: true
- description: Alternative title for 'Daily' within the segmented control <b>(<u>default:</u> Daily)</b>
label: Alternative text for 'Daily'
name: wordingForecastDays
required: false
type: TEXT
groupName: wording
advanced: true
- description: Alternative title for 'Precipitation' within the segmented control <b>(<u>default:</u> Daily)</b>
label: Alternative text for 'Precipitation'
name: wordingForecastPrecib
required: false
type: TEXT
groupName: wording
advanced: true
- description: Alternative text for 'Now' in the hourly-forecast & precipitation-forecast tab
label: Translation 'Now'
name: wordingNow
required: false
type: TEXT
groupName: wording
advanced: true
- description: Alternative text for 'Today' in the daily-forecast tab
label: Translation 'Today'
name: wordingToday
required: false
type: TEXT
groupName: wording
advanced: true
- description: Alternative text for 'Feel' in the feel-temperature display
label: Translation 'Feel'
name: wordingFeel
required: false
type: TEXT
groupName: wording
advanced: true
- description: Alternative text for 'h' as Hour in the timeline (z.B. Uhr)
label: Translation 'h'
name: wordingHour
required: false
type: TEXT
groupName: wording
advanced: true
- description: Enable Times of Day feature for background image
label: item 'Times of Day'
name: itemTimesOfDay
required: false
type: TEXT
groupName: wording
advanced: true
parameterGroups:
- name: general
label: General settings
- name: wording
label: Wording
timestamp: Dec 25, 2020, 8:57:06 PM
component: f7-card
config:
class:
- padding
style:
background-image: "='url(' + props.backgroundUrl.substring(0, (props.backgroundUrl.length -4)) + ((props.itemTimesOfDay === undefined || items[props.itemTimesOfDay].state === 'NULL') ? '' : '_' + items[props.itemTimesOfDay].state) + props.backgroundUrl.substr(-4) + ')'"
background-size: cover
background-repeat: no-repeat
background-position: 100% 100%
border-radius: 20px
overflow: hidden
-ms-user-select: none
-moz-user-select: none
-webkit-user-select: none
user-select: none
--weather-card-color: 255,255,255
--weather-card-text-color: rgba(var(--weather-card-color),1)
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
style:
background-color: rgba(255,255,255,.15)
backdrop-filter: ='blur(' + props.backgroundBlur + 'px)'
width: 100%
height: 100%
position: absolute
top: 0
left: 0
border-radius: 20px
- component: f7-row
slots:
default:
- component: f7-col
config:
class: col-80
style:
z-index: 999
slots:
default:
- component: Label
config:
text: "=items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'StationName'].state"
style:
color: var(--weather-card-text-color)
font-size: 26px
line-height: 32px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
text-shadow: -1px 1px 1px hsl(0,0%,66%)
- component: Label
config:
text: =dayjs().format("DD. MMMM YYYY")
style:
color: var(--weather-card-text-color)
font-size: 12px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
text-shadow: -1px 1px 1px hsl(0,0%,66%)
- component: f7-icon
config:
f7: "=(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '01d') ? 'sun_max_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '01n') ? 'moon_stars_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '02d') ? 'cloud_sun_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '02n') ? 'cloud_moon_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '03d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '03n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '04d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '04n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '13d') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '13n') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '50d') ? 'cloud_fog_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '50n') ? 'cloud_fog_fill' : '?'"
size: 60
class:
- align-content-center
style:
color: rgba(var(--weather-card-color),.9)
padding-top: 5px
padding-bottom: 5px
- component: Label
config:
text: "=items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Condition'].state"
style:
color: var(--weather-card-text-color)
font-size: 16px
line-height: 21px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
text-shadow: -1px 1px 1px hsl(0,0%,66%)
- component: f7-col
config:
class: col-20
style:
z-index: 999
text-align: center
width: fit-content
overflow: hidden
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? Math.round(items.localCurrent_Temperature.state.split(' ')[0]) + '°' : Math.round(items[props.itemPrefix + 'Current_Temperature'].state.split(' ')[0])+'°'"
style:
color: var(--weather-card-text-color)
font-size: 58px
line-height: 58px
font-weight: 100
text-shadow: -1px 1px 1px hsl(0,0%,66%)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? 'gefühlt: ' + Math.round(items.localCurrent_Apparenttemperature.state.split(' ')[0]) +'°' : ((props.wordingFeel === undefined) ? 'Feel: ' : props.wordingFeel + ': ') + Math.round(items[props.itemPrefix + 'Current_Apparenttemperature'].state.split(' ')[0]) +'°'"
style:
color: var(--weather-card-text-color)
font-size: 21px
font-weight: 100
text-shadow: -1px 1px 1px hsl(0,0%,66%)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? Math.round(items.localCurrent_Humidity.state.split(' ')[0])+'% ' : Math.round(items[props.itemPrefix + 'Current_Humidity'].state.split(' ')[0]) + '% ' + Math.round(items[props.itemPrefix + 'Current_Windspeed'].state.split(' ')[0]) + 'km/h'"
style:
color: var(--weather-card-text-color)
font-size: 21px
font-weight: 100
text-shadow: -1px 1px 1px hsl(0,0%,66%)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: Label
config:
text: "=(props.itemInform === undefined) ? '' : items[props.itemInform].state "
style:
color: var(--weather-card-text-color)
font-size: 16px
font-weight: 100
text-shadow: -1px 1px 1px hsl(0,0%,66%)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-segmented
config:
strong: true
textColor: white
class: margin-top
style:
--f7-segmented-strong-button-active-box-shadow: 0px 4px 0px -1px white
--f7-segmented-strong-button-active-text-color: rgba(var(--weather-card-color),1)
--f7-button-text-color: rgba(var(--weather-card-color),.5)
--f7-segmented-strong-text-color: rgba(var(--weather-card-color),.5)
--f7-segmented-strong-padding: 3px
--f7-button-active-text-color: rgba(var(--weather-card-color),1)
--f7-button-raised-box-shadow: none
--f7-segmented-strong-button-active-bg-color: transparent
--f7-button-border-radius: 0
border-bottom: 3px solid rgba(var(--weather-card-color),.5)
background: transparent
z-index: 999
slots:
default:
- component: oh-button
config:
text: "=(props.wordingForecastHours === undefined) ? 'Hourly' : props.wordingForecastHours"
color: var(--weather-card-text-color)
active: =vars.tab === 'hourly_forecast'
action: variable
actionVariable: tab
actionVariableValue: hourly_forecast
- component: oh-button
config:
text: "=(props.wordingForecastHours === undefined) ? 'Daily' : props.wordingForecastDays"
color: var(--weather-card-text-color)
active: =vars.tab === 'daily_forecast'
action: variable
actionVariable: tab
actionVariableValue: daily_forecast
- component: oh-button
config:
text: "=(props.wordingForecastPrecib === undefined) ? 'Precipitation' : props.wordingForecastPrecib"
color: var(--weather-card-text-color)
active: =vars.tab === 'precip_forecast'
action: variable
actionVariable: tab
actionVariableValue: precip_forecast
- component: f7-swiper
config:
visible: =!vars.tab || vars.tab === 'hourly_forecast'
navigation: true
class:
- padding-top
params:
initalSlide: 0
runCallbacksOnInit: true
grabCursor: true
observer: true
observeSlideChildren: true
updateOnWindowResize: true
spaceBetween: 5
mousewheel: true
keyboard: true
watchOverflow: true
breakpoints:
"0":
slidesPerView: 1
"240":
slidesPerView: 2
"320":
slidesPerView: 3
"480":
slidesPerView: 4
"640":
slidesPerView: 5
style:
--swiper-navigation-size: 30px
--swiper-navigation-color: var(--weather-card-text-color)
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: hour
rangeStart: 0
rangeStop: "=(props.forecastHours === undefined) ? 11 : Number(props.forecastHours)"
fragment: true
slots:
default:
- component: f7-swiper-slide
config:
id: =loop.hour_idx
expandable: true
style:
background: "=(props.sunIndicator === true) ? ((dayjs().add(loop.hour,'hour').format() >= items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').format() ? 'Today' : (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').add(1,'day').format() ? 'Tomorrow' : 'Day2')) + '_Sunrise'].state && dayjs().add(loop.hour,'hour').format() <= items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').format() ? 'Today' : (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').add(1,'day').format() ? 'Tomorrow' : 'Day2')) + '_Sunset'].state) ? 'rgba(44,130,201,.15)' : 'rgba(190,144,212,.15)') : 'none'"
border-radius: 5px
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
- align-items-center
slots:
default:
- component: Label
config:
text: "=(loop.hour === 0) ? ((props.wordingNow === undefined) ? 'Now' : props.wordingNow) : ((props.dateFormat === false) ? dayjs().add(loop.hour,'hour').startOf('hour').format('h A') : dayjs().add(loop.hour,'hour').startOf('hour').format('HH') + ((props.wordingHour === undefined) ? ' h' : ' ' + props.wordingHour))"
style:
color: var(--weather-card-text-color)
font-size: 18px
font-weight: 600
- component: f7-col
config:
class:
- justify-content-center
- align-items-center
- text-align-center
slots:
default:
- component: f7-icon
config:
f7: "=(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '01d') ? 'sun_max_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '01n') ? 'moon_stars_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '02d') ? 'cloud_sun_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '02n') ? 'cloud_moon_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '03d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '03n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '04d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '04n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '13d') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '13n') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '50d') ? 'cloud_fog_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '50n') ? 'cloud_fog_fill' : ''"
size: 40
style:
padding-right: 5px
color: var(--weather-card-text-color)
- component: Label
config:
text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Temperature'].state.split(' ')[0]) + '° ' + Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Windspeed'].state.split(' ')[0]) + 'km/h'"
style:
font-size: 18px
font-weight: 400
color: var(--weather-card-text-color)
- component: f7-swiper
config:
visible: =vars.tab === 'daily_forecast'
navigation: true
class:
- padding-top
params:
initalSlide: 0
grabCursor: true
observer: true
spaceBetween: 1
observeSlideChildren: true
updateOnWindowResize: true
watchOverflow: true
mousewheel: true
keyboard: true
breakpoints:
"0":
slidesPerView: 1
"210":
slidesPerView: "=(props.forecastDays === undefined) ? 2 : ((props.forecastDays < 2) ? Math.round(Number(props.forecastDays) + 1) : 2)"
"320":
slidesPerView: "=(props.forecastDays === undefined) ? 3 : ((props.forecastDays < 3) ? Math.round(Number(props.forecastDays) + 1) : 3)"
"480":
slidesPerView: "=(props.forecastDays === undefined) ? 4 : ((props.forecastDays < 4) ? Math.round(Number(props.forecastDays) + 1) : 4)"
"640":
slidesPerView: "=(props.forecastDays === undefined) ? 5 : ((props.forecastDays < 5) ? Math.round(Number(props.forecastDays) + 1) : 5)"
style:
--swiper-navigation-size: 30px
--swiper-navigation-color: var(--weather-card-text-color)
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: day
rangeStart: 0
rangeStop: "=(props.forecastDays === undefined) ? 5 : Number(props.forecastDays)"
fragment: true
slots:
default:
- component: f7-swiper-slide
config:
class:
- text-align-center
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
- align-items-center
slots:
default:
- component: Label
config:
text: "=(loop.day === 0) ? ((props.wordingToday === undefined) ? 'Today' : props.wordingToday) : dayjs().add(loop.day,'day').startOf('day').format('dddd')"
style:
color: var(--weather-card-text-color)
font-size: 18px
font-weight: 600
- component: f7-icon
config:
class:
- align-center
f7: "=(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '01d') ? 'sun_max_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '01n') ? 'moon_stars_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '02d') ? 'cloud_sun_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '02n') ? 'cloud_moon_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '03d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '03n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '04d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '04n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '13d') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '13n') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '50d') ? 'cloud_fog_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '50n') ? 'cloud_fog_fill' : '?'"
size: 40
style:
color: var(--weather-card-text-color)
- component: f7-row
config:
class:
- justify-content-center
slots:
default:
- component: Label
config:
text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + ((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + (loop.day_idx))) + '_Maxtemperature'].state.split(' ')[0]) +'°'"
style:
font-size: 18px
font-weight: 400
color: var(--weather-card-text-color)
- component: Label
config:
text: /
style:
color: rgba(var(--weather-card-color),.5)
font-size: 18px
- component: Label
config:
text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + ((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + (loop.day_idx))) + '_Mintemperature'].state.split(' ')[0]) +'°'"
style:
font-size: 18px
font-weight: 400
color: rgba(var(--weather-card-color),.75)
- component: f7-swiper
config:
visible: =vars.tab === 'precip_forecast'
navigation: true
class:
- padding-top
params:
initalSlide: 0
runCallbacksOnInit: true
grabCursor: true
observer: true
observeSlideChildren: true
updateOnWindowResize: true
spaceBetween: 5
mousewheel: true
keyboard: true
watchOverflow: true
breakpoints:
"0":
slidesPerView: 1
"240":
slidesPerView: 2
"320":
slidesPerView: 3
"480":
slidesPerView: 4
"640":
slidesPerView: 5
style:
--swiper-navigation-size: 30px
--swiper-navigation-color: var(--weather-card-text-color)
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: hour
rangeStart: 0
rangeStop: "=(props.forecastHours === undefined) ? 11 : Number(props.forecastHours)"
fragment: true
slots:
default:
- component: f7-swiper-slide
config:
id: =loop.hour_idx
expandable: true
style:
background: "=(props.sunIndicator === true) ? ((dayjs().add(loop.hour,'hour').format() >= items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').format() ? 'Today' : (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').add(1,'day').format() ? 'Tomorrow' : 'Day2')) + '_Sunrise'].state && dayjs().add(loop.hour,'hour').format() <= items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').format() ? 'Today' : (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').add(1,'day').format() ? 'Tomorrow' : 'Day2')) + '_Sunset'].state) ? 'rgba(44,130,201,.15)' : 'rgba(190,144,212,.15)') : 'none'"
border-radius: 5px
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
- align-items-center
slots:
default:
- component: Label
config:
text: "=(loop.hour === 0) ? ((props.wordingNow === undefined) ? 'Now' : props.wordingNow) : ((props.dateFormat === false) ? dayjs().add(loop.hour,'hour').startOf('hour').format('h A') : dayjs().add(loop.hour,'hour').startOf('hour').format('HH') + ((props.wordingHour === undefined) ? ' h' : ' ' + props.wordingHour))"
style:
color: var(--weather-card-text-color)
font-size: 18px
font-weight: 600
- component: f7-col
config:
class:
- justify-content-center
- align-items-center
- text-align-center
slots:
default:
- component: f7-icon
config:
f7: "=(Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0') + '_Precipprobability'].state.split(' ')[0] ) >= 50 ) ? 'umbrella_fill' : 'umbrella' "
size: 40
style:
padding-right: 5px
color: var(--weather-card-text-color)
- component: Label
config:
text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0') + '_Precipprobability'].state.split(' ')[0] ) +'%'"
style:
font-size: 18px
font-weight: 400
color: var(--weather-card-text-color)
Widget configuration example:
component: widget:weather_card
config:
backgroundUrl: http://10.5.0.90:8080/static/zug_sunrise_sw.jpg
sunIndicator: true
itemTimesOfDay: TimeOfDay
dateFormat: true
wordingToday: Heute
wordingNow: Jetzt
wordingForecastDays: Täglich
wordingFeel: gefühlt
backgroundBlur: "0"
wordingForecastPrecib: Niederschlag
wordingHour: Uhr
itemPrefix: OneCallAPIweatherandforecast_
wordingForecastHours: Stündlich
item: OneCallAPIweatherandforecast
itemInform: GenericMQTTThing_BME680Temperatur