Hello
I am using a mystrom bulb. When I use a list with colorpicker-list-items, they all come with a color picker and a switch. This is nice, but the switch sends the On / Off command to the color channel. This is not of any use for me, since myStrom uses a separate channel for On and Off. Actually I’m not sure it this is really a good idea, how the standard colorpicker-list-item is implemented. It imho should offer a separate, configurable channel for On Off.
However, I quickly wanted to make my own widget for this. Since I couldn’t find it already, I’d like to share the final solution. Maybe someone else has use for this too.
It is quite raw - for example the color picker modules are hard coded, but you can extend it at your own needs.
uid: ColorPickerListItemWithSeparateColorAndOnOffItems
tags: []
props:
parameters:
- default: Enter title here
description: The list item text
label: Text
name: text
required: false
type: TEXT
- context: item
description: The color item
label: Color Item
name: colorItem
required: false
type: TEXT
- context: item
description: The item to turn the lamp on or off
label: On / Off Item
name: onOffItem
required: false
type: TEXT
- default: red
description: Background color of the toggle
label: Color of toggle
name: bgColorToggle
required: false
type: TEXT
- default: oh:rgb
description: The icon to display
label: Icon
name: icon
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 27, 2021, 12:52:43 PM
component: oh-list-item
config:
title: =props.text
icon: =props.icon
slots:
after:
- component: f7-row
config:
style:
align-items: center
gap: 8px
margin-right: 8px
slots:
default:
- component: f7-col
slots:
default:
- component: oh-colorpicker
config:
openIn: auto
item: =props.colorItem
modules:
- hs-spectrum
- brightness-slider
- rgb-bars
- component: f7-col
slots:
default:
- component: oh-toggle
config:
color: =(props.bgColorToggle)
item: =props.onOffItem