PDA

View Full Version : [v2.0-alpha] ColorPicker, ColorPanel and ColorDialog widget for Ext



amon
3 Sep 2007, 11:34 PM
I had begin to work on the Ext Colorpicker component.
It's a port of the YUI's colorpicker, but completly rewritten for Ext.

It's under development.
Please, feel free to comment and give me ideas! :)

Development version demo:

2.0a: http://ux.theba.hu/colorpicker2/ (http://ux.theba.hu/colorpicker2) for Ext2
1.1.1: http://ux.theba.hu/colorpicker/ (http://ux.theba.hu/colorpicker) for Ext 1.1

Ext.ux wiki page:
http://extjs.com/learn/Extension:Yui_Color_Picker

steffenk
4 Sep 2007, 1:06 AM
wow, this looks great!

One question - what is ext.js you use,is this build from builder?

amon
4 Sep 2007, 10:14 AM
One question - what is ext.js you use,is this build from builder?
Yes, it is a build from 'build your own' section.

amon
5 Sep 2007, 6:19 AM
Inline colorpicker and the dialog version of colorpicker are done.
Next is the callback implementation (custom events).

http://ux.theba.hu/colorpicker/ (http://ux.theba.hu/colorpicker)

aconran
5 Sep 2007, 6:43 AM
Nice work :-)

Aaron

JeffHowden
5 Sep 2007, 8:55 AM
The display of some of the elements of the colorpicker are fairly odd in IE6/Win, fwiw.

One aspect of the YUI version that is missing from yours is the ability to drag the markers that are on the picker.

Foggy
6 Sep 2007, 1:03 AM
Amon, ill love you for that \:D/

Jul
6 Sep 2007, 4:05 PM
It looks great so far. This type of color picker is definitely needed.

I second what JeffHowden said... the picker needs to be a little larger (maybe use a transparent circle like in Photoshop) and be draggable.

The elements with the RGB and Hue/Sat values need better formatting. In IE6/Win, they seem oddly formatted.

amon
7 Sep 2007, 1:46 AM
I think, draggable picker will be in the v1.1.

Todo until 1.0

Merge dialog and picker code into one, inherited structure (multiple inherit is needed) in 1.0
Inline reference (documentation) in 1.0
Documentation and webpage for extension in 1.0
Some small CSS modification for better layout in 1.0

Todo until 1.1

Websafe color (in 1.1)
Make picker draggable (in 1.1)

amon
8 Sep 2007, 3:48 AM
ColorPicker and ColorDialog classes reached the

version 1.0

Now, this extension is can be used.

http://ux.theba.hu/colorpicker/ (http://ux.theba.hu/colorpicker)

amon
9 Sep 2007, 2:21 AM
version 1.1:

Websafe color calculated, displayed and can be select
done some css issue
works enter in the input fields
ext basic skins added to demo

amon
18 Sep 2007, 1:32 AM
Any idea or bug or comment? :D
Or is it the best colorpicker? :p ;)

steffenk
18 Sep 2007, 1:53 AM
Hi amon,

your picker is great.
I think that not much people have an app which needs a colorpicker, i see the colorpicker in a complex app within a property grid, and therefore it's great, i don't know any other solution.

Could you add this to the wiki pages ?

Foggy
18 Sep 2007, 6:16 AM
I have developed some PHP image filters (http://www.uwd.ch/image/_tests/test_image.php) and in future i plan to build a GUI for these php classes. So the ColorPicker Widget is perfect for this :) Especially for the colorize filter ;)

And if you can see, this extension is availible in the Wiki ;)
http://extjs.com/learn/Extension:Yui_Color_Picker

@Amon
If you implement the dd funcionality, i have nothing to say, except this:
Your Extension is just great ;)

antimatter15
18 Sep 2007, 1:50 PM
I'm really glad you made this :D I'm working on an ajax application (with ext) that used YUI's color picker, which was necessary, yet sorta inefficient, as i had like 90k for the YUI, 12k for the adapter, 12k for slider.js and another 20k for the color picker itself. Now, i can just use the ext-base.js, and your relatively lighweight colorpicker.ux.js

one problem i'm facing is that it's not compatable with YUI compressor.
Here is the output:


The YUI Compressor reported the following error(s):

399invalid property id
368syntax error
117Compilation produced 2 syntax errors.
org.mozilla.javascript.EvaluatorException: Compilation produced 2 syntax errors.
at com.yahoo.platform.yui.compressor.JavaScriptErrorReporter.runtimeError(JavaScriptErrorReporter.java:36)
at org.mozilla.javascript.Parser.parse(Parser.java:391)
at org.mozilla.javascript.Parser.parse(Parser.java:336)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.<init>(JavaScriptCompressor.java:348)
at com.yahoo.platform.yui.compressor.YUICompressor.main(YUICompressor.java:111)


Another is, that it's sorta hard to replace your hue picker icons with those in the real YUI, so i resorted to this small hack.
picker.huePointer.dom.style.left="-2px";

Anyways, i look forward to the version with drag support.

csperler
27 Sep 2007, 7:54 PM
Hello,

Has anyone by chance extended the ColorPicker control as a TriggerField?

Thanks,

-Craig

amon
28 Sep 2007, 11:47 PM
Colorpicker packages is YUI Compressor compatible now.
The minified version of Colorpicker is minimized with that.

version 1.1.1:

YUI Compressor compatibility



http://ux.theba.hu/colorpicker/ (http://ux.theba.hu/colorpicker)
http://extjs.com/learn/Extension:Yui_Color_Picker

amon
8 Oct 2007, 1:52 PM
Next version is under development for ExtJS 2.0

Demo: http://ux.theba.hu/colorpicker2/

hazlema
8 Oct 2007, 2:02 PM
Next version is under development for ExtJS 2.0

Demo: http://ux.theba.hu/colorpicker2/

http://ux.theba.hu/colorpicker (Ext 1)
Didn't work for me, the color picker box and the sliding box were a solid color. When you clicked in the box however it gave you what I can only assume would have been the correct color. (I'm using firefox 2.0.0.7)

http://ux.theba.hu/colorpicker2 (Ext 2)
Works great! Awsome work...

amon
10 Oct 2007, 5:40 AM
Update:

2.0 alpha version is done (works in FireFox 2).
Until 2.0 stable todo:

small IE6 position and margin problems
resolve opera collapsing bug (it's Ext2.0 problem (http://extjs.com/forum/showthread.php?t=14800))


new features:

Three mutation: ColorPicker (just a control without any box), ColorPanel (with Ext2 Panel) and ColorDialog (with Ext2 Window)
inverse color selection
256x256 mask instead of 182x182

JeffHowden
14 Oct 2007, 10:43 PM
I noticed a couple of small issues when checking out the 2.0 version.


When you click somewhere that causes one of the colorpicker indicators to animate to the new position, the color at the new position is applied immediately to the swatch in the picker, not after the indicator has stopped moving.
The text fields for RGB/HSV all resist selecting the text in them. This can make it quite interesting to figure out just how one would go about keying in new values. Either change the fields to allow manual selection or change them to auto-select the value upon focus/click.


Additionally, I have a couple of feature ideas.


The text boxes that take numeric values ought to use the spinner UX posted in these forums so that there's a clear indication of how to change the values along with superb keyboard interaction.
I'd like to see this ux as an extension to a trigger field so those that need more than colorfield has to offer can use this.

amon
17 Oct 2007, 3:44 AM
Thanx Jeff!

I'll investigate, why cannot select the values. And if there is spinner for Ext2.0, it'll be used in the next release.

LewisW
28 Oct 2007, 8:27 AM
I've made a draggable version of this. There's only a few lines to add, so it's fairly simple. I'm also making a field wrapper for this, so it can be easily tied to fields/field buttons etc. I'll post them both when I'm done.

amon
28 Oct 2007, 9:50 PM
I've made a draggable version of this. There's only a few lines to add, so it's fairly simple. I'm also making a field wrapper for this, so it can be easily tied to fields/field buttons etc. I'll post them both when I'm done.

Send to me the code, I'll merge it, and you'll appear as contributor. :) Deal?

scottw
4 Dec 2007, 6:06 AM
http://ux.theba.hu/colorpicker (Ext 1)
Didn't work for me, the color picker box and the sliding box were a solid color. When you clicked in the box however it gave you what I can only assume would have been the correct color. (I'm using firefox 2.0.0.7)

I am experiencing this same problem. I followed the simple instructions of unzipping Ext 1.1.1, unzipping colorpicker, and opening the example in a browser. I tried it on both IE 6 and Firefox 2.0.0.7. Anybody know why this is happening?

dev
6 Dec 2007, 1:01 AM
I'm getting an Internal Server Error when trying to dl

http://ux.theba.hu/colorpicker2/colorpicker.ux.js.v1.1.1.zip

Cheers,
dev

amon
6 Dec 2007, 2:10 AM
I'm getting an Internal Server Error when trying to dl
http://ux.theba.hu/colorpicker2/colorpicker.ux.js.v1.1.1.zip
Cheers,
dev

2.0 is strongly developer version, sorry, but I had no time to continue that version.

You can download the v1.1.1 for Extjs 1.1 from here:
http://ux.theba.hu/colorpicker/colorpicker.ux.js.v1.1.1.zip


I am experiencing this same problem. I followed the simple instructions of unzipping Ext 1.1.1, unzipping colorpicker, and opening the example in a browser. I tried it on both IE 6 and Firefox 2.0.0.7. Anybody know why this is happening?

Check the .png image url and existsing in the .css

mxracer
8 Dec 2007, 9:32 AM
Hello,

Just a request.

For you CSS styles, could you please give your color picker a window id and them limit all css settings to be only for it?

This setting for instance:



.x-window-body {
border: 0pt none !important;
}


was over-riding my desktop theme. If you gave your Ext.ux.ColorDialog an id of 'ux-colorpicker' (for example) and then used:



#ux-colorpicker .x-window-body {
border: 0pt none !important;
}


it would not over-ride themes on other windows.

K0bo
9 Jan 2008, 6:15 PM
Thanx Jeff!

I'll investigate, why cannot select the values. And if there is spinner for Ext2.0, it'll be used in the next release.

amon, first of all I wanna say you did some great work with the ColorPicker!

I just created a plugin for formfields, which suites perfect to change the numerical values in the ColorPicker. You might wanna check it out. ;)

http://extjs.com/forum/showthread.php?t=22663

amon
9 Feb 2008, 3:10 AM
Because of my fulltime job, I have no time to work on this widget, then

I looking for somebody, who can continue the work on the ColorPicker widgets (both 1.1.1 & 2.0 too!)

Please, write to me, if you feel you can done these widgets!

brookd
25 Mar 2008, 1:17 PM
Is there a version that works with Ext 2.0. If there is, I sure can't find it anywhere..

mattiohl
9 Apr 2008, 2:20 AM
Hi Brookd,
Try this link:
http://ux.theba.hu/colorpicker2/

Worked fine for me.
/Mattias

antimatter15
10 Apr 2008, 5:27 PM
I think it has display issues on Ext 2.0/2.01

amon
30 Apr 2008, 10:01 AM
Hey dudes!

I'm working on the next version of the ColorPicker2. (I'll not support 1.1)
If you know any bug in the previous version of CP2 ( http://ux.theba.hu/colorpicker2/ ), please say it!

The developer version of the new CP: http://ux.theba.hu/cp/.
It compatible with the 2.x (tested with 2.0.2 and 2.1) ExtJS.

Tested on IE6-7-8, Opera9, FF2-3. (Vista and XP)

antimatter15
30 Apr 2008, 6:04 PM
Thank You!!!

visves
28 May 2008, 6:22 AM
Great plugin! Thanks! Any idea on when the final (2.1) version might be released?

crashburn
10 Jun 2008, 8:01 PM
Great plugin! Especially like the inverse function. But where can i find the codes to the latest version? Can't seem to find it anywhere too... Thanks!!!

midream
27 Aug 2008, 4:35 AM
Hi. Great plugin. Could you please show an example with dialog version. I tried to put color picker in window, but I got an javascript error : "Node cannot be inserted at the specified point in the heirarchy". Here is the code:


var colorpicker = new Ext.ux.ColorPicker({
xtype: 'colorpicker',
title: 'Color picker'
});

var colorwindow = new.Ext.Window({
title: 'pick color',
items: colorpicker
});

vtswingkid
17 Sep 2008, 7:48 AM
I added a color picker field. This required the creation of a color picker item and menu too.

I've attached a my code with Amon's latest. My code resides in the file colorpickerfield.js and it is BSD licensed. The rest belongs to Amon. I did make a minor change or two to colorpicker.js. I also included a test.html.

midream
17 Sep 2008, 8:39 AM
Oh great. I was looking exactly for color field. Thanks.

Iveco
24 Oct 2008, 7:01 AM
Great, exactly what I was looking for.

Anyone knows where to get the newest version also compatible with Ext 2.2?

The URLs posted here do timeout.


Site is up and working now.

GREAT MOD, thank you very much!!

ausathya
5 Jan 2009, 9:04 AM
Color Picker Site http://ux.theba.hu/colorpicker2/ seems to be down for past two weeks !! Is there any other alternative site to download color picker, or can someone share the code.


Appreciate your help. Thanks.

12ftguru
15 Jan 2009, 11:01 AM
Looks like everything got moved to http://ux.theba.hu/cp/

Which looks incredibly slick by the way.

ausathya
15 Jan 2009, 11:57 AM
Thanks for the pointer. How did you get this new link ?

12ftguru
15 Jan 2009, 12:05 PM
If you go back 1 page in the thread to post #34. He mentions the alternate link. It appears to be a developer release.

JacobWang
22 Jan 2009, 12:58 AM
Anyone knows where to get the last version also compatible with Ext 2.2?
Thanks in advance.

Joe
8 May 2009, 11:38 AM
The control at http://ux.theba.hu/cp/ is really slick.

I too would be interested in the latest version.

putty
17 Aug 2009, 4:09 PM
The download link is down... anyone have a copy they can share?

kroxus
10 Sep 2009, 5:06 AM
The download link is down... anyone have a copy they can share?
Give anybody the download link.
The site gives internal server error.

visves
22 Sep 2009, 5:01 AM
Has anybody got this working with 3.0? I'm having issues with the color dialog and 3.0.

dtondo
19 Oct 2009, 7:28 AM
The links is not working!

leolima
22 Dec 2009, 3:45 AM
Hey...

Iīm using ExtJs 2.3 and I need a ColorPicker, I would try this one, but yesterday I could connect to the website, but today the link is broken..
So anyone is using this plugin?
I got it but when I add it on a FormPanel, the rgbslider image donīt be showed after the first color select...
Anyone already saw this error ?

forumuser1080
2 Mar 2011, 7:22 PM
anyone using this with ExtJs 3? I would try but the link is down. Any plans for extjs 3 or is there another color picker out there that others have used.

Thanks

cmeans
2 Sep 2011, 8:58 AM
We too would like to have something like this working under v3.x as well...but it would need to be under a commercial friendly license.

Happy to make a donation for anything that meets our needs.

-Chris