ColorPickerView

ceramic.Entityceramic.Visualceramic.Quadceramic.Layerceramic.Viewceramic.LayersLayoutelements.ColorPickerView (Class)

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

elements
observedDirty: Bool

Default is false, automatically set to true when any of this instance's observable variables has changed.


elements
theme: Theme

Optional custom theme for this picker


elements
colorValue: ceramic.Color

The currently selected color value (read-only, use setColor methods to change)


elements
colorFieldView: ColorFieldView

elements
invalidateTheme(): Void

elements
invalidateColorValue(): Void

elements
invalidateDraggingColorPreview(): Void

elements
invalidateDraggingColorDropIndex(): Void

elements
invalidatePaletteHeight(): Void

elements
invalidatePaletteColorPreviews(): Void

elements
setColorFromRGB(r: Int, g: Int, b: Int): Void

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)

elements
setColorFromHSL(h: Float, s: Float, l: Float): Void

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)

elements
setColorFromHSB(h: Float, s: Float, b: Float): Void

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)

elements
setColorFromHSLuv(h: Float, s: Float, l: Float): Void

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)

elements
relatedFieldView(): FieldView

Returns the associated field view for this color picker. Used for contextual positioning and updates.

Returns Description
FieldView The related ColorFieldView or null

elements
new(?colorFieldView: ColorFieldView): Void

Creates a new color picker view.

Name Type Default Description
colorFieldView ColorFieldView (optional) Optional associated color field for context

Private Members

elements
FIELD_ROW_WIDTH: Float

Width of input field rows


elements
FIELD_ADVANCE: Float

Vertical spacing between fields


elements
BUTTON_ADVANCE: Float

Vertical spacing for buttons


elements
FIELD_Y_GAP: Float

Additional gap between field groups


elements
PADDING: Float

General padding for the picker


elements
GRADIENT_SIZE: Float

Size of the main color gradient square


elements
SPECTRUM_WIDTH: Float

Width of the hue/lightness spectrum bar


elements
PALETTE_COLOR_SIZE: Float

Size of palette color swatches


elements
PALETTE_COLOR_GAP: Float

Gap between palette colors


elements
unobservedTheme: Theme

elements
unobservedColorValue: ceramic.Color

elements
draggingColorPreview: ColorPickerPaletteColorView

Computed property that returns the palette color currently being dragged.


elements
unobservedDraggingColorPreview: ColorPickerPaletteColorView

elements
draggingColorDropIndex: Int

Computes the palette index where a dragged color should be dropped. Uses distance calculation to find the nearest palette slot.


elements
unobservedDraggingColorDropIndex: Int

elements
paletteHeight: Float

Height of the palette area


elements
unobservedPaletteHeight: Float

elements
hsluv: Bool

Whether to use HSLuv color space instead of HSL


elements
paletteColors: ceramic.ReadOnlyArray<ceramic.Color>

User's saved palette colors


elements
hsbGradientView: ColorPickerHSBGradientView

elements
hsbSpectrumView: ColorPickerHSBSpectrumView

elements
hsluvGradientView: ColorPickerHSLuvGradientView

elements
hsluvSpectrumView: ColorPickerHSLuvSpectrumView

elements
rgbRedField: TextFieldView

elements
rgbGreenField: TextFieldView

elements
rgbBlueField: TextFieldView

elements
rgbRedFieldValue: String

elements
rgbGreenFieldValue: String

elements
rgbBlueFieldValue: String

elements
rgbLabel: ceramic.TextView

elements
hslHueField: TextFieldView

elements
hslSaturationField: TextFieldView

elements
hslLightnessField: TextFieldView

elements
hslHueFieldValue: String

elements
hslSaturationFieldValue: String

elements
hslLightnessFieldValue: String

elements
hslLabel: ceramic.TextView

elements
updatingColor: Int

elements
hslFieldsLocked: Int

elements
paletteAddButton: Button

elements
colorModeButton: Button

elements
lastDraggingColorDropIndex: Int

elements
lastDraggingColorPreview: ColorPickerPaletteColorView

elements
paletteColorPreviews: Array<ColorPickerPaletteColorView>

elements
unobservedPaletteColorPreviews: Array<ColorPickerPaletteColorView>

elements
emitObservedDirty(instance: ColorPickerView, fromSerializedField: Bool): Void

Event when any observable value as changed on this instance.

Name Type
instance ColorPickerView
fromSerializedField Bool

elements
emitThemeChange(current: Theme, previous: Theme): Void

Event when theme field changes.

Name Type
current Theme
previous Theme

elements
emitColorValueChange(current: ceramic.Color, previous: ceramic.Color): Void

Event when colorValue field changes.

Name Type
current ceramic.Color
previous ceramic.Color

elements
emitDraggingColorPreviewChange(current: ColorPickerPaletteColorView, previous: ColorPickerPaletteColorView): Void

Event when draggingColorPreview field changes.

Name Type
current ColorPickerPaletteColorView
previous ColorPickerPaletteColorView

elements
emitDraggingColorDropIndexChange(current: Int, previous: Int): Void

Event when draggingColorDropIndex field changes.

Name Type
current Int
previous Int

elements
emitPaletteHeightChange(current: Float, previous: Float): Void

Event when paletteHeight field changes.

Name Type
current Float
previous Float

elements
emitPaletteColorPreviewsChange(current: Array<ColorPickerPaletteColorView>, previous: Array<ColorPickerPaletteColorView>): Void

Event when paletteColorPreviews field changes.

Name Type
current Array<ColorPickerPaletteColorView>
previous Array<ColorPickerPaletteColorView>

elements
getColorPickerWidth(): Float
Returns
Float

elements
updateSize(): Void

elements
initRGBFields(offsetX: Float): Float
Name Type
offsetX Float
Returns
Float

elements
initHSLFields(offsetX: Float): Float
Name Type
offsetX Float
Returns
Float

elements
initPaletteUI(offsetX: Float, offsetY: Float): Void
Name Type
offsetX Float
offsetY Float

elements
layout(): Void

elements
updateRGBFields(colorValue: ceramic.Color): Void
Name Type
colorValue ceramic.Color

elements
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)

elements
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)

elements
setColorFromRGBFields(): Void

elements
setColorFromHSLFieldHue(): Void

elements
setColorFromHSLFieldSaturation(): Void

elements
setColorFromHSLFieldLightness(): Void

elements
createTextField(?applyValue: Function, ?minValue: Int = 0, ?maxValue: Int = 100): TextFieldView
Name Type Default
applyValue Function (optional)
minValue Int 0
maxValue Int 100
Returns
TextFieldView

elements
updateStyle(): Void

elements
saveColor(): Void

elements
switchColorMode(): Void

elements
updateColorPreviews(): Void

elements
updateFromColorDrop(): Void

elements
createColorPreview(): ColorPickerPaletteColorView
Returns
ColorPickerPaletteColorView

elements
handlePaletteColorClick(colorPreview: ColorPickerPaletteColorView): Void
Name Type
colorPreview ColorPickerPaletteColorView

elements
handlePaletteColorDrop(colorPreview: ColorPickerPaletteColorView): Void
Name Type
colorPreview ColorPickerPaletteColorView

elements
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()