Port of Photoshop-like color picker to Ext Panel

[Collin Miller]

As a side project I've been working on getting this:

http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx

To be usable as an ExtJS 2.0 Panel.

Here is read-access to a release I'm going to call "buggy_as_all_hell" for now.

http://ext-ux-color.googlecode.com/files/buggy_as_all_hell.zip

Open up /example/index.html

Bugs are mostly CSS related. There are heaps of CSS bugs outside of Firefox. So use FF if you actually want to see it working.

Also I want to replace the right-side inputs with some of the nicer range-input ux's I've seen around. (ux.Spinner?) And swap out my crappy radio-button thing with a better one.

I did most of this months ago and have been sitting on cleaning it up until I actually, well, NEEDED a Photoshop-like color picker in an Ext app.

[mxracer]

I can not connect to your svn.

[Collin Miller]

Oh bungle of bungles!

I moved over to googlecode and zipped it up for convenience.

http://ext-ux-color.googlecode.com/files/buggy_as_all_hell.zip

Take a look,

/example/index.html

[mxracer]

Thanks, I'll download it now.

[NWilliams]

Wow, this looks excellent! =D>

Suggestions/Observations:

IE6 (Win) seems to be the only major issue with regard to displaying; you've got tiling on the selector images (circle and slider points), and all elements right of the vertical slider are wrapping below the color area.

I agree the radio buttons need a more familiar style as I was wondering what the heck that X is and didn't think to click the left area near the other inputs. I think a standard radio button group with the single character representation of the field (HSB, RGB, CYMK, etc) would do well also.

The Spinner extension (http://extjs.com/forum/showthread.php?t=16352) would be a great replacement for the fields.

It seems the only manually editable fields are the HSB fields. If you were not planning to allow all fields to be editable... well.. then consider that a feature suggestion. ;)

[Collin Miller]

Thank you for your comments, NWillams.

All your concerns are in alignment with mine, and I do want the RGB/hex fields to be editable. The underlying Ext.ux.color.Color class supports those conversions, there's just something wrong with how I'm doing the validations.

Spinner does look like just the thing too, and now 2.0.2 has that Switch. It should help out to replace the custom radio-behavior.

The CSS is broken in Safari too. : (

Your post is encouraging :D

[K0bo]

Hey Collin Miller,

If you are going to implement the Spinner, I'd recommend the Spinner Plugin (http://extjs.com/forum/showthread.php?t=22663) instead of the regular Spinner.

Just use regular NumberFields with the Spinner Plugin.
That way you'll keep/have number validation and you won't have the 'trigger control' on right side of you numberfield.

[visves]

Great plug-in!! Looks pretty stable to me. Is the current code close to final and if not any idea when you would have a final stable release?