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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi