ColorPickerHSLuvGradientView

View source
ceramic.Entity → ceramic.Visual → ceramic.Quad → ceramic.Layer → ceramic.View → elements.ColorPickerHSLuvGradientView (Class)

A color picker gradient view using the HSLuv color space for perceptually uniform color selection. HSLuv is a human-friendly alternative to HSL that maintains perceptual uniformity across hue and saturation changes, making color selection more intuitive.

The gradient displays:

  • Hue along the horizontal axis (0-360 degrees)
  • Saturation along the vertical axis (100% at top, 0% at bottom)
  • Lightness controlled externally and applied uniformly

Users can select colors by clicking/dragging on the gradient, with a visual pointer indicating the current selection. The pointer automatically adjusts its color for visibility based on the lightness value.

@event updateColorFromPointer Emitted when the color is updated via pointer interaction

Instance Members

elements
colorValue: ceramic.Color

The currently selected color value. Setting this updates the gradient and pointer position.

elements
lightness: Float

The lightness value (0-1) applied uniformly across the gradient. This is typically controlled by an external spectrum/slider.

elements
updateGradientColors(?lightness: Float): Void

Updates the gradient mesh colors based on the current lightness value. Regenerates all vertex colors to reflect the HSLuv color space.

Name Type Default Description
lightness Float (optional) Optional new lightness value (0-1)
elements
savePointerPosition(): Void

Saves the current pointer position for later restoration. Useful when temporarily moving the pointer during spectrum adjustments.

elements
restorePointerPosition(): Void

Restores the pointer to its previously saved position.

elements
getSaturationFromPointer(): Float

Calculates the saturation value based on the pointer's vertical position.

Returns Description
Float Saturation value (0-1), where 1 is at the top
elements
getHueFromPointer(): Float

Calculates the hue value based on the pointer's horizontal position.

Returns Description
Float Hue value in degrees (0-360)
elements
new(): Void

Creates a new HSLuv gradient color picker view. Initializes the gradient mesh and selection pointer.

Private Members

elements
PRECISION_X: Int

Number of horizontal segments in the gradient mesh for hue precision

elements
PRECISION_Y: Int

Number of vertical segments in the gradient mesh for saturation precision

elements
movingSpectrum: Bool

Internal flag indicating the spectrum (lightness) is being adjusted

elements
gradient: ceramic.Mesh

The mesh that renders the HSLuv gradient

elements
colorPointer: ceramic.Border

Visual pointer indicating the current color selection

elements
targetPointerColor: ceramic.Color

Target color for pointer border animation

elements
pointerColorTween: ceramic.Tween

Active tween for animating pointer color changes

elements
movingPointer: Bool

Flag indicating the pointer is being dragged

elements
savedPointerX: Float

Saved X position of the pointer for restoration

elements
savedPointerY: Float

Saved Y position of the pointer for restoration

elements
filter: ceramic.Filter

Filter container for the gradient content

elements
emitUpdateColorFromPointer(): Void

updateColorFromPointer event

elements
colorWithHueAndSaturation(hue: Float, saturation: Float): ceramic.AlphaColor

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

Name Type Description
hue Float Hue value in degrees (0-360)
saturation Float Saturation value (0-1)
Returns Description
ceramic.AlphaColor The resulting color with full opacity
elements
updatePointerFromColor(): Void

Updates the pointer position based on the current color value. Also adjusts the pointer border color for visibility.

elements
layout(): Void

Handles layout updates when the view is resized. Scales the gradient mesh and updates pointer position accordingly.

elements
handlePointerDown(info: ceramic.TouchInfo): Void

Handles pointer down events to begin color selection.

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

Handles pointer move events during color selection.

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

Handles pointer up events to end color selection.

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

Updates the selected color based on touch/mouse position. Converts screen coordinates to hue/saturation values and updates the color.

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

Metadata

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