Image area or region

[NizamUlMulk]

How is possible define areas or regions in a TUniImage?

Ex.. Show some flags in an unique picture, and when click in each flag do something ... as redirect to another form, or another website ... 

 

Or better, show a image map (as attached), and click in a country for do something

In HTML is there map and area tags ... but ... never must change size of controls to make it works

[Abaksoft]

An idea / a mailla (squares) with images (puzzle) :

 

1. Put 9 uniContainers (mailla) on a form :

3 horizontal uniContainers (square),

And 3 others (seconde line)

And 3 others (third line).

 

2. Use a graphical software like CorelDraw to cut countries from ther continent.

This pieces are squares and have the same size.

 

3. Paste these images on your Unicontaners.

 

4. Generate your click event on each unicontainer.

 

Regards.

[Daryl McMurray]

What would really work would be an extended TUniImage that supports the addition of the "usemap" attribute and the addition of a HTML Map tag with Areas.

 

I've figured out how to manually add this to a TUniImage:

 

function afterrender(sender, eOpts)

{

  document.getElementById(sender.el.id).getElementsByTagName('img')[0].setAttribute("usemap","#ImageMap");

  document.getElementById(sender.el.id).innerHTML = document.getElementById(sender.el.id).innerHTML + '

  <map name="ImageMap">

    <area shape="rect" coords="0,0,82,126" href="#">

  </map>

  ';

document.getElementById(sender.el.id).getElementsByTagName('map')[0].getElementsByTagName('area')[0].onclick=function() {

  window.alert('clicked');

  return false; // returning false stops the link being followed

}  

   

}

 

It wouldn't be too hard to create a TUniImage descendant that could store a hotspot list (rectangles, circles and poly) and fire an event.  The time consuming part would be building a hotspot property editor to visually build the hotspot list.

 

I'll add it to my ToDo List

[Daryl McMurray]

OK... I'm actually trying to build this component (TUniMappedImage)  With a property editor to visually define hotspot areas (rect, circle and poly)

I'm descending from TUniImage - 

 

In Designer, I'd like to be able to visually show the hotspots, draw them on the canvas... I don't want to do this at all for the runtime web version... 

 

I know that UniGui is designed to separate design from runtime but... 

 

How do I use the VCLControlClassName method override to supply a designer only version for display?

 

I can see that TUniImage uses "TVCLImage" which I assume does the painting for the design time display of the component... but I don't have the source for that class to be able to create a descendant.  

 

I've tried creating a new vcl class descended from TImage (in the same unit) and using that in a VCLControlClassName override method but it does not seem to work.

 

Any ideas?

[Daryl McMurray]

I can do this by modifying the picture property only at design time... but it seems the "Incorrect" way to do it.  I would much rather do it properly and use VCLControlClassName method override.  Does anyone know how this system works???

[mehamada]

On 2/27/2018 at 8:22 AM, Daryl McMurray said:

OK... I'm actually trying to build this component (TUniMappedImage)  With a property editor to visually define hotspot areas (rect, circle and poly)

I'm descending from TUniImage - 

 

In Designer, I'd like to be able to visually show the hotspots, draw them on the canvas... I don't want to do this at all for the runtime web version... 

 

I know that UniGui is designed to separate design from runtime but... 

 

How do I use the VCLControlClassName method override to supply a designer only version for display?

 

I can see that TUniImage uses "TVCLImage" which I assume does the painting for the design time display of the component... but I don't have the source for that class to be able to create a descendant.  

 

I've tried creating a new vcl class descended from TImage (in the same unit) and using that in a VCLControlClassName override method but it does not seem to work.

 

Any ideas?

did you created it, or you have another solution could you share it's code please?

[mehamada]

On 2/21/2018 at 2:42 AM, Daryl McMurray said:

What would really work would be an extended TUniImage that supports the addition of the "usemap" attribute and the addition of a HTML Map tag with Areas.

 

I've figured out how to manually add this to a TUniImage:

 

function afterrender(sender, eOpts)

{

  document.getElementById(sender.el.id).getElementsByTagName('img')[0].setAttribute("usemap","#ImageMap");

  document.getElementById(sender.el.id).innerHTML = document.getElementById(sender.el.id).innerHTML + '

  <map name="ImageMap">

    <area shape="rect" coords="0,0,82,126" href="#">

  </map>

  ';

document.getElementById(sender.el.id).getElementsByTagName('map')[0].getElementsByTagName('area')[0].onclick=function() {

  window.alert('clicked');

  return false; // returning false stops the link being followed

}  

   

}

 

It wouldn't be too hard to create a TUniImage descendant that could store a hotspot list (rectangles, circles and poly) and fire an event.  The time consuming part would be building a hotspot property editor to visually build the hotspot list.

 

I'll add it to my ToDo List

anther problem the responsive not working , i mean if resizing the image the area posisions changed

[Abaksoft]

Excellent work sherzod !

[Sherzod]

Thank you!