PDA

View Full Version : How to use YUI Color Picker



hypeway
23 May 2007, 12:11 PM
Hi,

I am looking for a way to use YUI's Color Picker (http://developer.yahoo.com/yui/examples/slider/rgb2.html?mode=dist) instead of the current ColorPalette class within Extjs.

I looked through the forum for answer and found Frank Cheung's demo (http://www.ajaxjs.com/yuicn/extras/morecolorpanel.htm). Although it is still not exactly what I want to accomplish, I still think Frank did a fantastic job and I can definitely learn from his example.

Thanks!

brian.moeskau
23 May 2007, 12:45 PM
What code have you tried so far? What problem are you having?

hypeway
23 May 2007, 1:29 PM
So far, I added YUI's Slider.js into extjs/source/yui directory, and used the following codes from YUI:


YAHOO.example.ColorPicker = function() {

var Slider=YAHOO.widget.Slider;
var Color=YAHOO.util.Color;
var Dom=YAHOO.util.Dom;

var pickerSize=180;

var hue,picker,panel;

// hue, int[0,359]
var getH = function() {
var h = (pickerSize - hue.getValue()) / pickerSize;
h = Math.round(h*360);
return (h == 360) ? 0 : h;
}

// saturation, int[0,1], left to right
var getS = function() {
return picker.getXValue() / pickerSize;
}

// value, int[0,1], top to bottom
var getV = function() {
return (pickerSize - picker.getYValue()) / pickerSize;
}

var swatchUpdate = function() {
var h=getH(), s=getS(), v=getV();
//YAHOO.log("hsv " + [h,s,v]);

Dom.get("hval").value = h;
Dom.get("sval").value = Math.round(s*100);
Dom.get("vval").value = Math.round(v*100);

var rgb = Color.hsv2rgb(h, s, v);

var styleDef = "rgb(" + rgb.join(",") + ")";
Dom.setStyle("swatch", "background-color", styleDef);

Dom.get("rval").value = rgb[0];
Dom.get("gval").value = rgb[1];
Dom.get("bval").value = rgb[2];

Dom.get("hexval").value = Color.rgb2hex(rgb[0], rgb[1], rgb[2]);
};

var hueUpdate = function(newOffset) {
//YAHOO.log("hue update: " + newOffset , "warn");
var rgb = Color.hsv2rgb(getH(), 1, 1);
var styleDef = "rgb(" + rgb.join(",") + ")";
Dom.setStyle("pickerDiv", "background-color", styleDef);

swatchUpdate();
};

pickerUpdate = function(newOffset) {
//YAHOO.log("picker update [" + newOffset.x + ", " + newOffset.y + "]" , "warn");
swatchUpdate();
};

return {

init: function () {

hue = Slider.getVertSlider("hueBg", "hueThumb", 0, pickerSize);
hue.subscribe("change", hueUpdate);

picker = Slider.getSliderRegion("pickerDiv", "selector",
0, pickerSize, 0, pickerSize);
picker.subscribe("change", pickerUpdate);

hueUpdate(0);

panel = new YAHOO.util.DD("ddPicker");
panel.setHandleElId("pickerHandle");

}
}
}();

YAHOO.util.Event.on(window, "load", YAHOO.example.ColorPicker.init);


The error message (per firebug) is:
Slider has no properties
hue = Slider.getVertSlider("hueBg", "hueThumb", 0, pickerSize);

The UI result is that the color wheel is not showing and only existing HTML mock-up is present.

tryanDLS
23 May 2007, 1:39 PM
I haven't looked at YUI code, but unless Slider is a singleton object that's instantiated somewhere in their code, you have to create one e.g

var myslide = new Slider(....);

brian.moeskau
23 May 2007, 1:43 PM
The Color and Dom lines are just creating aliases to those namespaces, so they are correct, but I assume the Slider line is supposed to be creating a class instance? Should it be:


var Slider= new YAHOO.widget.Slider();

If that's not it, are you sure that your include references are correct for the YUI files?

brian.moeskau
23 May 2007, 1:44 PM
Echo. :)

hypeway
23 May 2007, 3:15 PM
Great question, Brian! Since Ext is built on top of YUI, do I still need to explicitly include the reference to the js file, such as extjs/source/yui/Slider.js?

Secondly, the code I am trying is straight out of YUI's Color Picker example, so the code below obviously works in their scenario:


var Slider=YAHOO.widget.Slider;

I will try your suggestion and see if I can make sense out of it.

Thank you, guys.

hypeway
23 May 2007, 3:18 PM
Btw, I am currently including the following js file references:

<script src="/extjs/adapter/yui/yui-utilities.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/adapter/yui/ext-yui-adapter.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/ext-all.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/package/util.js" language="javascript" type="text/javascript"></script>

Will these references give me access to YUI functions and classes?

brian.moeskau
23 May 2007, 3:28 PM
The yui-utilities.js ONLY includes the bare minimum utilities required by Ext (YAHOO, Dom, Event). Any additional YUI widget files that you want to use must be included separately after the other includes. There should not be any issues with doing that, many people do.

hypeway
23 May 2007, 3:34 PM
If I understand this correctly, in addition to add the YUI Slider.js to the existing 5 that reside in /extjs/source/yui/, I also need to add its codes to /extjs/adapter/yui/yui-utilities.js? If so, do I simply copy the codes from slider.js to yui-utilities.js, or there are other things I should be watching out for?

brian.moeskau
23 May 2007, 3:44 PM
The simple approach:



<script src="/extjs/adapter/yui/yui-utilities.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/adapter/yui/ext-yui-adapter.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/ext-all.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/package/util.js" language="javascript" type="text/javascript"></script>
<script src="/your/path/to/Slider.js" language="javascript" type="text/javascript"></script>


Also make sure that if Slider has any other YUI dependencies aside from what's in yui-utilities, you must also include them before Slider. If you want, you can combine files, but it's not required just to get things working.

hypeway
23 May 2007, 4:37 PM
After adding other YUI dependencies to the includes, when I call the function, a new error caught by Firebug referencing to ext-yui-adapter.js:


_5c.animateX is not a function
if(typeof YAHOO=="undefined"){throw "Unable to load Ext, core YUI utilities (yah...

tryanDLS
23 May 2007, 5:00 PM
What do you includes look like now? You don't need Event, Dom, Animation, Connect, DragDrop. They're in the adapter and including them separately may cause problems.

hypeway
23 May 2007, 9:23 PM
Hi tryanDLS,

I did not include those 5 js file references (Event, Dom, Animation, Connect, DragDrop), since they are already included in the adapter.

My current includes look like this:


<script src="/extjs/adapter/yui/yui-utilities.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/adapter/yui/ext-yui-adapter.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/ext-all.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/package/util.js" language="javascript" type="text/javascript"></script>
<script src="/extjs/source/yui/utilities.js" language="javascript" type="text/javascript"></script>
/*** start: color picker helper functions ***/
<script src="/js/color.js" language="javascript" type="text/javascript"></script>
/*** end: color picker helper functions ***/
<script src="/extjs/source/yui/slider.js" language="javascript" type="text/javascript"></script>

tryanDLS
24 May 2007, 9:14 AM
Remove yui/utilities - that's a combined version of Event, DnD, Connection, etc. Also, I'm not sure why you're including package/util.js since you have ext-all.js

hypeway
24 May 2007, 9:55 AM
When the /yui/utilities.js was not included, Firebug reported an error stating that the slider is not a constructor. This error went away after I included the /yui/utilities.js file.

tryanDLS
24 May 2007, 10:40 AM
Oh...Ext has eliminated the need for YUI Drag and Drop, so you need that file. My includes look like this now. It doesn't do anything, but it's not a JS error - I may not have the correct HTML - I just copied one of theirs.


<script type="text/javascript" src="/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript" src="/yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="/yui/build/slider/slider.js"></script>
<script type="text/javascript" src="/yui/examples/slider/js/color.js"></script>

hypeway
24 May 2007, 1:38 PM
Wow, that was it! It's working! Thank you very much, Tim!

Another question, when I load an external file via setUrl (or setDefaultUrl), can Ext.get(id) access elements within that file?

tryanDLS
24 May 2007, 1:50 PM
Yes - the update just puts the content into innerHTML of the element, so it just becomes part of the dom tree - you access in the standard way.

hypeway
24 May 2007, 2:27 PM
Sweeeeeet. Thanks again, guys.