Click here to Skip to main content
Click here to Skip to main content
Go to top

WTL Avatar Control

, 3 Mar 2008
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

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;x<pdata- />rcClient.Width();x++)
        {
            for(int y=0;y<pdata- />rcClient.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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

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

Comments and Discussions

 
GeneralThin template. PinmemberPablo Aliskevicius12-Nov-07 20:17 
GeneralRe: Thin template. PinmemberAndrew Tyapuhin13-Nov-07 0:03 
JokeThat image... PinmemberFernando 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 | Mobile
Web01 | 2.8.140916.1 | Last Updated 3 Mar 2008
Article Copyright 2007 by Andrew Tyapuhin
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid