Hey @JimT
It should work with your code, if the item gets updated with a new image url (if the url doens’t change the item won’t get updated) - in a quick test everything seems to works fine.
Simplest soloution would be to get rid of the ’ oh-label-card’ and using another component here. Something like this would work:
Transparent card (YAML)
- component: f7-card
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
height: 60px
background: rgba(255,255,255,.5)
font-size: .8rem
slots:
default:
- component: Label
config:
text: =items[props.title].state
If you want to use the button-component here, you could adjust the button-height and the iconSize prop:
Adjusting the icon size in buttons (YAML)
- component: oh-button
config:
action: command
actionItem: PhotoFrame_Prev
actionCommand: ON
iconF7: chevron_left
iconSize: 50
style:
--f7-button-height: 60px
Generally doable
Exactly - for example a concetenated string with the the url and the description text for each photo as an item state would work here and could be used in a swiper. You have to use the ‘oh-repeater’ component to make it dynamic. In the below example, the state of your item would be:
https://yourimageurl1.com/something.png,A nice image;https://yourimageurl2.com/something.png,Another one
It might be usefull to adjust the used delimeter here, as ‘,’ and ‘;’ might occur in your description text - but I’m sure you can do that easily as it seems you have some developing experience.
All images gets refreshed, if the item state string changes - so reordering your images or adding new ones would work.
Dynamic image swiper (YAML)
- component: f7-swiper
config:
navigation: true
params:
initalSlide: 0
runCallbacksOnInit: true
grabCursor: true
observer: true
observeSlideChildren: true
updateOnWindowResize: true
spaceBetween: 5
mousewheel: true
keyboard: true
watchOverflow: true
slidesPerView: 1
style:
--swiper-navigation-size: 50px
--swiper-navigation-color: white
z-index: 0
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: images
rangeStart: 1
rangeStop: =items[props.image].state.split(';').length
fragment: true
slots:
default:
- component: f7-swiper-slide
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
width: 100%
height: 100%
position: relative
slots:
default:
- component: oh-image
config:
url: =items[props.image].state.split(';')[loop.images_idx].split(',')[0]
style:
width: 100%
height: 100%
object-fit: contain # You could also use 'cover' here and set a fixed height, which would compensate for differences in image-size
- component: f7-card
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
position: absolute
bottom: 0
height: 60px
width: 80%
background: rgba(255,255,255,.75)
font-size: 1.25rem
z-index: 999
slots:
default:
- component: Label
config:
text: =items[props.image].state.split(';')[loop.images_idx].split(',')[1]
P.S. You could also adjust the chevron size and color here easily, with the f7 css-variables
--swiper-navigation-size: 50px
--swiper-navigation-color: white
Possible. You just have to add a component on top of the root component and overlaying it with a ‘oh-link’ component to trigger the popup-action. Something like this should work:
Weather overlay example (YAML)
- component: f7-card
config:
class:
- padding
style:
position: absolute
top: 40px
left: 60px
background: rgba(255,255,255,.5)
z-index: 2
--weather-card-color: 255,255,255
--weather-card-text-shadow-color: 0,0,0
--weather-card-text-color: rgba(var(--weather-card-color),1)
color: var(--weather-card-text-color)
--weather-font-size-xxsmall: 12px
--weather-font-size-large: 26px
--weather-font-size-xlarge: 60px
--weather-font-size-xxlarge: 70px
--weather-text-shadow-light: 2px 2px rgba(var(--weather-card-text-shadow-color),.15)
--weather-text-shadow-strong: 2px 2px rgba(var(--weather-card-text-shadow-color),.35)
--weather-text-transform-time: uppercase
slots:
default:
- component: oh-link
config:
action: popup
actionModal: widget:weatherCard
actionModalConfig:
itemPrefix: OneCallAPIweatherandforecast_
forecastHours: "12"
forecastDays: "3"
sunIndicator: true
locationTitle: Some city
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0
z-index: 99
- component: Label
config:
text: Some city
style:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
letter-spacing: .75px
font-size: var(--weather-font-size-large)
text-shadow: var(--weather-text-shadow-strong)
font-weight: 600
- component: Label
config:
text: =dayjs().format('DD. MMMM YYYY')
style:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
color: rgba(var(--weather-card-color),.7)
letter-spacing: .75px
font-size: var(--weather-font-size-xxsmall)
text-shadow: var(--weather-text-shadow-light)
- component: f7-block
config:
class:
- display-flex
- align-items-center
- justify-content-flex-start
style:
flex-wrap: nowrap
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' : '?'"
style:
text-shadow: var(--weather-text-shadow-strong)
font-size: var(--weather-font-size-xxlarge)
padding-top: 5px
padding-bottom: 5px
margin-right: 16px
- component: Label
config:
text: "=Math.round(items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Temperature'].state.split(' ')[0]) + '°'"
style:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
text-shadow: var(--weather-text-shadow-strong)
font-size: var(--weather-font-size-xlarge)
line-height: var(--weather-font-size-xlarge)
font-weight: 600
display: inline
Everything cobbled together could look something like this (Just a quick and dirty approach during a boring meeting - so it would be good checking everything again ):
Dynamic image slider weather overlay thingy (YAML)
uid: widget_photoframe
tags: []
props:
parameters:
- description: <b>Optional prefix</b> for item names
label: Item prefix
name: itemPrefix
required: false
type: TEXT
- context: item
description: Item which holds the image-url and the title
label: Image/Title Item
name: image
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 16, 2021, 1:50:26 AM
component: f7-block
config:
style:
position: relative
slots:
default:
- component: f7-swiper
config:
navigation: true
params:
initalSlide: 0
runCallbacksOnInit: true
grabCursor: true
observer: true
observeSlideChildren: true
updateOnWindowResize: true
spaceBetween: 5
mousewheel: true
keyboard: true
watchOverflow: true
slidesPerView: 1
style:
--swiper-navigation-size: 50px
--swiper-navigation-color: white
z-index: 0
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: images
rangeStart: 1
rangeStop: =items[props.image].state.split(';').length
fragment: true
slots:
default:
- component: f7-swiper-slide
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
width: 100%
height: 100%
position: relative
slots:
default:
- component: oh-image
config:
url: =items[props.image].state.split(';')[loop.images_idx].split(',')[0]
style:
width: 100%
height: 100%
object-fit: contain # You could also use 'cover' here and set a fixed height, which would compensate for differences in image-size
- component: f7-card
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
position: absolute
bottom: 0
height: 60px
width: 80%
background: rgba(255,255,255,.75)
font-size: 1.25rem
z-index: 999
slots:
default:
- component: Label
config:
text: =items[props.image].state.split(';')[loop.images_idx].split(',')[1]
- component: f7-card
config:
class:
- padding
style:
position: absolute
top: 40px
left: 60px
background: rgba(255,255,255,.5)
z-index: 2
--weather-card-color: 255,255,255
--weather-card-text-shadow-color: 0,0,0
--weather-card-text-color: rgba(var(--weather-card-color),1)
color: var(--weather-card-text-color)
--weather-font-size-xxsmall: 12px
--weather-font-size-large: 26px
--weather-font-size-xlarge: 60px
--weather-font-size-xxlarge: 70px
--weather-text-shadow-light: 2px 2px rgba(var(--weather-card-text-shadow-color),.15)
--weather-text-shadow-strong: 2px 2px rgba(var(--weather-card-text-shadow-color),.35)
--weather-text-transform-time: uppercase
slots:
default:
- component: oh-link
config:
action: popup
actionModal: widget:weatherCard
actionModalConfig:
itemPrefix: OneCallAPIweatherandforecast_
forecastHours: "12"
forecastDays: "3"
sunIndicator: true
locationTitle: Some city
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0
z-index: 99
- component: Label
config:
text: Some city
style:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
letter-spacing: .75px
font-size: var(--weather-font-size-large)
text-shadow: var(--weather-text-shadow-strong)
font-weight: 600
- component: Label
config:
text: =dayjs().format('DD. MMMM YYYY')
style:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
color: rgba(var(--weather-card-color),.7)
letter-spacing: .75px
font-size: var(--weather-font-size-xxsmall)
text-shadow: var(--weather-text-shadow-light)
- component: f7-block
config:
class:
- display-flex
- align-items-center
- justify-content-flex-start
style:
flex-wrap: nowrap
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' : '?'"
style:
text-shadow: var(--weather-text-shadow-strong)
font-size: var(--weather-font-size-xxlarge)
padding-top: 5px
padding-bottom: 5px
margin-right: 16px
- component: Label
config:
text: "=Math.round(items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Current_Temperature'].state.split(' ')[0]) + '°'"
style:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
text-shadow: var(--weather-text-shadow-strong)
font-size: var(--weather-font-size-xlarge)
line-height: var(--weather-font-size-xlarge)
font-weight: 600
display: inline