{"id":309,"date":"2009-04-12T23:38:38","date_gmt":"2009-04-12T18:08:38","guid":{"rendered":"http:\/\/techtwaddle.net\/?p=309"},"modified":"2011-04-12T23:38:54","modified_gmt":"2011-04-12T18:08:54","slug":"applications-that-thing-called-gradience","status":"publish","type":"post","link":"https:\/\/techtwaddle.co.in\/blog\/2009\/04\/12\/applications-that-thing-called-gradience\/","title":{"rendered":"Applications: That thing called Gradience"},"content":{"rendered":"
I added a little gradient fill to the main screen. And it is quite easy really. By the way, here’s what my main screen looks like now, cool eh (:<\/span><\/div>\n

\"\"<\/p>\n

Lets look at GradientFill<\/span> first. The function is prototyped as:<\/span><\/div>\n

 <\/p>\n

BOOL GradientFill(HDC hdc, PTRIVERTEX pVertex, ULONG numVertex, PVOID pMesh, ULONG numMesh, ULONG mode);<\/span><\/span><\/div>\n

 <\/p>\n

The first parameter is the handle to the device context. The second parameter, pVertex<\/span>, is a pointer to an array of TRIVERTEX<\/span> structures. The third parameter contains the number of elements in the array pointed to by pVertex<\/span>. <\/span><\/div>\n

\n TRIVERTEX structure:<\/span><\/span>

\n struct _TRIVERTEX<\/span>

\n {<\/span>

\n    LONG x;<\/span>

\n    LONG y;<\/span>

\n    COLOR16 Red;<\/span>

\n    COLOR16 Green;<\/span>

\n     COLOR16 Blue;<\/span>

\n    COLOR16 Alpha;<\/span>

\n} TRIVERTEX;<\/span><\/p>\n

The structure defines a point x,y<\/span> in the device context and its color. Alpha<\/span> define the transparency of the point x,y<\/span>. The points in the array should define the upper left and the lower right corners of the rectangle being filled. The fourth parameter pMesh<\/span> points to a GRADIENT_RECT<\/span> structure.<\/span><\/div>\n

\nstruct _GRADIENT_RECT<\/span>

\n{<\/span>

\n    ULONG topLeft;<\/span>

\n    ULONG bottomRight;<\/span>

\n} GRADIENT_RECT;<\/span><\/p>\n

The GRADIENT_RECT<\/span> structure specifies which entry in the array containing TRIVERTEX<\/span> array is the upper left point and which is the bottom right point. The last parameter, mode<\/span>, specifies whether the gradient should be filled horizontally, GRADIENT_FILL_RECT_H<\/span>, or vertically GRADIENT_FILL_RECT_V<\/span>.<\/span><\/div>\n

 <\/p>\n

Now to the static text control. I tried to make the control transparent but found out that it is not very straight forward. Tried to use SetBkMode(hdc, TRANSPARENT)<\/span> and reurning NULL_BRUSH<\/span> in response to WM_CTLCOLORSTATIC<\/span>, didn’t work for me. So I removed the static control and used ExtTextOut<\/span> to draw the text directly on the screen.<\/span><\/div>\n

 <\/p>\n

Here is the final piece of code. All the code goes in under WM_PAINT<\/span> function. And g_hImageStatic<\/span> is a global which contains window handle to the static control containing the image. I store it while creating the static control in AlignComponents(), check my previous post<\/a>.<\/span><\/div>\n

\nTRIVERTEX vert[2];<\/span>

\nGRADIENT_RECT gradRect;<\/span>

\nRECT rect;<\/span>

\nTCHAR szStrLine1[] = TEXT("TechTwaddle");<\/span>

\nTCHAR szStrLine2[] = TEXT("Copyright (c) 2009");<\/span>

\n

\nhdc = BeginPaint(hWnd, &ps);<\/span>

\n

\nGetClientRect(hWnd, &rect);<\/span>

\n

\nvert[0].x = rect.left;<\/span>

\nvert[0].y = rect.top;<\/span>

\nvert[0].Red = 0x0000;<\/span>

\nvert[0].Green = 0x2000;<\/span>

\nvert[0].Blue = 0xA000;<\/span>

\nvert[0].Alpha = 0x0000;<\/span>

\n

\nvert[1].x = rect.right;<\/span>

\nvert[1].y = rect.bottom;<\/span>

\nvert[1].Red = 0x0000;<\/span>

\nvert[1].Green = 0x8000;<\/span>

\nvert[1].Blue = 0xFF00;<\/span>

\nvert[1].Alpha = 0x0000;<\/span>

\n

\ngradRect.UpperLeft = 0;<\/span>

\ngradRect.LowerRight = 1;<\/span>

\n

\nGradientFill(hdc, vert, 2, &gradRect, 1, GRADIENT_FILL_RECT_H);<\/span>

\n

\nif(g_hImageStatic)<\/span>

\n{<\/span>

\n    GetWindowRect(g_hImageStatic, &rect);<\/span>

\n

\n    SetTextColor(hdc, RGB(120, 160, 130));<\/span>

\n

\n    SetBkMode(hdc, TRANSPARENT);<\/span>

\n    ExtTextOut(hdc, rect.left – 23, rect.bottom – 24, 0, NULL, <\/span>

\n        szStrLine1, _tcslen(szStrLine1), NULL);<\/span>

\n    <\/span>

\n    ExtTextOut(hdc, rect.left – 37, rect.bottom – 11, 0, NULL, <\/span>

\n        szStrLine2, _tcslen(szStrLine2), NULL);<\/span>

\n}<\/span>

\n

\nEndPaint(hWnd, &ps);<\/span>

\n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

I added a little gradient fill to the main screen. And it is quite easy really. By the way, here’s what my main screen looks like now, cool eh (: Lets look at GradientFill first. The function is prototyped as:   BOOL GradientFill(HDC hdc, PTRIVERTEX pVertex, ULONG numVertex, PVOID pMesh, ULONG numMesh, ULONG mode);   … Continue reading Applications: That thing called Gradience<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1ktFF-4Z","_links":{"self":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/309"}],"collection":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/comments?post=309"}],"version-history":[{"count":2,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/309\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/309\/revisions\/691"}],"wp:attachment":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/media?parent=309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/categories?post=309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/tags?post=309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}