Download demo project - 287 Kb
<!-- Article Starts -->
Ever wanted one of those fancy color picking dialogs that apps
like Corel PhotoHouse have ? If you did, here it is !!
First, some general stuff about how I got this stuff together.
The most important part, obviously , is the color space
conversion from RGB to HSB. I got some help ( lots actually)
on this from one of the discussion boards on Codeguru ( Thanks !)
Once you have this piece of code, you have the next problem,
which is to create proper bitmaps which are required for displaying
the color spaces.
Creating the Hue bitmap is quite easy as you just have to
go through each of the hue values (0-360) and iterate
through each of the saturation values (0-255). I used a
standard brightness value of 255 for the bitmap as
other values give pretty dull results.
Next , and this is the difficult part - comes the part
where you create the RGB bitmap. This is a little tough
as you have to not only create gradients but also fit
them together seamlessly . I accomplished this by first
creating rectangular gradients and then using some
texture mapping code ( courtesy Micheal Abrash - Zen )
to fit them together .
Now the next part is to give the whole thing a user
interface. Again the HSB part is easy as finding
the angle of a point as well as its distance from
another are pretty straightforward. And to those
math gurus who are fuming at the code - please forgive
me - I took the simplest approach I knew of -
x2 + y2 = a2.
Then we come to the RGB space. Again, this requires a
lot of 3d math - I again took the easiest route - As
I knew which bitmap I was using as well as the coordinates
of the vertices, I used some 2d math to map points
from the 3d space to 2d and vice versa. It`s not
terribly elegant , but it works , and thats what I get
If you look at the contructor of the CColorPickerDlg,
you`ll notice that I set up certain values for the
vertices and centre. This I got from the bitmap I`m
using. You could quite easily use a different bitmap
if you don`t like the one I provide ( can`t imagine why
though !!!) , by just setting different values here . The
code which actually does the math should adjust accordingly.
Unfortunately - this bit of code was written by burning a lot of
midnight oil in a real big hurry !! So I didn`t comment too much.
I`ll try to post an update in the coming weeks with a few upgrades
as well as a lot of comments.
Now - for the important stuff - how do you use it ?
Simple - Copy the Dialog resource - IDD_DIALOG_COLORS from
the resource file of the demo project into your project.
Next - Copy the two Bitmap resources IDB_BITMAP_HSB and IDB_BITMAP_HSB
from the demo project into your own workspace.
Then, include ColorPickerDlg.h in the file you want to
call it from ( the view in the demo ) and use the following
bit of code :
if(dlg.DoModal() == IDOK)
m_color = dlg.GetColor();
That is it. And yes, please include
in your project.
The latter two are support files which provide some
DIB manipulation routines as well as some of the
The demo app which I have provided uses gray = (192,192,192) as the default
background. Choose View | Color Space to invoke the color
picker . When you choose a different color, it is
used as the background.
The CColorPickerDlg will also automatically handle WM_SYSCOLORCHANGE
messages to always make sure that no funny images are displayed.
Thanks to Chris Mauder for a few suggestions inclding the very good one
of including the two gradient bitmaps as resources.