I was missing an Ikea Light widgets, so I have made one with inspiration from: [OH3 Remote Control Widget]
uid: IkeaLight
tags: []
props:
parameters:
- context: item
default: SengeLysB
description: Add brightness item
label: Light Brightness
name: dimmeritem
required: false
type: TEXT
- context: item
default: SengeLysC
description: Add Color item
label: Light Color
name: numberitem
required: false
type: TEXT
- context: item
default: SengeLys
description: Add on/off item
label: Light OnOff
name: OnOffitem
required: false
type: TEXT
- description: Name of light
label: Devicename
name: devicename
required: false
type: TEXT
groupName: labels
- default: "4000"
description: Kold light
label: Kold
name: kold
required: false
type: TEXT
groupName: commands
- default: "3101"
description: Normal light
label: Normal
name: normal
required: false
type: TEXT
groupName: commands
- default: "2202"
description: Warm light
label: Warm
name: warm
required: false
type: TEXT
groupName: commands
parameterGroups:
- name: items
label: Items to use
- name: labels
label: Labels to set
- name: commands
label: Commands to send
timestamp: Aug 8, 2021, 12:45:40 PM
component: f7-card
config:
style:
box-shadow: 2px 3px rgb(150,150,150)
background-color: rgb(192, 192, 192)
--f7-card-margin-horizontal: 0px
border-radius: 30px
width: 15rem
height: 7rem
slots:
default:
- component: oh-link
config:
color: black
style:
font-size: 15px
position: absolute
left: 10px
top: 0px
width: 60px
height: 20px
display: flex
text: '=(props.device) ? props.device : "Light"'
- component: oh-button
config:
bgColor: black
style:
position: absolute
left: 25px
top: 23px
width: 40px
height: 40px
border-radius: 12px
display: flex
- component: oh-button
config:
bgColor: black
style:
position: absolute
left: calc(100% - 65px)
top: 23px
width: 40px
height: 40px
border-radius: 12px
display: flex
- component: oh-slider
config:
item: =props.dimmeritem
color: '=(items[props.OnOffitem].state === "OFF") ? "red" : "yellow"'
bgColor: black
style:
position: absolute
left: 40px
top: 23px
width: calc(100% - 80px)
height: +40px
border-radius: 12px
--f7-range-knob-size: 25px
min: 0
max: 100
sliderSize: 25
- component: oh-button
config:
bgColor: black
style:
position: absolute
left: 25px
top: 68px
width: 40px
height: 40px
border-radius: 12px
display: flex
iconF7: lightbulb
iconSize: 25
iconColor: '=(items[props.OnOffitem].state === "OFF") ? "red" : "green"'
actionItem: =props.OnOffitem
action: toggle
actionCommand: ON
actionCommandAlt: OFF
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 75px
top: 68px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: Blue
iconF7: circle_fill
iconSize: 25
action: command
actionCommand: =props.kold
actionItem: =props.numberitem
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 125px
top: 68px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: Yellow
iconF7: circle_fill
iconSize: 25
action: command
actionCommand: =props.normal
actionItem: =props.numberitem
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 175px
top: 68px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: red
iconF7: circle_fill
iconSize: 25
action: command
actionCommand: =props.warm
actionItem: =props.numberitem
