Sure. It is based on the weather widget items definition from @RGroll, so using the prefix and items definition:
Here is my code. Please note that i have a link to wetteronline at the bottom of the code. Please adapt or link to whatever you like.
uid: weather_widget_v1
tags:
- homekit look
- black
- in use
props:
parameters:
- description: Location?
label: Location
name: propLoc
required: false
type: TEXT
- context: item
description: Outdoor Temperature Item
label: Item
name: itemTempOut
required: false
type: TEXT
- context: item
description: Daily Minimum Temperature
label: Item
name: itemTempMin
required: false
type: TEXT
- context: item
description: Daily Minimum Temperature
label: Item
name: itemTempMax
required: false
type: TEXT
- description: <b>Optional prefix</b> for item names.
label: Item prefix
name: itemPrefix
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 13, 2021, 12:44:48 PM
component: f7-card
config:
style:
noShadow: false
class:
- padding
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
background: linear-gradient(to top, rgba(0,0,0,1) 35%, rgba(80,80,80,1) 100%)
height: 8.5em
min-width: 9.5em
max-width: 400px
slots:
content:
- component: f7-block
config:
style:
margin: -9px
padding: 0px
display: flex
flex-direction: column
align-items: start
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: Label
config:
text: =props.propLoc
class: -margin-top
style:
color: rgb(255,255,255)
font-size: 20px
overflow: hidden
text-overflow: ellipsis
text-transform: uppercase
white-space: nowrap
margin-bottom: 0px
- component: f7-row
slots:
default:
- component: f7-icon
config:
f7: "=(items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '01d') ? 'sun_max_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '01n') ? 'moon_stars_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '02d') ? 'cloud_sun_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '02n') ? 'cloud_moon_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '03d') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '03n') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '04d') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '04n') ? 'cloud_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '13d') ? 'cloud_snow_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '13n') ? 'cloud_snow_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '50d') ? 'cloud_fog_fill' : (items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '50n') ? 'cloud_fog_fill' : ''"
size: 48
color: white
- component: Label
config:
text: =(Number.parseFloat(items[props.itemTempOut].state.split(" ")[0]) * 100 / 100).toFixed(0) + '°'
class: -margin-top
style:
font-size: 40px
margin-left: -2px
margin-top: -9px
color: rgb(255,255,255)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
font-weight: 300
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: Label
config:
text: "=(!props.itemPrefix) ? items.Current_Condition.state : items[props.itemPrefix + 'Current_Condition'].state"
style:
font-size: 10px
margin-left: 1px
margin-bottom: 0px
margin-top: 0px
color: rgb(255,255,255)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
font-weight: 400
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: Label
config:
text: ="Hi:" +" " + (Number.parseFloat(items[props.itemTempMax].state.split(" ")[0]) * 100 / 100).toFixed(0) + '°'
style:
font-size: 14px
margin-left: 0px
margin-top: 0px
color: rgb(255,255,255)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
font-weight: 500
- component: Label
config:
text: ="| Lo:" +" " + (Number.parseFloat(items[props.itemTempMin].state.split(" ")[0]) * 100 / 100).toFixed(0) + '°'
style:
font-size: 14px
margin-left: 0px
margin-top: 0px
color: rgb(255,255,255)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
font-weight: 400
- component: oh-link
config:
action: url
actionUrl: http://m.wetteronline.de/yourtown
open-in: .popOver
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0