ColorForm

ColorForm

Color selection dialog based on the hue, saturation, brightness color space.  The dialog uses a supplied string input field (which can be invisible) to propagate changes to, it can in turn propagate changes further giving a live preview during the color selection.

Example

import autotelicum.dialogs.ColorForm;

// Creating a color dialog box
var colorForm:ColorForm = new ColorForm(0xAC5CCD);
colorForm.InitializeComponent();
...
// Create a StringInput field which can be invisble
var colorField:StringInput = ...;

// Show the color dialog box, here the current class is derived from sprite
colorForm.ShowDialog(this as Sprite, colorField);

// In the colorField change handler convert the RGB or
// named color text into a uint color and use it in drawing
var rgbColor:uint = ColorNameTable.parseColor(colorField.text);

See also

Color, ColorHSB, ColorNameTable, StringInput.

Summary
ColorFormColor selection dialog based on the hue, saturation, brightness color space.
Private hue wheel constants
outerSizeRadius of the outer circle of the hue wheel.
innerSizeRadius of the inner circle of the hue wheel.
centerXHorizontal center of the hue wheel.
centerYVertical center of the hue wheel.
Private gradient constants
handleSizeSize of the indicator triangle and circle.
gradientSizeXWidth of the gradient box.
gradientSizeYHeight of the gradient box.
Private palette constants
paletteEntryWidthWidth of a palette entry color box.
paletteEntryHeightHeight of a palette entry color box.
paletteEntryDistanceDistance between palette entries.
Private dialog box constants
dialogWidthWidth of the dialog box client area.
dialogHeightHeight of the dialog box client area.
Private data members
dialogColorBase dialog theme color
selectedColorCurrently selected color in the dialog
updateFieldA ‘weak’ reference to the field the dialog is currently updating in the calling application
originalColorThe color that was selected when the selection started.
paletteColorsArray of RGB color values for the color palette in column order.
recentColorsArray of RGB color values for the recently used color palette in LIFO order.
Private display object members
colorHueColor hue wheel sprite.
colorGradientColor gradient parent sprite for the gradient box, triangle and selector circle.
gradientDataGradient box bitmap pixel values.
gradientGradient box display object.
colorSelectorCircle sprite indicating the selectedColor in the gradient box.
colorPalettePalette sprite with hue, saturation and brightness columns.
recentPalettePalette sprite with recently used color entries.
currentColorPalette sprite with only a preview of the selectedColor.
Private widget members
selectedColorFieldRGB and named color text input field.
hueFieldHue integer input field.
saturationFieldSaturation integer input field.
brightnessFieldBrightness integer input field.
Private state members
isVisibleSet to true when the color selection dialog is displayed.
isChangingHueSet to true when the user is dragging the mouse on the hue wheel.
isChangingGradientSet to true when the user is dragging the mouse in the gradient box.
internalUpdateSet to true during internal updates of widgets.
Dialog creation and display
ColorFormConstructor of the base color form dialog.
ShowDialogDisplays the color selection dialog.
InitializeComponentInitializes the widgets and display elements in the dialog.
createColorHueCreates the color hue wheel.
createColorGradientCreates the saturation/brightness gradient box, a triangle marker for the current hue and a circle indicating the current color.
drawCurrentColorDraws a small preview of the currently selected color.
drawRecentColorsDraws palette entries for the recently used colors
drawColorPaletteDraws a palette based on the selectedColor with a hue, saturation and brightness column.
drawHueScaleDraws a hue scale palette column.
drawSaturationScaleDraws a saturation scale palette column.
drawBrightnessScaleDraws a brightness scale palette column.
drawPaletteEntryDraws a single palette entry box.
Color update methods
fillColorGradientFills the saturation/brightness gradient box with a gradient based on a new hue.
updateColorGradientUpdates the saturation/brightness gradient box based on a new hue.
updateColorSelectorUpdates the position of the color selector circle.
Mouse event handlers
onMouseDownCalled when the user presses the mouse button down.
onMouseMoveCalled when the user drags the mouse.
onMouseUpCalled when the user releases the mouse button.
onMouseOutCalled when the user moves the mouse outside the dialog while performing a drag action.
mousePaletteSelectedUpdates the selectedColor based on the mouse position over a color gradient palette entry.
mouseRecentSelectedUpdates the selectedColor based on the mouse position over a recently used color palette entry.
mouseHueChangeUpdates the selectedColor based on the mouse position over the color hue wheel.
mouseGradientChangeUpdates the selectedColor based on the mouse position over the saturation/brightness scale box.
Widget event handlers
onChangeColorCalled when the text in the RGB/named color field is changed.
onChangeHueCalled when the integer in the hue numeric field is changed.
onChangeSaturationCalled when the integer in the saturation numeric field is changed.
onChangeBrightnessCalled when the integer in the brightness numeric field is changed.
Dialog close methods
acceptDialogCalled when the user accepts the dialog.
cancelDialogCalled when the user cancels the dialog.
closeColorDialogCalled when the base dialog class dismisses the dialog.
updateRecentColorsA selected color is inserted into the array of recently used colors if it is not already present.
disposeRemoves used resources, references and graphics.

Private hue wheel constants

outerSize

private const outerSize: Number

Radius of the outer circle of the hue wheel.

innerSize

private const innerSize: Number

Radius of the inner circle of the hue wheel.  Precomputed as the square root of half the gradientSizeX squared plus half gradientSizeY squared.

centerX

private const centerX: Number

Horizontal center of the hue wheel.

centerY

private const centerY: Number

Vertical center of the hue wheel.

Private gradient constants

handleSize

private const handleSize: Number

Size of the indicator triangle and circle.

gradientSizeX

private const gradientSizeX: int

Width of the gradient box.

gradientSizeY

private const gradientSizeY: int

Height of the gradient box.

Private palette constants

paletteEntryWidth

private const paletteEntryWidth: Number

Width of a palette entry color box.

paletteEntryHeight

private const paletteEntryHeight: Number

Height of a palette entry color box.

paletteEntryDistance

private const paletteEntryDistance: Number

Distance between palette entries.

Private dialog box constants

dialogWidth

private const dialogWidth: Number

Width of the dialog box client area.

dialogHeight

private const dialogHeight: Number

Height of the dialog box client area.

Private data members

dialogColor

private var dialogColor: uint

Base dialog theme color

selectedColor

private var selectedColor: ColorHSB

Currently selected color in the dialog

updateField

private var updateField: StringInput

A ‘weak’ reference to the field the dialog is currently updating in the calling application

originalColor

private var originalColor: String

The color that was selected when the selection started.  Used to reset the updateField if the users cancels the dialog.

paletteColors

private var paletteColors: Array

Array of RGB color values for the color palette in column order.  The first third are the hue values, next the saturation values and then the brightness values.

recentColors

private var recentColors: Array

Array of RGB color values for the recently used color palette in LIFO order.

Private display object members

colorHue

private var colorHue: Sprite

Color hue wheel sprite.  See createColorHue.

colorGradient

private var colorGradient: Sprite

Color gradient parent sprite for the gradient box, triangle and selector circle.  See createColorGradient.

gradientData

private var gradientData: BitmapData

Gradient box bitmap pixel values.

gradient

private var gradient: Bitmap

Gradient box display object.

colorSelector

private var colorSelector: Sprite

Circle sprite indicating the selectedColor in the gradient box.

colorPalette

private var colorPalette: Sprite

Palette sprite with hue, saturation and brightness columns.

recentPalette

private var recentPalette: Sprite

Palette sprite with recently used color entries.

currentColor

private var currentColor: Sprite

Palette sprite with only a preview of the selectedColor.

Private widget members

selectedColorField

private var selectedColorField: StringInput

RGB and named color text input field.

hueField

private var hueField: IntegerInput

Hue integer input field.

saturationField

private var saturationField: IntegerInput

Saturation integer input field.

brightnessField

private var brightnessField: IntegerInput

Brightness integer input field.

Private state members

isVisible

private var isVisible: Boolean

Set to true when the color selection dialog is displayed.

isChangingHue

private var isChangingHue: Boolean

Set to true when the user is dragging the mouse on the hue wheel.

isChangingGradient

private var isChangingGradient: Boolean

Set to true when the user is dragging the mouse in the gradient box.

internalUpdate

private var internalUpdate: Boolean

Set to true during internal updates of widgets.  Used to prevent extraneous and recusive updates.

Dialog creation and display

ColorForm

public function ColorForm(formColor: uint)

Constructor of the base color form dialog.

ShowDialog

public function ShowDialog(parent: Sprite,
colorField: StringInput):void

Displays the color selection dialog.  If the dialog is already visible then the current selection is implicitly accepted and added to the recent color list.  The color in the updateField is stored as the originalColor, so it can be restored if the user cancels the dialog.  The selectedColor is set to this color.

Parameters

parentsprite that the dialog is placed on top of
colorFieldStringInput field that is updated by the dialog

InitializeComponent

public function InitializeComponent():void

Initializes the widgets and display elements in the dialog.

Dialog elements

  • Hue wheel with a saturation/brightness box
  • Palette with HSB columns based on the selectedColor
  • Palette with recently used colors
  • Numeric HSB value selectors
  • Preview of the selectedColor
  • RGB and named color entryfield (See <ColorNameTable>)
  • Accept and cancel buttons

Note

The text entry field implements colors given as RGB in decimal or hexadecimal prefixed with 0x or #, and named colors (case-insensitive).

createColorHue

private function createColorHue():Sprite

Creates the color hue wheel.  The drawing method used to create the hue gradient is by overlapping lines emanating from a common center and overlaid with an outer and inner circle.

Returns

A color hue sprite

createColorGradient

private function createColorGradient():Sprite

Creates the saturation/brightness gradient box, a triangle marker for the current hue and a circle indicating the current color.

Returns

A color gradient sprite

drawCurrentColor

private function drawCurrentColor(hsb: ColorHSB):void

Draws a small preview of the currently selected color.

drawRecentColors

private function drawRecentColors():void

Draws palette entries for the recently used colors

drawColorPalette

private function drawColorPalette():void

Draws a palette based on the selectedColor with a hue, saturation and brightness column.

drawHueScale

private function drawHueScale(baseColor: uint,
posX: Number):void

Draws a hue scale palette column.  Each hue entry is spaced 30 degrees from the last.

Parameters

baseColorcolor on which the hue scale is based
posXvertical position of the column

drawSaturationScale

private function drawSaturationScale(baseColor: uint,
posX: Number):void

Draws a saturation scale palette column.  Each saturation entry is spaced ten percent from the last.

Parameters

baseColorcolor on which the saturation scale is based
posXvertical position of the column

drawBrightnessScale

private function drawBrightnessScale(baseColor: uint,
posX: Number):void

Draws a brightness scale palette column.  Each brightness entry is spaced ten percent from the last.

Parameters

baseColorcolor on which the brightness scale is based
posXvertical position of the column

drawPaletteEntry

private function drawPaletteEntry(palette: Sprite,
entryColor: uint,
posX: Number,
posY: Number):void

Draws a single palette entry box.  The positioning of the box is relative to the parent palette (not the dialog).

Parameters

paletteparent palette (colorPalette, recentPalette, currentColor)
entryColorrgb color of the palette entry
posXvertical position of the palette entry
posYhorizontal position of the palette entry

Color update methods

fillColorGradient

private function fillColorGradient(gradientHue: Number):void

Fills the saturation/brightness gradient box with a gradient based on a new hue.

Parameters

gradientHueThe base hue used for the gradient

See also

ColorHSB.gradientByteArray.

updateColorGradient

private function updateColorGradient(hue: Number,
saturation: Number,
brightness: Number):void

Updates the saturation/brightness gradient box based on a new hue.  The box is rotated, filled and the color selector circle is positioned.

Parameters

hueThe hue value used for the gradient
saturationThe saturation value used for the gradient
brightnessThe brightness value used for the gradient

See also

fillColorGradient, updateColorSelector.

updateColorSelector

private function updateColorSelector(hue: Number,
saturation: Number,
brightness: Number):void

Updates the position of the color selector circle.  It is redrawn with an x value based on the saturation and a y value based on the brightness.

Updating this triggers an update of the current color preview and of the color scale palette.

Parameters

hueThe selected hue value
saturationThe selected saturation value
brightnessThe selected brightness value

See also

drawCurrentColor, drawColorPalette.

Mouse event handlers

onMouseDown

private function onMouseDown(event: MouseEvent):void

Called when the user presses the mouse button down.  Based on the <event.target> chooses an appropriate update action either mouseHueChange, mouseGradientChange, mousePaletteSelected or mouseRecentSelected.

If the clicked item implements dragging then either isChangingHue or isChangingGradient is set to true to indicate the drag state.

Parameters

eventA mouse event.

See also

onMouseMove, onMouseUp, onMouseOut.

onMouseMove

private function onMouseMove(event: MouseEvent):void

Called when the user drags the mouse.  If it is on the color wheel or in the gradient box then based on the type of drag action (either isChangingHue or isChangingGradient) the mouseHueChange or mouseGradientChange is used to update the currently selected color.

Parameters

eventA mouse event.

See also

onMouseDown, onMouseUp, onMouseOut.

onMouseUp

private function onMouseUp(event: MouseEvent):void

Called when the user releases the mouse button.

If the mouse was being dragged then the selected color is updated as in onMouseMove.  The drag state in isChangingHue or isChangingGradient is reset.

Parameters

eventA mouse event.

See also

onMouseDown, onMouseMove, onMouseOut.

onMouseOut

private function onMouseOut(event: MouseEvent):void

Called when the user moves the mouse outside the dialog while performing a drag action.

If the event is not related to the color selection dialogs client area of one of the draggabble items then the drag action state is reset.

Parameters

eventA mouse event.

See also

onMouseDown, onMouseMove, onMouseUp.

mousePaletteSelected

private function mousePaletteSelected():void

Updates the selectedColor based on the mouse position over a color gradient palette entry.

mouseRecentSelected

private function mouseRecentSelected():void

Updates the selectedColor based on the mouse position over a recently used color palette entry.

mouseHueChange

private function mouseHueChange():void

Updates the selectedColor based on the mouse position over the color hue wheel.

mouseGradientChange

private function mouseGradientChange():void

Updates the selectedColor based on the mouse position over the saturation/brightness scale box.

Widget event handlers

onChangeColor

private function onChangeColor(str: String):void

Called when the text in the RGB/named color field is changed.  If the change is done by the user then the hue, saturation and brightness numeric fields are updated to trigger further updates of the user interface.

Parameters

strupdated text string in the selectedColorField

onChangeHue

private function onChangeHue(value: int):void

Called when the integer in the hue numeric field is changed.  Triggers an update of updateColorGradient.  If the user changed the field then value may be rolled over from 360 to 0 and from 0 to 360 and a refresh of the selectedColorField is triggered.

Parameters

valuehue in degrees clamped to 0 - 360

onChangeSaturation

private function onChangeSaturation(value: int):void

Called when the integer in the saturation numeric field is changed.  Triggers an update of updateColorSelector.  If the user changed the field then a refresh of the selectedColorField is triggered.

Parameters

valuesaturation in percent from 0 to 100

Note

The saturation is presented in percent whereas the class ColorHSB uses a zero to one interval.

onChangeBrightness

private function onChangeBrightness(value: int):void

Called when the integer in the brightness numeric field is changed.  Triggers an update of updateColorSelector.  If the user changed the field then a refresh of the selectedColorField is triggered.

Parameters

valuebrightness in percent from 0 to 100

Note

The brightness is presented in percent whereas the class ColorHSB uses a zero to one interval.

Dialog close methods

acceptDialog

private function acceptDialog():void

Called when the user accepts the dialog.  Closes the dialog with true/accepted state

cancelDialog

private function cancelDialog():void

Called when the user cancels the dialog.  Closes the dialog with false/cancelled state

closeColorDialog

private function closeColorDialog(accepted: Boolean):void

Called when the base dialog class dismisses the dialog.  If the dialog was accepted then the updateField is updated with the selected color which is added to the list of recent colors.  If the dialog was cancelled then the originalColor is restored.  The updateField is refreshed to propagate any change and the reference to it is released.  All event listeners are removed.

updateRecentColors

private function updateRecentColors():void

A selected color is inserted into the array of recently used colors if it is not already present.  If the maximum six colors have been exceeded then the oldest color is removed from the list.

dispose

public override function dispose():void

Removes used resources, references and graphics.  The base DialogBox class cleans up widgets and display objects so it is called first and then the rest is reset.

A base class dialog box widget.
private const outerSize: Number
Radius of the outer circle of the hue wheel.
private const innerSize: Number
Radius of the inner circle of the hue wheel.
private const centerX: Number
Horizontal center of the hue wheel.
private const centerY: Number
Vertical center of the hue wheel.
private const handleSize: Number
Size of the indicator triangle and circle.
private const gradientSizeX: int
Width of the gradient box.
private const gradientSizeY: int
Height of the gradient box.
private const paletteEntryWidth: Number
Width of a palette entry color box.
private const paletteEntryHeight: Number
Height of a palette entry color box.
private const paletteEntryDistance: Number
Distance between palette entries.
private const dialogWidth: Number
Width of the dialog box client area.
private const dialogHeight: Number
Height of the dialog box client area.
private var dialogColor: uint
Base dialog theme color
private var selectedColor: ColorHSB
Currently selected color in the dialog
private var updateField: StringInput
A ‘weak’ reference to the field the dialog is currently updating in the calling application
private var originalColor: String
The color that was selected when the selection started.
private var paletteColors: Array
Array of RGB color values for the color palette in column order.
private var recentColors: Array
Array of RGB color values for the recently used color palette in LIFO order.
private var colorHue: Sprite
Color hue wheel sprite.
private var colorGradient: Sprite
Color gradient parent sprite for the gradient box, triangle and selector circle.
private var gradientData: BitmapData
Gradient box bitmap pixel values.
private var gradient: Bitmap
Gradient box display object.
private var colorSelector: Sprite
Circle sprite indicating the selectedColor in the gradient box.
private var colorPalette: Sprite
Palette sprite with hue, saturation and brightness columns.
private var recentPalette: Sprite
Palette sprite with recently used color entries.
private var currentColor: Sprite
Palette sprite with only a preview of the selectedColor.
private var selectedColorField: StringInput
RGB and named color text input field.
private var hueField: IntegerInput
Hue integer input field.
private var saturationField: IntegerInput
Saturation integer input field.
private var brightnessField: IntegerInput
Brightness integer input field.
private var isVisible: Boolean
Set to true when the color selection dialog is displayed.
private var isChangingHue: Boolean
Set to true when the user is dragging the mouse on the hue wheel.
private var isChangingGradient: Boolean
Set to true when the user is dragging the mouse in the gradient box.
private var internalUpdate: Boolean
Set to true during internal updates of widgets.
public function ColorForm(formColor: uint)
Constructor of the base color form dialog.
public function ShowDialog(parent: Sprite,
colorField: StringInput):void
Displays the color selection dialog.
public function InitializeComponent():void
Initializes the widgets and display elements in the dialog.
private function createColorHue():Sprite
Creates the color hue wheel.
private function createColorGradient():Sprite
Creates the saturation/brightness gradient box, a triangle marker for the current hue and a circle indicating the current color.
private function drawCurrentColor(hsb: ColorHSB):void
Draws a small preview of the currently selected color.
private function drawRecentColors():void
Draws palette entries for the recently used colors
private function drawColorPalette():void
Draws a palette based on the selectedColor with a hue, saturation and brightness column.
private function drawHueScale(baseColor: uint,
posX: Number):void
Draws a hue scale palette column.
private function drawSaturationScale(baseColor: uint,
posX: Number):void
Draws a saturation scale palette column.
private function drawBrightnessScale(baseColor: uint,
posX: Number):void
Draws a brightness scale palette column.
private function drawPaletteEntry(palette: Sprite,
entryColor: uint,
posX: Number,
posY: Number):void
Draws a single palette entry box.
private function fillColorGradient(gradientHue: Number):void
Fills the saturation/brightness gradient box with a gradient based on a new hue.
private function updateColorGradient(hue: Number,
saturation: Number,
brightness: Number):void
Updates the saturation/brightness gradient box based on a new hue.
private function updateColorSelector(hue: Number,
saturation: Number,
brightness: Number):void
Updates the position of the color selector circle.
private function onMouseDown(event: MouseEvent):void
Called when the user presses the mouse button down.
private function onMouseMove(event: MouseEvent):void
Called when the user drags the mouse.
private function onMouseUp(event: MouseEvent):void
Called when the user releases the mouse button.
private function onMouseOut(event: MouseEvent):void
Called when the user moves the mouse outside the dialog while performing a drag action.
private function mousePaletteSelected():void
Updates the selectedColor based on the mouse position over a color gradient palette entry.
private function mouseRecentSelected():void
Updates the selectedColor based on the mouse position over a recently used color palette entry.
private function mouseHueChange():void
Updates the selectedColor based on the mouse position over the color hue wheel.
private function mouseGradientChange():void
Updates the selectedColor based on the mouse position over the saturation/brightness scale box.
private function onChangeColor(str: String):void
Called when the text in the RGB/named color field is changed.
private function onChangeHue(value: int):void
Called when the integer in the hue numeric field is changed.
private function onChangeSaturation(value: int):void
Called when the integer in the saturation numeric field is changed.
private function onChangeBrightness(value: int):void
Called when the integer in the brightness numeric field is changed.
private function acceptDialog():void
Called when the user accepts the dialog.
private function cancelDialog():void
Called when the user cancels the dialog.
private function closeColorDialog(accepted: Boolean):void
Called when the base dialog class dismisses the dialog.
private function updateRecentColors():void
A selected color is inserted into the array of recently used colors if it is not already present.
public override function dispose():void
Removes used resources, references and graphics.
The Color class provides precomputed palettes and common color names for widgets so they can be presented as a coherent color theme.
Color class with red, green, blue (RGB) and hue, saturation, and brightness (HSB) components.
Table of color names and values as recognized in IE4+, SVG, etc.
A one line text input field with an optional label.
public function gradientByteArray(width: int,
height: int):ByteArray
Creates a byte array with color values of varying saturation and brightness based on the hue of the current color.
Close