When one comes to
editing color values, a variety of free custom
available on internet. Most of the time they are
color pickers, list boxes, property sheets with
system and HTML colors, etc. They usually work
with RGB components,
sometimes with the HSL
model. We felt that there was a lack with
edit-based color editors and we decided to mimic
one of the controls Jasc Software is using in
Paint Shop Pro to edit a color value,
the RGB (Red,
Green, Blue) and HSL
(Hue, Saturation, Light) models.
You can see a
screenshot of the well-known color dialog in PSP
at the top of this
The goal is to
develop a control having the same behavior and the
exact same look. Why? Because we like this control
and we feel it as a standard that should come
naturally as an MFC
class. We understand that this piece of code is
not a revolution, but we are sure that some of you
will find it valuable for their own project.
So let's go and
first have a look at the object design of the
classes we show in this
composed of four GUI
classes and two utility classes. As
usual for a custom control, we derive the main
(pretty long name), from
Doing this will allow the client to integrate the
control in a
at design time (since we will also define a window
class) or dynamically in any window.
This main class is
linked to three internal
instance: the user must be able to enter a value
directly at the keyboard.
instance: it's also convenient to modify a value
by clicking on these small arrows.
- A static window
this popup window makes easy to see the changes
on the color by dragging the mouse from the
minimum to the maximum value allowed (0 to 255).
Here is the
showing the links between all these elements :
As you can see
there is another class called
This is one of the utility classes we talked
above. We created it for the following reason:
most of the time, you won't use
alone. Instead you will create three of them to
edit the three components
of a color (either RGB or HSL). As you can see on
the PSP screenshot, they even show both models
with six controls.
allows to link all these
components so that it keeps track of
the edited color and notifies the group when one
of them changes. It makes the client code and the
effort to produce to use this framework minimals.
The other utility
is a static class providing utility functions for
Note also the
bottom colored line below the edit control. This
is a convenient way to change the value with a
quick drag of the mouse. There is no underlying
window for this effect. Instead, the bar is drawn
We have made the
code ready to be included as a library. Just unzip
the source package in a directory. Open the
workspace and compile all the desired
configurations (a mix of release/debug/lib/dll/Unicode).
All lib and dll files are produced in a
sub-directory called bin.
(tools -> options -> directories tab), add the bin
directory to your list of library directories and
its parent directory to the list of include
directories. Either the bin directory is in your
path or you copy the dlls in /windows/system32,
it's up to you.
source code is
fully commented so we won't go into it. Let's just
see how to use it in a dialog box. It's very
In your stdafx.h
file, add the following line:
You don't need to
insert a library file in your project because it
will be done automatically with this included
header file. However, you have to add a
preprocessor variable in your project settings in
the following cases:
- If you want to
use this control as a static library, define
- If you want to
use this control as a DLL in one of your
Of course, you
must have somewhere a
in your code to hold your color.
instance to hold the controls we will create:
In the dialog
editor, create any number of custom controls you
want and set their window class to "
Their height should be the same as a standard edit
control. Create the corresponding variables in the
dialog header file.
One more step for
the creation, in your dialog
method, add the following line for each of your
DDX_Control(pDX, IDC_MYCOMPONENT, m_myComponent);
dynamically in a window instead of a dialog box,
use the following method:
Allocate all the
needed instances of
and call their method Create. Use a height of 23
pixels for a standard look.
Now you must
initialize each control and tell him what kind of
represents. Basically, you do this in
you have the choice of
GREEN, BLUE, HUE, SAT, LIGHT.
When you are done
with that, you link all your components in the
instance and set the initial color.
Your window or
dialog box can be notified when one of the
changes. To do this you have to write a handler
for a registered message.
In the header file
add this in your message map:
afx_msg LRESULT OnColorCompChanged(WPARAM wParam, LPARAM lParam);
In the body add
LRESULT CMyDialog::OnColorCompChanged(WPARAM wParam, LPARAM lParam)
m_myColor = m_compSet.GetColor();
contains the value of the component (0 to 255) and
contains the window identifier of the control that
sent this message.
and sample, is
provided "as is". Aircom software makes no
representations or warranties of any kind
concerning the quality, safety or suitability of
the software, either expressed or implied,
including without limitation any implied
warranties of merchantability, fitness for a
particular purpose, or non-infringement.