Hi,
Can You share the yaml from your widgets ?
Thanks
// Artur
Made a widget with animated icons and quick access switches by swiping left…
I got the idea for widgets here:
And the widget code itself is a hodgepodge of pieces of community member codes and examples from the documentation… since I don’t understand it very well myself.
I don’t know if the widget code is written correctly or not, but it works and does what I wanted.
Maybe someone will see parts of their code)…
In this example, the fan icon is animated… I made animated icons for heating and cooling using this template…
You can also make animated icons for air conditioner operating modes, for example…
Any changes, corrections, improvements, modifications are welcome…
uid: ROOM_card_KITCHEN
tags: []
props:
parameters:
- label: Header
name: text_header
required: false
type: TEXT
- description: Icon on top of the card (oh:iconName or iconName, f7:iconName,
iconify:iconSet:iconName)
label: Icon
name: icon
required: false
type: TEXT
- description: Page which will be opened as popup
label: Page ID
name: page
required: false
- context: item
description: select group for status lights
label: Item
name: status
required: false
type: TEXT
- context: item
description: select item for temperature
label: Item
name: temp
required: false
type: TEXT
- context: item
description: select item for humidity
label: Item
name: humidity
required: false
type: TEXT
- context: item
description: select item for door state(s)
label: Item
name: door_state
required: false
type: TEXT
- context: item
description: select item for door lock(s)
label: Item
name: door_lock
required: false
type: TEXT
- context: item
description: select item for windows(s)
label: Item
name: windows
required: false
type: TEXT
- context: item
description: select item for numbers of windows
label: Item
name: windows_numbers
required: false
type: TEXT
- context: item
description: select item for fan
label: Item
name: fan
required: false
type: TEXT
- context: item
label: Item to Switch
name: switchItem
required: false
type: TEXT
timestamp: May 5, 2025, 4:51:54 PM
component: f7-card
config:
style:
background: transparent
background-color: "=(Number(items[props.status].state) > 0) ? 'rgba(255, 152, 0, 0.1)' : ''"
border-radius: var(--f7-card-expandable-border-radius)
class:
- padding: 0px
height: 125px
margin-left: 5px
margin-right: 5px
noShadow: false
slots:
default:
- component: f7-card-content
config:
class:
- display-flex
- flex-direction-column
- justify-content-flex-start
- align-items-center
style:
height: 125px
overflow: hidden
padding: 0px 0px 0px 0px
slots:
default:
- component: f7-row
config:
style:
width: 100%
slots:
default:
- component: f7-swiper
config:
params:
initialSlide: 0
scrollbar:
el: .scrollbar-container
hide: true
slidesPerView: 1
spaceBetween: 10
style:
height: 125px
overflow: visible
width: 100%
slots:
default:
- component: f7-swiper-slide
config:
style:
height: 100%
width: 100%
slots:
default:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 0px
position: absolute
top: -14px
slots:
default:
- component: f7-chip
config:
style:
--f7-chip-bg-color: "=(Number(items[props.status].state) > 0) ? 'rgba(255, 152,
0, 0.3)' : (themeOptions.dark ===
'dark') ? 'rgba(255, 255, 255, 0.1)' :
'rgba(0, 0, 0, 0.1)'"
--f7-chip-height: 60px
--f7-chip-padding-horizontal: 0px
left: -20px
top: -9px
slots:
media:
- component: oh-icon
config:
height: 38px
icon: '=props.icon ? props.icon : ""'
style:
color: "=(Number(items[props.status].state) > 0) ? 'orange' : (themeOptions.dark
=== 'dark') ? 'grey' : 'grey'"
- component: Label
config:
style:
color: "=(themeOptions.dark === 'dark') ? 'white' : 'black'"
font-size: 18px
font-weight: 600
margin-left: -10px
margin-top: 4px
text: "=props.text_header ? props.text_header : 'Кухня'"
- component: f7-block
config:
style:
left: -3px
position: absolute
top: 59px
width: 60%
slots:
default:
- component: f7-row
config:
style:
align-items: center
display: flex
height: 0
justify-content: flex-start
padding-top: 0px
position: absolute
width: 100%
slots:
default:
- component: oh-icon
config:
height: 24px
icon: "=(Number(items[props.status].state) > 0) ? 'iconify:mdi:lightbulb-group'
: 'iconify:mdi:lightbulb-group'"
style:
color: "=(Number(items[props.status].state) > 0) ? 'orange' : (themeOptions.dark
=== 'dark') ? 'grey' : 'grey'"
padding-right: 0px
- component: Label
config:
style:
font-size: 11px
padding-bottom: 10px
padding-right: 0px
text: "=(Number(items[props.status].state) > 0) ? items[props.status].state :
''"
- component: f7-block
config:
style:
left: 34px
position: absolute
top: 59px
slots:
default:
- component: f7-row
config:
style:
align-items: center
display: flex
height: 0
justify-content: flex-start
padding-top: 0px
position: absolute
width: 100%
stylesheet: |
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
} svg{
animation-name: spin;
animation-duration: 0.8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
slots:
default:
- component: oh-icon
config:
height: 24px
icon: iconify:material-symbols:mode-fan
style:
color: "= (items[props.fan].state === 'OFF') ? 'grey' : (themeOptions.dark ===
'dark') ? 'rgba(0, 150, 255, 1)'
: 'rgba(0, 150, 255, 1)'"
display: '= (items[props.fan].state === "ON") ? "inherit" : "none"'
- component: f7-row
config:
style:
align-items: center
display: flex
height: 0
justify-content: flex-start
padding-top: 0px
position: absolute
width: 100%
slots:
default:
- component: oh-icon
config:
height: 24px
icon: iconify:material-symbols:mode-fan
style:
color: "= (items[props.fan].state === 'OFF') ? 'grey' : (themeOptions.dark ===
'dark') ? 'grey' : 'grey'"
display: '= (items[props.fan].state === "OFF") ? "inherit" : "none"'
- component: f7-block
config:
style:
left: 68px
position: absolute
top: 59px
width: 100%
slots:
default:
- component: f7-row
config:
style:
align-items: center
display: flex
height: 0
justify-content: flex-start
padding-top: 0px
position: absolute
width: 100%
slots:
default:
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
text: "=items[props.door_state].state === 'OPEN' ? '' : ''"
visible: "=props.door_state ? true : false"
slots:
media:
- component: oh-icon
config:
icon: "=items[props.door_state].state === 'OPEN' ? 'door-open' : 'door-closed'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
text: "=items[props.windows_numbers].state > 0 ?
items[props.windows_numbers].state
: ''"
visible: "=items[props.windows].state >= 0 ? true : false"
slots:
media:
- component: oh-icon
config:
icon: "=items[props.windows].state > 0 ? 'window-open' : 'window-closed'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=items[props.door_lock].state === 'OPEN' ? 'lock_open' : 'lock'"
iconSize: 18
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
text: "=items[props.door_lock].state === 'OPEN' ? '' : ''"
visible: "=props.door_lock ? true : false"
- component: f7-block
config:
style:
left: -6px
position: absolute
top: 92px
width: 80%
slots:
default:
- component: f7-row
config:
style:
align-items: center
display: flex
height: 0
justify-content: flex-start
padding-top: 0px
position: absolute
width: 100%
slots:
default:
- component: oh-icon
config:
height: 18px
icon: iconify:mingcute:thermometer-fill
style:
color: "=(themeOptions.dark === 'dark') ? 'white' : 'black'"
padding-left: 5px
visible: "=props.temp ? true : false"
- component: Label
config:
style:
font-size: 12px
padding-right: 0px
text: =items[props.temp].state + "°"
visible: "=props.temp ? true : false"
- component: oh-icon
config:
height: 18px
icon: iconify:mdi:drop
style:
color: "=(themeOptions.dark === 'dark') ? 'white' : 'black'"
padding-left: 5px
visible: "=props.humidity ? true : false"
- component: Label
config:
style:
font-size: 12px
padding-left: 0px
text: =items[props.humidity].state + "%"
visible: "=props.humidity ? true : false"
- component: oh-icon
config:
color: "=(items.Presence.state) === 'ON' ? 'rgb(0, 255, 0, 1)' :
(themeOptions.dark === 'dark') ?
'grey' : 'grey'"
height: 18px
icon: "=(Number(items[props.status].state) > 0) ? 'iconify:mdi:television-play'
: 'iconify:mdi:television-play'"
style:
padding-left: 10px
- component: oh-link
config:
action: popup
actionModal: = 'page:' + props.page
style:
height: 125px
left: 0px
position: absolute
top: 0px
width: 100%
- component: f7-swiper-slide
config:
style:
height: 100%
width: 100%
slots:
default:
- component: f7-block
config:
style:
left: 0px
position: absolute
top: -11px
width: 100%
slots:
default:
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: WallSwitchKitchen_WallSwitchKitchen
slots:
default:
- component: oh-icon
config:
color: "=(items.WallSwitchKitchen_WallSwitchKitchen.state === 'ON') ? 'orange' :
(themeOptions.dark ===
'dark') ? 'grey' :
'grey'"
height: 35px
icon: "=(items.WallSwitchKitchen_WallSwitchKitchen.state === 'ON') ?
'iconify:mdi:chandeli\
er' :
'iconify:mdi:chandeli\
er'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: vutyazka_kuhnya__
slots:
default:
- component: oh-icon
config:
color: "=(items.vutyazka_kuhnya__.state === 'ON') ? 'orange' :
(themeOptions.dark ===
'dark') ? 'grey' :
'grey'"
height: 35px
icon: "=(items.vutyazka_kuhnya__.state === 'ON') ?
'iconify:material-symbols:mod\
e-fan' :
'iconify:material-sym\
bols:mode-fan'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
visible: false
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: WallSwitchKitchen_WallSwitchKitchen
slots:
default:
- component: oh-icon
config:
color: "=(items.WallSwitchKitchen_WallSwitchKitchen.state === 'ON') ? 'orange' :
(themeOptions.dark ===
'dark') ? 'grey' :
'grey'"
height: 35px
icon: "=(items.WallSwitchKitchen_WallSwitchKitchen.state === 'ON') ?
'iconify:mdi:chandeli\
er' :
'iconify:mdi:chandeli\
er'"
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.switchItem
style:
color: "=themeOptions.dark === 'dark' ? 'orange' : 'black'"
opacity: 0.9
slots:
default:
- component: oh-icon
config:
color: "=(items.Presence.state) === 'ON' ? 'rgb(0, 255, 0, 1)' :
(themeOptions.dark ===
'dark') ? 'grey' :
'grey'"
height: 35px
icon: "=(Number(items[props.status].state) > 0) ? 'iconify:mdi:television-play'
:
'iconify:mdi:televisi\
on-play'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
visible: false
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.switchItem
style:
color: "=themeOptions.dark === 'dark' ? 'orange' : 'black'"
opacity: 0.9
slots:
default:
- component: oh-icon
config:
color: "=(items.Presence.state) === 'ON' ? 'rgb(0, 255, 0, 1)' :
(themeOptions.dark ===
'dark') ? 'grey' :
'grey'"
height: 35px
icon: "=(Number(items[props.status].state) > 0) ? 'iconify:mdi:television-play'
:
'iconify:mdi:televisi\
on-play'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
visible: '= (items[props.fan].state === "ON") ? "false" : "false"'
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.switchItem
style:
color: "=themeOptions.dark === 'dark' ? 'orange' : 'black'"
opacity: 0.9
slots:
default:
- component: oh-icon
config:
color: "=(Number(items[props.status].state) > 0) ? 'orange' : (themeOptions.dark
=== 'dark') ? 'grey' :
'grey'"
height: 35px
icon: "=(Number(items[props.status].state) > 0) ? 'iconify:mdi:laptop' :
'iconify:mdi:laptop'"
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
visible: '= (items[props.fan].state === "ON") ? "false" : "false"'
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: WS8212_HSB_WS8212
slots:
default:
- component: oh-icon
config:
color: "=(items.WS8212_1_sw_ws8212.state === 'ON') ? 'orange' :
(themeOptions.dark ===
'dark') ? 'grey' :
'grey'"
height: 35px
icon: "=(items.WS8212_1_sw_ws8212.state === 'ON') ? 'iconify:mdi:lamps' :
'iconify:mdi:lamps'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
visible: '= (items[props.fan].state === "ON") ? "true" : "false"'
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.switchItem
slots:
default:
- component: oh-icon
config:
color: "=(Number(items[props.status].state) > 0) ? 'orange' : (themeOptions.dark
=== 'dark') ? 'grey' :
'grey'"
height: 20px
icon: "=(Number(items[props.status].state) > 0) ? 'iconify:mdi:power-socket-eu'
:
'iconify:mdi:power-so\
cket-eu'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
visible: '= (items[props.fan].state === "ON") ? "false" : "false"'
slots:
default:
- component: oh-link
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.switchItem
slots:
default:
- component: oh-icon
config:
color: "=(Number(items[props.status].state) > 0) ? 'orange' : (themeOptions.dark
=== 'dark') ? 'grey' :
'grey'"
height: 35px
icon: "=(Number(items[props.status].state) > 0) ? 'iconify:mdi:lightbulb-group'
:
'iconify:mdi:lightbul\
b-group'"