🎡 Colorwheel
The Colorwheel widget provides an intuitive circular interface for selecting colors. It is perfect for applications involving smart lighting control, UI customization, or any system requiring RGB value input.
⚙️ Properties (Props)
The Colorwheel configuration is defined by the ColorwheelWidget interface. It manages color data as a standard hexadecimal or RGB value.
| Property | Type | Description |
|---|---|---|
| Color | string | The currently selected color value (e.g., #FF0000). |
| Knob Color | string | The color of the selection handle. |
| X / Y | number | The coordinate position on the canvas. |
🎨 Interaction Modes
The Colorwheel supports different interaction behaviors which can be configured to simplify the user experience:
- Hue Selection: The outer ring allows the user to cycle through the full color spectrum.
- Saturation/Value: Depending on your style configuration, the inner area can be used to refine the intensity or brightness of the selected hue.
- Visual Feedback: The selection knob provides real-time feedback by moving to the coordinates corresponding to the active color.
🛠 Visual Customization
In the Style Panel, you can adjust the physical appearance of the wheel:
- Main: Controls the thickness of the color ring and the background of the center area.
- Knob: Customize the size and border of the selection handle to ensure it is "finger-friendly" for touchscreens.
⚡ Runtime API (Lua)
The Colorwheel is most effective when linked to live hardware outputs via the Logic and Events system.
-- Get the selected color as a hex string
local selected_color = cw_lighting:get_color()
-- Apply the color to an LED strip (example)
hardware:set_led_strip(selected_color)
-- Programmatically set the wheel to a specific color
cw_lighting:set_color("#3498db")
-- Listen for real-time changes while the user is dragging
function on_color_change(color)
preview_rect:set_style_bg_color(color)
end
While visually impressive, the Colorwheel requires the engine to calculate color coordinates in real-time. On very low-end microcontrollers, ensure the widget is sized appropriately to maintain a high frame rate during interaction.