Click here to Skip to main content

xgui - a set of Photoshop-like color picker controls

xgui demo project screenshot

In this page:

  1. What is xgui?
  2. How to use it

What is xgui? 

xgui is a user-controls library, including several user-interface controls: color picker, slider, color preview well and controller, inspired by the great Adobe Photoshop.

Currently RGB and HSV color models are supported.

How to use it 

Include wrapper headers 

xgui library is accessed by using so-called wrappers. Wrappers are headers defining 4 classes with all members inline functions. Following steps describe the simpliest case - drive a picker, slider and a well by using a controller.

Initialize xgui library 

Load and initialize library (in InitInstance, for example):

HINSTANCE handle = LoadLibrary ("xgui.dll");
if (handle == NULL)
{
	AfxMessageBox ("Cannot load library.");
	return (FALSE);
}
FARPROC func = GetProcAddress (handle, "xgui_initialize");
if (func == NULL)
{
	AfxMessageBox ("Cannot find function.");
	return (FALSE);
}
func ();

Add controls to a dialog box 

Add a user-controls to a dialog box template in resource editor. Set window class (xgui_controller, xgui_picker, xgui_slider or xgui_well). Select additional options (as style lo-word) for slider and picker:

Resource editor screenshot

For the slider control, 0x7280 means vetical slider with both triangles, where each triangle is having size = 6 (2 + 4 = 6), running at visual mode 0x80 (consult "xgui_constants.h" for available visual modes or "slider.h" about the following schema):

 +- horizontal slider (8)
 |  +- verical slider (4)
 |  |  +- left / top triangle (2)
 |  |  |  +- right / bottom triangle (1)
 |  |  |  |  +--------+- triangle(s) size - 4 (0 = actual size of 4)
 |  |  |  |  |        |  +--------------------+- visual mode (modes enum)
 |  |  |  |  |        |  |                    |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|16|15|14|13|12|11|10| 9| 8| 7| 6| 5| 4| 3| 2| 1|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
 |                    |
 +--------------------+- layout mode

Picker uses only bits 9-12 for the same purpose as slider control.

Uncheck visible and tabstop for controllers and tabstop only for color wells.

Declare member variable 

In your dialog box class header append a single member variable for the controller:

xgui::wrapper::controller	master;

Set-up variable 

Use class wizard to add a handler for WM_INITDIALOG and setup class instance inside:

master.attach (
	GetDlgItem (IDC_CONTROLLER)->m_hWnd);
master.setup_as_picker (
	GetDlgItem (IDC_WELL)->m_hWnd,
	GetDlgItem (IDC_PICKER)->m_hWnd,
	GetDlgItem (IDC_SLIDER)->m_hWnd);
master.visual (
	xgui::modes::rgb_red | xgui::modes::reverse);

Query controller for the current selection 

Use color method of the controller wrapper to get or to set the current color.

Compile and execute 

That's all. Compile and execute the project.

Check-out demo project source code for advanced usage.


Web03 | 2.8.160204.4 | Advertise | Privacy
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service