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
    165
    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