YUI Library Examples: Color Picker Control: Inline Color Picker Control from Script

Building a Color Picker Instance via JavaScript

In this example, the Color Picker Control instance is allowed to create its own DOM structure. We begin with a simple style set for the containing element into which that DOM structure will be rendered and we place the containing element on the page:


1	<style type="text/css">
2	#container { position: relative; padding: 6px; background-color: #eeeeee; width: 420px; height:220px; }
3	</style>
4
5	<div id="container">
6	<!--Color Picker will appear here-->
7	</div>
8
9	<!--We'll use these to trigger interactions with the Color Picker
10	API -->
11	<button id="reset">Reset Color to White</button>
12	<button id="gethex">Write current hex value to the Logger</button>
	view plain \| print \| ?

With a target element in place, we can instantiate Color Picker and provide our desired configuration options. In this example, we are specifying that HSV and hex controls should be displayed and we're specifying custom locations for the color-picker slider thumb and the hue slider thumb. For the purposes of the example, we're also hooking into the Color Picker's rgbChange event and logging the newValue to the logger console; you'll see those log messages each time you adjust the color. This example also demonstrates how to use the picker's get method to tap into the current hex value via script.


1	(function() {
2	var Event = YAHOO.util.Event,
3	picker;
4
5	Event.onDOMReady(function() {
6	YAHOO.log("Creating Color Picker.", "info", "example");
7	picker = new YAHOO.widget.ColorPicker("container", {
8	showhsvcontrols: true,
9	showhexcontrols: true,
10	images: {
11	PICKER_THUMB: "assets/picker_thumb.png",
12	HUE_THUMB: "assets/hue_thumb.png"
13	}
14	});
15	YAHOO.log("Finished creating Color Picker.", "info", "example");
16
17	//a listener for logging RGB color changes;
18	//this will only be visible if logger is enabled:
19	var onRgbChange = function(o) {
20	/*o is an object
21	{ newValue: (array of R, G, B values),
22	prevValue: (array of R, G, B values),
23	type: "rgbChange"
24	}
25	*/
26	YAHOO.log("The new color value is " + o.newValue, "info", "example");
27	}
28
29	//subscribe to the rgbChange event;
30	picker.on("rgbChange", onRgbChange);
31
32	//use setValue to reset the value to white:
33	Event.on("reset", "click", function(e) {
34	picker.setValue([255, 255, 255], false); //false here means that rgbChange
35	//will fire; true would silence it
36	});
37
38	//use the "get" method to get the current value
39	//of one of the Color Picker's properties; in
40	//this case, we'll get the hex value and write it
41	//to the log:
42	Event.on("gethex", "click", function(e) {
43	YAHOO.log("Current hex value: " + picker.get("hex"), "info", "example");
44	});
45
46	});
47	})();
	view plain \| print \| ?

(function() {
    var Event = YAHOO.util.Event,
        picker;

Event.onDOMReady(function() {
			YAHOO.log("Creating Color Picker.", "info", "example");
            picker = new YAHOO.widget.ColorPicker("container", {
                    showhsvcontrols: true,
                    showhexcontrols: true,
					images: {
						PICKER_THUMB: "assets/picker_thumb.png",
						HUE_THUMB: "assets/hue_thumb.png"
    				}
                });
			YAHOO.log("Finished creating Color Picker.", "info", "example");
			
			//a listener for logging RGB color changes;
			//this will only be visible if logger is enabled:
			var onRgbChange = function(o) {
				/*o is an object
					{ newValue: (array of R, G, B values),
					  prevValue: (array of R, G, B values),
					  type: "rgbChange"
					 }
				*/
				YAHOO.log("The new color value is " + o.newValue, "info", "example");
			}
			
			//subscribe to the rgbChange event;
			picker.on("rgbChange", onRgbChange);

//use setValue to reset the value to white:
			Event.on("reset", "click", function(e) {
				picker.setValue([255, 255, 255], false); //false here means that rgbChange
													     //will fire; true would silence it
			});
			
			//use the "get" method to get the current value
			//of one of the Color Picker's properties; in 
			//this case, we'll get the hex value and write it
			//to the log:
			Event.on("gethex", "click", function(e) {
				YAHOO.log("Current hex value: " + picker.get("hex"), "info", "example"); 
			});

});
})();

It's advisable to provide all necessary configurations at the instantiation of the Color Picker; it renders immediately and automatically upon creation.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 1053ms (+3) 5:34:48 AM:
ColorPicker
picker update [0, 0]

WARN 1050ms (+13) 5:34:48 AM:
ColorPicker
hue update: 0

INFO 1037ms (+0) 5:34:47 AM:
example
Finished creating Color Picker.

INFO 1037ms (+0) 5:34:47 AM:
ColorPicker
Setting picker slider to 0,0

INFO 1037ms (+0) 5:34:47 AM:
ColorPicker
Hue slider is being set to 0

INFO 1037ms (+1) 5:34:47 AM:
ColorPicker
RGB value set to [255, 255, 255] (hsv: [0, 0, 1])

INFO 1036ms (+1) 5:34:47 AM:
ColorPicker
RGB value set to 255,255,255

INFO 1035ms (+1) 5:34:47 AM:
ColorPicker
picker size180

INFO 1034ms (+2) 5:34:47 AM:
ColorPicker
Building markup

INFO 1032ms (+6) 5:34:47 AM:
example
Creating Color Picker.

INFO 1026ms (+1026) 5:34:47 AM:
LogReader  instance0
LogReader initialized

INFO 0ms (+0) 5:34:46 AM:
global
Logger initialized

YUI Library Examples: Color Picker Control: Inline Color Picker Control from Script

Building a Color Picker Instance via JavaScript

Configuration for This Example

YUI Logger Output:

Logger Console

Color Picker Control Examples:

More Color Picker Control Resources: