Step-by-step implementation of QQ-like UI by VC (III): Ui color and Control Self-Painting

This article describes how to color the interface. There are two ways to color the interface: color palette and HSL color conversion. The color palette is limited to 256 colors, which are not used here. Therefore, HSL color conversion is used. First, you need to know what the HSL color space is. for complete and detailed knowledge, go to Wikipedia. Link:

Http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4,

Here is a brief introduction (from Wikipedia ):
HSL and HSV (also known as HSB) are two meanings of the midpoint in the RGB color space. They try to describe the more accurate perception color relationship than RGB, it is still easy to calculate. HSL indicates hue, saturation, and lightness. HSV indicates hue, saturation, value, and HSB indicates hue, saturation, and brightness ). For example:

Both HSL and HSV describe the points in the cylinder. The center axis of the cylinder is the black color from the bottom to the white color on the top, and the gray color between them, the angle around this axis corresponds to the "color phase", the distance to this axis corresponds to the "saturation", and the distance along this axis corresponds to the "brightness ", "value" or "brightness ".

It is easy to change the color of RGB to the HSL color. To change the color, you only need to change the angle. To change the brightness, you need to "slice" along the axis and change the saturation to the distance from the center axis, 3. Locate a color and switch back to the RGB color to complete the UI color. Perform such a transformation on the texture to be colored, and then refresh the texture to complete the color function.

Not all images need to be colored, like the beach pattern on the right of the title bar. If it is difficult to color, it will be like the negative effect of the photo. Therefore, the user's profile picture, bottom pattern, text, you do not need to color the icons. You only need to change the color of the background pattern, button highlight and pressed status image, menu background and highlighted pattern. The system button requires partial color to minimize and maximize the color of the highlighted and pressed background of the restored button. Therefore, another image is prepared, and a total of five images need color:

The last image is transparently drawn to the source image of the system button after color coloring, enabling local color.

The implementation of HSL color transformation is achieved through the filter plug-in class attached to the image library. For the implementation principle, see the help document of ringsdk. The calling code is extremely simple, m_dibbkg.getfilter (dibfiltereffect) -> adjusthsl (H, S, L); completes the background color. The image library implements two filter plug-ins, dibfilteralpha and dibfiltereffect, to achieve various Alpha mixing effects, brightness contrast, and color adjustment of the image. Paste the key color code here, where m_rdib-> data () is the loaded 32-bit color image data:

C/C ++ code

// Adjust the color. parameter range:-180 ~ 180 (degree), = 0 no adjustment // adjust the saturation, the parameter range is 0 ~ 200 (recommended, maximum value> 200), = 100 do not adjust // adjust the brightness, brightness parameter range 0 ~ 200 (recommended, maximum value> 200), = 100 do not adjust bool dibfiltereffect: adjusthsl (INT deghue, int persaturation, int perluminosity) {If (! M_rdib-> data () return false; If (persaturation <0 | perluminosity <0) return false; if (deghue = 0 & persaturation = 100 & perluminosity = 100) return true; // if no adjustment is made, the lpbyte Pred, PGRN, pblu, pbuf = (lpbyte) m_rdib-> data (); uint loop = m_rdib-> width () * m_rdib-> height (); colorref * Cr = (colorref *) m_rdib-> data (); Pred = pbuf ++; PGRN = pbuf ++; pblu = pbuf; float H, S, L; For (uint I = 0; I <loop; I ++) {rgbtoh SL (* Pred, * PGRN, * pblu, & H, & S, & L); H + = deghue; S = (S * persaturation/100366f ); L = (L * perluminosity/100366f); * Cr = hsltorgb (H, S, L); Pred + = 4; PGRN + = 4; pblu + = 4; cr ++;} return true;} void dibfiltereffect: rgbtohsl (byte R, byte g, byte B, float * H, float * s, float * l) {byte minval = min (R, min (G, B); byte maxval = max (R, max (G, B); float mdiff = float (maxval) -Float (minval); float msum = float (maxval) + float (Minval); * l = msum/510.0f; If (maxval = minval) {* s = 0.0f; * H = 0.0f;} else {float rnorm = (maxval-R) /mdiff; float gnorm = (maxval-G)/mdiff; float bnorm = (maxval-B)/mdiff; * s = (* l <= 0.5f )? (Mdiff/msum): (mdiff/(510.0f-msum); If (r = maxval) * H = 601_f * (6.0f + bnorm-gnorm ); if (G = maxval) * H = 601_f * (2.0f + rnorm-bnorm); If (B = maxval) * H = 601_f * (4.0f + gnorm-rnorm ); if (* h> 360.0f) * H-= 360.0f;} colorref dibfiltereffect: hsltorgb (float H, float S, float L) {byte R, G, B; L = min (1, L); s = min (1, S); If (S = 0.0) {r = G = B = (byte) (255 * l);} else {float RM1, RM2; If (L <= 0.5f) RM2 = L + L * s; else RM2 = L + S-L * s; rm1 = 2.0f * l-RM2; r = huetorgb (RM1, RM2, H + 1200000f); G = huetorgb (RM1, RM2, H); B = huetorgb (RM1, RM2, h-1200000f);} return RGB (R, G, B);} byte dibfiltereffect: huetorgb (float RM1, float RM2, float RH) {While (Rh> 360.0f) rh-= 360.0f; while (RH <0.0f) rh + = 360.f; if (RH <601_f) Rm1 = Rm1 + (RM2-RM1) * Rh/601_f; else if (RH <180.0f) Rm1 = RM2; else if (RH <240.0f) Rm1 = Rm1 + (RM2-RM1) * (240.0f-RH)/601_f; float n = Rm1 * 255; int M = min (INT) n, 255); M = max (0, m); Return (byte) m ;}

After implementing the UI color function, you need to implement the color setting interface. In qq2009, eight colors are preset for the color setting. You can select one color, or you can color the HSL color separately, however, these eight colors change with the selection of shading and skin. The selection of skin affects the selection of shading and baseline color, later, I got a theme package from qq2009, and it turned out to be a packaged file in a custom format. I couldn't undo it, but I didn't study it anymore. Then I got a theme package of version 2008, we can see the image we used, which roughly shows why we did this. The background image in the image is in BMP format and transparent with purple red because there is no Alpha hybrid channel, this image is transparently drawn to the background, and the edges are jagged, unless the background color is similar to the image edge color, so the selected skin will
Restrict the background color and background color. If you select the background color, the background color will be changed at the same time, and then the background and background color will be selected. The background pattern should use a pattern with a low RGB color difference as much as possible, this makes the color effect not very obvious. This entire interface color shading pattern does not have any sawtooth, and the changes are not very noticeable. It is a clever way. Of course, this is the practice of the previous version of QQ. 2009 should have been improved. The border color function demonstrated here does not have this restriction because the shading pattern uses a PNG Image with an alpha channel, and the code is easy to understand for the sake of simplicity, I will not learn QQ's practice. I will cancel skin setting, and the choice of color and background will not affect each other and will not interact with each other. Five shading images are provided for you to choose from. If you are interested, add them on your own. This is just to add the shading to the resource for the sake of simplicity,
In order to achieve skin replacement and scalability, you should implement a skin replacement configuration file and resource package by yourself, which will not be demonstrated here.

On the color setting page, first respond to the pop-up event of the "change appearance" button (in the wm_lbuttonup message). The setting window is the size of the color and shading dialog box in the resource, it cannot be dragged or adjusted. It needs to be automatically hidden when the focus is lost. Therefore, you need to judge in its wm_activate message. If it is in the wa_inactive status, send an Exit message and close yourself. Load the color and shading dialog box to display one. Hide the other. The selection of color and shading should look like a tab control, but you have to draw it yourself. Here, it is easy to simulate the tab using the image control, there are only two options. Check the mouse position, change the image, switch the display status of the two dialog boxes, and check the code.

This section describes the self-painting of the four slider controls in the color palette dialog box. The Control Self-painting must first be subclass-based. The ringsdk interface library has been encapsulated and inherits the corresponding control class. The subclass-based function is automatic and can be used to reload its ringdowproc function, that is, the control window process, if you want to do anything, you can give you the maximum degree of freedom. For unprocessed messages, you can return defaproproc or ringdowproc of the base class. The self-painted slider control is inherited from the ringtrackbar. As long as the wm_printclient and wm_paint messages are returned, it is OK to draw the background pattern and the slider pattern. The code is very simple:

C/C ++ code

LRESULT RingTrackBarEx::RingdowProc(HWND hWnd,RINGPARAMS param){ switch(param.uMsg) {  case WM_PRINTCLIENT:  case WM_PAINT:  {   RECT rc,rcc;   HDC hdc,hMemDC;   PAINTSTRUCT ps;   GetWindowRect(m_hWnd,&rc);   OffsetRect(&rc,-rc.left,-rc.top);   hdc = param.wParam?(HDC)param.wParam:BeginPaint(hWnd,&ps);   FillRect(hdc,&rc,m_brush);   hMemDC = CreateCompatibleDC(hdc);   SelectObject(hMemDC,m_hbmLine);   GetChannelRect(&rcc);   StretchBlt(hdc,rcc.left,(rc.bottom - m_sizeLine.cy)/2,rcc.right-rcc.left,m_sizeLine.cy,       hMemDC,0,0,m_sizeLine.cx,m_sizeLine.cy,SRCCOPY);   SelectObject(hMemDC,m_hbmThumb);   GetThumbRect(&rc);   BitBlt(hdc,rc.left,rc.top,rc.right-rc.left,rc.bottom-rc.top,hMemDC,0,0,SRCCOPY);   DeleteDC(hMemDC);   if(param.wParam == 0)    EndPaint(hWnd, &ps);   return 0;  } } return DefaultProc(param);}

Because of the parameter relationship of the color function adjusthsl, set the adjusted range of the Color Tone Control to-180 ~ 180, the initial value is 0, and the saturation and brightness ranges from 0 ~ 200. The initial value is 100. There are many articles about how to adjust the transparency of a window. Here we will not be so arrogant. The interface library is encapsulated and setlayeredalpha can be called, however, the range value is set to 25 ~ 255, not 0 ~ 255. If it is fully transparent, the window cannot be operated.

The HSL color ring is expanded, for example:

Note that the default background is blue, so blue is in the middle of the pattern. If the Default background is another color, you need to move these colors cyclically so that the background color is in the middle, otherwise, you can drag the slider to adjust the color of the slider.

The selection of the shading pattern is very simple. It is OK to reload the selected pattern, and you can see the code.

Now the page color function is completed. The middle part of the interface does not need to be colored because there will be controls in the future. Now let's look at the program's:

Finally, let's talk about how to create a PNG Image with alpha channel and add it to the program:

First, find a satisfactory image, adjust it to the height of 95, the height of the QQ title bar, the width is random, as long as the pattern is not deformed, then add a mask, and press the button in the middle:

To make the image transparent, you need to remove the background. If you create a new image and copy the image, you need to delete the background layer. If you open the image directly, you need to copy a layer and then delete the background layer. After the mask is added, select the gradient tool, pull from right to left, and save the image as PNG,

Make a 31*31 preview BMP image for the PNG image, and add the PNG image as a "PNG" resource in the format of the resource, the id value must be the same as that of resource. in H, the IDs of five preset images, such as idp_sea, are consecutive. The ids of the previewed images must be the same as those of idb_tatoo1 ~ The value of idb_tatoo5 is continuous. Find the initialization code of gsztatooinfo in wnduioption. cpp, add the image description to it, and compile the program.

Now, this QQ-like interface program has completed the function of the title bar. Next, we need to complete the functions of the customer area and the bottom bar. We will leave it for the next article.

Post: http://www.icache.me/vc-step-by-step-copy-qqface-3.html