Hue Color Picker Not Working for Color Selection

Setup, Configuration and Use Widgets
1

've implemented a custom Cell_hueLight_Card_1 widget that includes a variety of controls for managing lighting settings, including switch, brightness, scene selection, and a color picker. Despite setting up the oh-colorpicker-item to target the ColorGroupItem, the hue color picker does not seem to respond, and I am unable to select or change colors.

Here’s the relevant configuration for the color picker component:

- component: oh-colorpicker-item
  config:
    item: =props.ColorGroupItem
    modules: -hue-slider
    title: Choose Color
    visible: "=props.ColorGroupItem ? true : false"

I’ve specified modules: -hue-slider, expecting it to allow color selection, but it does not appear to function as intended. I’m wondering if there is an additional setting or configuration detail I’m missing for the hue slider to work properly.

Any insights or advice on resolving this color picker issue would be greatly appreciated!

2

Is it related to the following? (Room and zone things do not support color channels).

3

in the main ui i get this

Bildschirmfoto vom 2024-11-01 12-39-15
Bildschirmfoto vom 2024-11-01 12-39-151097×870 67 KB

Bildschirmfoto vom 2024-11-01 12-39-05
Bildschirmfoto vom 2024-11-01 12-39-051063×385 10.6 KB

this is working fine so i don’t thing thats related

in the widget i can’t click on the color item so I get this

Bildschirmfoto vom 2024-11-01 12-41-19
Bildschirmfoto vom 2024-11-01 12-41-191280×845 30.6 KB

But can’t change it

4

This is just a small yaml formatting issue.

The modules property should be an array. There are two ways you can indicate an array in a widget: the yaml array, or with widget expressions.

The yaml format for an array does, as you have done, start the array element with a -. but that array element has to be on a new line indented from the name of the array object. So:

modules:
  - hue-slider

The expression format just allows you to define a javascript array which is comma separated values between square brackets:

modules: =['hue-slider']
1 Like