Possible jQuery UI Color Picker Widget
Let's start a discussion on what we want to see out the proposed
color picker UI plugin. According to the jQuery UI Wiki, there is an
interest in a themable color picker plugin that can support advanced
entering modes including hex codes, rgb, and hsv modes. This control
should include some kind of rainbow with a draggable marker that
changes the selected color on the fly. External controls also need to
be able to access the color or be notified when the selected color
changes, or while it is changing, or both.
Fortunately, a very large company has already designed the most
useful, robust, and user tested interface for this kind of control.
Has anyone ever used Adobe Photoshop? The color picker in Photoshop
was meticulously designed to be able to select every possible color in
a 24 bit (16,777,216 colors) palette. Ever wonder why the map in
Photoshop is exactly 256 pixels wide and tall? Because that's the
level of accuracy of a single channel.
A Photoshop style color picker in a web browser suffers from the
inability to assign colors in an image on a per pixel basis in
javascript, or the ability to support so called "screen" and
"multiply" overlays. However, many of these effects for creating the
color map and color bar can be faked either perfectly or closely using
translucent PNG images and opacity. To see an awesome example, visit
http://johndyer.name/lab/colorpicker/.
Most PNG color pickers to date only support a Hue map mode, and
not saturation, brightness, red, green, or blue. Click on the radio
buttons next to each type in Photoshop if you don't understand what I
mean. John Dyer's supports these modes, but a careful observer will
notice that the bar in saturation, red, green, and blue mode is not
perfectly representative of what the color may actually be when the
marker is dragged to that location. Only Hue and Brightness modes are
pixel precise. It is unfortunately impossible for pixel perfect
precision on the bar using static images and opacity, unless some
future version of CSS will support screen or multiply overlay modes.
The map on the other hand is pixel precise.
I am posting this on the request of Todd Parker, because I had
been looking for a color picker to work with my real estate site that
allows an agent to choose any background color they desire. I decided
John Dyer's was the best implementation, but the conflicts between
jQuery and his plugin using Prototype prompted me to port his code
over to a jQuery plugin. You can view an example page at
http://www.digitalmagicpro.com/jPicker/. This is my first jQuery
plugin, so sorry if some patterns are confusing or improper, there may
even be massive memory leaks.
The plugin I have created has only been tested with latest
versions of IE, Firefox, Chrome, Opera, and Safari and it appears to
work fine. I am providing the FULL source code with comments for
anybody to improve, adapt, or for whatever purpose they desire. I am
primarily a C# .NET developer (the site I use my plugin on is on the
login side of http://www.prohomesites.com/), and I am also the only
developer for my company. For this reason, the code is a reflection of
only my needs in this matter, and thus is in great need for other
input. This also means that I do not have development time to work on
any updates to this code, so I am hoping someone else will take over
from where I have left off, or combine it into their own project.
Todd Parker, the jQuery UI design lead, had suggested changing it
from a jQuery plugin style to a jQuery UI widget, and adapting it to
support the UI CSS theming features, so part of this post is also to
allow Todd to grab my source and see what can be done. It would be
great to this kind of control in a future release of jQuery UI.
Sorry about the length of this post, but I believe this is one of
the more useful possible jQuery UI Plugins, and is definitely possible
to create. So lets talk about the features this plugin needs to have,
compare them to the features I have put in my plugin, and also all the
other plugins on the jQuery UI Wiki for Color Picker.
Thank you