ColorPickerView
A comprehensive color picker interface combining multiple color selection methods.
This view provides:
- HSB/HSL color gradient with hue spectrum
- HSLuv perceptually uniform color space option
- RGB numeric input fields (0-255)
- HSL/HSLuv numeric input fields (H: 0-360, S/L: 0-100%)
- Saved color palette with drag-and-drop reordering
- Color mode switching between HSL and HSLuv
The picker automatically synchronizes all input methods - changing the color through any interface updates all others. Users can save frequently used colors to a palette for quick access.
Layout:
- Left: Gradient picker and spectrum
- Center: RGB input fields
- Right: HSL/HSLuv input fields and buttons
- Bottom: Saved color palette (when colors exist)
Instance Members
Default is false
, automatically set to true
when any of this instance's observable variables has changed.
Optional custom theme for this picker
The currently selected color value (read-only, use setColor methods to change)
Sets the selected color from RGB values. Updates all UI elements to reflect the new color.
Name | Type | Description |
---|---|---|
r |
Int | Red component (0-255) |
g |
Int | Green component (0-255) |
b |
Int | Blue component (0-255) |
Sets the selected color from HSL values. Updates all UI elements to reflect the new color.
Name | Type | Description |
---|---|---|
h |
Float | Hue in degrees (0-360) |
s |
Float | Saturation (0-1) |
l |
Float | Lightness (0-1) |
Sets the selected color from HSB/HSV values. Updates all UI elements to reflect the new color.
Name | Type | Description |
---|---|---|
h |
Float | Hue in degrees (0-360) |
s |
Float | Saturation (0-1) |
b |
Float | Brightness/Value (0-1) |
Sets the selected color from HSLuv values. HSLuv provides perceptually uniform color selection.
Name | Type | Description |
---|---|---|
h |
Float | Hue in degrees (0-360) |
s |
Float | Saturation (0-1) |
l |
Float | Lightness (0-1) |
Returns the associated field view for this color picker. Used for contextual positioning and updates.
Returns | Description |
---|---|
FieldView | The related ColorFieldView or null |
Creates a new color picker view.
Name | Type | Default | Description |
---|---|---|---|
colorFieldView |
ColorFieldView | (optional) | Optional associated color field for context |
Private Members
Width of input field rows
Vertical spacing between fields
Vertical spacing for buttons
Additional gap between field groups
General padding for the picker
Size of the main color gradient square
Width of the hue/lightness spectrum bar
Size of palette color swatches
Gap between palette colors
Computed property that returns the palette color currently being dragged.
Computes the palette index where a dragged color should be dropped. Uses distance calculation to find the nearest palette slot.
Height of the palette area
Whether to use HSLuv color space instead of HSL
User's saved palette colors
Event when any observable value as changed on this instance.
Name | Type |
---|---|
instance |
ColorPickerView |
fromSerializedField |
Bool |
Event when theme field changes.
Name | Type |
---|---|
current |
Theme |
previous |
Theme |
Event when colorValue field changes.
Name | Type |
---|---|
current |
ceramic.Color |
previous |
ceramic.Color |
emitDraggingColorPreviewChange(current: ColorPickerPaletteColorView, previous: ColorPickerPaletteColorView): Void
Event when draggingColorPreview field changes.
Name | Type |
---|---|
current |
ColorPickerPaletteColorView |
previous |
ColorPickerPaletteColorView |
Event when draggingColorDropIndex field changes.
Name | Type |
---|---|
current |
Int |
previous |
Int |
Event when paletteHeight field changes.
Name | Type |
---|---|
current |
Float |
previous |
Float |
emitPaletteColorPreviewsChange(current: Array<ColorPickerPaletteColorView>, previous: Array<ColorPickerPaletteColorView>): Void
Event when paletteColorPreviews field changes.
Name | Type |
---|---|
current |
Array<ColorPickerPaletteColorView> |
previous |
Array<ColorPickerPaletteColorView> |
Returns |
---|
Float |
Name | Type |
---|---|
offsetX |
Float |
Returns |
---|
Float |
Name | Type |
---|---|
offsetX |
Float |
Returns |
---|
Float |
Name | Type |
---|---|
offsetX |
Float |
offsetY |
Float |
Name | Type |
---|---|
colorValue |
ceramic.Color |
updateHSLFields(colorValue: ceramic.Color, ?hue: Float, ?saturation: Float, ?lightness: Float): Void
Name | Type | Default |
---|---|---|
colorValue |
ceramic.Color | |
hue |
Float | (optional) |
saturation |
Float | (optional) |
lightness |
Float | (optional) |
updateGradientAndSpectrum(colorValue: ceramic.Color, ?hue: Float, ?saturation: Float, ?lightness: Float): Void
Name | Type | Default |
---|---|---|
colorValue |
ceramic.Color | |
hue |
Float | (optional) |
saturation |
Float | (optional) |
lightness |
Float | (optional) |
createTextField(?applyValue: Function, ?minValue: Int = 0, ?maxValue: Int = 100): TextFieldView
Name | Type | Default |
---|---|---|
applyValue |
Function | (optional) |
minValue |
Int | 0 |
maxValue |
Int | 100 |
Returns |
---|
TextFieldView |
Returns |
---|
ColorPickerPaletteColorView |
Name | Type |
---|---|
colorPreview |
ColorPickerPaletteColorView |
Name | Type |
---|---|
colorPreview |
ColorPickerPaletteColorView |
handlePaletteColorLongPress(colorPreview: ColorPickerPaletteColorView, info: ceramic.TouchInfo): Void
Name | Type |
---|---|
colorPreview |
ColorPickerPaletteColorView |
info |
ceramic.TouchInfo |
Metadata
Name | Parameters |
---|---|
:build |
tracker.macros.ObservableMacro.build() |
:autoBuild |
tracker.macros.ObservableMacro.build() |
:build |
tracker.macros.EventsMacro.build() |
:autoBuild |
tracker.macros.EventsMacro.build() |
:build |
ceramic.macros.EntityMacro.buildForCompletion() |
:autoBuild |
ceramic.macros.EntityMacro.buildForCompletion() |