1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    2
    osnoek is on a distinguished road

      0  

    Default Ext.ux.AdvancedColorPicker

    Ext.ux.AdvancedColorPicker


    I've converted this component to Ext 4. So far I've only created a picker field but feel free to add other components based on this.

    Demo: http://www.blackbox-bi.com/ext/examp...lorpicker.html
    Source : https://github.com/osnoek/Ext.ux.Col...ux.ColorPicker
    Attached Files
    Last edited by osnoek; 9 Jul 2011 at 7:55 AM. Reason: added demo and github link

  2. #2
    Sencha User
    Join Date
    Oct 2007
    Location
    Iran
    Posts
    159
    Vote Rating
    0
    vahid4134 is on a distinguished road

      0  

    Default


    I fix some bug in colorpicker.js
    PHP Code:
    /**
     * @class Ext.ux.AdvancedColorPicker
     * @extends Ext.BoxComponent This is a color picker.
     * @license: LGPLv3
     * @author: Olav Snoek (extjs id: osnoekie)
     * @constructor Creates a new ColorPicker
     * @param {Object}
     *            config Configuration options
     * @version 1.0.0
     *
     */

    Ext.define('Ext.ux.AdvancedColorPicker', {
        
    extend 'Ext.container.Container',
        
    alias 'widget.advancedcolorpicker',
        
    width 350,
        
    config : {
            
    hsv : {
                
    0,
                
    0,
                
    0
            
    }
        },
        
    items : [{
            
    xtype 'container',
            
    itemId 'cRgb',
            
    cls 'x-cp-rgbpicker',
            
    items : [{
                
    xtype 'container',
                
    itemId 'rgbPicker',
                
    cls 'x-cp-rgbslider',
                
    width 15,
                
    height 15
            
    } ]
        },{
            
    xtype 'container',
            
    itemId 'cHue',
            
    cls 'x-cp-huepicker',
            
    items : [{
                
    xtype 'container',
                
    itemId 'huePicker',
                
    cls 'x-cp-hueslider',
                
    width 15,
                
    height 15
            
    } ]
        },{
            
    xtype 'form',
            
    itemId 'cForm',
            
    border false,
            
    cls 'x-cp-formcontainer',
            
    items : [{
                
    layout 'column',
                
    border false,
                
    items : [{
                    
    layout 'anchor',
                    
    border false,
                    
    defaultType 'numberfield',
                    
    defaults : {
                        
    anchor '99%',
                        
    labelWidth 10,
                        
    value 0,
                        
    minValue 0,
                        
    maxValue 255,
                        
    labelSeparator '',
                        
    hideTrigger true
                    
    },
                    
    columnWidth .5,
                    
    items : [{
                        
    fieldLabel 'R',
                        
    itemId 'iRed'
                    
    },{
                        
    fieldLabel 'G',
                        
    itemId 'iGreen'
                    
    },{
                        
    fieldLabel 'B',
                        
    itemId 'iBlue'
                    
    } ]
                },{
                    
    layout 'anchor',
                    
    border false,
                    
    defaultType 'numberfield',
                    
    defaults : {
                        
    anchor '99%',
                        
    labelWidth 10,
                        
    value 0,
                        
    minValue 0,
                        
    maxValue 255,
                        
    labelSeparator '',
                        
    hideTrigger true
                    
    },
                    
    columnWidth .5,
                    
    items : [{
                        
    fieldLabel 'H',
                        
    itemId 'iHue',
                        
    maxValue 360
                    
    },{
                        
    fieldLabel 'S',
                        
    itemId 'iSat'
                    
    },{
                        
    fieldLabel 'V',
                        
    itemId 'iVal'
                    
    } ]
                } ]
            },{
                
    layout 'anchor',
                
    border false,
                
    defaults : {
                    
    anchor '99%',
                    
    labelWidth 10,
                    
    labelSeparator ''
                
    },
                
    items : [{
                    
    xtype 'textfield',
                    
    fieldLabel '#',
                    
    itemId 'iHexa'
                
    } ]
            },{
                
    defaultType 'container',
                
    border false,
                
    items : [{
                    
    layout : {
                        
    type 'hbox',
                        
    align 'top'
                    
    },
                    
    defaultType 'container',
                    
    items : [{
                        
    width 30,
                        
    height 25,
                        
    itemId 'cWebsafe'
                    
    },{
                        
    cls 'x-cp-leftarrow'
                    
    },{
                        
    xtype 'button',
                        
    text 'Websafe',
                        
    itemId 'bWebsafe',
                        
    flex 1
                    
    } ]
                },{
                    
    layout : {
                        
    type 'hbox',
                        
    align 'middle'
                    
    },
                    
    defaultType 'container',
                    
    items : [{
                        
    width 30,
                        
    height 25,
                        
    itemId 'cInverse'
                    
    },{
                        
    cls 'x-cp-leftarrow'
                    
    },{
                        
    xtype 'button',
                        
    text 'Inverse',
                        
    itemId 'bInverse',
                        
    flex 1
                    
    } ]
                },{
                    
    layout : {
                        
    type 'hbox',
                        
    align 'middle'
                    
    },
                    
    defaultType 'container',
                    
    items : [{
                        
    width 30,
                        
    height 25,
                        
    itemId 'cSelect'
                    
    },{
                        
    cls 'x-cp-leftarrow'
                    
    },{
                        
    xtype 'button',
                        
    text 'Select Color',
                        
    itemId 'bSelect',
                        
    flex 1
                    
    } ]
                } ]
            } ]
        } ],

        
    constructor : function(config) {
            var 
    me this;
            
    me.initConfig(config);
            
    me.callParent(arguments);
            return 
    this;
        },
        
    initComponent : function() {
            var 
    me this;
            
    me.callParent();
            
    me.addEvents('select');
        },
        
    afterRender : function(component) {
            var 
    me this;
            
    me.callParent(arguments);
            if (
    me.value)
                
    me.setColor(me.value);
        },
        
    initEvents : function() {
            var 
    me this;
            
    me.callParent();

            
    me.down('#cRgb').getEl().on('mousedown'me.rgbClickme);
            
    me.down('#cHue').getEl().on('mousedown'me.hueClickme);

            
    me.down('#iHexa').on('blur'me.hexaChangeme);
            
    me.down('#iRed').on('blur'me.rgbChangeme);
            
    me.down('#iGreen').on('blur'me.rgbChangeme);
            
    me.down('#iBlue').on('blur'me.rgbChangeme);

            
    me.down('#iHue').on('blur'me.hsvChangeme);
            
    me.down('#iSat').on('blur'me.hsvChangeme);
            
    me.down('#iVal').on('blur'me.hsvChangeme);

            
    me.down('#bWebsafe').on('click'me.websafeClickme);
            
    me.down('#bInverse').on('click'me.inverseClickme);
            
    me.down('#bSelect').on('click'me.selectClickme);
        },
        
    websafeClick : function() {
            var 
    me thisrgb me.websafe(this.getColor());
            
    me.updateMode 'click';
            
    me.setColor(me.rgbToHex(rgb));
        },
        
    inverseClick : function() {
            var 
    me thisrgb me.invert(this.getColor());
            
    me.updateMode 'click';
            
    me.setColor(me.rgbToHex(rgb));
        },
        
    selectClick : function() {
            var 
    me thiscolor;
            
    color me.down('#cSelect').getEl().getColor('backgroundColor''''');
            
    this.fireEvent('select'thiscolor.toUpperCase());
        },
        
    getColor : function() {
            var 
    me thishsv me.getHsv();
            return 
    me.hsvToRgb(hsv.hhsv.shsv.v);
        },
        
    setValue : function(v) {
            
    this.value v;
            
    this.setColor(v)
        },
        
    setColor : function(c) {
            var 
    me this;
            if (
    me.rendered) {
                
    c.replace('#''');
                if (!/^[
    0-9a-fA-F]{6}$/.test(c))
                    return;
                
    me.down('#iHexa').setValue(c);
                
    me.hexaChange();
            }
        },
        
    selectColor : function(eventelement) {
            
    this.fireEvent('select'thisExt.get(element).getColor('backgroundColor'''''));
        },
        
    rgbChange : function(input) {
            var 
    me thistemp me.rgbToHsv(me.down('#iRed').getValue(), me.down('#iGreen').getValue(), me.down('#iBlue').getValue());

            
    me.updateMode 'rgb';
            
    me.setHsv({
                
    temp[0],
                
    temp[1],
                
    temp[2]
            });
            
    me.updateColor();
        },
        
    hsvChange : function(input) {
            var 
    me this;
            
    me.updateMode 'hsv';
            
    me.setHsv({
                
    me.down('#iHue').getValue(),
                
    me.down('#iSat').getValue() / 100,
                
    me.down('#iVal').getValue() / 100
            
    });
            
    me.updateColor();
        },
        
    hexaChange : function(input) {
            var 
    me thistemp me.rgbToHsv(me.hexToRgb(me.down('#iHexa').getValue()));
            
    me.updateMode 'hexa';
            
    me.setHsv({
                
    temp[0],
                
    temp[1],
                
    temp[2]
            });
            
    me.updateColor();
        },
        
    hueClick : function(eventel) {
            var 
    me this;
            
    me.updateMode 'click';
            
    me.moveHuePicker(event.getXY()[1] - me.down('#cHue').getEl().getTop());
        },
        
    rgbClick : function(eventel) {
            var 
    me thiscRgb me.down('#cRgb').getEl();
            
    me.updateMode 'click';
            
    me.moveRgbPicker(event.getXY()[0] - cRgb.getLeft(), event.getXY()[1] - cRgb.getTop());
        },
        
    moveHuePicker : function(y) {
            var 
    me thishsv me.getHsv(), hp me.down('#huePicker').getEl();
            
    hsv.Math.round(360 181 * (181 y));
            
    hp.moveTo(hp.getLeft(), me.down('#cHue').getEl().getTop() + 7true);
            
    me.updateRgbPicker(hsv.h)
            
    me.updateColor();
        },
        
    updateRgbPicker : function(newValue) {
            var 
    me this;
            
    me.updateMode 'click';
            
    me.down('#cRgb').getEl().applyStyles({
                
    'backgroundColor' '#' me.rgbToHex(me.hsvToRgb(newValue11))
            });
        },
        
    moveRgbPicker : function(xy) {
            var 
    me thishsv me.getHsv(), cRgb me.down('#cRgb').getEl();
            
    hsv.me.getSaturation(x);
            
    hsv.me.getVal(y);
            
    me.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + 7cRgb.getTop() + 7true);
            
    me.updateColor();
        },
        
    updateColor : function() {
            var 
    me thishsv me.getHsv();
            var 
    rgb me.hsvToRgb(hsv.hhsv.shsv.v);
            var 
    invert me.invert(rgb);
            var 
    websafe me.websafe(rgb);
            var 
    wsInvert me.invert(websafe);

            if (
    me.updateMode != 'hexa') {
                
    me.down('#iHexa').setValue(me.rgbToHex(rgb));
            }
            if (
    me.updateMode != 'rgb') {
                
    me.down('#iRed').setValue(rgb[0]);
                
    me.down('#iGreen').setValue(rgb[1]);
                
    me.down('#iBlue').setValue(rgb[2]);
            }
            if (
    me.updateMode != 'hsv') {
                
    me.down('#iHue').setValue(Math.round(hsv.h));
                
    me.down('#iSat').setValue(Math.round(hsv.100));
                
    me.down('#iVal').setValue(Math.round(hsv.100));
            }

            
    me.setButtonColor('#cWebsafe'websafe);
            
    me.setButtonColor('#cInverse'invert);
            
    me.setButtonColor('#cSelect'rgb);

            if (
    me.updateMode != 'click') {
                var 
    cRgb me.down('#cRgb').getEl(), cHue me.down('#cHue').getEl(), hp me.down('#huePicker').getEl();
                
    hp.moveTo(hp.getLeft(), cHue.getTop() + me.getHPos(me.down('#iHue').getValue()) - 7true);
                
    me.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + me.getSPos(me.down('#iSat').getValue() / 100) - 7,
                
    cHue.getTop() + me.getVPos(me.down('#iVal').getValue() / 100) - 7true);
            }
        },
        
    setButtonColor : function(idrgb) {
            var 
    me thisdq Ext.DomQueryinvert me.invert(rgb);
            
    me.down(id).getEl().applyStyles({
                
    'background' '#' me.rgbToHex(rgb)
            });
        },
        
    /**
         * Convert X coordinate to Saturation value
         *
         * @private
         * @param {Integer}
         *            x
         * @return {Integer}
         */
        
    getSaturation : function(x) {
            return 
    181;
        },
        
    /**
         * Convert Y coordinate to Brightness value
         *
         * @private
         * @param {Integer}
         *            y
         * @return {Integer}
         */
        
    getVal : function(y) {
            return (
    181 y) / 181;
        },
        
    hsvToRgb: function( hs) {
            if( 
    instanceof Array ) {
                return 
    this.hsvToRgb.callthish[0], h[1], h[2] );
            }
            var 
    rgbifpqt;
            
    Math.floor( ( 60 ) % );
            
    = ( 60 ) - i;
            
    * ( );
            
    * ( );
            
    * ( - ( ) * );
            switch(
    i) {
                case 
    0:
                    
    r=v;
                    
    g=t;
                    
    b=p;
                    break;
                case 
    1:
                    
    r=q;
                    
    g=v;
                    
    b=p;
                    break;
                case 
    2:
                    
    r=p;
                    
    g=v;
                    
    b=t;
                    break;
                case 
    3:
                    
    r=p;
                    
    g=q;
                    
    b=v;
                    break;
                case 
    4:
                    
    r=t;
                    
    g=p;
                    
    b=v;
                    break;
                case 
    5:
                    
    r=v;
                    
    g=p;
                    
    b=q;
                    break;
            }
            return [
    this.realToDec), this.realToDec), this.realToDec)];
        },
        
    /**
         * Convert a float to decimal
         * @param {Float} n
         * @return {Integer}
         */
        
    realToDec: function( ) {
            return 
    Math.min255Math.round256 ) );
        },
        
    websafe : function(rgb) {
            var 
    me this;
            if (
    instanceof Array) {
                return 
    me.websafe.call(mer[0], r[1], r[2]);
            }
            return [ 
    me.checkSafeNumber(r), me.checkSafeNumber(g), me.checkSafeNumber(b) ];
        },
        
    checkSafeNumber : function(v) {
            if (!
    isNaN(v)) {
                
    Math.min(Math.max(0v), 255);
                var 
    inext;
                for (
    025651) {
                    
    next 51;
                    if (
    >= && <= next) {
                        return (
    25) ? next i;
                    }
                }
            }
            return 
    v;
        },
        
    invert : function(rgb) {
            if (
    instanceof Array) {
                return 
    this.invert.call(thisr[0], r[1], r[2]);
            }
            return [ 
    255 r255 g255 ];
        },
        
    getSPos : function(saturation) {
            return 
    saturation 181;
        },
        
    getVPos : function(value) {
            return 
    181 - (value 181);
        },
        
    getHPos : function(hue) {
            return 
    181 hue * (181 360);
        },
        
    hexToRgb : function(hex) {
            var 
    rgb;
            
    parseInt(hex.substring(02), 16);
            
    parseInt(hex.substring(24), 16);
            
    parseInt(hex.substring(46), 16);

            return [ 
    rg];
        },
        
    rgbToHex : function(rgb) {
            var 
    me this;
            if (
    instanceof Array)
                return 
    me.rgbToHex.call(mer[0], r[1], r[2]);

            return 
    me.toHex(r) + me.toHex(g) + me.toHex(b);
        },
        
    toHex : function(n) {
            
    parseInt(n10);
            if (
    isNaN(n))
                return 
    "00";
            
    Math.max(0Math.min(n255));
            return 
    "0123456789ABCDEF".charAt((16) / 16) + "0123456789ABCDEF".charAt(16);
        },
        
    rgbToHsv : function(rgb) {
            if (
    instanceof Array)
                return 
    this.rgbToHsv.call(thisr[0], r[1], r[2]);

            
    255255255;
            var 
    max Math.max(rgb), min Math.min(rgb);
            var 
    hsmax;

            var 
    max min;
            
    max == max;

            if (
    max == min) {
                
    0// achromatic
            
    } else {
                switch (
    max) {
                    case 
    r:
                        
    = (b) / + (0);
                        break;
                    case 
    g:
                        
    = (r) / 2;
                        break;
                    case 
    b:
                        
    = (g) / 4;
                        break;
                }
                
    /= 6;
            }

            return [ 
    hs];
        }
    }); 
    No honor is like knowledge

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Vote Rating
    6
    Romick is on a distinguished road

      0  

    Default But it has still some bugs

    But it has still some bugs


    For example. When color is set ColorField couldn't show it. And transparancy is all time down.colorfield.png

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Vote Rating
    6
    Romick is on a distinguished road

      0  

    Default Fix bugs

    Fix bugs


    Hi everyone! I fix two bugs (in colorpicker.js). Here is code:
    PHP Code:

    Ext
    .define('Ext.ColorPicker', {
        
    extend 'Ext.container.Container',
        
    alias 'widget.colorpicker',
        
    width 350,
        
    config : {
            
    hsv : {
                
    0,
                
    0,
                
    0
            
    }
        },
        
    items : [{
            
    xtype 'container',
            
    itemId 'cRgb',
            
    cls 'x-cp-rgbpicker',
            
    items : [{
                
    xtype 'container',
                
    itemId 'rgbPicker',
                
    cls 'x-cp-rgbslider',
                
    width 15,
                
    height 15
            
    } ]
        },{
            
    xtype 'container',
            
    itemId 'cHue',
            
    cls 'x-cp-huepicker',
            
    items : [{
                
    xtype 'container',
                
    itemId 'huePicker',
                
    cls 'x-cp-hueslider',
                
    width 15,
                
    height 15
            
    } ]
        },{
            
    xtype 'form',
            
    itemId 'cForm',
            
    border false,
            
    cls 'x-cp-formcontainer',
            
    items : [{
                
    layout 'column',
                
    border false,
                
    items : [{
                    
    layout 'anchor',
                    
    border false,
                    
    defaultType 'numberfield',
                    
    defaults : {
                        
    anchor '99%',
                        
    labelWidth 10,
                        
    value 0,
                        
    minValue 0,
                        
    maxValue 255,
                        
    labelSeparator '',
                        
    hideTrigger true
                    
    },
                    
    columnWidth .5,
                    
    items : [{
                        
    fieldLabel 'R',
                        
    itemId 'iRed'
                    
    },{
                        
    fieldLabel 'G',
                        
    itemId 'iGreen'
                    
    },{
                        
    fieldLabel 'B',
                        
    itemId 'iBlue'
                    
    } ]
                },{
                    
    layout 'anchor',
                    
    border false,
                    
    defaultType 'numberfield',
                    
    defaults : {
                        
    anchor '99%',
                        
    labelWidth 10,
                        
    value 0,
                        
    minValue 0,
                        
    maxValue 255,
                        
    labelSeparator '',
                        
    hideTrigger true
                    
    },
                    
    columnWidth .5,
                    
    items : [{
                        
    fieldLabel 'H',
                        
    itemId 'iHue',
                        
    maxValue 360
                    
    },{
                        
    fieldLabel 'S',
                        
    itemId 'iSat'
                    
    },{
                        
    fieldLabel 'V',
                        
    itemId 'iVal'
                    
    } ]
                } ]
            },{
                
    layout 'anchor',
                
    border false,
                
    defaults : {
                    
    anchor '99%',
                    
    labelWidth 10,
                    
    labelSeparator ''
                
    },
                
    items : [{
                    
    xtype 'textfield',
                    
    fieldLabel '#',
                    
    itemId 'iHexa'
                
    } ]
            },{
                
    defaultType 'container',
                
    border false,
                
    items : [{
                    
    layout : {
                        
    type 'hbox',
                        
    align 'top'
                    
    },
                    
    defaultType 'container',
                    
    items : [{
                        
    width 30,
                        
    height 25,
                        
    itemId 'cWebsafe'
                    
    },{
                        
    cls 'x-cp-leftarrow'
                    
    },{
                        
    xtype 'button',
                        
    text 'Websafe',
                        
    itemId 'bWebsafe',
                        
    flex 1
                    
    } ]
                },{
                    
    layout : {
                        
    type 'hbox',
                        
    align 'middle'
                    
    },
                    
    defaultType 'container',
                    
    items : [{
                        
    width 30,
                        
    height 25,
                        
    itemId 'cInverse'
                    
    },{
                        
    cls 'x-cp-leftarrow'
                    
    },{
                        
    xtype 'button',
                        
    text 'Inverse',
                        
    itemId 'bInverse',
                        
    flex 1
                    
    } ]
                },{
                    
    layout : {
                        
    type 'hbox',
                        
    align 'middle'
                    
    },
                    
    defaultType 'container',
                    
    items : [{
                        
    width 30,
                        
    height 25,
                        
    itemId 'cSelect'
                    
    },{
                        
    cls 'x-cp-leftarrow'
                    
    },{
                        
    xtype 'button',
                        
    text 'Select Color',
                        
    itemId 'bSelect',
                        
    flex 1
                    
    } ]
                } ]
            } ]
        } ],

        
    constructor : function(config) {
            var 
    me this;
            
    me.initConfig(config);
            
    me.callParent(arguments);
            return 
    this;
        },
        
    initComponent : function() {
            var 
    me this;
            
    me.callParent();
            
    me.addEvents('select');
        },
        
    afterRender : function(component) {
            var 
    me this;
            
    me.callParent(arguments);
            if (
    me.value)
                
    me.setColor(me.value);
        },
        
    initEvents : function() {
            var 
    me this;
            
    me.callParent();

            
    me.down('#cRgb').getEl().on('mousedown'me.rgbClickme);
            
    me.down('#cHue').getEl().on('mousedown'me.hueClickme);

            
    me.down('#iHexa').on('blur'me.hexaChangeme);
            
    me.down('#iRed').on('blur'me.rgbChangeme);
            
    me.down('#iGreen').on('blur'me.rgbChangeme);
            
    me.down('#iBlue').on('blur'me.rgbChangeme);

            
    me.down('#iHue').on('blur'me.hsvChangeme);
            
    me.down('#iSat').on('blur'me.hsvChangeme);
            
    me.down('#iVal').on('blur'me.hsvChangeme);

            
    me.down('#bWebsafe').on('click'me.websafeClickme);
            
    me.down('#bInverse').on('click'me.inverseClickme);
            
    me.down('#bSelect').on('click'me.selectClickme);
        },
        
    websafeClick : function() {
            var 
    me thisrgb me.websafe(this.getColor());
            
    me.updateMode 'click';
            
    me.setColor(me.rgbToHex(rgb));
        },
        
    inverseClick : function() {
            var 
    me thisrgb me.invert(this.getColor());
            
    me.updateMode 'click';
            
    me.setColor(me.rgbToHex(rgb));
        },
        
    selectClick : function() {
            var 
    me thiscolor;
            
    color me.down('#cSelect').getEl().getColor('backgroundColor''''');
            
    this.fireEvent('select'thiscolor.toUpperCase());
        },
        
    getColor : function() {
            var 
    me thishsv me.getHsv();
            return 
    me.hsvToRgb(hsv.hhsv.shsv.v);
        },
        
    setValue : function(v) {
            
    this.value v;
            
    this.setColor(v)
        },
        
    setColor : function(c) {
            var 
    me this;
            if (
    me.rendered) {
                
    c.replace('#''');
                if (!/^[
    0-9a-fA-F]{6}$/.test(c))
                    return;
                
    me.down('#iHexa').setValue(c);
                
    me.hexaChange();
            }
        },
        
    selectColor : function(eventelement) {
            
    this.fireEvent('select'thisExt.get(element).getColor('backgroundColor'''''));
        },
        
    rgbChange : function(input) {
            var 
    me thistemp me.rgbToHsv(me.down('#iRed').getValue(), me.down('#iGreen').getValue(), me.down('#iBlue').getValue());

            
    me.updateMode 'rgb';
            
    me.setHsv({
                
    temp[0],
                
    temp[1],
                
    temp[2]
            });
            
    me.updateColor();
        },
        
    hsvChange : function(input) {
            var 
    me this;
            
    me.updateMode 'hsv';
            
    me.setHsv({
                
    me.down('#iHue').getValue(),
                
    me.down('#iSat').getValue() / 100,
                
    me.down('#iVal').getValue() / 100
            
    });
            
    me.updateColor();
        },
        
    hexaChange : function(input) {
            var 
    me thistemp me.rgbToHsv(me.hexToRgb(me.down('#iHexa').getValue()));
            
    me.updateMode 'hexa';
            
    me.setHsv({
                
    temp[0],
                
    temp[1],
                
    temp[2]
            });
            
    me.updateColor();
        },
        
    hueClick : function(eventel) {
            var 
    me this;
            
    me.updateMode 'click';
            
    me.moveHuePicker(event.getXY()[1] - me.down('#cHue').getEl().getTop());
        },
        
    rgbClick : function(eventel) {
            var 
    me thiscRgb me.down('#cRgb').getEl();
            
    me.updateMode 'click';
            
    me.moveRgbPicker(event.getXY()[0] - cRgb.getLeft(), event.getXY()[1] - cRgb.getTop());
        },
        
    moveHuePicker : function(y) {
            var 
    me thishsv me.getHsv(), hp me.down('#huePicker').getEl();
            
    hsv.Math.round(360 181 * (181 y));
            
    hp.moveTo(hp.getLeft(), me.down('#cHue').getEl().getTop() + 7true);
            
    me.updateRgbPicker(hsv.h)
            
    me.updateColor();
        },
        
    updateRgbPicker : function(newValue) {
            var 
    me this;
            
    me.updateMode 'click';
            
    me.down('#cRgb').getEl().applyStyles({
                
    'backgroundColor' '#' me.rgbToHex(me.hsvToRgb(newValue11))
            });
        },
        
    moveRgbPicker : function(xy) {
            var 
    me thishsv me.getHsv(), cRgb me.down('#cRgb').getEl();
            
    hsv.me.getSaturation(x);
            
    hsv.me.getVal(y);
            
    me.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + 7cRgb.getTop() + 7true);
            
    me.updateColor();
        },
        
    updateColor : function() {
            var 
    me thishsv me.getHsv();
            var 
    rgb me.hsvToRgb(hsv.hhsv.shsv.v);
            var 
    invert me.invert(rgb);
            var 
    websafe me.websafe(rgb);
            var 
    wsInvert me.invert(websafe);

            if (
    me.updateMode != 'hexa') {
                
    me.down('#iHexa').setValue(me.rgbToHex(rgb));
            }
            if (
    me.updateMode != 'rgb') {
                
    me.down('#iRed').setValue(rgb[0]);
                
    me.down('#iGreen').setValue(rgb[1]);
                
    me.down('#iBlue').setValue(rgb[2]);
            }
            if (
    me.updateMode != 'hsv') {
                
    me.down('#iHue').setValue(Math.round(hsv.h));
                
    me.down('#iSat').setValue(Math.round(hsv.100));
                
    me.down('#iVal').setValue(Math.round(hsv.100));
            }

            
    me.setButtonColor('#cWebsafe'websafe);
            
    me.setButtonColor('#cInverse'invert);
            
    me.setButtonColor('#cSelect'rgb);

            if (
    me.updateMode != 'click') {
                var 
    cRgb me.down('#cRgb').getEl(), cHue me.down('#cHue').getEl(), hp me.down('#huePicker').getEl();
                
    hp.moveTo(hp.getLeft(), cHue.getTop() + me.getHPos(me.down('#iHue').getValue()) - 7true);
                
    me.down('#rgbPicker').getEl().moveTo(cRgb.getLeft() + me.getSPos(me.down('#iSat').getValue() / 100) - 7,
                
    cHue.getTop() + me.getVPos(me.down('#iVal').getValue() / 100) - 7true);
                
    cRgb.applyStyles({
                  
    'backgroundColor' '#' me.down('#iHexa').getValue()//me.rgbToHex(me.hsvToRgb(me.down('#iHue').getValue(), 1, 1))//added was epsent
              
    });
            }

        },
        
    setButtonColor : function(idrgb) {
            var 
    me thisdq Ext.DomQueryinvert me.invert(rgb);
            
    me.down(id).getEl().applyStyles({
                
    'background' '#' me.rgbToHex(rgb)
            });
        },
        
    /**
         * Convert X coordinate to Saturation value
         *
         * @private
         * @param {Integer}
         *            x
         * @return {Integer}
         */
        
    getSaturation : function(x) {
            return 
    181;
        },
        
    /**
         * Convert Y coordinate to Brightness value
         *
         * @private
         * @param {Integer}
         *            y
         * @return {Integer}
         */
        
    getVal : function(y) {
            return (
    181 y) / 181;
        },
        
    hsvToRgb: function( hs) {
            if( 
    instanceof Array ) {
                return 
    this.hsvToRgb.callthish[0], h[1], h[2] );
            }
            var 
    rgbifpqt;
            
    Math.floor( ( 60 ) % );
            
    = ( 60 ) - i;
            
    * ( );
            
    * ( );
            
    * ( - ( ) * );
            switch(
    i) {
                case 
    0:
                    
    r=v;
                    
    g=t;
                    
    b=p;
                    break;
                case 
    1:
                    
    r=q;
                    
    g=v;
                    
    b=p;
                    break;
                case 
    2:
                    
    r=p;
                    
    g=v;
                    
    b=t;
                    break;
                case 
    3:
                    
    r=p;
                    
    g=q;
                    
    b=v;
                    break;
                case 
    4:
                    
    r=t;
                    
    g=p;
                    
    b=v;
                    break;
                case 
    5:
                    
    r=v;
                    
    g=p;
                    
    b=q;
                    break;
            }
            return [
    this.realToDec), this.realToDec), this.realToDec)];
        },
        
    /**
         * Convert a float to decimal
         * @param {Float} n
         * @return {Integer}
         */
        
    realToDec: function( ) {
            return 
    Math.min255Math.round255 ) );//was n * 256 
        
    },
        
    websafe : function(rgb) {
            var 
    me this;
            if (
    instanceof Array) {
                return 
    me.websafe.call(mer[0], r[1], r[2]);
            }
            return [ 
    me.checkSafeNumber(r), me.checkSafeNumber(g), me.checkSafeNumber(b) ];
        },
        
    checkSafeNumber : function(v) {
            if (!
    isNaN(v)) {
                
    Math.min(Math.max(0v), 255);
                var 
    inext;
                for (
    025651) {
                    
    next 51;
                    if (
    >= && <= next) {
                        return (
    25) ? next i;
                    }
                }
            }
            return 
    v;
        },
        
    invert : function(rgb) {
            if (
    instanceof Array) {
                return 
    this.invert.call(thisr[0], r[1], r[2]);
            }
            return [ 
    255 r255 g255 ];
        },
        
    getSPos : function(saturation) {
            return 
    saturation 181;
        },
        
    getVPos : function(value) {
            return 
    181 - (value 181);
        },
        
    getHPos : function(hue) {
            return 
    181 hue * (181 360);
        },
        
    hexToRgb : function(hex) {
            var 
    rgb;
            
    parseInt(hex.substring(02), 16);
            
    parseInt(hex.substring(24), 16);
            
    parseInt(hex.substring(46), 16);

            return [ 
    rg];
        },
        
    rgbToHex : function(rgb) {
            var 
    me this;
            if (
    instanceof Array)
                return 
    me.rgbToHex.call(mer[0], r[1], r[2]);

            return 
    me.toHex(r) + me.toHex(g) + me.toHex(b);
        },
        
    toHex : function(n) {
            
    parseInt(n10);
            if (
    isNaN(n))
                return 
    "00";
            
    Math.max(0Math.min(n255));
            return 
    "0123456789ABCDEF".charAt((16) / 16) + "0123456789ABCDEF".charAt(16);
        },
        
    rgbToHsv : function(rgb) {
            if (
    instanceof Array)
                return 
    this.rgbToHsv.call(thisr[0], r[1], r[2]);

            
    255255255;
            var 
    max Math.max(rgb), min Math.min(rgb);
            var 
    hsmax;

            var 
    max min;
            
    max == max;

            if (
    max == min) {
                
    0// achromatic
            
    } else {
                switch (
    max) {
                    case 
    r:
                        
    = (b) / + (0);
                        break;
                    case 
    g:
                        
    = (r) / 2;
                        break;
                    case 
    b:
                        
    = (g) / 4;
                        break;
                }
                
    *= 60;//change h /= 6;
            
    }

            return [ 
    hs];
        }
    }); 

Thread Participants: 2

Tags for this Thread

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