Hybrid View

  1. #1
    Ext User
    Join Date
    May 2007
    Posts
    10
    Vote Rating
    0
    hypeway is on a distinguished road

      0  

    Default How to use YUI Color Picker

    How to use YUI Color Picker


    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!

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    10
    Vote Rating
    0
    hypeway is on a distinguished road

      0  

    Default


    So far, I added YUI's Slider.js into extjs/source/yui directory, and used the following codes from YUI:

    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    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
    Code:
    var myslide = new Slider(....);

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    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:

    Code:
    var Slider= new YAHOO.widget.Slider();
    If that's not it, are you sure that your include references are correct for the YUI files?

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Echo.

  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    10
    Vote Rating
    0
    hypeway is on a distinguished road

      0  

    Default


    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:

    Code:
    var Slider=YAHOO.widget.Slider;
    I will try your suggestion and see if I can make sense out of it.

    Thank you, guys.

Thread Participants: 2