Sherzod Posted November 14, 2019 Share Posted November 14, 2019 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 2 Link to comment Share on other sites More sharing options...
Sherzod Posted November 14, 2019 Author Share Posted November 14, 2019 1 Link to comment Share on other sites More sharing options...
Sherzod Posted November 18, 2019 Author Share Posted November 18, 2019 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 6 Link to comment Share on other sites More sharing options...
Fred Montier Posted December 5, 2019 Share Posted December 5, 2019 (edited) 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 2 Link to comment Share on other sites More sharing options...
delagoutte Posted December 9, 2019 Share Posted December 9, 2019 thanks a lot, good sample 1 Link to comment Share on other sites More sharing options...
andyhill Posted December 10, 2019 Share Posted December 10, 2019 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 1 Link to comment Share on other sites More sharing options...
andyhill Posted December 11, 2019 Share Posted December 11, 2019 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 Link to comment Share on other sites More sharing options...
andyhill Posted December 12, 2019 Share Posted December 12, 2019 Please provide work around ASAP Link to comment Share on other sites More sharing options...
Sherzod Posted December 12, 2019 Author Share Posted December 12, 2019 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. Link to comment Share on other sites More sharing options...
andyhill Posted December 13, 2019 Share Posted December 13, 2019 Any progress ? Link to comment Share on other sites More sharing options...
andyhill Posted December 21, 2019 Share Posted December 21, 2019 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; Link to comment Share on other sites More sharing options...
Sherzod Posted December 22, 2019 Author Share Posted December 22, 2019 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 Link to comment Share on other sites More sharing options...
andyhill Posted December 22, 2019 Share Posted December 22, 2019 Fails to fire events in Desktop, fails to load in Mobile iOS 13 ? Link to comment Share on other sites More sharing options...
andyhill Posted December 22, 2019 Share Posted December 22, 2019 OK now, even though I cleared the cache I still had issues so I cleared router - testing ... Link to comment Share on other sites More sharing options...
Fred Montier Posted January 10, 2020 Share Posted January 10, 2020 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. 1 Link to comment Share on other sites More sharing options...
andyhill Posted January 10, 2020 Share Posted January 10, 2020 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). Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now