How to use YUI Color Picker

[hypeway]

Hi,

I am looking for a way to use YUI's Color Picker (http://developer.yahoo.com/yui/examp...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]

What code have you tried so far? What problem are you having?

[hypeway]

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]

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]

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]

Echo.

[hypeway]

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]

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]

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]

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?