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

Message ListMessage List     Post MessagePost Message

  Custom HTML image tag kinda works
Posted by Rand on Dec-15-2020 08:42
| Reply | Monitor
Attachments:
I have some custom boxes with values drawn in the LegendBox.  I expanded the horizontal size of the box to provide the margin for drawing.  I draw everything on a dynamic layer. data_stat_0 works correctly, data_stat_1 prints it coordinates, data_stat_2 sometimes works, the rest never work.
Here is the log of mouse and hotspot (I clicked the spot in the same order as the image map). There appear to be misses.  Chart image attached.
<area shape="rect" coords="402,44,463,70" href="data_stat?title=data_stat_0">
<area shape="rect" coords="481,44,542,70" href="data_stat?title=data_stat_1">
<area shape="rect" coords="560,44,621,70" href="data_stat?title=data_stat_2">
<area shape="rect" coords="639,44,700,70" href="data_stat?title=data_stat_3">
<area shape="rect" coords="718,44,779,70" href="data_stat?title=data_stat_4">
<area shape="rect" coords="797,44,858,70" href="data_stat?title=data_stat_5">
<area shape="rect" coords="876,44,937,70" href="data_stat?title=data_stat_6">
<area shape="rect" coords="955,44,1016,70" href="data_stat?title=data_stat_7">
<area shape="rect" coords="1034,44,1095,70" href="data_stat?title=data_stat_8">
<area shape="rect" coords="1113,44,1174,70" href="data_stat?title=data_stat_9">

12/14/20 19:34:41.256 [info] MOUSE X:432 MOUSE Y:56
12/14/20 19:34:41.256 [info] HOTSPOT VALUE: data_stat_0
12/14/20 19:34:45.996 [info] MOUSE X:514 MOUSE Y:58
12/14/20 19:34:45.996 [info] HOTSPOT VALUE: 481,44,542,70
12/14/20 19:34:49.632 [info] MOUSE X:584 MOUSE Y:54
12/14/20 19:34:49.632 [info] HOTSPOT VALUE: data_stat_2
12/14/20 19:34:53.976 [info] MOUSE X:664 MOUSE Y:57
12/14/20 19:34:58.220 [info] MOUSE X:745 MOUSE Y:55
12/14/20 19:35:02.216 [info] MOUSE X:821 MOUSE Y:51
12/14/20 19:35:06.020 [info] MOUSE X:905 MOUSE Y:52
12/14/20 19:35:10.576 [info] MOUSE X:981 MOUSE Y:52
12/14/20 19:35:14.068 [info] MOUSE X:1060 MOUSE Y:53
12/14/20 19:35:17.888 [info] MOUSE X:1139 MOUSE Y:55

You will see a few format("some_str{}", val);  That is from the fmt library, they work like Python string substitution.

Here is the snippet where I do the drawing and create an image map line

// Draw the label, value, and border
ttf_box_lbl->draw( ceil(ttf_box_lbl_coord.x), ceil(ttf_box_lbl_coord.y), COLOR_XYGRAPH_TEXT, Chart::TopCenter );
ttf_box_val->draw( ceil(ttf_box_val_coord.x), ceil(ttf_box_val_coord.y), COLOR_XYGRAPH_TEXT, Chart::TopCenter );
int lft_x{(int) ceil( brdr_top_lft.x ) }, top_y{(int) ceil( brdr_top_lft.y ) };
int rght_x{(int) ceil( brdr_bttm_rght.x ) }, bttm_y{(int) ceil( brdr_bttm_rght.y ) };
draw_area->rect(lft_x, top_y, rght_x, bttm_y, dp_color, Chart::Transparent);
auto id_str{format("data_stat_{}", i)}; // i is int loop counter
img_map.append(DoCreateImageMapLineForRect(id_str, lft_x, top_y, rght_x, bttm_y, "data_stat"));

Image map line generator method (returns std::string)
std::string fmt_str(u8R"(<area shape="rect" coords="{},{},{},{}" href="{}?title={}">)");
return format(fmt_str, left_x, top_y, right_x, bottom_y, href, title ) += "n";

Assignment of the image map string to the image map handler
if(!img_map.empty() )
{
delete m_image_map_handler_data_stats;
m_image_map_handler_data_stats = new ImageMapHandler(img_map.c_str());
#ifdef _DEBUG
m_log->info("IMAGE MAPn{}n", img_map);
#endif
}
Right click and hot spot handler
void OnMouseRightClick( wxMouseEvent& event )
{
    auto* vp_mgr = m_properties.vp_manager;
    if( vp_mgr )
    {
        if(vp_mgr->isInMouseMoveEvent() ){ return; }
        DoHandleHotSpot( vp_mgr->getChartMouseX(), vp_mgr->getChartMouseY() );
    }
    event.Skip();
}
DoHandleHotSpot( int mouse_x, int mouse_y )
{
if( m_image_map_handler_data_stats )
{
m_log->info("MOUSE X:{} MOUSE Y:{}", mouse_x, mouse_y);
auto hot_spot = m_image_map_handler_data_stats->getHotSpot( mouse_x, mouse_y );
if( hot_spot >= 0 )
{
auto* key { m_image_map_handler_data_stats->getKey( hot_spot ) };
if( key )
{
auto* value { m_image_map_handler_data_stats->getValue( key ) };
if( value )
{
m_log->info( "HOTSPOT VALUE: {}", value );
}
}

}
}
}
2020-12-14 18_59_26-Window.png

  Re: Custom HTML image tag kinda works
Posted by Peter Kwan on Dec-15-2020 14:10
| Reply | Monitor
Hi Rand,

I think the code to get the "title" attribute is:

auto hot_spot = m_image_map_handler_data_stats->getHotSpot( mouse_x, mouse_y );
if( hot_spot >= 0 )
{
    auto* value { m_image_map_handler_data_stats->getValue( "title" ) };
    if( value )
    {
        m_log->info( "HOTSPOT VALUE: {}", value );
    }
}


In HTML syntax, the parameters are encoded like:

href="myPath?title=xyz¶m1=qqq&zzz=123"

The "title", "param1" and "zzz" are the keys, and the "xyz", "qqq" and "123" are the associated values.

If you can getthe value given the key with getValue(const char *key).

https://www.advsofteng.com/doc/cdcpp.htm#ImageMapHandler.getValue2.htm

If your code do not know what keys are available, the getKey method can be used to iterate the keys. Your code simply pass 0, 1, 2, 3, ... to getKey to obtain the keys until getKey returns null, which means there is no more key. The ordering of the keys is not guaranteed. ChartDirector may also include extra key/value pairs, such as a key/value pair for the coordinates.

In our sample code, we use getKey in a loop to retrieve all the keys and display it in a pop up window just for demonstration.

Regards
Peter Kwan