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.
Hi @Ryan,
Thanks for sharing your svg sample with the community. It gave us some ideas and we may come out with a little usage sample after this Easter week-end
Thanks to the work of @Ryan, I was able to quickly put together the following samples that use SVG files with irregular shapes, that act as buttons, to trigger actions within an Experience.
You can download file here ==> Map SVG USA States.zip
Local Network Triggers, an HTML Frame Asset and, a very, very small amount of JavaScript is all it took to get this example working!
Please note: Local Network Triggers only work on Windows PCs at this time.
So, how was the sample built?
Inside the HTML Frame
Within the HTML Frame Asset we have some CSS, JavaScript, and HTML code that contains the SVG map. SVG markup can be manipulated by JavaScript (and CSS) and weāll use a small amount of code to create links.
The JavaScript below is being used to attach a link to each state on the map. The only difference between the links is the 2 letter abbreviation being sent as the āmessageā attribute.
<script>
var stateElements = document.getElementById('states').childNodes;
var stateCount = stateElements.length;
for (var i = 0; i < stateCount; i++) {
stateElements[i].onclick = function()
{
var qsparam = "http://127.0.0.1:8000/intuiface/sendMessage?message=" + this.getAttribute('id');
var xhr = new XMLHttpRequest();
xhr.open('GET', qsparam, true);
xhr.send();
}
}
</script>
This is how the SVG map is structured within our HTML, allowing you to see how the JavaScript is working:
<g class="state" id="states">
<path id="AK" d="M161.1 453.7l-.3 85.4 1.6 1 3.1.2 1.5-1.1h2.6l.2 2.9 7 6.8.5 2.6 3.4-1.9.6-.2.3-3.1 1.5-1.6 1.1-.2 1.9-1.5 3.1 2.1.6 2.9 1.9 1.1 1.1 2.4 3.9 1.8 3.4 6 2.7 3.9 2.3 2.7 1.5 3.7 5 1.8 5.2 2.1 1 4.4.5 3.1-1 3.4-1.8 2.3-1.6-.8-1.5-3.1-2.7-1.5-1.8-1.1-.8.8 1.5 2.7.2 3.7-1.1.5-1.9-1.9-2.1-1.3.5 1.6 1.3 1.8-.8.8s-.8-.3-1.3-1c-.5-.6-2.1-3.4-2.1-3.4l-1-2.3s-.3 1.3-1 1c-.6-.3-1.3-1.5-1.3-1.5l1.8-1.9-1.5-1.5v-5h-.8l-.8 3.4-1.1.5-1-3.7-.6-3.7-.8-.5.3 5.7v1.1l-1.5-1.3-3.6-6-2.1-.5-.6-3.7-1.6-2.9-1.6-1.1v-2.3l2.1-1.3-.5-.3-2.6.6-3.4-2.4-2.6-2.9-4.8-2.6-4-2.6 1.3-3.2V542l-1.8 1.6-2.9 1.1-3.7-1.1-5.7-2.4h-5.5l-.6.5-6.5-3.9-2.1-.3-2.7-5.8-3.6.3-3.6 1.5.5 4.5 1.1-2.9 1 .3-1.5 4.4 3.2-2.7.6 1.6-3.9 4.4-1.3-.3-.5-1.9-1.3-.8-1.3 1.1-2.7-1.8-3.1 2.1-1.8 2.1-3.4 2.1-4.7-.2-.5-2.1 3.7-.6v-1.3l-2.3-.6 1-2.4 2.3-3.9v-1.8l.2-.8 4.4-2.3 1 1.3h2.7l-1.3-2.6-3.7-.3-5 2.7-2.4 3.4-1.8 2.6-1.1 2.3-4.2 1.5-3.1 2.6-.3 1.6 2.3 1 .8 2.1-2.7 3.2-6.5 4.2-7.8 4.2-2.1 1.1-5.3 1.1-5.3 2.3 1.8 1.3-1.5 1.5-.5 1.1-2.7-1-3.2.2-.8 2.3h-1l.3-2.4-3.6 1.3-2.9 1-3.4-1.3-2.9 1.9h-3.2l-2.1 1.3-1.6.8-2.1-.3-2.6-1.1-2.3.6-1 1-1.6-1.1v-1.9l3.1-1.3 6.3.6 4.4-1.6 2.1-2.1 2.9-.6 1.8-.8 2.7.2 1.6 1.3 1-.3 2.3-2.7 3.1-1 3.4-.6 1.3-.3.6.5h.8l1.3-3.7 4-1.5 1.9-3.7 2.3-4.5 1.6-1.5.3-2.6-1.6 1.3-3.4.6-.6-2.4-1.3-.3-1 1-.2 2.9-1.5-.2-1.5-5.8-1.3 1.3-1.1-.5-.3-1.9-4 .2-2.1 1.1-2.6-.3 1.5-1.5.5-2.6-.6-1.9 1.5-1 1.3-.2-.6-1.8v-4.4l-1-1-.8 1.5h-6.1l-1.5-1.3-.6-3.9-2.1-3.6v-1l2.1-.8.2-2.1 1.1-1.1-.8-.5-1.3.5-1.1-2.7 1-5 4.5-3.2 2.6-1.6 1.9-3.7 2.7-1.3 2.6 1.1.3 2.4 2.4-.3 3.2-2.4 1.6.6 1 .6h1.6l2.3-1.3.8-4.4s.3-2.9 1-3.4c.6-.5 1-1 1-1l-1.1-1.9-2.6.8-3.2.8-1.9-.5-3.6-1.8-5-.2-3.6-3.7.5-3.9.6-2.4-2.1-1.8-1.9-3.7.5-.8 6.8-.5h2.1l1 1h.6l-.2-1.6 3.9-.6 2.6.3 1.5 1.1-1.5 2.1-.5 1.5 2.7 1.6 5 1.8 1.8-1-2.3-4.4-1-3.2 1-.8-3.4-1.9-.5-1.1.5-1.6-.8-3.9-2.9-4.7-2.4-4.2 2.9-1.9h3.2l1.8.6 4.2-.2 3.7-3.6 1.1-3.1 3.7-2.4 1.6 1 2.7-.6 3.7-2.1 1.1-.2 1 .8 4.5-.2 2.7-3.1h1.1l3.6 2.4 1.9 2.1-.5 1.1.6 1.1 1.6-1.6 3.9.3.3 3.7 1.9 1.5 7.1.6 6.3 4.2 1.5-1 5.2 2.6 2.1-.6 1.9-.8 4.8 1.9zM46 482.6l2.1 5.3-.2 1-2.9-.3-1.8-4-1.8-1.5H39l-.2-2.6 1.8-2.4 1.1 2.4 1.5 1.5zm-2.6 33.5l3.7.8 3.7 1 .8 1-1.6 3.7-3.1-.2-3.4-3.6zM22.7 502l1.1 2.6 1.1 1.6-1.1.8-2.1-3.1V502zM9 575.1l3.4-2.3 3.4-1 2.6.3.5 1.6 1.9.5 1.9-1.9-.3-1.6 2.7-.6 2.9 2.6-1.1 1.8-4.4 1.1-2.7-.5-3.7-1.1-4.4 1.5-1.6.3zm48.9-4.5l1.6 1.9 2.1-1.6-1.5-1.3zm2.9 3l1.1-2.3 2.1.3-.8 1.9h-2.4zm23.6-1.9l1.5 1.8 1-1.1-.8-1.9zm8.8-12.5l1.1 5.8 2.9.8 5-2.9 4.4-2.6-1.6-2.4.5-2.4-2.1 1.3-2.9-.8 1.6-1.1 1.9.8 3.9-1.8.5-1.5-2.4-.8.8-1.9-2.7 1.9-4.7 3.6-4.8 2.9zm42.3-19.8l2.4-1.5-1-1.8-1.8 1z">
<title>Alaska</title>
</path>
<path id="AL" d="M628.5 466.4l.6.2 1.3-2.7 1.5-4.4 2.3.6 3.1 6v1l-2.7 1.9 2.7.3 5.2-2.5-.3-7.6-2.5-1.8-2-2 .4-4 10.5-1.5 25.7-2.9 6.7-.6 5.6.1-.5-2.2-1.5-.8-.9-1.1 1-2.6-.4-5.2-1.6-4.5.8-5.1 1.7-4.8-.2-1.7-1.8-.7-.5-3.6-2.7-3.4-2-6.5-1.4-6.7-1.8-5-3.8-16-3.5-7.9-.8-5.6.1-2.2-9 .8-23.4 2.2-12.2.8-.2 6.4.2 16.7-.7 31-.3 14.1 2.8 18.8 1.6 14.7z">
<title>Alabama</title>
</path>
So, when you click on Illinois, āILā will be attached to the URL for the shape that represents Illinois:
http://127.0.0.1:8000/intuiface/sendMessage?message=IL
NM when you click on New Mexico, and so on for every state:
http://127.0.0.1:8000/intuiface/sendMessage?message=NM
The Local Network Triggers
The Local Network Trigger filters a spreadsheet using the message value, when a new message is received. When the Experience receives the message, http://127.0.0.1:8000/intuiface/sendMessage?message=IL
, it uses IL
as the filter value.
And, voilĆ - the data from the Excel spreadsheet for the individual state is shown in the Experience.
Two (or More) SVG Files In The Same Experience
Letās say that you want to add more than one SVG file to an experience. In that case, you will need to use multiple parameters in your links.
In the following experience, I have 2 maps: the World Map and the US Map.
You can download the file here ==> Map SVG Sample.zip
In order for the Local Network Trigger to know which map the message is coming from, we add two parameters to each URL in the JavaScript.
World Map:
var qsparam = "http://127.0.0.1:8000/intuiface/sendMessage?message=world¶meter1=" + this.getAttribute('data-id');
US Map:
var qsparam = "http://127.0.0.1:8000/intuiface/sendMessage?message=usa¶meter1=" + this.getAttribute('id');
Did you spot the difference between this code and the previous, US States example?
For the World Map, Iāve added world
as the message
parameter. In the US Map Iāve added usa
to the message parameter .
The dynamic variable has been moved to parameter1
and the actions within the experience have been updated to reflect this change as well.
The filter on the spreadsheets for the US State and Country data are now being filtered by Parameter1
.
And, thatās it! Now there wonāt be any confusion between the country AR (Argentina) and the US State, AR (Arkansas).
Adding Links Without JavaScript
There are a number of different ways you could use SVG images in conjunction with Local Network Triggers and the HTML Frame Asset. You donāt need to use JavaScript to build the links. In this case, I was using a freely available map from WIkimedia and it was easier to add (or copy/paste ) a few lines of code into the HTML rather than manually adding links for each state.
However, this article shows you how to edit SVG to add links if you are not familiar with JavaScript.
And, if you need a free program to edit SVG files graphically, I would recommend Inkscape.
I hope these examples help you to create uniquely shaped buttons within your Intuiface Experiences! Again, a big thank you to @Ryan for putting the initial code and graphics together.
@Joshua brilliant execution mate, that looks and works amazing. You could use this for so many things, gamify it even further with a time-based countdown (like find country xā¦), Iād love to do this with a world map, have a Globe with conductive paint linking to an IO device, and each country would be a touchpoint relating to a country ID, then it displays the data on the screen.
Will download your example, again great to see this community collab on cool stuff!
@Ryan, Iām really glad you liked the examples! I feel like you did the majority of the work with the your example in CodePen so, thanks again.
I would love to see any kind of conductive paint example used in conjunction with Intuiface - I hadnāt really heard of the stuff before you mentioned it. Quickly found this cool video that shows a few examples and now Iām thinking of a number of interesting ways it could be integrated:
@Joshua I second @Ryan comment, excellent execution! I really like the demo.
I notice a trend lately, which was initiated by @Seb a while ago. Itās the ability to stretch Intuiface by connecting it with third party apps through web and network triggers, JS and APIs. This is an Intuiface strength that is important to highlight. Thanks for sharing your work.