Eric Choi & Tejaswi Tenneti
The color picker uses two color representations: HSV (hue-saturation-value) and RGB (red-green-blue). In the HSV system, the hue corresponds to the color (i.e., chromaticity), saturation corresponds to the intensity of the color (i.e., strong or washed out), and value corresponds to the value of the color along the lightness-darkness axis. The HSV representation of a color can be converted to RGB, which is a very commonly used color format, and back.
Structure of the interaction Edit
There are two major functions in the script: trackDrag and colorChanged. trackDrag is the first layer behind human interaction. It handles the events generated by the mouse. colorChanged manipulates the properties of the controls on the page, which includes calculating color values and changing colors of HTML elements. The color picker allows for two ways to change color: the first is by manipulating the HSV slider/box, and the other is by manually entering an RGB value in the text input box.
For HSV slider/box:
- User clicks and drags on the hue slider or the value/saturation square.
- trackDrag invokes event handlers and emulates a mouseDrag event. It then calls hsvChanged.
- hsvChanged converts the state of the controls to an RGB value. It then calls colorChanged.
- colorChanged computes the color values for the various controls and then sets them via their style properties. It also repositions the saturation/value crosshair and hue slider to the location of the mouse cursor.
For the text input box:
- User enters text into the text input.
- The inputDataChanged event handler is invoked. It calls rgbChanged.
- rgbChanged converts the RGB color into HSV and then calls colorChanged. If the RGB could not be converted, the controls are reset.
- colorChanged computes the color values for the various controls and then sets them via their style properties. It also repositions the saturation/value crosshair and hue slider to the locations corresponding to the selected color.
Why it's interesting Edit
There is a continuous 2D interaction in the form of a gradient square and a 1D interaction in the form of a slider. These controls allow the user to choose values for three orthogonal color components: hue, saturation and value. HTML does not provide for continuous (in the sense of a slider) controls.
Server interactions Edit
There are no server interactions.
Modifying the Web for this interaction Edit
A broader class of interactions Edit
This control falls within the domain of slider controls and 2D controls. These are very commonly used today in other applications, such as photo tagging, image editing, anything involving drag-and-drop, zoom controls