Widget to Control the Light, with dimmer, colorpicker and scene selection with configurable color
Changelog
Version 0.1
- initial release
Resources
uid: Cell_Light
tags: []
props:
parameters:
- description: Header on top of the card
label: Header
name: header
required: false
type: TEXT
- description: Title of the card
label: Title
name: title
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Foreground Color
name: fgcolor
required: false
type: TEXT
- context: item
label: Color
name: color
required: false
type: TEXT
- context: item
label: Scenes
name: scenes
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 5, 2022, 10:46:15 PM
component: f7-card
config:
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 120px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: "=items[props.color].state.split(',')[2] === '0' ? 'lightbulb_slash' : 'lightbulb'"
size: 18
style:
margin-right: 10px
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.header ? props.header : ''"
- component: f7-block
config:
style:
flex-direction: row
left: 16px
position: absolute
top: 50px
slots:
default:
- component: Label
config:
style:
font-size: 14px
font-weight: 600
margin-left: 0px
margin-top: 0px
text: "=props.title ? props.title : ''"
- null
- component: oh-toggle
config:
color: =props.fgcolor
item: =props.color
style:
background: transparent
position: absolute
right: 10px
top: 10px
- component: oh-button
config:
action: options
actionItem: =props.scenes
color: =props.fgcolor
fill: false
style:
background: transparent
position: absolute
right: 0px
top: 80px
text: Scenes
visible: "=props.scenes ? true : false"
- component: oh-slider
config:
color: =props.fgcolor
item: =props.color
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 3px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 12px
bottom: -75px
left: 20px
position: absolute
width: calc(100% - 100px)
- component: f7-block
config:
style:
flex-direction: row
position: absolute
right: 10px
top: 60px
slots:
default:
- component: oh-colorpicker
config:
item: =props.color
openIn: auto