Displaying Bitmap Images with Scrolling

Environment: VC6, Win-9X/2000 (hasn’t been tested on other OS)

Displaying a large bitmap file on a dialog box, in its original size, is quite difficult in the VC++ environment. However, it is possible to display a large bitmap to a predefined area of the dialog by using the StretchBlt( ) function.The major disadvantage of this is that the clarity of the image will be lost. Check out this article for displaying large bitmaps into the desired area of your dialog box in its original size with a scrolling technique used to show the entire bitmap.

Although the primary aim of this article is to display a bitmap with scrolling, it covers the following three main objectives:

  1. Loading a bitmap in to the dialog box during run-time.
  2. Displaying a bitmap in its original size by using a scrolling technique.
  3. Implementing flicker-free drawing using a double buffering technique.

Loading a Bitmap into the Dialog Box During Run-time

Sometimes, the user may require different bitmaps to be loaded into the dialog box, depending on the requirements of his GUI. This can be achieved by calling the LoadImage( ) function. The implementation of this is explained below.

Place a picture control in your dialog. Adjust its size as you wish. Remember, you are going to display the bitmap in this control. Big bitmaps will be confined to the entire area of this control with a vertical scroll bar on the right side (the scroll bar will be displayed if the height of the image is greater than the height of this control) and a horizontal scroll bar at the bottom of this control (the scroll bar will be displayed if the width of the image is greater than the width of this control). Small bitmaps will be displayed at the centre of this control without scroll bars, with equal clearence to left and right, and top and bottom with respect to the control. So, place your control with an artistic touch to give your dialog box a nice appearence.

Take the properties of the picture control. Change its ID to IDC_STATIC1, Type to Frame, and Colour to Gray. Also, uncheck the Visible Check button so that the tick mark is removed from it.

Using the Class Wizard, create a control variable of type CStatic for IDC_STATIC1. Name it m_st1.

In your dialog’s header file (say, MyDlg.h), add the following code:

public:
  CRect rectStaticClient;
  int sourcex, sourcey,offsetx,offsety;
protected:
  CDC m_dcMem;            // Compatible Memory DC for dialog
  HBITMAP m_hBmpOld;      // Handle of old bitmap to save
  HBITMAP m_hBmpNew;      // Handle of new bitmap from file
  BITMAP m_bmInfo;        // Bitmap Information structure

In your dialog’s implementation file (say, MyDlg.cpp), add the following code:

BOOL CMyDlg::OnInitDialog()
{

// TODO: Add extra initialization here
  CClientDC dc(this);
   m_dcMem.CreateCompatibleDC( &dc );
return TRUE;  // return TRUE unless you set the focus to a
              // control
}

Override the else part of your dialog’s ::OnPaint() function:

void MyDlg::OnPaint()
{
  if (IsIconic())
  {
    CPaintDC dc(this);    // device context for painting

    SendMessage(WM_ICONERASEBKGND, (WPARAM) dc.GetSafeHdc(), 0);

    // Center icon in client rectangle
    int cxIcon = GetSystemMetrics(SM_CXICON);
    int cyIcon = GetSystemMetrics(SM_CYICON);
    CRect rect;
    GetClientRect(&rect);
    int x = (rect.Width() - cxIcon + 1) / 2;
    int y = (rect.Height() - cyIcon + 1) / 2;

    // Draw the icon
    dc.DrawIcon(x, y, m_hIcon);
  }
  else
  {
  //Add the following code
  CPaintDC dc(this);
    dc.BitBlt(offsetx,offsety,m_size.cx,m_size.cy,
              &m_dcMem, sourcex, sourcey,SRCCOPY);
  CDialog::OnPaint();

  }
}

Write the following code whenever you want to load a bitmap into your dialog.

m_hBmpNew = (HBITMAP) LoadImage(
  AfxGetInstanceHandle(),   // handle to instance
  filename,                 // name or identifier of the image,
                            // say, "C:\\NewFolder\\1.bmp"
  IMAGE_BITMAP,             // image types
  0,     // desired width
  0,     // desired height
  LR_LOADFROMFILE);

  if( m_hBmpNew == NULL )
{
AfxMessageBox("Load Image Failed");
}

    // put the HBITMAP info into the CBitmap
    // (but not the bitmap itself)
    else{
    m_st1.GetClientRect( &rectStaticClient );
  rectStaticClient.NormalizeRect();
  m_size.cx=rectStaticClient.Size().cx;
  m_size.cy=rectStaticClient.Size().cy;
  m_size.cx = rectStaticClient.Width();     // zero based
  m_size.cy = rectStaticClient.Height();    // zero based

    // Convert to screen coordinates using static as base,
    // then to DIALOG (instead of static) client coords
    // using dialog as base
  m_st1.ClientToScreen( &rectStaticClient );
  ScreenToClient( &rectStaticClient);

    m_pt.x = rectStaticClient.left;
    m_pt.y = rectStaticClient.top;
  GetObject( m_hBmpNew , sizeof(BITMAP), &m_bmInfo );
  VERIFY(m_hBmpOld = (HBITMAP)SelectObject(m_dcMem, m_hBmpNew
                       )  );
offsetx= m_pt.x;   //
  offsety=m_pt.y;  //
InvalidateRect(&rectStaticClient);

This much code will display a bitmap directly on to the picture control during run time. Remember the scrolling capability and alignment adjustments haven’t been done yet, so the image will be displayed at the top corner of the picture control and if its size is bigger than that of the picture control, it will be clipped to the picture control’s size. If the image is smaller than the size of the picture control, it will be displayed without clipping, but without centre alignment. The following session describes how scrolling capability and alignment can be achieved.

Displaying Bitmap in Its Original size by Using a Scrolling Technique

Add a vertical scroll bar control to your dialog and place it touching the right edge of your picture control. Make its length that of the height of your picture control. Add a horizontal scroll bar control to your dialog and place it touching the bottom edge of your picture control. Make its length that of the width of your picture control.

Using the Class Wizard, create member variables of type CScrollBar for your horizontal and vertical scroll bars. Let them be:

  CScrollBar m_vbar;    //For vertical scroll bar
  CScrollBar m_hbar;    //For horizontal scroll bar

You need to create two SCROLLINFO structures for storing the scroll bar parameters for both vertical and horizontal scroll bars. So, declare two SCROLLINFO structures in your dialog’s header file.

public:
  CRect rectStaticClient;
  int sourcex, sourcey,offsetx,offsety;
  SCROLLINFO horz,vert;

You only need to show the scroll bars if and only if the size of the bitmap is greater than that of the size of your picture control. So, hide the scroll bars initially by writing the following code in your dialog’s OnInitDialog() function.

BOOL CMyDlg::OnInitDialog()
{

// TODO: Add extra initialization here
  CClientDC dc(this);
  m_dcMem.CreateCompatibleDC( &dc );
  m_vbar.ShowWindow(false);    //Hide vertical scroll bar
  m_hbar.ShowWindow(false);    //Hide horizontal scroll bar
return TRUE;                   //return TRUE unless you set the
                               //focus to a control
}

Four situations can arise when you are loading a bitmap in to your pre-defined picture control. They are:

  • Case 1: The width and length of the loaded bitmap are greater than that of the picture control. In such situations, both horizontal and vertical scroll bars are necessary to show the entire bitmap. The bitmap is displayed by using the scrolling technique. The vertical scrolling range is equal to the height of Bitmap-Height of the picture control. The height and width of the bitmap are obtained by the following code and it’s incorporated in the code which is needed for displaying the bitmap, which is reproduced here again as
        m_size.cx = rectStaticClient.Width();     // zero based
        m_size.cy = rectStaticClient.Height();    // zero based
      GetObject( m_hBmpNew , sizeof(BITMAP), &m_bmInfo );
    
    Max. vertical Scrolling Range=m_bmInfo.bmHeight-m_size.cy
    

    Similarly

    Max. Horizontal Scrolling Range=m_bmInfo.bmWidth-m_size.cx;
    

    Make the horizontal and vertical scroll bars visible by calling

    m_hbar.ShowWindow(true);
    m_vbar.ShowWindow(true);
    
  • Case 2: The width of the loaded bitmap is greater than that of the picture control and the height is equal to or less than that of the picture control. In such situations, the horizontal scroll bar is necessary to show the entire bitmap. The bitmap is displayed using the scrolling technique. The horizontal scrolling range is given as
    Max. Horizontal Scrolling Range=m_bmInfo.bmWidth-m_size.cx;
    

    In this case, the vertical scroll bar is not needed. But, for displaying the bitmap centralised with respect to the picture control, the bitmap should be drawn at an offset from the top corner of the picture control given by,

    offsety= m_pt.y + ((m_size.cy - m_bmInfo.bmHeight)/2);
    

    Where offsety is the offsetted ‘y1’ co-ordinate in (x1,y1) (x2,y2) co-ordinate system and m_pt.y is the original ‘y1’ co-ordinate.

    A clearance of (m_size.cy – m_bmInfo.bmHeight)/2) is also produced from the bottom of the picture control. So, the horizontal scroll bar should be shifted up by an amount (m_size.cy – m_bmInfo.bmHeight)/2 using the MoveWindow( ) function as explained below.

    m_hbar.MoveWindow(offsetx,offsety + m_bmInfo.bmHeight,
                                        m_size.cx,18);
    

    Make the horizontal scroll bar visible and the vertical scroll bar invisible by calling

    m_hbar.ShowWindow(true);
    m_vbar.ShowWindow(false);
    
  • Case 3: The height of the loaded bitmap is greater than that of the picture control and the width is equal to or less than that of the picture control. In such situations, the vertical scroll bar is necessary to show the entire bitmap. The bitmap is displayed by using the scrolling technique. The vertical scrolling range is given as
    Max. Vertical Scrolling Range=m_bmInfo.bmHeight-m_size.cy;
    

    In this case, the horizontal scroll bar is not needed. But for displaying the bitmap centralised with respect to the picture control, the bitmap should be displayed at an offset from the top corner of the picture control given by,

    offsetx= m_pt.x + ((m_size.cx - m_bmInfo.bmWidth)/2);
    

    Where offsetx is the offsetted ‘x1’ co-ordinate in (x1,y1) (x2,y2) co-ordinate system and m_pt.x is the original ‘x1’ co-ordinate.

    A clearance of ( (m_size.cx – m_bmInfo.bmWidth)/2) is also produced from the extreme right side of the picture control. So, the vertical scroll bar should be shifted to left of the right edge of the picture control by an amount (m_size.cx – m_bmInfo.bmHeight)/2 using MoveWindow( ) function as explained below.

    m_vbar.MoveWindow(offsetx + m_bmInfo.bmWidth,offsety,18,
                                m_size.cy);
    

    Make the vertical scroll bar visible and the horizontal scroll bar invisible by calling

    m_hbar.ShowWindow(false);
    m_vbar.ShowWindow(true);
    
  • Case 4: The height and width of the loaded bitmap are equal to or smaller than that of the picture control. In such situations, the vertical scroll bar and the horizontal scroll bar are not needed to show the entire bitmap. The bitmap is displayed centrally, as such, in the picture control. For displaying the bitmap centrally with respect to the picture control, the bitmap should be displayed at an offset from the top corner of the picture control given by,
    offsetx= m_pt.x + ((m_size.cxn- m_bmInfo.bmWidth)/2);
    offsety= m_pt.y + ((m_size.cy - m_bmInfo.bmHeight)/2);
    

    Where ‘offsetx’ is the offsetted ‘x1’ co-ordinate in (x1,y1) (x2,y2) co-ordinate system and m_pt.x is the original ‘x1’ co-ordinate and ‘offsety’ is the offsetted ‘y1’ co-ordinate in (x1,y1) (x2,y2) co-ordinate system and m_pt.y is the original ‘y1’ co-ordinate.

    Make the vertical and horizontal scroll bars invisible by calling

    m_hbar.ShowWindow(false);
    m_vbar.ShowWindow(false);
    

    Fill up the SCROLLINFO Structure for horizontal scroll bar and vertical scroll bar as given below.

    //Horizontal Scroll Info Structure
    horz.cbSize = sizeof(SCROLLINFO);
    horz.fMask = SIF_ALL;
    horz.nMin = 0;
    horz.nMax = m_bmInfo.bmWidth-m_size.cx;
    horz.nPage =0;
    horz.nPos = 0;
    horz.nTrackPos=0;
    m_hbar.SetScrollInfo(&horz);
    
    //Vertical Scroll Info Structure
    vert.cbSize = sizeof(SCROLLINFO);
    vert.fMask = SIF_ALL;
    vert.nMin = 0;
    vert.nMax = m_bmInfo.bmHeight-m_size.cy;
    vert.nPage = 0;
    vert.nTrackPos=0;
    m_vbar.SetScrollInfo(&vert);
    

    Now, display the picture by invalidating the picture control.

    InvalidateRect(&rectStaticClient);
    

Remember, depending on the requirements of your loaded image, the positions of the scroll bars may be changed. So, before displaying another bitmap into your dialog, release the memory holding the current bitmap and re-set the positions of the scroll bars to their original location; in other words, to the positions where you placed them during the design of your dialog, by calling

  if(m_hBmpNew != NULL )
    DeleteObject(m_hBmpNew);   //Release memory holding bitmap
m_vbar.MoveWindow(offsetx+m_size.cx,offsety,18,m_size.cy);
    // Reset position of vertical scroll bar
m_hbar.MoveWindow(offsetx,offsety+m_size.cy,m_size.cx,18);
    // Reset position of horizontal scroll bar

The code given below summarises the things explained above.

if(m_hBmpNew != NULL )
    DeleteObject(m_hBmpNew);    //Release memory holding bitmap
  sourcex=sourcey=0;            //Set starting position of Source
                                //bitmap to be copied to (0,0)
sm_hBmpNew = (HBITMAP) LoadImage(
  AfxGetInstanceHandle(),       // handle to instance
  Path of Bitmap,               // name or identifier of the image
                                // (say "C:\\New Folder\\
                                // bitmap.bmp")
  IMAGE_BITMAP,                 // image types
  0,                            // desired width
  0,                            // desired height
  LR_LOADFROMFILE);
  if( m_hBmpNew == NULL ){
  AfxMessageBox("Load Image Failed");}

    // put the HBITMAP info into the CBitmap (but not the
    // bitmap itself)
   else{
  m_st1.GetClientRect( &rectStaticClient );
  rectStaticClient.NormalizeRect();
  m_size.cx=rectStaticClient.Size().cx;
  m_size.cy=rectStaticClient.Size().cy;
  m_size.cx = rectStaticClient.Width();     // zero based
  m_size.cy = rectStaticClient.Height();    // zero based

    // Convert to screen coordinates using static as base,
    // then to DIALOG (instead of static) client coords
    // using dialog as base
  m_st1.ClientToScreen( &rectStaticClient );
  ScreenToClient( &rectStaticClient);

    m_pt.x = rectStaticClient.left;
    m_pt.y = rectStaticClient.top;
  GetObject( m_hBmpNew , sizeof(BITMAP), &m_bmInfo );
  VERIFY(m_hBmpOld = (HBITMAP)SelectObject(m_dcMem, m_hBmpNew
                      )  );

  offsetx= m_pt.x;
  offsety=m_pt.y;
m_vbar.MoveWindow(offsetx+m_size.cx,offsety,18,m_size.cy);
    // Reset position of vertical scroll bar
m_hbar.MoveWindow(offsetx,offsety+m_size.cy,m_size.cx,18);
    // Reset position of horizontal scroll bar
horz.cbSize = sizeof(SCROLLINFO);
horz.fMask = SIF_ALL;
horz.nMin = 0;
horz.nMax = m_bmInfo.bmWidth-m_size.cx;
horz.nPage =0;
horz.nPos = 0;
horz.nTrackPos=0;
if(m_bmInfo.bmWidth<=m_size.cx)
{
  if((m_size.cx-m_bmInfo.bmWidth)==0)
    offsetx= m_pt.x;
  else
    offsetx= m_pt.x+((m_size.cx-m_bmInfo.bmWidth)/2);
  m_vbar.MoveWindow(offsetx + m_bmInfo.bmWidth,offsety,18,
                              m_size.cy);
  m_hbar.ShowWindow(false);
}
else
m_hbar.ShowWindow(true);
m_hbar.SetScrollInfo(&horz);
vert.cbSize = sizeof(SCROLLINFO);
vert.fMask = SIF_ALL;
vert.nMin = 0;
vert.nMax = m_bmInfo.bmHeight-(m_size.cy);
vert.nPage = 0;
vert.nTrackPos=0;
if(m_bmInfo.bmHeight<=m_size.cy)
{
  if((m_size.cy-m_bmInfo.bmHeight)==0)
    offsety= m_pt.y;
  else
    offsety= m_pt.y+((m_size.cy-m_bmInfo.bmHeight)/2);
  m_hbar.MoveWindow(offsetx,offsety+m_bmInfo.bmHeight,
                                    m_size.cx,18);
  m_vbar.ShowWindow(false);
}
else
m_vbar.ShowWindow(true);
m_vbar.SetScrollInfo(&vert);

  InvalidateRect(&rectStaticClient);
    }

Now, your bitmap is ready to be displayed on the dialog with scroll bars (if needed). But still it’s not able to scroll to show the remaining portions. We need to handle the WM_VSCROLL and WM_HSCROLL messages to re-draw the bitmap depending on the scroll bar positions for this.

Using the Class Wizard, handle WM_VSCROLL and WM_HSCROLL messages and write the following code in their handler.

void CMyDlg::OnVScroll(UINT nSBCode, UINT nPos, CScrollBar*
                                                pScrollBar)
{
  // TODO: Add your message handler code here and/or call default
  switch (nSBCode)
{
case SB_TOP:
sourcey = 0;
break;
case SB_BOTTOM:
sourcey = INT_MAX;
break;
case SB_THUMBTRACK:
sourcey = nPos;
break;
}

m_vbar.SetScrollPos(sourcey);
InvalidateRect(&rectStaticClient);
  CDialog::OnVScroll(nSBCode, nPos, pScrollBar);
}

void CMyDlg::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar*
                                                pScrollBar)
{
  // TODO: Add your message handler code here and/or call default
switch (nSBCode)
{
case SB_TOP:
sourcex = 0;
break;
case SB_BOTTOM:
sourcex = INT_MAX;
break;
case SB_THUMBTRACK:
sourcex= nPos;
break;
}
m_hbar.SetScrollPos(sourcex);
InvalidateRect(&rectStaticClient);
  CDialog::OnHScroll(nSBCode, nPos, pScrollBar);
}

Now, you can scroll your bitmap; the remaining portions of it can be viewed by horizontal and vertical scrolling. Still, a problem exists. The screen will flicker continously when you scroll the bitmap. Here comes another technique to tackle this problem—the finishing touch to this project. It’s nothing but the “Double buffer technique for flicker-free drawing.” Adopt it

Implementing Flicker-free Drawing Using the Double Buffering technique

To eliminate flicker in drawing, you need to draw everything on a memory DC, and then copy it to the real DC by using the BitBlt or StretchBlt functions. This technique is called double buffering. The drawing technique used in this article is double buffering. It is explained in the earlier sections. Secondly, you need to override the onEraseBackground( ) event. The default implementation of this event clears the background of the control with the current value of the backColor property. However, it is not always necessary to repaint the entire area of the control, and doing so unnecessarily can cause flickering. Bypass the onEraseBackground( ) event while you re-paint your dialog with InvalidateRect(&rectStatcClient). This can be achieved by signalling a global variable. Declare a global variable of type BOOL—say, BOOL erase—and initialise it to false. Map the WM_ERASEBKGND message and override it as

BOOL MyDlg::OnEraseBkgnd(CDC* pDC)
{
  // TODO: Add your message handler code here and/or call default
  if(erase)
    return false;
  else
  return CDialog::OnEraseBkgnd(pDC);
}

Before you call InvalidateRect(&rectStatcClient) function, set the variable ‘erase’ to true.Now OnEraseBkgnd( ) is bypassed.

Reset the ‘erase’ flag to false at the end of your OnPaint function. This will remove the bypassing of the OnEraseBkgnd(pDC) event and the background will be erased when WM_ERASEBKGND is sent by other events other than InvalidateRect( &rectStaticClient ).

  else
    {
      CPaintDC dc(this);
      dc.BitBlt(offsetx,offsety,m_size.cx,m_size.cy,
                &m_dcMem, sourcex, sourcey,SRCCOPY);
      erase=false;
      CDialog::OnPaint();

    }

I hope that you are now able to draw a bitmap with scrolling capability in your dialog. Go through the demo project and learn more from it.

NOTE: This code has been tested on the Windows 2000 platform and it is found to be working properly. Your valuable suggestions and corrections are always welcomed. Refer to the MSDN documentation for more details on ‘Double Buffering’, ‘MoveWindow( )’, and ‘BitBlt()’.

Downloads

Download demo project – 32 Kb

Download Download Demo exe – 11 Kb

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read