ColorPickerHSBGradientView

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

A gradient color selector for HSB (Hue, Saturation, Brightness) color space.

This view displays a 2D gradient where:

  • X-axis represents saturation (0-100%)
  • Y-axis represents brightness (100-0%, inverted)
  • The gradient is tinted with the current hue

The view features:

  • Interactive pointer for selecting saturation and brightness
  • Two gradient layers: tint (hue-based) and black overlay
  • Smooth pointer color transitions (white on dark areas, black on light)
  • Pixel-perfect rendering with nearest neighbor filtering

This component is typically used within ColorPickerView as part of the HSB color selection interface.

See: ColorPickerView, ColorPickerHSBSpectrumView

Instance Members

elements
colorValue: ceramic.Color

The current color value represented by the gradient. Setting this updates the gradient tint and pointer position.

elements
hue: Float

The current hue value (0-360 degrees) used to tint the gradient.

elements
updateTintColor(?hue: Float): Void

Updates the gradient tint based on the current or provided hue. The tint color is applied to the right side of the gradient.

Name Type Default Description
hue Float (optional) Optional new hue value (0-360). If not provided, uses current hue.
elements
savePointerPosition(): Void

Saves the current pointer position for later restoration. Used when temporarily moving the pointer during spectrum changes.

elements
restorePointerPosition(): Void

Restores the pointer to its previously saved position.

elements
getBrightnessFromPointer(): Float

Calculates the brightness value (0-1) from the pointer's Y position. Brightness is inverted (top = 100%, bottom = 0%).

Returns Description
Float The brightness value clamped between 0 and 1
elements
getSaturationFromPointer(): Float

Calculates the saturation value (0-1) from the pointer's X position. Saturation increases from left (0%) to right (100%).

Returns Description
Float The saturation value clamped between 0 and 1
elements
new(): Void

Creates a new HSB gradient view.

Initializes:

  • Two gradient meshes (tint and black overlay)
  • Interactive color pointer
  • Nearest neighbor filtering for crisp rendering
  • Pointer event handlers

Private Members

elements
movingSpectrum: Bool

Internal flag indicating if the spectrum is being moved. Used to coordinate animations with ColorPickerView.

elements
blackGradient: ceramic.Mesh
elements
tintGradient: ceramic.Mesh
elements
colorPointer: ceramic.Border
elements
targetPointerColor: ceramic.Color
elements
pointerColorTween: ceramic.Tween
elements
movingPointer: Bool
elements
savedPointerX: Float
elements
savedPointerY: Float
elements
filter: ceramic.Filter
elements
emitUpdateColorFromPointer(): Void

Event emitted when the color is updated via pointer interaction.

elements
updatePointerFromColor(): Void

Updates the pointer position and color based on the current color value. Also handles smooth color transitions when the pointer moves between light and dark areas of the gradient.

elements
layout(): Void
elements
handlePointerDown(info: ceramic.TouchInfo): Void
Name Type
info ceramic.TouchInfo
elements
handlePointerMove(info: ceramic.TouchInfo): Void
Name Type
info ceramic.TouchInfo
elements
handlePointerUp(info: ceramic.TouchInfo): Void
Name Type
info ceramic.TouchInfo
elements
updateColorFromTouchInfo(info: ceramic.TouchInfo): Void

Updates the color based on touch/pointer position. Calculates saturation and brightness from the pointer coordinates and emits an update event.

Name Type Description
info ceramic.TouchInfo Touch information containing pointer coordinates

Metadata

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