uid: Fox_Weather
tags:
- weather
props:
parameters:
- description: "Optional prefix for item names.
More infos here: https://community.openhab.org/t/ui-widget-weather/106842"
label: Item prefix
name: itemPrefix
required: false
type: TEXT
groupName: general
- description: Hide the weather-condition icons on the name of the day.
label: Hide condition icons
name: hideConditionIcons
required: false
type: BOOLEAN
groupName: general
parameterGroups:
- name: general
label: General settings
timestamp: Nov 27, 2020, 2:45:11 PM
component: f7-page
config:
style:
position: relative
-ms-user-select: none
-moz-user-select: none
-webkit-user-select: none
user-select: none
background: rgba(42,48,78,1)
--f7-theme-color: none
--f7-page-content-extra-padding-top: 0
--f7-bars-bg-color: none
--f7-bars-border-color: none
--f7-navbar-shadow-image: none
--f7-navbar-text-color: white
--f7-bars-text-color: white
--f7-navbar-link-color: white
--f7-list-bg-color: rgba(0,0,0,.15)
--f7-list-border-color: none
--f7-list-margin-vertical: 7px
--hero-font-size: 91px
--value-font-size: 18px
--days-font-size: 16px
--text-size: 16px
--value-color: white
--condition-icon-size: 40px
slots:
default:
- component: f7-block
config:
style:
background: linear-gradient(to top, rgba(192, 212, 240, 1), rgba(53, 91, 142, 1))
background-size: cover
background-repeat: no-repeat
background-position: bottom left
padding: 30px 0 60px 0
margin-top: 0
slots:
default:
- component: f7-block
config:
class:
- no-padding
- no-margin
style:
background-image: url('data:image/svg+xml,%3Csvg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"%3E%3Cg transform="matrix(1,0,0,0.198289,0,-19.1443)"%3E%3Cpath d="M2000,116C1713.19,117.226 1658.73,122.546 1360.08,153.634C1159.33,174.531 926.563,327.589 572.792,351.218C337.726,366.918 155.294,280.98 0,298.274L0,500L2000,500L2000,116Z" style="fill:rgb(42,48,78);"/%3E%3C/g%3E%3C/svg%3E')
background-repeat: no-repeat
background-size: cover
background-position: bottom left
width: 100%
position: absolute
left: 0
bottom: 0
height: 100%
max-height: 80px
- component: f7-block
config:
style:
text-align: center
class:
- no-margin
- no-padding
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localStationName.state : items[props.itemPrefix + localStationName].displayState"
style:
margin-top: calc(var(--f7-toolbar-height) / 2 - var(--f7-toolbar-height))
margin-bottom: 20px
font-size: var(--value-font-size)
color: var(--value-color)
text-shadow: 2px 2px rgba(0,0,0,.35)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-row
config:
class:
- justify-content-center
slots:
default:
- component: f7-icon
config:
f7: "=(props.itemPrefix === undefined) ? items.localCurrentConditionID.displayState : items[props.itemPrefix + items.localCurrentConditionID].displayState"
color: white
size: 75
style:
text-shadow: 2px 2px rgba(0,0,0,.35)
left: 8px
top: 10px
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localCurrentTemperature.displayState : items[props.itemPrefix + localCurrentTemperature].displayState + 'C'"
style:
line-height: var(--hero-font-size)
font-size: var(--hero-font-size)
color: var(--value-color)
text-shadow: 2px 2px rgba(0,0,0,.35)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
padding-left: 10px
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localCurrentCondition.state : items[props.itemPrefix + localCurrentCondition].state"
class:
- no-padding-top
style:
font-size: var(--value-font-size)
text-shadow: .5px .5px rgba(0,0,0,.25)
color: var(--value-color)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
text-transform: capitalize
- component: f7-row
config:
class:
- justify-content-center
style:
flex-wrap: nowrap
slots:
default:
- component: Label
config:
text: "Percepita:"
style:
font-size: var(--value-font-size)
color: rgba(255,255,255,0.75)
text-shadow: .5px .5px rgba(0,0,0,.25)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localCurrentApparentTemperature.displayState : items[props.itemPrefix + localCurrentApparentTemperature].displayState"
style:
font-size: var(--value-font-size)
text-shadow: .5px .5px rgba(0,0,0,.25)
font-weight: 600
color: rgba(255,255,255,.75)
padding-left: 3px
- component: f7-block
config:
class: '=(items.weatherAlertEvent.state === undefined || items.weatherAlertEvent.state === "NULL") ? "display-none" : "display"'
style:
border: 1px solid rgba(255,255,255,.75)
background: rgba(255,255,255,.25)
position: relative
text-align: start
margin: 16px
padding: 16px
slots:
default:
- component: f7-block
config:
style:
position: absolute
top: -40px
left: -30px
slots:
default:
- component: f7-icon
config:
f7: sun_max
color: white
size: 40
slots:
default:
- component: f7-icon
config:
f7: exclamationmark_triangle_fill
color: red
size: 25
style:
left: -33px
top: 12px
- component: f7-row
config:
style:
align-items: center
justify-content: flex-start
flex-wrap: nowrap
overflow: hidden
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.weatherAlertEvent.state : items[props.itemPrefix + weatherAlertEvent].state"
style:
font-size: var(--value-font-size)
color: var(--value-color)
font-weight: 600
padding-right: 7px
- component: Label
config:
text: '=(props.itemPrefix === undefined) ? "("+items.weatherAlertSenderName.state+")" : "("+items[props.itemPrefix + weatherAlertSenderName].state+")"'
style:
color: var(--value-color)
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.weatherAlertDescription.state : items[props.itemPrefix + weatherAlertDescription].state"
style:
color: var(--value-color)
- component: f7-row
config:
style:
justify-content: flex-start
flex-wrap: nowrap
overflow: hidden
slots:
default:
- component: Label
config:
text: '=(props.itemPrefix === undefined) ? items.weatherAlarmStartTime.displayState+" - " : items[props.itemPrefix + weatherAlarmStartTime].displayState+" - "'
style:
color: rgba(255,255,255,.75)
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.weatherAlarmEndTime.displayState : items[props.itemPrefix + weatherAlarmEndTime].displayState"
style:
color: rgba(255,255,255,.75)
- component: f7-block
config:
style:
margin-top: -20px
class:
- no-padding
slots:
default:
- component: f7-row
config:
class:
- no-gap
slots:
default:
- component: f7-col
config:
visible: "=(items.localCurrentUVIndex.state >0) ? false : true"
style:
text-align: center
border-right: 2px solid white
slots:
default:
- component: f7-icon
config:
f7: sun_max_fill
color: white
size: 30
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? 'UV lev'+ items.localCurrentUVIndex.displayState : items[props.itemPrefix + localDailyForecastTodayRain].state"
style:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
font-size: var(--value-font-size)
color: var(--value-color)
- component: f7-col
config:
visible: "=(items.localDailyForecastTodayRain.state == 0) ? false : true"
style:
text-align: center
border-right: 2px solid white
slots:
default:
- component: f7-icon
config:
f7: cloud_rain
color: white
size: 30
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTodayRain.displayState : items[props.itemPrefix + localDailyForecastTodayRain].state"
style:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
font-size: var(--value-font-size)
color: var(--value-color)
- component: f7-col
config:
visible: "=(items.localDailyForecastTodaySnow.state == 0) ? false : true"
style:
text-align: center
border-right: 2px solid white
slots:
default:
- component: f7-icon
config:
f7: snow
color: white
size: 30
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTodaySnow.displayState : items[props.itemPrefix + localDailyForecastTodaySnow].displayState"
style:
font-size: var(--value-font-size)
color: var(--value-color)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-col
config:
style:
text-align: center
border-right: 2px solid white
slots:
default:
- component: f7-icon
config:
f7: thermometer
color: white
size: 30
style:
width: 100%
- component: f7-row
config:
style:
flex-wrap: nowrap
class:
- justify-content-center
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTodayMaxTemperature.displayState : items[props.itemPrefix + localDailyForecastTodayMaxTemperature].displayState"
style:
font-size: var(--value-font-size)
color: var(--value-color)
padding-right: 7px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTodayMinTemperature.displayState : items[props.itemPrefix + localDailyForecastTodayMinTemperature].displayState"
style:
font-size: var(--value-font-size)
color: rgba(255,255,255,0.75)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-col
config:
style:
text-align: center
visible: "=(items.localDailyForecastTodayWindSpeed.state > 1) ? false : true"
slots:
default:
- component: f7-icon
config:
f7: wind
color: white
size: 30
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTodayWindSpeed.displayState : items[props.itemPrefix + localDailyForecastTodayWindSpeed].displayState"
style:
font-size: var(--value-font-size)
color: var(--value-color)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
- component: f7-list
slots:
default:
- component: f7-accordion-item
config:
style:
color: var(--value-color)
slots:
default:
- component: f7-accordion-toggle
slots:
default:
- component: f7-row
config:
style:
flex-wrap: nowrap
class:
- align-items-center
slots:
default:
- component: f7-row
config:
style:
overflow: hidden
flex-wrap: nowrap
margin: 5px 0 5px 16px
class:
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: "=(props.itemPrefix === undefined) ? items.localDailyForecastTomorrowConditionID.displayState : items[props.itemPrefix + items.localDailyForecastTomorrowConditionID].displayState"
color: white
size: 30
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTomorrowTimestamp.displayState : items[props.itemPrefix + localDailyForecastTomorrowTimestamp].displayState"
style:
font-size: var(--days-font-size)
overflow: hidden
text-overflow: ellipsis
padding-left: 8px
- component: f7-row
config:
style:
flex-wrap: nowrap
margin: 5px 16px 5px 7px
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTomorrowMaxTemperature.displayState : items[props.itemPrefix + localDailyForecastTomorrowMaxTemperature].displayState"
style:
font-size: var(--value-font-size)
margin-right: 7px
min-width: 27px
text-align: right
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTomorrowMinTemperature.displayState : items[props.itemPrefix + localDailyForecastTomorrowMinTemperature].displayState"
style:
font-size: var(--value-font-size)
color: rgba(255,255,255,.75)
min-width: 27px
text-align: right
margin-right: 7px
- component: f7-accordion-content
slots:
default:
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Humidity
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTomorrowHumidity.displayState : items[props.itemPrefix + localDailyForecastTomorrowHumidity].displayState"
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Wind
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastTomorrowWindSpeed.state : items[props.itemPrefix + localDailyForecastTomorrowWindSpeed].state"
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: UV-Index
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localForecastTomorrowUVIndex.state : items[props.itemPrefix + localForecastTomorrowUVIndex].state"
- component: f7-list
slots:
default:
- component: f7-accordion-item
config:
style:
color: var(--value-color)
slots:
default:
- component: f7-accordion-toggle
slots:
default:
- component: f7-row
config:
style:
flex-wrap: nowrap
class:
- align-items-center
slots:
default:
- component: f7-row
config:
style:
overflow: hidden
flex-wrap: nowrap
margin: 5px 0 5px 16px
class:
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay2ConditionID.displayState : items[props.itemPrefix + localDailyForecastDay2ConditionID].displayState"
color: white
size: 30
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay2Timestamp.displayState : items[props.itemPrefix + localDailyForecastDay2Timestamp].displayState"
style:
font-size: var(--days-font-size)
overflow: hidden
text-overflow: ellipsis
padding-left: 8px
- component: f7-row
config:
style:
flex-wrap: nowrap
margin: 5px 16px 5px 7px
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay2MaxTemperature.displayState : items[props.itemPrefix + localDailyForecastDay2MaxTemperature].displayState"
style:
font-size: var(--value-font-size)
margin-right: 7px
min-width: 27px
text-align: right
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay2MinTemperature.displayState : items[props.itemPrefix + localDailyForecastDay2MinTemperature].displayState"
style:
font-size: var(--value-font-size)
color: rgba(255,255,255,.75)
min-width: 27px
text-align: right
- component: f7-accordion-content
slots:
default:
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Humidity
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay2Humidity.displayState : items[props.itemPrefix + localDailyForecastDay2Humidity].displayState"
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Wind
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay2WindSpeed.state : items[props.itemPrefix + localDailyForecastDay2WindSpeed].state"
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: UV-Index
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localForecastDay2UVIndex.state : items[props.itemPrefix + localForecastDay2UVIndex].state"
- component: f7-list
slots:
default:
- component: f7-accordion-item
config:
style:
color: var(--value-color)
slots:
default:
- component: f7-accordion-toggle
slots:
default:
- component: f7-row
config:
style:
flex-wrap: nowrap
class:
- align-items-center
slots:
default:
- component: f7-row
config:
style:
overflow: hidden
flex-wrap: nowrap
margin: 5px 0 5px 16px
class:
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay3ConditionID.displayState : items[props.itemPrefix + localDailyForecastDay3ConditionID].displayState"
color: white
size: 30
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay3Timestamp.displayState : items[props.itemPrefix + localDailyForecastDay3Timestamp].displayState"
style:
font-size: var(--days-font-size)
overflow: hidden
text-overflow: ellipsis
padding-left: 8px
- component: f7-row
config:
style:
flex-wrap: nowrap
margin: 5px 16px 5px 7px
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay3MaxTemperature.displayState : items[props.itemPrefix + localDailyForecastDay3MaxTemperature].displayState"
style:
font-size: var(--value-font-size)
margin-right: 7px
min-width: 27px
text-align: right
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay3MinTemperature.displayState : items[props.itemPrefix + localDailyForecastDay3MinTemperature].displayState"
style:
font-size: var(--value-font-size)
color: rgba(255,255,255,.75)
min-width: 27px
text-align: right
- component: f7-accordion-content
slots:
default:
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Humidity
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay3Humidity.displayState : items[props.itemPrefix + localDailyForecastDay3Humidity].displayState"
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Wind
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localDailyForecastDay3WindSpeed.state : items[props.itemPrefix + localDailyForecastDay3WindSpeed].state"
- component: f7-list-item
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: UV-Index
- component: f7-col
config:
style:
text-align: end
slots:
default:
- component: Label
config:
text: "=(props.itemPrefix === undefined) ? items.localForecastDay3UVIndex.state : items[props.itemPrefix + localForecastDay3UVIndex].state"
- component: f7-block
config:
style:
text-align: center
color: var(--value-color)
slots:
default:
- component: Label
config:
text: '=(props.itemPrefix === undefined) ? "Aggiornamento: "+items.localLastMeasurement.displayState : "Last update: "+items[props.itemPrefix + localLastMeasurement].displayState'
style:
font-size: var(--days-font-size)