Image Maps

[Sherzod]

Hello,

I started a simple implementation without additional libraries, when the implementation is ready..., I will attach here.

https://www.w3schools.com/html/html_images_imagemap.asp

[Sherzod]

[Sherzod]

Hello,

I'm attaching a simple test case, try...

1. To generate coords, I used an online tool:

https://www.image-map.net/

2. UniServerModule.CustomFiles:

files/imageMap.css
files/imageMap.js

mapImage.rar

[Fred Montier]

Really great !

I think a lot o people didn't realize the potential. Since there is no that much comments about it here.

I will make another example using USA maps and publish in a "uniGUI DOES..." series. 

This is really fantastic. I work with some statistic project relate to demographics/maps and  we can produce some nice interfaces mapping figures in such way.

Edited December 5, 2019 by Fred Montier
typos

[delagoutte]

thanks a lot,

good sample

[andyhill]

Thank You Sherzod for this practical example.

I see you are using a HTMLFrame to hold the Chords for the map images - all good.

Question: This HTMLFrame seems to act as a hidden repository to hold the map image co-ordinates and does not paint (setting Hidden Tag to True and/or Top to -249 makes no difference to the outcome of the WebApp).

(1) Is this normal ?

(2) How many Hidden HTMLFrames can one use ? I assume if it contained visual objects they would have been painted if Visible and not outside form rectangle range ? 

Please advise

[andyhill]

Sherzod, the following which works on UniImage does not work on MOBILE UnimImage (Throws "O34.getEl is not a function")???

  with Image.JSInterface do begin
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("alt", "");');
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("id", "image-unique-id");');
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("usemap", "#image-map");');
  end;
 

Please advise ASAP

[andyhill]

Please provide work around ASAP

[Sherzod]

56 minutes ago, andyhill said:

Please provide work around ASAP

Hi! 

This was implemented for the desktop, and I'm not sure how it will behave for the mobile, I’ll check. 

[andyhill]

Any progress ?

[andyhill]

Sherzod, how are we going with the Mobile Implementation ?

Quote

Sherzod, the following which works on UniImage does not work on MOBILE UnimImage (Throws "O34.getEl is not a function")???

  with Image.JSInterface do begin
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("alt", "");');
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("id", "image-unique-id");');
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("usemap", "#image-map");');
  end;

 

[Sherzod]

11 hours ago, andyhill said:

Sherzod, how are we going with the Mobile Implementation ?

Hi Andy,

Sorry for the late response.

Try to make these changes:

1. getEl() replace with element

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with UniImage1.JSInterface do
  begin
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("alt", "");');
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("id", "image-unique-id");');
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("usemap", "#image-map");');
  end;

  with UniImage2.JSInterface do
  begin
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("alt", "");');
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("id", "image-unique-id2");');
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("usemap", "#image-map2");');
  end;
end;

2. imageMap.js

3. Clear browser cache

 

[andyhill]

Fails to fire events in Desktop, fails to load in Mobile iOS 13 ?

[andyhill]

OK now, even though I cleared the cache I still had issues so I cleared router - testing ...

[Fred Montier]

I don't get it. Why you could use it in mobile since the primary effect is hover to select an element.  It's good for country/state map selection etc... just an example. You don't hover your finger in mobile interface. It should be broken into to steps event to work as desktop. That's is the problem.

As a Desktop UI element is just perfect. Too much trouble with google maps elements to make it work alone. And using image like the Sherzod example, solve all my problems.
 

[andyhill]

I do. Simply put, Human Image provides 100 odd areas of interest (not shown) where user can select and retrieve specific information:- Desktop (Hover / Click), Mobile (tap) - works as intended independent of zoom but hopelessly useless if rotated (needs separate vertical and horizontal images due to viewport issues).