Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

WTL Avatar Control

0.00/5 (No votes)
3 Mar 2008 1  
WTL control for showing full color and grayed pictures with resizing and saving resultant files
Screenshot - avatar-demo.png

Screenshot - avatar-demo2.png

Introduction

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.

Features

  • 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

Background

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.

    ///
    m_wndPicture.SubclassWindow(GetDlgItem(IDC_PICTURE));
    SendMessage(GetDlgItem(IDC_RADIO1),
        (UINT) BM_SETCHECK, (WPARAM)BST_CHECKED, (LPARAM)0);
    m_wndPicture.SetCurrentPictureID(0);
    //

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)
    {
    m_stretch.SetStretchBltMode(WHITEONBLACK);
    m_stretch.Apply(pData);
    m_color.SetColor(CImageFilterColor::eGrey);
    m_color.Apply(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)
            return;
    
        byte clr=0;
        COLORREF px = RGB(0,0,0);
        for(int x=0;xrcClient.Width();x++)
        {
            for(int y=0;yrcClient.Height();y++)
            {
                px = pData->dc.GetPixel(x,y);
                switch(m_Color)
                {
                case eRed:   
                    clr = GetRValue(px); 
                    px = RGB(clr,0,0);
                    break;
                case eGreen: 
                    clr = GetGValue(px); 
                    px = RGB(0,clr,0);
                    break;
                case eBlue:  
                    clr = GetBValue(px); 
                    px = RGB(0,0,clr);
                    break;
                case eGrey:  
                    clr = (GetRValue(px)+GetGValue(px)+GetBValue(px))/3; 
                    px = RGB(clr,clr,clr);
                    break;
                }
                pData->dc.SetPixelV(x,y,px);
            }
        };
    };
  3. ImageFilters system implements 'Strategy' pattern, where CImageFilter class is an abstract strategy and ImageFilterData keeps processing states.

History

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here