Documentation / Widgets / Controller / Colorwheel

Colorwheel

An HSV picker. Its Hue and Saturation can be bound to variables.

Group: Controller · Default size: 150 × 150 · Style parts: Main, Knob

A dropped Colorwheel on an LVGL 8 project: a ring of every hue with a small knob at the top.
A Colorwheel as it is dropped, in an LVGL 8 project.
The Colorwheel settings section: Mode Hue, Hue 0, Saturation 100, Brightness 100.
Its settings.
SettingDefaultWhat it does
ModeHueWhich component the ring edits: Hue, Saturation or Value.
Hue0°Initial hue.
Saturation / Brightness100%Initial saturation and value.

LVGL 8 only. lv_colorwheel was removed from LVGL 9, and no lv_conf.h setting brings it back. To use a Colorwheel, switch the project to LVGL 8 in Project settings. A 9.x project will not export with one on a screen.

Example: a hue picker

  1. The project has to be on LVGL 8: on the Theme tab, under LVGL, set Version to LVGL 8.3.x.
  2. On the Data tab add an Integer variable called hue, with Max 359.
  3. Drag a Colorwheel onto the screen and name it LampColour. Bind it: Variable hue, Drives Hue, Direction Widget -> variable.
  4. Drag a Label beside it and bind its Text to hue, with Prefix Hue and Postfix °.
  5. Press Preview and press on the ring.
Preview: the colour ring with its knob at the right, on yellow-green, and beside it Hue 90°.
Pressed at the right of the ring: hue 90.
The colorwheel's Data bindings: Variable hue, Drives Hue, Direction Widget -> variable.
The ring writes the hue into the variable.