ColorPickerHSLuvSpectrumView

View source
ceramic.Entity → ceramic.Visual → ceramic.Quad → ceramic.Layer → ceramic.View → elements.ColorPickerHSLuvSpectrumView (Class)
Implements: tracker.Observable

A vertical spectrum view for HSLuv color selection showing lightness values. This component displays a gradient from light to dark (top to bottom) for a specific hue and saturation combination in the HSLuv color space.

The spectrum provides:

  • Vertical gradient showing lightness from 100% (top) to 0% (bottom)
  • Interactive pointer for selecting lightness values
  • Visual feedback with contrasting border colors for visibility

Used in conjunction with ColorPickerHSLuvGradientView to provide complete HSLuv color selection capabilities.

@event updateHueFromPointer Emitted when lightness is updated via pointer interaction

Instance Members

elements
observedDirty: Bool

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

elements
movingPointer: Bool

Observable flag indicating the pointer is being dragged

elements
lightness: Float

The current lightness value (0-1). Updates the pointer position when changed.

elements
hue: Float

The hue value in degrees (0-360) used for the spectrum. Changing this regenerates the gradient colors.

elements
saturation: Float

The saturation value (0-1) used for the spectrum. Changing this regenerates the gradient colors.

elements
invalidateMovingPointer(): Void
elements
new(): Void

Creates a new HSLuv spectrum view for lightness selection. Initializes the gradient mesh and horizontal pointer.

Private Members

elements
PRECISION: Int

Number of gradient segments for smooth lightness transitions

elements
unobservedMovingPointer: Bool
elements
spectrum: ceramic.Mesh

The mesh that renders the lightness gradient

elements
lightnessPointer: ceramic.Border

Visual pointer indicating the current lightness selection

elements
spectrumColorsDirty: Bool

Flag to defer spectrum color updates until next frame

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

Event when any observable value as changed on this instance.

Name Type
instance ColorPickerHSLuvSpectrumView
fromSerializedField Bool
elements
emitUpdateHueFromPointer(): Void

updateHueFromPointer event

elements
emitMovingPointerChange(current: Bool, previous: Bool): Void

Event when movingPointer field changes.

Name Type
current Bool
previous Bool
elements
initSpectrum(): Void

Initializes the spectrum mesh with vertices and indices. Creates a vertical gradient with the specified precision.

elements
updateSpectrumColors(): Void

Updates the spectrum mesh colors based on current hue and saturation. Creates a smooth gradient from light to dark in HSLuv space.

elements
updatePointerFromLightness(): Void

Updates the pointer position based on the current lightness value. Positions the pointer vertically with light at top, dark at bottom.

elements
layout(): Void

Handles layout updates when the view is resized. Scales the spectrum mesh and adjusts pointer dimensions.

elements
colorWithLightness(lightness: Float): ceramic.AlphaColor

Creates a color with the specified lightness using current hue and saturation.

Name Type Description
lightness Float The lightness value (0-1)
Returns Description
ceramic.AlphaColor The resulting color in HSLuv space with full opacity
elements
handlePointerDown(info: ceramic.TouchInfo): Void

Handles pointer down events to begin lightness selection.

Name Type Description
info ceramic.TouchInfo Touch/mouse information
elements
handlePointerMove(info: ceramic.TouchInfo): Void

Handles pointer move events during lightness selection. Sets the moving flag and updates the lightness value.

Name Type Description
info ceramic.TouchInfo Touch/mouse information
elements
handlePointerUp(info: ceramic.TouchInfo): Void

Handles pointer up events to end lightness selection. Clears the moving flag and finalizes the selection.

Name Type Description
info ceramic.TouchInfo Touch/mouse information
elements
updateHueFromTouchInfo(info: ceramic.TouchInfo): Void

Updates the lightness value based on touch/mouse position. Converts vertical position to lightness (top=1, bottom=0).

Name Type Description
info ceramic.TouchInfo Touch/mouse information containing screen coordinates

Metadata

Name Parameters
:build tracker.macros.ObservableMacro.build()
:autoBuild tracker.macros.ObservableMacro.build()
:build ceramic.macros.EntityMacro.buildForCompletion()
:autoBuild ceramic.macros.EntityMacro.buildForCompletion()
:build tracker.macros.EventsMacro.build()
:autoBuild tracker.macros.EventsMacro.build()