Color Picker

Category: Controls · Sends commands: yes · Emits a value: yes (auto-injected)

Mental model

A Color Picker is a paint palette. The user picks a color and it flows to the device — as hex and broken-out channels — automatically. Ideal for RGB lighting.

When to use it

Set the color of an RGB light or LED strip
Any “choose a color, apply it” control

Settings

General

Widget Title / ID
Picker type / orientation / size
Output format — hex / rgb / hsl, etc.
Allow alpha / opacity
Color presets · swatch size · grid columns
Validate hex format · read-only · disabled

Style

Container, border, label styling, spacing.

Triggers

Event	Fires when
`change`	The color changes (auto-injects the color)
`select`	A color is selected
(common)	`load`, `ready`, `destroy`, `update`, `visible`, `hidden`

Auto-injected color params

On change / select, the picker injects the color into the action’s params — both hex and per-channel components:

{ "color": "#ff8800", "hex": "#ff8800",
  "rgb": { "r": 255, "g": 136, "b": 0 }, "r": 255, "g": 136, "b": 0,
  "hsl": { … }, "hsv": { … }, "cmyk": { … } }

Trigger (params empty — the color arrives automatically):

WHEN     change
SEND TO  Current Device
EXECUTE  Light
Action   setColor   params: {}

Firmware (Arduino) — read the channels:

device.setUserCommandHandler([](JsonObject &msg) {
  JsonObject p = device.findParams(msg, "Light", "setColor");
  if (!p.isNull()) {
    int r = p["r"] | 0, g = p["g"] | 0, b = p["b"] | 0;
    setRGB(r, g, b);                         // or use p["hex"]
  }
});

Script API example

The same interactions from a dashboard script:

widget.on('lightPicker', 'change', (color) => {
  const hex = typeof color === 'string' ? color : color.hex;
  widget.setText('hexLabel', hex);
});

Emitted values

The auto-injection rule.

Slider

For a single numeric value (e.g. brightness).

Designer

Widget Reference

Mental model

When to use it

Settings

General

Style

Triggers

Auto-injected color params

Script API example

Emitted values

Slider

​Mental model

​When to use it

​Settings

​General

​Style

​Triggers

​Auto-injected color params

​Script API example

Emitted values

Slider

Mental model

When to use it

Settings

General

Style

Triggers

Auto-injected color params

Script API example