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.
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);
Color, ColorHSB, ColorNameTable, StringInput.
ColorForm | Color selection dialog based on the hue, saturation, brightness color space. |
Private hue wheel constants | |
outerSize | Radius of the outer circle of the hue wheel. |
innerSize | Radius of the inner circle of the hue wheel. |
centerX | Horizontal center of the hue wheel. |
centerY | Vertical center of the hue wheel. |
Private gradient constants | |
handleSize | Size of the indicator triangle and circle. |
gradientSizeX | Width of the gradient box. |
gradientSizeY | Height of the gradient box. |
Private palette constants | |
paletteEntryWidth | Width of a palette entry color box. |
paletteEntryHeight | Height of a palette entry color box. |
paletteEntryDistance | Distance between palette entries. |
Private dialog box constants | |
dialogWidth | Width of the dialog box client area. |
dialogHeight | Height of the dialog box client area. |
Private data members | |
dialogColor | Base dialog theme color |
selectedColor | Currently selected color in the dialog |
updateField | A ‘weak’ reference to the field the dialog is currently updating in the calling application |
originalColor | The color that was selected when the selection started. |
paletteColors | Array of RGB color values for the color palette in column order. |
recentColors | Array of RGB color values for the recently used color palette in LIFO order. |
Private display object members | |
colorHue | Color hue wheel sprite. |
colorGradient | Color gradient parent sprite for the gradient box, triangle and selector circle. |
gradientData | Gradient box bitmap pixel values. |
gradient | Gradient box display object. |
colorSelector | Circle sprite indicating the selectedColor in the gradient box. |
colorPalette | Palette sprite with hue, saturation and brightness columns. |
recentPalette | Palette sprite with recently used color entries. |
currentColor | Palette sprite with only a preview of the selectedColor. |
Private widget members | |
selectedColorField | RGB and named color text input field. |
hueField | Hue integer input field. |
saturationField | Saturation integer input field. |
brightnessField | Brightness integer input field. |
Private state members | |
isVisible | Set to true when the color selection dialog is displayed. |
isChangingHue | Set to true when the user is dragging the mouse on the hue wheel. |
isChangingGradient | Set to true when the user is dragging the mouse in the gradient box. |
internalUpdate | Set to true during internal updates of widgets. |
Dialog creation and display | |
ColorForm | Constructor of the base color form dialog. |
ShowDialog | Displays the color selection dialog. |
InitializeComponent | Initializes the widgets and display elements in the dialog. |
createColorHue | Creates the color hue wheel. |
createColorGradient | Creates the saturation/brightness gradient box, a triangle marker for the current hue and a circle indicating the current color. |
drawCurrentColor | Draws a small preview of the currently selected color. |
drawRecentColors | Draws palette entries for the recently used colors |
drawColorPalette | Draws a palette based on the selectedColor with a hue, saturation and brightness column. |
drawHueScale | Draws a hue scale palette column. |
drawSaturationScale | Draws a saturation scale palette column. |
drawBrightnessScale | Draws a brightness scale palette column. |
drawPaletteEntry | Draws a single palette entry box. |
Color update methods | |
fillColorGradient | Fills the saturation/brightness gradient box with a gradient based on a new hue. |
updateColorGradient | Updates the saturation/brightness gradient box based on a new hue. |
updateColorSelector | Updates the position of the color selector circle. |
Mouse event handlers | |
onMouseDown | Called when the user presses the mouse button down. |
onMouseMove | Called when the user drags the mouse. |
onMouseUp | Called when the user releases the mouse button. |
onMouseOut | Called when the user moves the mouse outside the dialog while performing a drag action. |
mousePaletteSelected | Updates the selectedColor based on the mouse position over a color gradient palette entry. |
mouseRecentSelected | Updates the selectedColor based on the mouse position over a recently used color palette entry. |
mouseHueChange | Updates the selectedColor based on the mouse position over the color hue wheel. |
mouseGradientChange | Updates the selectedColor based on the mouse position over the saturation/brightness scale box. |
Widget event handlers | |
onChangeColor | Called when the text in the RGB/named color field is changed. |
onChangeHue | Called when the integer in the hue numeric field is changed. |
onChangeSaturation | Called when the integer in the saturation numeric field is changed. |
onChangeBrightness | Called when the integer in the brightness numeric field is changed. |
Dialog close methods | |
acceptDialog | Called when the user accepts the dialog. |
cancelDialog | Called when the user cancels the dialog. |
closeColorDialog | Called when the base dialog class dismisses the dialog. |
updateRecentColors | A selected color is inserted into the array of recently used colors if it is not already present. |
dispose | Removes used resources, references and graphics. |
private var originalColor: String
The color that was selected when the selection started. Used to reset the updateField if the users cancels the dialog.
private var colorHue: Sprite
Color hue wheel sprite. See createColorHue.
private var colorGradient: Sprite
Color gradient parent sprite for the gradient box, triangle and selector circle. See createColorGradient.
private var colorSelector: Sprite
Circle sprite indicating the selectedColor in the gradient box.
private var currentColor: Sprite
Palette sprite with only a preview of the selectedColor.
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.
parent | sprite that the dialog is placed on top of |
colorField | StringInput field that is updated by the dialog |
public function InitializeComponent():void
Initializes the widgets and display elements in the dialog.
The text entry field implements colors given as RGB in decimal or hexadecimal prefixed with 0x or #, and named colors (case-insensitive).
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 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).
palette | parent palette (colorPalette, recentPalette, currentColor) |
entryColor | rgb color of the palette entry |
posX | vertical position of the palette entry |
posY | horizontal position of the palette entry |
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.
hue | The hue value used for the gradient |
saturation | The saturation value used for the gradient |
brightness | The brightness value used for the gradient |
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.
hue | The selected hue value |
saturation | The selected saturation value |
brightness | The selected brightness value |
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.
event | A mouse event. |
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.
event | A mouse event. |
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.
event | A mouse event. |
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.
event | A mouse event. |
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. 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.
str | updated text string in the selectedColorField |
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.
value | hue in degrees clamped to 0 - 360 |
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.
value | saturation in percent from 0 to 100 |
The saturation is presented in percent whereas the class ColorHSB uses a zero to one interval.
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.
value | brightness in percent from 0 to 100 |
The brightness is presented in percent whereas the class ColorHSB uses a zero to one interval.
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.
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.
Radius of the outer circle of the hue wheel.
private const outerSize: Number
Radius of the inner circle of the hue wheel.
private const innerSize: Number
Horizontal center of the hue wheel.
private const centerX: Number
Vertical center of the hue wheel.
private const centerY: Number
Size of the indicator triangle and circle.
private const handleSize: Number
Width of the gradient box.
private const gradientSizeX: int
Height of the gradient box.
private const gradientSizeY: int
Width of a palette entry color box.
private const paletteEntryWidth: Number
Height of a palette entry color box.
private const paletteEntryHeight: Number
Distance between palette entries.
private const paletteEntryDistance: Number
Width of the dialog box client area.
private const dialogWidth: Number
Height of the dialog box client area.
private const dialogHeight: Number
Base dialog theme color
private var dialogColor: uint
Currently selected color in the dialog
private var selectedColor: ColorHSB
A ‘weak’ reference to the field the dialog is currently updating in the calling application
private var updateField: StringInput
The color that was selected when the selection started.
private var originalColor: String
Array of RGB color values for the color palette in column order.
private var paletteColors: Array
Array of RGB color values for the recently used color palette in LIFO order.
private var recentColors: Array
Color hue wheel sprite.
private var colorHue: Sprite
Color gradient parent sprite for the gradient box, triangle and selector circle.
private var colorGradient: Sprite
Gradient box bitmap pixel values.
private var gradientData: BitmapData
Gradient box display object.
private var gradient: Bitmap
Circle sprite indicating the selectedColor in the gradient box.
private var colorSelector: Sprite
Palette sprite with hue, saturation and brightness columns.
private var colorPalette: Sprite
Palette sprite with recently used color entries.
private var recentPalette: Sprite
Palette sprite with only a preview of the selectedColor.
private var currentColor: Sprite
RGB and named color text input field.
private var selectedColorField: StringInput
Hue integer input field.
private var hueField: IntegerInput
Saturation integer input field.
private var saturationField: IntegerInput
Brightness integer input field.
private var brightnessField: IntegerInput
Set to true when the color selection dialog is displayed.
private var isVisible: Boolean
Set to true when the user is dragging the mouse on the hue wheel.
private var isChangingHue: Boolean
Set to true when the user is dragging the mouse in the gradient box.
private var isChangingGradient: Boolean
Set to true during internal updates of widgets.
private var internalUpdate: Boolean
Constructor of the base color form dialog.
public function ColorForm( formColor: uint )
Displays the color selection dialog.
public function ShowDialog( parent: Sprite, colorField: StringInput ):void
Initializes the widgets and display elements in the dialog.
public function InitializeComponent():void
Creates the color hue wheel.
private function createColorHue():Sprite
Creates the saturation/brightness gradient box, a triangle marker for the current hue and a circle indicating the current color.
private function createColorGradient():Sprite
Draws a small preview of the currently selected color.
private function drawCurrentColor( hsb: ColorHSB ):void
Draws palette entries for the recently used colors
private function drawRecentColors():void
Draws a palette based on the selectedColor with a hue, saturation and brightness column.
private function drawColorPalette():void
Draws a hue scale palette column.
private function drawHueScale( baseColor: uint, posX: Number ):void
Draws a saturation scale palette column.
private function drawSaturationScale( baseColor: uint, posX: Number ):void
Draws a brightness scale palette column.
private function drawBrightnessScale( baseColor: uint, posX: Number ):void
Draws a single palette entry box.
private function drawPaletteEntry( palette: Sprite, entryColor: uint, posX: Number, posY: Number ):void
Fills the saturation/brightness gradient box with a gradient based on a new hue.
private function fillColorGradient( gradientHue: Number ):void
Updates the saturation/brightness gradient box based on a new hue.
private function updateColorGradient( hue: Number, saturation: Number, brightness: Number ):void
Updates the position of the color selector circle.
private function updateColorSelector( hue: Number, saturation: Number, brightness: Number ):void
Called when the user presses the mouse button down.
private function onMouseDown( event: MouseEvent ):void
Called when the user drags the mouse.
private function onMouseMove( event: MouseEvent ):void
Called when the user releases the mouse button.
private function onMouseUp( event: MouseEvent ):void
Called when the user moves the mouse outside the dialog while performing a drag action.
private function onMouseOut( event: MouseEvent ):void
Updates the selectedColor based on the mouse position over a color gradient palette entry.
private function mousePaletteSelected():void
Updates the selectedColor based on the mouse position over a recently used color palette entry.
private function mouseRecentSelected():void
Updates the selectedColor based on the mouse position over the color hue wheel.
private function mouseHueChange():void
Updates the selectedColor based on the mouse position over the saturation/brightness scale box.
private function mouseGradientChange():void
Called when the text in the RGB/named color field is changed.
private function onChangeColor( str: String ):void
Called when the integer in the hue numeric field is changed.
private function onChangeHue( value: int ):void
Called when the integer in the saturation numeric field is changed.
private function onChangeSaturation( value: int ):void
Called when the integer in the brightness numeric field is changed.
private function onChangeBrightness( value: int ):void
Called when the user accepts the dialog.
private function acceptDialog():void
Called when the user cancels the dialog.
private function cancelDialog():void
Called when the base dialog class dismisses the dialog.
private function closeColorDialog( accepted: Boolean ):void
A selected color is inserted into the array of recently used colors if it is not already present.
private function updateRecentColors():void
Removes used resources, references and graphics.
public override function dispose():void
Creates a byte array with color values of varying saturation and brightness based on the hue of the current color.
public function gradientByteArray( width: int, height: int ):ByteArray