To use this widget you need to create a scenes groups which has to be configured in the main_widget. All members of this groups are of type switch and can then be used as trigger in certain rules to activate or deactivate scenes.
Screenshots
Changelog
Version 0.1
- initial release
Resources
uid: main_widget_Scene_Card
tags: []
props:
parameters:
- context: item
label: Item to control a scene
name: scene
required: true
type: TEXT
- context: Text
label: Item Label to control a scene
name: sceneName
required: true
type: TEXT
component: f7-card
config:
noShadow: false
padding: false
style:
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
margin-left: 5px
margin-right: 5px
background: '=items[props.scene].state == "ON" ? "linear-gradient(to bottom right, rgba(230, 230, 0) 0%, rgba(255, 255, 255) 100%)" : "linear-gradient(to bottom right, rgba(255, 255, 255) 0%, rgba(255, 255, 255) 100%)"'
stylesheet: >
.card-header:after {
display: none;
}
slots:
content:
- component: f7-card-content
config:
style:
height: 4rem
slots:
default:
- component: oh-icon
config:
icon: f7:rectangle_on_rectangle_angled
height: 36
style:
color: '=items[props.scene].state == "ON" ? "orange" : "black"'
position: absolute
top: 25px
left: 20px
- component: Label
config:
text: =props.sceneName
style:
color: black
font-weight: 600
font-size: 15px
position: absolute
top: 20px
margin-left: 4rem
- component: Label
config:
text: SCENE
style:
color: black
font-weight: 400
font-size: 10px
position: absolute
top: 45px
margin-left: 5rem
- component: oh-toggle
config:
item: =props.scene
color: yellow
style:
position: absolute
top: 30px
right: 20px
--f7-toggle-height: 30px
--f7-toggle-width: 60px