Click here to Skip to main content
15,881,852 members
Articles / Desktop Programming / MFC
Article

Colour preview and picker applet

Rate me:
Please Sign up or sign in to vote.
3.67/5 (6 votes)
15 Jul 2002CPOL8 min read 113.3K   1.9K   37   22
A simple applet that lets you preview how various font and background colours interact. Has the added ability of being able to pick any colour from the screen.

Introduction

This is a simple applet that can be used to preview how various coloured font and background colours interact with each other. It also has the ability to pick colours from anywhere on the screen.

This app is based on Colin Davies' Corner Color Test which, unfortunately, had a few problems when I tried to run it on my Win2000 machine. Rather than bother Colin, who is very busy with his latest project, I thought I would have a go at writing my own version.

Credits

  • Colin Davies for the original idea, plus the help and suggestions he gave in developing this app.
  • Dr Joseph Newcomer for his CImageButton class.
  • Keith Rule for his CMemDC class.
  • Various others for suggestions and testing.

Using the Colour applet

Note : All settings are saved in the registry under the key :

HKEY_CURRENT_USER
    \Software
        \PJ Arends
            \Colour
                \Settings

Main Window

Main Window

CONTROL FUNCTION
Colour Sliders Adjust the various colour intensities by moving the sliders. You can use the up and down arrow keys for adjustments, and use the left and right keys to switch between sliders. There are no shortcut keys to these controls, but they can be easily controlled from their associated edit controls.
Edit Controls Manually enter the colour values in the edit controls. You can use the up and down arrow keys to increase or decrease the value in the edit controls. The following shortcut key strokes will set the focus to the edit controls
  • Alt-R Red edit control
  • Alt-G Green edit control
  • Alt-B Blue edit control
Foreground Radio-button The sliders adjust the colour of the sample foreground.

Shortcut key : Alt-F

Background Radio-button The sliders adjust the colour of the sample background.

Shortcut key : Alt-K

Pick Colour Button

Use the mouse to pick colours from the screen. Once you find the colour you like, press Control-Alt-P and the "Pick Colour" option will be turned off, saving the colour.

  • Shortcut key (Alt-P)  -  Start
  • Shortcut key (Control-Alt-P) -  Stop
Magnify Checkbox Used with "Pick Colour". When picking a colour from the screen, the cursor will be contained within a small magnifying window that follows the cursor around the screen. Use the arrow keys on the keyboard for finer control over the cursor. Close the magnifying window with either a left mouse button click, or pressing the enter or escape keys.

Shortcut key : Alt-M

Hexadecimal Checkbox Toggle the intensity display numbers between decimal and hexadecimal.

Shortcut key : Alt-H

Web Safe Checkbox Restricts the colours to the 216 web safe colours.

Shortcut key : Alt-W

Reset Button Reset the text and background colours to the system defaults.

Shortcut key : Alt-S

Copy Button Copy the colour values to the clipboard.

Shortcut key : Alt-C

Options Buttons Brings up the display options dialog.

Shortcut key : Alt-O

Arrow Buttons Move the Colour program window into a corner. There are no shortcut keys associated with these buttons

Colour Options Dialog

Colour Options Dialog

CONTROL FUNCTION
OK Button Closes the dialog, saves and applies the settings

Shortcut key : Enter

Cancel Button Closes the dialog, reverts to old settings

Shortcut key : Escape

Default Button Sets all the controls to their default values

Shortcut key : Alt-D

Always On Top Checkbox The main window will always stay on top of all other windows on the screen.

Shortcut key : Alt-A

Window Size Editbox The length of the sides of the magnifier window (i.e. Entering 100 will give you a 100 pixel by 100 pixel window)

Shortcut key : Alt-Z

Pixels Shown Editbox The number of pixels across and high in the magnifier window (i.e. Entering 9 will show a grid 9 pixels by 9 pixels in the window)

Shortcut key : Alt-P

Shape Radiobutton The sample window will have a shape in it instead of text

Shortcut key : Alt-H

Rectangle Radiobutton The shape will be a rectangle

Shortcut key : Alt-R

Triangle Radiobutton The shape will be a triangle

Shortcut key : Alt-N

Ellipse Radiobutton The shape will be an ellipse

Shortcut key : Alt-E

Height Editbox The height of the shape in pixels

Shortcut key : Alt-G

Width Editbox The width of the shape in pixels

Shortcut key : Alt-W

Text Radiobutton The sample window will have text in it instead of a shape

Shortcut key : Alt-T

Sample Radiobutton and Editbox The text will be the user defined text entered in the edit box

Shortcut key : Alt-M

Cursor Screen Coordinates The text will be the screen coordinates of the mouse cursor

Shortcut key : Alt-S

Font Button Brings up the font selection dialog to select the font used to display the text

Shortcut key : Alt-F

Decimal Format Editbox The formatting string for decimal output. The formatting string should follow the same rules as the formatting strings used in the MFC CString::Format function except instead of using a 'd' or 'i' as a place holder for numbers, you have to use a 'r' or 'R' for the Red colour,a 'g' or 'G' for the green colour, and a 'b' or 'B' for the blue colour.

i.e. If the RGB values are 171, 222, 106, and the format string is (not including quotes) : "Red = %r, Green = %g, Blue = %b", the output will be "Red = 171, Green = 222, Blue = 106"

Shortcut key : Alt-C

Hexadecimal Format Editbox The formatting string for hexadecimal output. The formatting string should follow the same rules as the formatting strings used in the MFC CString::Format function except use lowercase 'r', 'g' or 'b' instead of 'x' for lowercase letters in the hexadecimal number, and use uppercase 'R', 'G', or 'B' instead of 'X' to use uppercase letters in the hexadecimal number.

i.e. If the RGB values are AB, DE, 6A, and the format string is (not including quotes) : "Red = 0x%08R and Blue is %b, Ok?", the output will be "Red = 0x000000AB and Blue is 6a, Ok?"

Shortcut key : Alt-X

Classes of Interest

CMagnifierWindow class

The CMagnifierWindow class is a simple class that is used by the Colour app to show a magnified portion of the screen. While the magnifier window is on the screen, it will remain centered on the mouse cursor. You can move the cursor, and the magnifier window, around the screen using the mouse or the arrow keys on the keyboard. A left mouse button click, or the 'Enter" or 'Escape' keys will hide the magnifier window from view.

To use the class in one of your own apps, add the files MagnifierWindow.h and MagnifierWindow.cpp to your project. Simply declare an instance of the class in your code, call the Create() member function to create the window, call the ShowMagnifier() function to use the magnifier, and the HideMagnifier() function to stop using it. When the user hides the magnifier window by clicking or using the keyboard, the window will post a user defined message WMU_HIDEMAGNIFIER which is defined in the MagnifierWindow.h header file.

The operation of the magnifier is quite simple. In the ShowMagnifier() function a snapshot is taken of the entire screen and saved in a screen size bitmap that is left selected in a memory device context, and the window is shown using a call to the ShowWindow(SW_SHOW) function. As the window moves around the screen, the portion of the screen that is to be magnified is drawn into the magnifier window using the StretchBlt() function. Then, in the HideMagnifier function, the bitmap and memory device context are destroyed, and the window is hidden with a call to the ShowWindow(SW_HIDE) function.

CMagnifierWindow class member functions

CMagnifierWindow::CMagnifierWindow()

The class constructor initializes the class members but does not create the actual window, you have to call the Create() function to do that. The constructor takes no parameters, and does not return any value.

BOOL CMagnifierWindow::Create (int size, int pixels, CWnd* pParentWnd)

The Create() function creates the actual magnifier window, but leaves it hidden from view. The Create() function returns a nonzero value if it is successful in creating the window, and it returns zero if it fails.

Parameters

  • int size - The size of the magnifier window in pixels
  • int pixels - The number of pixels to be shown in the magnifier window
  • CWnd *pParentWnd - A pointer to the magnifier window's parent window. This is the window that will receive the WMU_HIDEMAGNIFIER message when the user hides the magnifier window

BOOL CMagnifierWindow::ShowMagnifier()

The ShowMagnifier() function shows the magnifier window on the screen. The function returns TRUE on success, and FALSE on failure. The function does not take any parameters

void CMagnifierWindow::HideMagnifier()

The HideMagnifier() function removes the magnifier window from the screen, but it does not destroy it. The function takes no parameters, and does not return any value.

Other classes

While the rest of the classes are nothing special, some people may be interested in some of the functionality.

The CNumEdit class (NumEdit.cpp and NumEdit.h) is a CEdit derived class the limits it's input to decimal or hexadecimal numbers between 0 and 255. The class uses the EN_UPDATE message handler to validate the numbers entered into it.

The CColourSlider class (ColourSlider.cpp and ColourSlider.h) is a simple subclass of a CSliderCtrl that draws a gradient colour in the track bar.

That's it, I hope some of you find this useful.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
President
Canada Canada
Father of two, brother of two, child of two.
Spouse to one, uncle to many, friend to lots.
Farmer, carpenter, mechanic, electrician, but definitely not a plumber.
Likes walks with the wife, board games, card games, travel, and camping in the summer.
High school graduate, college drop-out.
Hobby programmer who knows C++ with MFC and the STL.
Has dabbled with BASIC, Pascal, Fortran, COBOL, C#, SQL, ASM, and HTML.
Realized long ago that programming is fun when there is nobody pressuring you with schedules and timelines.

Comments and Discussions

 
GeneralMultiple monitor support for CMagnifierWindow Pin
-Dy22-Nov-06 3:09
-Dy22-Nov-06 3:09 
GeneralRe: Multiple monitor support for CMagnifierWindow Pin
PJ Arends22-Nov-06 7:24
professionalPJ Arends22-Nov-06 7:24 
GeneralRe: Multiple monitor support for CMagnifierWindow Pin
-Dy29-Nov-06 2:03
-Dy29-Nov-06 2:03 
GeneralVery Good!! Pin
WREY28-Sep-02 0:06
WREY28-Sep-02 0:06 
GeneralTwo suggestions: Pin
Shog95-Aug-02 6:51
sitebuilderShog95-Aug-02 6:51 
GeneralWohoo.. Pin
Rama Krishna Vavilala17-Jul-02 17:05
Rama Krishna Vavilala17-Jul-02 17:05 
GeneralIs that... Pin
Darren Schroeder17-Jul-02 16:36
Darren Schroeder17-Jul-02 16:36 
GeneralRe: Is that... Pin
PJ Arends17-Jul-02 16:43
professionalPJ Arends17-Jul-02 16:43 
GeneralRe: Is that... Pin
Darren Schroeder18-Jul-02 1:49
Darren Schroeder18-Jul-02 1:49 
GeneralSuggestions Pin
Chris Maunder16-Jul-02 21:24
cofounderChris Maunder16-Jul-02 21:24 
GeneralRe: Suggestions Pin
Nish Nishant16-Jul-02 21:45
sitebuilderNish Nishant16-Jul-02 21:45 
GeneralRe: Suggestions Pin
PJ Arends16-Jul-02 21:48
professionalPJ Arends16-Jul-02 21:48 
GeneralRe: Suggestions Pin
Chris Maunder16-Jul-02 22:01
cofounderChris Maunder16-Jul-02 22:01 
GeneralRe: Suggestions Pin
PJ Arends16-Jul-02 22:10
professionalPJ Arends16-Jul-02 22:10 
GeneralRe: Suggestions Pin
Chris Maunder16-Jul-02 22:14
cofounderChris Maunder16-Jul-02 22:14 
GeneralRe: Suggestions Pin
ColinDavies17-Jul-02 9:07
ColinDavies17-Jul-02 9:07 
GeneralExcellent work! Pin
Alvaro Mendez16-Jul-02 10:51
Alvaro Mendez16-Jul-02 10:51 
GeneralAnother fine example of educational value Pin
ViolaCase16-Jul-02 10:25
ViolaCase16-Jul-02 10:25 
GeneralRe: Another fine example of educational value Pin
PJ Arends16-Jul-02 16:36
professionalPJ Arends16-Jul-02 16:36 
GeneralGood work! Pin
Shog916-Jul-02 7:07
sitebuilderShog916-Jul-02 7:07 
GeneralNice work - from a beta tester :-) Pin
Nish Nishant16-Jul-02 1:15
sitebuilderNish Nishant16-Jul-02 1:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.