%ZEN.ComponentEx.colorWheel

class %ZEN.ComponentEx.colorWheel extends %ZEN.Component.control

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

• showPreview
• showRGBPanel
• value

Method Inventory

• %DrawHTML()
• cleanUpMainUserEntry()
• cleanUpUserColorGunEntry()
• cleanUpUserEntry()
• constrainDragX()
• constrainDragY()
• endDrag()
• findParts()
• getAngle()
• getRadius()
• getShade()
• getShadeBlue()
• getShadeGreen()
• getShadeRed()
• getX()
• getY()
• initializeDOM()
• mixGuns()
• moveCrosshair()
• onRefreshContents()
• onloadHandler()
• positionCrosshair()
• positionHandle()
• setProperty()
• setSliderValue()
• setValueHex()
• setValueRGB()
• startDrag()
• updateMask()
• updatePreview()
• updateVisibleAreas()
• verifyHex()

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