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'"