hello everyone, i’m running into an issue with my easy custom widget but i can’t find where issues are.
the problem i’m facing is that when i set the group of lights in props, i can’t get auto refresh of the footer that shows which lights are on.
i get auto refresh on the header text line, but not on the footer (that’s managed by oh-repeater, and i think the issue is there).
can anyone check and point me to the right direction?
uid: Universal_Scene_Card_V2
tags: []
props:
parameters:
- description: Header title
label: Header
name: Header
required: false
type: TEXT
- description: Icon of the card
label: Icon
name: Icon
required: false
type: TEXT
- context: item
description: Security Group Item
label: Security Group Item
name: Security
required: true
type: TEXT
- context: item
description: Special Group Item
label: Special Group Item
name: Special
required: false
type: TEXT
- context: item
description: Rollershutters Group Item
label: Rollershutters Group Item
name: Rollers
required: false
type: TEXT
- context: item
description: Internal Lights Group Item
label: Internal Lights Group Item
name: Lights
required: false
type: TEXT
- context: item
description: Garden lights Group Item
label: Garden Lights Group Item
name: Garden
required: false
type: TEXT
timestamp: May 24, 2023, 12:06:06 PM
component: f7-card
config:
style:
background: linear-gradient(to top left,#000000 0%,#8000ff 100%)
border-radius: 10px
slots:
default:
- component: f7-card-header
config:
style:
background: linear-gradient(to right,#400000 30%,#ff0000 100%)
border-radius: 10px 10px 0px 0px
visible: "=props.Header ? true : false"
slots:
default:
- component: f7-block
config:
style:
display: flex
margin: -10px
width: 100%
slots:
default:
- component: oh-icon
config:
height: 25
icon: iconify:mdi:cards
style:
color: white
- component: Label
config:
style:
color: white
font-size: 15px
font-weight: 500
margin-left: 10px
text: =props.Header
- component: f7-card-content
config: {}
slots:
default:
- component: oh-button
config:
style:
height: auto
left: 0
position: absolute
slots:
default:
- component: oh-icon
config:
color: white
icon: =props.Icon
width: 20px
- component: Label
config:
style:
font-size: 15px
left: 40px
margin-top: -2px
position: absolute
text: =props.Title
- component: f7-row
config:
class:
- justify-content-center
style:
background: transparent
height: 30px
margin-top: 15px
slots:
default:
- component: f7-col
config:
width: 50
slots:
default:
- component: oh-button
config:
action: command
actionCommand: ON
actionItem: =props.Rollers
style:
height: auto
slots:
default:
- component: oh-icon
config:
color: '=items[props.Security].state == "OFF" ? "#00ff00" : "gray"'
icon: '=items[props.Security].state == "OFF" ? "iconify:bi:shield-fill-check" : "iconify:bi:shield-fill-exclamation"'
width: 70px
- component: f7-col
config:
width: 50
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionItem: =props.Security
style:
height: auto
slots:
default:
- component: oh-icon
config:
color: '=items[props.Security].state == "ON" ? "red" : "gray"'
icon: '=items[props.Security].state == "ON" ? "iconify:bi:shield-fill-check" : "iconify:bi:shield-fill-exclamation"'
width: 70px
- component: f7-row
config:
class:
- justify-content-center
style:
height: auto
margin-top: 40px
slots:
default:
- component: f7-col
config:
width: 50
slots:
default:
- component: Label
config:
style:
color: white
font-size: 20px
font-weight: 500
overflow: hidden
text-align: center
text-decoration: underline
text-decoration-color: '=items[props.Security].state == "OFF" ? "green" : "transparent"'
text-overflow: ellipsis
text-underline-offset: 4px
white-space: nowrap
text: Disinserito
- component: f7-col
config:
width: 50
slots:
default:
- component: Label
config:
style:
color: white
font-size: 20px
font-weight: 500
overflow: hidden
text-align: center
text-decoration: underline
text-decoration-color: '=items[props.Security].state == "ON" ? "red" : "transparent"'
text-overflow: ellipsis
text-underline-offset: 4px
white-space: nowrap
text: Inserito
- component: f7-card-content
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
height: 20px
style:
text-align: center
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.Special
style:
background: transparent
height: auto
slots:
default:
- component: oh-icon
config:
color: '=items[props.Special].state == "ON" ? "rgb(204, 51, 255)" : "rgb(191, 191, 191)"'
icon: iconify:fluent:animal-cat-28-regular
width: 30px
- component: Label
config:
style:
color: '=items[props.Special].state == "ON" ? "rgb(204, 51, 255)" : "rgb(191, 191, 191)"'
font-size: 13px
text-decoration: '=items[props.Special].state == "ON" ? "underline" : ""'
text-underline-offset: 4px
text: Tapparelle Hope
- component: f7-col
config:
height: 20px
style:
text-align: center
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.Rollers
style:
background: transparent
height: auto
slots:
default:
- component: oh-icon
config:
color: '=items[props.Rollers].state == "ON" ? "rgb(204, 51, 255)" : "rgb(191, 191, 191)"'
icon: iconify:mdi:window-shutter
width: 30px
- component: Label
config:
style:
color: '=items[props.Rollers].state == "ON" ? "rgb(204, 51, 255)" : "rgb(191, 191, 191)"'
font-size: 13px
text-decoration: '=items[props.Rollers].state == "ON" ? "underline" : ""'
text-underline-offset: 4px
text: Tapparelle
- component: f7-col
config:
height: 20px
style:
text-align: center
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.Lights
style:
background: transparent
height: auto
slots:
default:
- component: oh-icon
config:
color: '=items[props.Lights].state == "ON" ? "rgb(204, 51, 255)" : "rgb(191, 191, 191)"'
icon: iconify:akar-icons:light-bulb
width: 30px
- component: Label
config:
style:
color: '=items[props.Lights].state == "ON" ? "rgb(204, 51, 255)" : "rgb(191, 191, 191)"'
font-size: 13px
text-decoration: '=items[props.Lights].state == "ON" ? "underline" : ""'
text-underline-offset: 4px
text: Luci Interne
- component: f7-col
config:
height: 50px
style:
text-align: center
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.Garden
style:
background: transparent
height: auto
slots:
default:
- component: oh-icon
config:
color: '=items[props.Garden].state == "ON" ? "rgb(204, 51, 255)" : "rgb(191, 191, 191)"'
icon: iconify:maki:garden
width: 30px
- component: Label
config:
style:
color: '=items[props.Garden].state == "ON" ? "rgb(204, 51, 255)" : "rgb(191, 191, 191)"'
font-size: 13px
text-decoration: '=items[props.Garden].state == "ON" ? "underline" : ""'
text-underline-offset: 4px
text: Luci Giardino
- component: f7-card-content
config:
visible: '=items[props.Special].state == "ON" | items[props.Rollers].state == "ON" | items[props.Lights].state == "ON" | items[props.Garden].state == "ON" ? true : false'
slots:
default:
- component: f7-block
config:
style:
margin-top: 0
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: Label
config:
style:
color: yellow
text: '=items[props.Special].state == "ON" ? "Lo scenario tapparelle Hope è attivo." : ""'
- component: Label
config:
style:
color: yellow
text: '=items[props.Rollers].state == "ON" ? "Ci sono tapparelle aperte." : ""'
- component: Label
config:
style:
color: yellow
text: '=items[props.Lights].state == "ON" ? "Ci sono luci accese in casa." : ""'
- component: Label
config:
style:
color: yellow
text: '=items[props.Garden].state == "ON" ? "Le luci del giardino sono accese." : ""'
- component: f7-card-footer
config:
refreshInterval: 1000
slots:
default:
- component: f7-block
config: {}
slots:
default:
- component: f7-row
config:
style:
width: 155px
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.Rollers
slots:
default:
- component: oh-icon
config:
color: '=items[props.Rollers].state == "OFF" ? "#40ff00" : "#ff0000"'
icon: '=items[props.Rollers].state == "OFF" ? "iconify:bi:shield-fill-check" : "iconify:bi:shield-fill-exclamation"'
width: 20px
- component: Label
config:
style:
color: white
font-size: 13px
margin-left: -15px
text: Tapparelle
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.Lights
slots:
default:
- component: oh-icon
config:
color: '=items[props.Lights].state == "OFF" ? "#40ff00" : "#ff0000"'
icon: '=items[props.Lights].state == "OFF" ? "iconify:bi:shield-fill-check" : "iconify:bi:shield-fill-exclamation"'
width: 20px
- component: Label
config:
style:
color: white
font-size: 13px
margin-left: -15px
text: Luci
- component: f7-row
config:
style:
margin-top: 15px
width: 100%
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: '(loop.lightItem.category == "Light") ? true : false'
for: lightItem
itemTags: Switch
sourceType: itemsWithTags
slots:
default:
- component: f7-row
config:
visible: '=(loop.lightItem.state == "ON") ? true : false'
slots:
default:
- component: Label
config:
style:
color: white
font-size: 15px
font-weight: 500
text: =loop.lightItem.label
- component: f7-chip
config:
style:
background: rgb(204, 51, 255)
border-radius: 8px
color: white
font-size: 15px
font-weight: 500
left: 20px
width: auto
text: '=(loop.lightItem.state != "OFF") ? "Accesa": "Spenta"'
- component: f7-row
config:
visible: '=(loop.rollerItem.state != "100") ? true : false'
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: '(loop.rollerItem.category=="Blinds") ? true : false'
for: rollerItem
itemTags: Blinds
sourceType: itemsWithTags
slots:
default:
- component: f7-row
config:
visible: '=(loop.rollerItem.state != "100") ? true : false'
slots:
default:
- component: Label
config:
style:
color: white
font-size: 15px
font-weight: 500
text: =loop.rollerItem.label
- component: f7-chip
config:
style:
background: rgb(204, 51, 255)
border-radius: 8px
color: white
font-size: 15px
font-weight: 500
left: 20px
width: auto
text: '=(loop.rollerItem.state == "0") ? "Aperta" : (loop.rollerItem.state != "100") ? "Chiusa al " + loop.rollerItem.state + "%" : "Chiusa"'
thanks a lot!
