deprecatedclass %ZEN.ComponentEx.colorWheel
extends %ZEN.Component.control
The colorWheel widget is an interactive color picker that models a 24-bit RGB color
space using cylindrical coordinates.
Visually, this projects as a circle (a cross section of the cylinder when looking down
the Z-axis) with the true blue baseline at zero degrees, true red at 120 degrees, and
true green at 240 degrees. A slider beneath the circle determines which cross section
of the color cylinder is shown; at zero the base plane is presented and the very center
of the circle (the orgin of the color coordinate system) is black (#000000). As the
value of the slider increases, equal amounts of red green and blue are added to the
color space until, at the max value, the entire disk is saturated with white (#ffffff)
The value of the widget may be selected by adjusting the white saturation via the slider
and clicking on the wheel itself, or by manipulating the RGB contributions directly via
the three sliders provided in the RGB control panel beneath the main color wheel.
The nominal value of the widget is a string of the form "#xxxxxx" where 'x' is a
hexadecimal digit. The hex values, in order, represent 8 bit contributions of red, green
and blue color guns needed to produce the indicated color in HTML documents
• parameter INCLUDEFILES = "zenCSLM.js";
Default image for close group button.
• property showPreview
as %ZEN.Datatype.integer [ InitialExpression = 1 ];
Show the preview box at the bottom of the widget that is filled with the currently
selected color and stamped with the HTML Hex color specification
• property showRGBPanel
as %ZEN.Datatype.integer [ InitialExpression = 1 ];
Show the three slider panel that allows micromanagement of the RGB color guns
• property value
as %ZEN.Datatype.value(ZENEXPRESSION=1) [ InitialExpression = "#7f7f7f" ];
Default value displayed within this control.
This is a special value in that it is automatically intialized
when a form is displayed.
Do not use this property directly on the client; instead
used the getValue method to get the current value of a control.
• method %DrawHTML()
The %DrawHTML method draws the initial HTML for this component.
• method cleanUpMainUserEntry()
[ Language = javascript ]
In the event that the user has entered specific hex color value in the
main value box, verify that
all of the inputs, previews and controls are in sync with the latest data
and that that data represents a valid Web color spec
• method cleanUpUserColorGunEntry(gun)
[ Language = javascript ]
User entered values for color guns should always be exactly two hex digits
Sanitize and truncate as needed.
• method cleanUpUserEntry()
[ Language = javascript ]
In the event that the user has entered specific hex values, verify that
all of the inputs, previews and controls are in sync with the latest data
and that that data represents a valid Web color spec
• method constrainDragX(mgr, wrapper, newX)
[ Language = javascript ]
Prorate slider values based on slider activity.
• method constrainDragY(mgr, wrapper, newY)
[ Language = javascript ]
Force drag operations in embedded sliders to be purely horizontal
• method endDrag(mgr, wrapper)
[ Language = javascript ]
Wrap up drag activity on embedded sliders
• method findParts()
[ Language = javascript ]
Build an internal map of oointers to key DOM nodes to speed
processing during drag operations.
• method getAngle(x, y)
[ Language = javascript ]
Given the XY location on the rendering of the color wheel
calculate the Theta (in degrees) value of the color space
• method getRadius(x, y)
[ Language = javascript ]
Given an XY location on the rendering of the color wheel
calculate the Rho value of the color space
• method getShade(r, theta, z)
[ Language = javascript ]
Given a point in the abstract color space (rho, theta, zed), calculate the
resulting color and return its HTML hex color specification.
• method getShadeBlue(r, theta)
[ Language = javascript ]
Given Rho, Theta values in the color space, calculate the associate Blue
color gun contribution
• method getShadeGreen(r, theta)
[ Language = javascript ]
Given Rho, Theta values in the color space, calculate the associate Green
color gun contribution
• method getShadeRed(r, theta)
[ Language = javascript ]
Given Rho, Theta values in the color space, calculate the associate Red
color gun contribution
• method getX(r, theta)
[ Language = javascript ]
Convert polar color coordinates to X pixel value
• method getY(r, theta)
[ Language = javascript ]
Convert polar color coordinates to Y pixel value
• method initializeDOM()
[ Language = javascript ]
Perform client-side initialization of elements that have no server side projection
• method mixGuns()
[ Language = javascript ]
Reset the value of the widget based on user interaction with the RGB sliders
• method moveCrosshair(e)
[ Language = javascript ]
Position the crosshair on the color wheel in response to a user action
• method onRefreshContents()
[ Language = javascript ]
This client callback is called just from refreshContents
just after the new HTML is delivered from the server.
• method onloadHandler()
[ Language = javascript ]
This client event, if present, is fired when the page is loaded.
• method positionCrosshair(r, theta)
[ Language = javascript ]
Position the crosshair indicator based on the latest Rho, Theta values in the
color space.
• method positionHandle(who)
[ Language = javascript ]
Ensure that the handle of embedded sliders accurately reflects the internal value thereof.
• method setProperty(property, value, value2)
[ Language = javascript ]
Set the value of a named property.
• method setSliderValue(who, value)
[ Language = javascript ]
Initialized or reset the internal value associated with a slider and update its
avatar accordingly.
• method setValueHex(hexStr)
[ Language = javascript ]
Given an HTML color specification in Hex notation, break it up into explicit RGB values
and call setValueRGB to update the value and appearance of this widget.
• method setValueRGB(r, g, b)
[ Language = javascript ]
Given discrete RGB color gun settings, update the value and appearance of this widget.
• method startDrag(mgr, wrapper)
[ Language = javascript ]
Initialize drag operations for the embedded sliders
• method updateMask()
[ Language = javascript ]
Adjust the white saturation of the color wheel based on the current settings
of the slider control
• method updatePreview(r, theta, z)
[ Language = javascript ]
Update the rendering of the widget to reflect the current value
• method updateVisibleAreas()
[ Language = javascript ]
Hide or show optional parts of the widget
• method verifyHex(event, gun)
[ Language = javascript ]
Limit the input of hex boxes to hex digits
