Skip to main content

%ZEN.ComponentEx.colorWheel

class %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

Property Inventory

Method Inventory

Parameters

parameter INCLUDEFILES = zenCSLM.js;
Default image for close group button.

Properties

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 methods: showPreviewDisplayToLogical(), showPreviewGet(), showPreviewIsValid(), showPreviewLogicalToDisplay(), showPreviewLogicalToOdbc(), showPreviewNormalize(), showPreviewSet()
property showRGBPanel as %ZEN.Datatype.integer [ InitialExpression = 1 ];
Show the three slider panel that allows micromanagement of the RGB color guns
Property methods: showRGBPanelDisplayToLogical(), showRGBPanelGet(), showRGBPanelIsValid(), showRGBPanelLogicalToDisplay(), showRGBPanelLogicalToOdbc(), showRGBPanelNormalize(), showRGBPanelSet()
property value as %ZEN.Datatype.value (ZENEXPRESSION = 1) [ InitialExpression = "#7f7f7f" ];
Inherited description: 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.
Property methods: valueDisplayToLogical(), valueGet(), valueIsValid(), valueLogicalToDisplay(), valueLogicalToOdbc(), valueNormalize(), valueSet()

Methods

method %DrawHTML()
The %DrawHTML method draws the initial HTML for this component.
clientmethod 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
clientmethod cleanUpUserColorGunEntry(gun) [ Language = javascript ]
User entered values for color guns should always be exactly two hex digits Sanitize and truncate as needed.
clientmethod 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
clientmethod constrainDragX(mgr, wrapper, newX) [ Language = javascript ]
Prorate slider values based on slider activity.
clientmethod constrainDragY(mgr, wrapper, newY) [ Language = javascript ]
Force drag operations in embedded sliders to be purely horizontal
clientmethod endDrag(mgr, wrapper) [ Language = javascript ]
Wrap up drag activity on embedded sliders
clientmethod findParts() [ Language = javascript ]
Build an internal map of oointers to key DOM nodes to speed processing during drag operations.
clientmethod 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
clientmethod getRadius(x, y) [ Language = javascript ]
Given an XY location on the rendering of the color wheel calculate the Rho value of the color space
clientmethod 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.
clientmethod getShadeBlue(r, theta) [ Language = javascript ]
Given Rho, Theta values in the color space, calculate the associate Blue color gun contribution
clientmethod getShadeGreen(r, theta) [ Language = javascript ]
Given Rho, Theta values in the color space, calculate the associate Green color gun contribution
clientmethod getShadeRed(r, theta) [ Language = javascript ]
Given Rho, Theta values in the color space, calculate the associate Red color gun contribution
clientmethod getX(r, theta) [ Language = javascript ]
Convert polar color coordinates to X pixel value
clientmethod getY(r, theta) [ Language = javascript ]
Convert polar color coordinates to Y pixel value
clientmethod initializeDOM() [ Language = javascript ]
Perform client-side initialization of elements that have no server side projection
clientmethod mixGuns() [ Language = javascript ]
Reset the value of the widget based on user interaction with the RGB sliders
clientmethod moveCrosshair(e) [ Language = javascript ]
Position the crosshair on the color wheel in response to a user action
clientmethod onRefreshContents() [ Language = javascript ]
Inherited description: This client callback is called just from refreshContents just after the new HTML is delivered from the server.
clientmethod onloadHandler() [ Language = javascript ]
Inherited description: This client event, if present, is fired when the page is loaded.
clientmethod positionCrosshair(r, theta) [ Language = javascript ]
Position the crosshair indicator based on the latest Rho, Theta values in the color space.
clientmethod positionHandle(who) [ Language = javascript ]
Ensure that the handle of embedded sliders accurately reflects the internal value thereof.
clientmethod setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
clientmethod setSliderValue(who, value) [ Language = javascript ]
Initialized or reset the internal value associated with a slider and update its avatar accordingly.
clientmethod 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.
clientmethod setValueRGB(r, g, b) [ Language = javascript ]
Given discrete RGB color gun settings, update the value and appearance of this widget.
clientmethod startDrag(mgr, wrapper) [ Language = javascript ]
Initialize drag operations for the embedded sliders
clientmethod updateMask() [ Language = javascript ]
Adjust the white saturation of the color wheel based on the current settings of the slider control
clientmethod updatePreview(r, theta, z) [ Language = javascript ]
Update the rendering of the widget to reflect the current value
clientmethod updateVisibleAreas() [ Language = javascript ]
Hide or show optional parts of the widget
clientmethod verifyHex(event, gun) [ Language = javascript ]
Limit the input of hex boxes to hex digits

Inherited Members

Inherited Properties

Inherited Methods

FeedbackOpens in a new tab