Click here to Skip to main content
Click here to Skip to main content

SonicUI - A Convenient GUI Engine You've Never Seen

By , 26 May 2010
Rate this:
Please Sign up or sign in to vote.
game.jpg

task.jpg

Introduction

SonicUI is a GUI Engine based on nake GDI APIs. It offers several simple UI components to accomplish high efficiency UI effects, such as self-draw buttons, irregular windows, animation, URL in windows and image operation methods. The main purpose is to use least code to achieve best effects.

Background

Recently generic application UI development is becoming more like game development. Self-draw components are used here and there in many merchant software, such as the most popular IM software in China - QQ2009. I have been a leisure game developer in a company, so I would also like to introduce some game developing mechanisms into my current work. With this thought, I wrote this GUI engine to help. As everyone knows, UI development is often a repeated and disinteresting job. So I designed this engine with two principles: simple to use and high efficiency. Let's take a look into the usage of the engine below, you will find some interesting points.

Using the Code

First of all, let me introduce the class factory and components manager: ISonicUI. This interface is used for creating and destroying objects and act as some global function.

1. Showing and Rotating an Image

The image operation interface: ISonicImage, which is used to load, save, rotate, stretch, gray or do HSL adjustment, etc. Thanks to the author of CxImage, I use this lib to avoid encoding or decoding multifarious formats of image. But after the images are loaded by CxImage and converted to standard dib format, I deal with them in my own way. The usage of ISonicImage is simple:

ISonicImage * pImg = GetSonicUI()->CreateImage();
pImg->Load("C:\\demo.png");
pImg->Rotate(90);
pImg->Draw(hdc);

2. Making a URL

It may be boring to output a colorful string or add a URL to the window using some controls. With the nake GDI APIs, you have to select a different font or other GDI objects into and out from dc again and again. But with ISonicString, you will accomplish the job in just three or four lines.

ISonicString * pStr = GetSonicUI()->CreateString();
pStr->Format("/a='http://hi.csdn.net/zskof', c=%x/Hello I'm a clik", RGB(0, 0, 255));
.
.
.
pStr->TextOut(hdc, 10, 10);

Notice: Don't create and format ISonicString in WM_PAINT procedure to avoid repeated initialization and put the pStr->TextOut() method between BeginPaint() and EndPaint().

Yes, three lines to make a URL, without putting any controls in the window or paying attention to boring message dispatch, seems impossible? Hmm, just subclass tricks. In this way, you can make your code just as simple as HTML code. The only thing you will attend is the keywords of ISonicString. You can find a particular explanation in the interface file - ISonicUI.h.

3. Making an Animation Self-draw Button

Self-draw button is also familiar to us UI developers. With ISonicString, we can easily make a beautiful button with just a little difference from making a URL.

void WINAPI OnMove(ISonicString * pStr, LPVOID)
{
	...
}

ISonicImage * pImgNormal = GetSonicUI()->CreateImage();
pImgNormal->Load(BMP_NORMAL);
pImgNormal->SetColorKey(RGB(255, 0, 255));

ISonicImage * pImgHover = GetSonicUI()->CreateImage();
pImgHover->Load(BMP_HOVER);
pImgHover->SetColorKey(RGB(255, 0, 255));

ISonicImage * pImgClick = GetSonicUI()->CreateImage();
pImgClick->Load(BMP_CLICK);
pImgClick->SetColorKey(RGB(255, 0, 255));

ISonicString * pAniButton = GetSonicUI()->CreateString();
pAniButton->Format("/a, p=%d, ph=%d, pc=%d, animation=40/",
    pImgNormal->GetObjectId(), pImgHover->GetObjectId(), pImgClick->GetObjectId());
pAniButton->Delegate(DELEGATE_EVENT_CLICK, NULL, NULL, OnMove);
pAniButton->TextOut(hdc, 10, 10);

The "p, ph, pc" keywords stand for three statuses (normal, hover, click) of a button. Every keyword appoints a ISonicImage as its displaying item. If you get a source image, which tiles three status, then it doesn't matter either. You just need to appoint "p, ph, pc" to the same object id of an ISonicImage and everything will be done. I do the source rect clip internally for you. The "animation=40" figures that this is a shading button, in other words, animation will be displayed during status switch. 40 is the shading speed, the higher, the faster. The Delegate() method delegates a procedure to the click event as a callback, and then the procedure will be called if you click the button. We will talk about more details on Delegation trick later.

4. Making an Irregular Window

ISonicWndEffect component is used for making irregular windows, or to make windows do some animation, such as moving smoothly, rotating or stretching smoothly, etc. There are two methods to make irregular windows: using window Rgn or layered window. First the window rgn way:

...
// ISonicImage * pImg
SetWindowRgn(hWnd, pImg->CreateRgn());

Second using layered window:

...
ISonicWndEffect * pEffect = GetSonicUI()->CeateWndEffect();
// use alpha-per-pixel attaching mode
pEffect->Attach(hWnd, TRUE);
// ISonicImage * pImg
pEffect->SetShapeByImage(pImg);

5. Other Components

There are many other components, like ISonicTextScrollBar and ISonicAnimation, with which you can implement lots of familiar UI effects, such as scroll text, moving a picture smoothly, rotating or stretching it smoothly with a good visual sense. The usage is rather easy and you can look it up in the interface file ISonicUI.h. Here I will save my words for the more interesting part below.

Points of Interest

I will show several tricks in my project in this chapter. These tricks contain ASM and API hook techniques.

1. Delegation

Of course we want to find a simple way to delegate different procedures to self-draw buttons so as to make the components capable of being universally used. But there is a problem in function declaration. VC++ doesn't permit you to transfer a member function of a class as a parameter in the normal way. You have to use member function pointer, which is class relevant and obviously against the "universal" principle. So I use the volatile parameter to avoid the restriction.

void ISonicBase::Delegate(UINT message, LPVOID pReserve, LPVOID pClass, ...)
{
	if(IsValid() == FALSE)
	{
		return;
	}
	ISonicBaseData * pData = dynamic_cast<isonicbasedata />(this);
	if(pData == NULL)
	{
		return;
	}
	DELEGATE_PARAM pm = {0};
	pm.pClass = pClass;
	pm.pReserve = pReserve;
	va_list argPtr;
	va_start(argPtr, pClass);
	pm.pFunc = va_arg(argPtr, LPVOID);
	va_end(argPtr);
	pData->m_mapDelegate[message] = pm;
}

And we cannot make a callback in the normal way either. Don't worry, just a little ASM code will do the job.

void ISonicBaseData::OnDelegate(UINT message)
{
	MSG_TO_DELEGATE_PARAM::iterator it = m_mapDelegate.find(message);
	if(it == m_mapDelegate.end())
	{
		return;
	}
	DELEGATE_PARAM &pm = it->second;
	if(pm.pFunc == NULL || IsBadCodePtr((FARPROC)pm.pFunc))
	{
		return;
	}
	ISonicBase * pBase = dynamic_cast<isonicbase />(this);
	if(pBase == NULL)
	{
		return;
	}
	LPVOID pReserve = pm.pReserve;
	LPVOID pClass = pm.pClass;
	LPVOID pFunc = pm.pFunc;
	__asm
	{
		push ecx
		push [pReserve]
		push [pBase]
		mov ecx, [pClass]
		call [pFunc]
		pop ecx
	}
}

In some respects, the security of C++ syntax check is wrecked by us, so you must ensure the declaration of the callback function strictly obeys the rule:

void WINPAI Func(ISonicBase *, LPVOID)

Otherwise you will get a stack crash or some fatal errors.

2. Layered Window

Layered Window is widely used for implementing transparent windows or irregular windows. There are two APIs used for displaying a layered window, SetLayeredWindowAttributes and UpdateLayeredWindow. But there's a mortal difference between these two functions to application developers although SetLayeredWindowAttributes uses UpdateLayeredWindow internally as MSDN said. For further discussion, I may start another article on it. But here I can just say the main difference is when UpdateLayeredWindow is used, WM_PAINT message is abandoned, all your child controls will not show themselves, and generic GDI APIs may work incorrectly while SetLayeredWindowAttributes uses a redirected mechanism to keep everything working well. Sounds like the UpdateLayeredWindow is just a trouble maker, but if you want to make an alpha-per-pixel window and use a PNG as the background to implement some shadow effects, UpdateLayeredWindow will be the only choice.

Since ISonicWndEffect is just an "attachment" which attaches to an existing hwnd, how can I demand the engine user to rewrite all his rendering code between BeginPaint and EndPaint? So I use an API hook trick.

	// ...
	HMODULE hMod = GetModuleHandle("User32.dll");
	if(hMod == NULL)
	{
		return FALSE;
	}
	m_pOldBeginPaint = ReplaceFuncAndCopy(GetProcAddress
				(hMod, "BeginPaint"), MyBeginPaint);
	m_pOldEndPaint = ReplaceFuncAndCopy(GetProcAddress
				(hMod, "EndPaint"), MyEndPaint);

HDC CSonicUI::MyBeginPaint( HWND hwnd, LPPAINTSTRUCT lpPaint )
{
	HDC hdc;
	if(m_hPaintDC)
	{
		memset(lpPaint, 0, sizeof(PAINTSTRUCT));
		lpPaint->hdc = m_hPaintDC;
		GetClientRect(hwnd, &lpPaint->rcPaint);
		hdc = m_hPaintDC;
		g_UI.m_rtUpdate = lpPaint->rcPaint;
	}
	else
	{
		GetUpdateRect(hwnd, g_UI.m_rtUpdate, FALSE);
		__asm
		{
			push [ebp + 0ch]
			push [ebp + 8h]
			call [m_pOldBeginPaint]
			mov [hdc], eax
		}
	}
	g_UI.m_bPainting = TRUE;
	return hdc;
}

BOOL CSonicUI::MyEndPaint( HWND hWnd, CONST PAINTSTRUCT *lpPaint )
{
	BOOL bRet = TRUE;
	// ...
	if(m_hPaintDC)
	{
		m_hPaintDC = NULL;
		return TRUE;
	}
	else
	{
		__asm
		{
			push [ebp + 0ch]
			push [ebp + 8h]
			call [m_pOldEndPaint]
			mov [bRet], eax
		}
	}
	GetClientRect(hWnd, g_UI.m_rtUpdate);
	g_UI.m_bPainting = FALSE;
	return bRet;
}

By this way, when I want to redraw the window attached by ISonicWndEffect using alpha-per-pixel mode (internally implemented with UpdateLayeredWindow), I just send the window a fake WM_PAINT message and use a memdc as the wParam of WM_PAINT, everything will be correctly rendered, without any change to the rendering code.

In fact, using this trick would bring us a little present. When this engine is in your process, all your windows can be drawn to a specified memdc, even when it's hidden.

Conclusion

There are still many other tricks and techniques, such as convert float operation to integer, dirty rect update mechanism, SSE2 instructions, etc. to optimize the efficiency of the engine. I will leave these parts to readers with my code. I hope you enjoy my engine and contact me if you have any good ideas or suggestions.

History

  • 13th December, 2008
    • First post
  • 13th January, 2009
    • Changed the function hook code to avoid memory leak warnings
    • Modified some code within CSonicString::TextOut to make it capable of being used with memory dc without specifying a hwnd
    • Added gauss blur and even blur feature to ISonicImage
  • 15th March, 2009
    • Fixed server bugs in ISonicImage which may cause crash
    • Added DirectTransfrom method to ISonicWndEffect
    • Added some features to ISonicTextScrollBar
  • 25th May, 2010
    • Added ISonicSkin component. You can prettify your windows and dialogs with only three lines of code. It's cool and handy!
    • Added Unicode support
    • Added static library output
    • Changed several types from MFC support to ATL support to make the engine lighter
    • Optimised some kernel implements, such as dirty rect update mechanism
    • Added interfaces to ISonicUI, ISonicString
    • Modified format of keyword "p" in ISonicString. Here is an example to make a self-draw button with a 4-state tiled image: ISonicString::Format("/a, p4=%d/", pImg->GetObjectId());. The original "ph" and "pc" keywords were discarded. Refer to ISonicUI.h to get more details.

License

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

About the Author

Sonic Guan
Software Developer (Senior)
China China
A windows platform developer who is addicted to UI and reverse project.

Comments and Discussions

 
QuestionMy vote of 5 Pinmemberruiwng24-Aug-12 5:44 
GeneralMy vote of 5 Pinmembermaplewang21-Aug-12 15:32 
QuestionInjectTool.lib .... Pinmember213yy28-Mar-12 2:58 
AnswerRe: InjectTool.lib .... Pinmembersharon88829-May-12 18:34 
QuestionLNK error 2005 and 1169 PinmemberiDbg8-Nov-11 16:31 
QuestionCan it support win7 64? Pinmemberchen1234451925-Sep-11 16:07 
GeneralMy vote of 5 Pinmemberlimitswen21-Aug-11 23:56 
GeneralMy vote of 5 Pinmemberxiongw13-Apr-11 22:42 
GeneralGelivable! Pinmemberzf21877-Apr-11 0:02 
General居然贴没源码的东西 Pinmemberhexiang200514-Mar-11 5:47 
GeneralRe: 居然贴没源码的东西 Pinmemberzf21876-Apr-11 23:52 
GeneralRe: 居然贴没源码的东西 Pinmemberpxshh16-Sep-11 1:02 
GeneralRe: 居然贴没源码的东西 Pinmemberzhuyuzi13-Jun-12 7:14 
GeneralMy vote of 5 Pinmemberhuntime25-Jan-11 4:41 
GeneralMy vote of 5 Pinmemberwanginfo23-Jan-11 19:51 
GeneralHi Pinmemberwangguang24622-Dec-10 21:31 
GeneralRe: Hi Pinmemberalannx27-Apr-11 5:31 
General非常好的源码,期待你的2008的可编译版本 Pinmemberyaoohfox10-Jul-10 10:25 
GeneralRe: 非常好的源码,期待你的2008的可编译版本 Pinmemberlovesxw16-Aug-10 21:59 
GeneralRe: 非常好的源码,期待你的2008的可编译版本 PinmemberDavid_LoveCpp8-Sep-10 20:38 
GeneralMy vote of 5 Pinmemberyaoohfox10-Jul-10 10:24 
QuestionCan you give a example to show what how to Skin a window? Pinmemberjacky_zz1-Jun-10 23:28 
AnswerRe: Can you give a example to show what how to Skin a window? PinmemberSonic Guan2-Jun-10 0:32 
GeneralRe: Can you give a example to show what how to Skin a window? Pinmemberjacky_zz2-Jun-10 14:56 
GeneralRe: Can you give a example to show what how to Skin a window? PinmemberSonic Guan2-Jun-10 15:23 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 26 May 2010
Article Copyright 2008 by Sonic Guan
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid