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
    4
    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
    4
    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
    4
    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.

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

      0  

    Default


    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?

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

      0  

    Default


    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.

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

      0  

    Default


    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?

Thread Participants: 2