Click here to Skip to main content
11,802,076 members (56,437 online)
Click here to Skip to main content

WTL Avatar Control

, 3 Mar 2008 CPOL 23.8K 542 17
Rate this:
Please Sign up or sign in to vote.
WTL control for showing full color and grayed pictures with resizing and saving resultant files
Screenshot - avatar-demo.png

Screenshot - avatar-demo2.png


This is my first article at The Code Project and I hope it will be useful for other readers of this wonderful site. This article introduces one more simple control for showing full color and transformed (e.g. grayed) pictures with resizing and saving resultant files. Code from this article could be useful as an example of picture transforming.


  • Supports different formats of images (BMP, GIF, PNG, JPEG, JPG)
  • Enables resizing of original picture to real control size
  • Allows generating different images with help from user's filters in original source
  • Has ability to save resultant pictures into files


Basic knowledge about processing Windows events within WTL are welcomed.

Using the Code

This control was developed using Visual Studio 2003 and WTL 7.1. It has been tested under Windows XP only. Code is built based on GDI+ technology, so gdiplus.dll is required.

  • Copy the following files to your application directory and then add them to your project:
    • wtl_avatar_control.h
    • wtl_avatar_control.cpp
  • Insert #include "wtl_avatar_control.h" in the definition file's dialog class.
  • Add a new member variable to the dialog class:

    CStaticAvatar m_wndPicture;
  • Subclass any control (usually static, e.g. IDC_PICTURE) where you want to show an avatar picture. A good place for it is the OnInitDialog method.


Class Diagram

Class diagramm

Sequence Diagram

Class diagramm

Points of Interest

The main functionality of the example is concentrated in the class CAvatarProcessor and set of filters CImageFilter. The CAvatarProcessor provides the ability to apply different filters to an image and, as a result, get different resultant pictures. CStaticAvatar uses a single instance of CAvatarPicture, however prepares and applies a number of image filters for taking different effects. For operations with original pictures, the ATL::CImage class is used. Creation of 'disabled' images has been implemented as a compound filter CImageFilterDisable:

  1. Use the CImageFilterStretch to provide resizing images to actual control's size using WHITEONBLACK as a parameter for the SetStretchBltMode() method.

    void CImageFilterDisable::Apply(ImageFilterData* pData)
  2. Other color filters are implemented as a single class with a different set of supported colors.

    Screenshot - avatar-demo3.png

    enum eColor {eNone =0, eRed, eGreen, eBlue, eGrey};
    void CImageFilterColor::Apply(ImageFilterData* pData)
        if(m_Color == eNone || !pData)
        byte clr=0;
        COLORREF px = RGB(0,0,0);
        for(int x=0;x<pdata- />rcClient.Width();x++)
            for(int y=0;y<pdata- />rcClient.Height();y++)
                px = pData->dc.GetPixel(x,y);
                case eRed:   
                    clr = GetRValue(px); 
                    px = RGB(clr,0,0);
                case eGreen: 
                    clr = GetGValue(px); 
                    px = RGB(0,clr,0);
                case eBlue:  
                    clr = GetBValue(px); 
                    px = RGB(0,0,clr);
                case eGrey:  
                    clr = (GetRValue(px)+GetGValue(px)+GetBValue(px))/3; 
                    px = RGB(clr,clr,clr);
  3. ImageFilters system implements 'Strategy' pattern, where CImageFilter class is an abstract strategy and ImageFilterData keeps processing states.


  • 8 November, 2007 -- Original version posted
  • Version 1.1 -- Updated implementation of CAvatarPicture which allowed to get more flexible code


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


About the Author

Andrew Tyapuhin
Software Developer (Senior)
Belarus Belarus
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralThin template. Pin
Pablo Aliskevicius12-Nov-07 20:17
memberPablo Aliskevicius12-Nov-07 20:17 
GeneralRe: Thin template. Pin
Andrew Tyapuhin13-Nov-07 0:03
memberAndrew Tyapuhin13-Nov-07 0:03 
JokeThat image... Pin
Fernando A. Gomez F.8-Nov-07 8:46
memberFernando A. Gomez F.8-Nov-07 8:46 

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 | Terms of Use | Mobile
Web03 | 2.8.151002.1 | Last Updated 3 Mar 2008
Article Copyright 2007 by Andrew Tyapuhin
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid