Image based MFC application with image mapping to catch clicks on different part of image

I have to create an MFC based application where my User Interface will be a wizard and we want this wizard to be a bitmap (image) with  Prev/Next button + some dynamic text to display the current status.  Is there any sample code for how to do it?

I was planning to use some dialog based application use SetBitmap functions in a dialog based application but then how to do image mapping so that I can catch Prev/Next button clicks and changed the text of prev/next button and status text?

Is there way to do it?
 
amitgulianiAsked:
Who is Participating?
 
Jaime OlivaresConnect With a Mentor Software ArchitectCommented:
Ok, then just use static controls to show the images, then create event handler for WM_LBUTTONDOWN message using ClassWizard. To know where in the image has been clicked you have to substract coordinates. Something like:

void CYourWizardWnd::OnLButtonDown(UINT nFlags, CPoint point)
{
CRect rectImage;
GetDlgItem(YOUR_STATIC_IMAGE_ID)->GetClientRect(&rectImage);

CPoint ptInImage(point.x - rectImage.left, point.y-rectImage.top);
// Process ptInImage here

}
0
 
Jaime OlivaresSoftware ArchitectCommented:
You can use CPropertyPage/CPropertySheet with 'Wizard' attribute, but you must design a different dialog layout for every page. To insert a bitmap in every page, just include inside your resource, and create a static control with 'Image' attribute in every page.

There are many examples at:
http://www.codeproject.com/property/
0
 
amitgulianiAuthor Commented:
Sorry I didn.t mention it earlier but I  already have my wizard ready but that does not have images and I have to introduce images and handle it.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
amitgulianiAuthor Commented:
How will I know where the mouse has been clicked? I know the cooridinates but how will it help?
0
 
Jaime OlivaresSoftware ArchitectCommented:
You can know where have been clicked by using ScreenToClient and ClientToScreen functions.

inside your dialog function:
ClientToScreen(&point);
yourStaticImageCtrl.ScreenToClient(&point);

now 'point' contains coordinates relative to the static image.
0
 
amitgulianiAuthor Commented:
So lets say my bitmap has 4 buttons like prev/next/cancel/help next to each other then what you are suggesting is that I have to use ScrrenToCLient function to get the relative location of the click. But after that how ill I know whether User has clicked Prev/Next/Help/Cancel etc?
 Do I need to know the positions of these buttons in adv and compare them with what I get by calling ScreenToClient ?
Thanks in adv
Aguliani

0
 
Jaime OlivaresSoftware ArchitectCommented:
Are you talking about buttons or image?
For buttons don't need to know anything about cursor position. Every button generates a message you can manage with a message handler function.
0
 
amitgulianiAuthor Commented:
I am talking about image. My image has text like prev/next/cancel/help.
0
 
Jaime OlivaresSoftware ArchitectCommented:
In this case you can do this (after obtaining correct coordinates):

CRect rectPrev(10,200,40,215);
CRect rectNext(50,200,90,215);
CRect rectCancel(110,200,140,215);

if (rectPrev.PtInRect(point)) {
    // some action
} else if (rectNext.PtInRect(point)) {
    // some action
} else if (rectCancel.PtInRect(point)) {
    // some action
}
0
 
amitgulianiAuthor Commented:
Ok then let me give it a shot. But quick question How will I find out the rectangular coordinates for prev/next buttons?
0
 
Jaime OlivaresSoftware ArchitectCommented:
Open your bitmap inside the Visual C++ IDE, when moving on, coordinates appear at bottom.
0
 
amitgulianiAuthor Commented:
My bitmap has more than 256 colors and hence can't be seen in IDE. How can I see it?
0
 
Jaime OlivaresSoftware ArchitectCommented:
No, then you can't see it inside your IDE. You will have to use another image editor to access it externally.
0
 
amitgulianiAuthor Commented:
Thanks a lot. It all worked.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.