ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Add clickable Image
Posted by Fabian on Dec-10-2010 20:01
Hello Peter,

how is a clickable Image to add?

By clicking on the image, there should be called a function.

I can't understand how this should function -> onclick='Function();' ?

My code is like followed, but the image isn't clickable.


TextBox* txtHelp = c->addText(0,0,"<*img=D:\\\\AISEntwicklung\\\\Visual CPP\\\\Projekte\\\\Plavi\\\\prj\\\\Plavi\\\\res\\\\Legende_K.JPG*>");

delete m_Chart.getChart();
m_Chart.setChart(c);

    //include tool tip for the chart
CString sImageMap;
sImageMap.Format("%s<AREA %s onclick='Function();'>"
, c->getHTMLImageMap("", "", "title='{xLabel}\\n{dsField0}\\n{value}'")
, txtHelp->getImageCoor());

m_Chart.setImageMap(sImageMap);

best regards
Fabian

  Re: Add clickable Image
Posted by Peter Kwan on Dec-11-2010 00:04
Hi Fabian,

You may create clickable image on a chart using the same method as creating other clickable objects.

In the mfcdemo/mfcdemo sample project that comes with ChartDirector for C++, almost all of the sample charts are clickable. You may use it as a reference.

In breif, the method is:

(a) For the image map, use:

sImageMap.Format("%s<AREA %s href='xyz'>", c->getHTMLImageMap("", "", "title='{xLabel}\\n{dsField0}\\n{value}'"), txtHelp->getImageCoor());

(b) Handle the BN_CLICKED message from the CChartViewer. In this way, you can handle mouse clicks on the chart.

(c) In the handler for BN_CLICKED, use the ImageMapHandler to see what the user has clicked. You may check if the path is "xyz" to see if the user has clicked on the image. The code should be like:

//
// Handles mouse clicks on the chart image
//
void CMyWindow::OnChartClick(UINT nID)
{
    ImageMapHandler *handler = m_Chart->getImageMapHandler();
    if (0 != handler)
    {
        const char *path = handler->getValue("path");
        if ((0 != path) && (strcmp(path, "xyz") == 0))
        {
            //has clicked on the image
            //call your function here ....
        }
    }
}

Hope this can help.

Regards
Peter Kwan

  Re: Add clickable Image
Posted by Fabian on Dec-13-2010 16:09
Hi Peter,

thank you.

Is it possible to use a bitmap ressource instead of a path?

  Re: Add clickable Image
Posted by Peter Kwan on Dec-14-2010 02:08
Hi Fabian,

Yes. I can think of the following methods:

(a) First, save the bitmap resource as a file, then ask ChartDirector to use that file as the logo.

(b) Read the bitmap into an array of colors (an array of integers). Pass it to BaseChart.patternColor to create a pattern color.

(c) Then add an empty text box (using BaseChart.addText) of the same size as your image in the position you want to put the image, and set the background color of the text box to be the pattern color created in (b).

Hope this can help.

Regards
Peter Kwan

  Re: Add clickable Image
Posted by Fabian on Dec-14-2010 16:13
Hello Peter,

thank you for your quick replay.

But your answer wasn't what I want to describe.

Is it possible to load a bitmap ressource without saving to disk?

Is there a possibility like LoadBitmap(IDB_MYBITMAP_RES)?

Regards
FS

  Re: Add clickable Image
Posted by Peter Kwan on Dec-15-2010 02:31
Hi Fabian,

Sorry for my confusion response. Actually, in my response, I have already mentioned a way that does not require saving to disk, but I marked the (a), (b) and (c) incorrectly. It should be:

(a) First, save the bitmap resource as a file, then ask ChartDirector to use that file as the logo.

or

(b) Read the bitmap into an array of colors (an array of integers). Pass it to BaseChart.patternColor to create a pattern color. Then add an empty text box (using BaseChart.addText) of the same size as your image in the position you want to put the image, and set the background color of the text box to be the pattern color created in .

In the above, method (b) does not require saving to disk. What you need to do is to read in the bitmap resources as an array of integers. Then the code is like:

int myLogo = c->patternColor(IntArray(myArrayOfInteger, lengthOfArray), x, y);
TextBox *t = c->addText(x, y, "");
t->setSize(width, height);
t->setBackground(myLogo, Chart::Transparent);

Hope this can help.

Regards
Peter Kwan

  Re: Add clickable Image
Posted by Fabian on Dec-15-2010 22:29
Hi Peter,

what do you mean with:
(b) Read the bitmap into an array of colors (an array of integers)

int* arr = (int*) new int[???]
???

Thanks,
FS

  Re: Add clickable Image
Posted by Peter Kwan on Dec-16-2010 00:08
Hi Fabian,

In a computer, an image consists of a number of pixels. For example, a certain logo image can be 32 x 32 pixels in size, which means it has 1024 pixels. Each pixel is represented by a color. For example, you may say (from left to right, top to bottom) the first pixel is red, the second pixel is green, the third pixel is light green, etc.. A commonly used method to represent color is to use 24-bits (for 8-bit red, 8-bit green and 8-bit blue). However, because in a 32-bit CPU, it is more efficient to process data in 32-bit unit, so it is common to use 32-bit to represent a color (with 8 bits unused). In C++, we commonly used an integer to store the 32-bit value (because in most modern compilers, a C/C++ integer is 32-bit).

So if your logo image is 32 x 32 pixels in size, in computer memory, it can be represented as 1024 colors, which is 1024 32-bit values, and can be stored as 1024 integers in C++.

Now your image can be distributed in a number of ways. It can be as a separate file in the hard disk, or as a resource in an executable, or hard coded in the source code, etc.. ChartDirector does not support all possible methods one can store the image in all possible formats. It only supports image stored either as a file in the hard disk in PNG/JPG/GIF/BMP format, or in memory as raw pixels (1024 integers for a 32x32 pixel image). If your image is stored in some other way or in some other formats, you would need to write code to convert the resource to either an image file, or as raw pixels in memory.

For your case, as you do not want the image file method, you may convert your resource into raw pixels in memory. What you code needs to do is to create an integer array with the size equal to the number of pixels in your image, then get the colors of each pixel in 32-bit format, and store it in the array. After that, you can pass the array to ChartDirector to draw the image.

Hope this can help.

Regards
Peter Kwan

  Re: Add clickable Image
Posted by Fabian on Dec-16-2010 15:49
Hi Peter,

wow, super!

This closes some unknown things and I think now I will be able to implement it.

Thanks Peter.

Best Regards
FS