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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work 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
All Courses

From novice to tech pro — start learning today.