Is it possible to make an irregularly shaped image clickable? Like a touching a country on a map and showing information about that country. Example:
Displaying a map of Africa and making Libya a touchable object which displays more information about Libya.
Hi @j-geis,
This is not possible at the moment but that’s a known enhancement possibility for our future roadmap.
Seb
What about breaking the map image up in Photoshop, loading them into your content library, then dropping them into the scene as buttons, assembled into the whole continent?
That would work, but you end up with a lot of overlap since button shapes are square. I thought about using a circle on tap and placing within the country, but you still loose a little tappable real-estate depending on the shape of the country.
If you drag a button into your scene, then left click the button icon in the Properties panel, you get the Image Button option. After selecting that option, you’ll see an Images pane appear lower down in properties; here, you can navigate to the images you want to use for Released and Pressed states in your Content Library (could be the same image, obviously). This way, you’re not dealing with polygons but with whatever images–including maps of African countries–you choose. Hope this helps.
Images are also rectangular in shape, event if it’s a png with a transparency around the shape of the country. It would be nice if we could use svg which could be irregular in shape.
Here is a possible solution that worked for us when we had to create rounded interactive areas and a player in the middle. We replicated and overlapped rectangular buttons to cover the clickable surfaces and made the buttons transparent.
Awesome. Thank you.
Hello
I’d like to ask the same question. For now I’m building and experience with the free composer and it has no free hand shapes or editable shapes to trigger… Is there a chance I’ll have this tool or option once I buy a licensed version?
Thank you!
Hi @Zoltan,
Unfortunately, this is not (yet) available in Intuiface. The Free edition of Composer enables you to test 100% of the features of the paid version.
Seb
Hi Seb!
I see, thank you!
Z.
Hi Zoltan,
If you know how to create SVG images, you can import into HTML, then use jQuery to interact with Intuiface assets using Remote Actions.
I wanted to test this myself so I made a quick example (attached), that May help someone else.
I used a HTML asset for the Map, with a simple jQuery function which targets the Carousel
jQuery(document).ready(function($){
$('svg path').on("click", function(e){
$('.active').removeClass('active');
$(this).addClass('active');
// alert(this.id);
$.get("http://127.0.0.1:8000/intuifacepresentationplayer/presentation/currentspace/Carousel/ScrollToAsset?strAssetName="+this.id);
});
});
I learnt from Sebs info: Remote Actions Builder!
And I used the Query Builder to create the link: https://myintuiface.intuilab.com/remote-actions-builder/
Hopefully this helps.
html-link-interaction.zip (8.5 MB)
Thank you Ryan,
Unfortunately I am supper beginner, know nothing about codes. I don’t even know yet what is this remote builder, I have to educate myself a bit more for this kind of solutions. However I thought the same, just import to the composer the exact shape as a png and trigger. Anyway, a basic bezier tool hopefully will come soon, so we will be able to skip this plus step with extra imported media.
Thank you again anyway for your response!
Z.
No worries Zoltan,
Yeah it makes sense if/when it will be delivered simply via the app.
I knew nothing of triggers either, that’s why I did that quick demo last night to learn, and in case it helped.
Definitely stick with intuiface, it’s awesome, and a great community here full of knowledge.
so you had to create multiple rectagles for a single touch area?
how did you combine both rectangles?
did you just copy paste the rectnagles properties?
@pquest The simplest way is to make sure that one rectangle has all the properties and scripts working as expected, then you CTRL-D to duplicate it and you can reposition it everywhere you want.
@Ryan Thanks for the JS solution! So cool, I need to experiment with it. @Seb has been inspiring me on using remote commands, APIs, Web Triggers and many more things 
Hey @PQuest , When creating SVG’s, all the data you need to target them is in the vector code in the path, Example:
<path d="M705.095473,347.358975L703.185541,347.101503L699.259904,349.734781L698.161758,348.598999L698.420314,345.662495L696.381534,343.613834L692.809190 " data-id="AF" data-name="Afghanistan" id="AF"/>
You then use Javascript to target the elements, or “id”
this.getAttribute('data-name')
Then using the awesome example from Seb, you can target your Intuiface object… It’s actually brilliant, and I just learned this.
Check out this SVG clickable map I forked from someone on Codepen to see what i mean:
https://codepen.io/404ryannotfound/pen/BaNbYvo
@tosolini Its pretty simple right, and works a treat, thanks to @Seb example and guidance. Yeah it would be even better to have vector drawing capabilities inbuilt like GitHub - SVG-Edit/svgedit: Powerful SVG-Editor for your browser, but this works very well.
Thank you
Thanks alot
Hi,
Yes, I made it now as @tosolini wrote above… Just with a bunch of triggered rectangles. I could have exported the exact shapes as png-s and trigger those images for tap, just to make sure users can not “not touch” the rectangle when they intend to touch a room with a more complicated shape.