touch screen interface on 360 content.
Mar 31, 2022
Hello everyone,
We have created a some of the new 360 image content with clickable nodes to fire open images and titles of items around the 360 photo's. We found out after we started developing that the client is using touch screens. When launching the content on the touch screens, the clickable nodes do not seem to function by touching them on the screen, only by clicking with a mouse, or the pad.
Trying to search for help on touch screen capabilities is not turning anything up specific to the new 360 content. Just trying to see if this functionality is left out of those specific nodes, or did i miss a step.
Any help or links would be appreciated.
8 Replies
Hello Ryan,
Great question! If you are able to share, what devices are your clients using? I'm wondering if your Storyline 360 app needs to be updated to the most recent version in order to have the 360 image content display correctly on those devices.
Perhaps you can reach out to the Articulate support team here and they can assist with your specific situation.
Thanks,
Luciana
Hi Luciana, sorry for the late reply but we had to reach out to our customer to get the specs on the touch screens.
The in classroom ones are iiyama ProLite T2252MSC-B1 LED monitor 22" touchscreen
and the take home laptops are Microsoft Surface Book 3
Will reach out to the Articulate support team like you suggested to see if there is anything we can do.
The Touch event is default not used in Storyline. However you can add it with Javascript as a custom event and trigger whats needed.
Hi Math,
Thank you for the reply, it is greatly appreciated. I'm in no way a java script person, do you have any hints on where to find the code, or at least where a person can start looking to implement this in a program. I've starting looking it up online, unfortunately not having much luck for this particular requirement.
Thanks again.
Hi, we are struggling with the same issue. Did you find a solution for touch screens yet?
What type of JavaScript did you apply?
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
https://www.w3schools.com/jsref/obj_touchevent.asp
Checking for an actual Storyline sample now.
Basically this is the workflow.
Add this in a Slide Trigger that gets executes on timeline start.
/*
As Storyline doesnot support all mouseEvents default we are adding that here
*/
var wrapper = document.querySelector("#wrapper");
//var rotateButton = document.querySelector("[data-acc-text='rotateButton']");
if (wrapper.addEventListener)
{
// IE9, Chrome, Safari, Opera
wrapper.addEventListener("mousedown", MouseDownHandler, false);
wrapper.addEventListener("mouseup", MouseUpHandler, false);
// Firefox
wrapper.addEventListener("DOMMouseDown", MouseDownHandler, false);
wrapper.addEventListener("DOMMouseUp", MouseUpHandler, false);
}
// IE 6/7/8
else
{
wrapper.attachEvent("onmousedown", MouseDownHandler);
wrapper.attachEvent("onmouseup", MouseUpHandler);
}
Now your complete Storyline will act on touch.
Use the handlers to act upon the touches.
function TouchStartHandler(event) {
var touches = event.changedTouches;
}
function TouchEndHandler(event) {
var touches = event.changedTouches;
}
Do check this article to learn more about the results you can get from the touchevents. Remember...touching can be done with multiple fingers, so you get more info then with a mouseclick.
https://jenkov.com/tutorials/responsive-mobile-friendly-web-design/touch-events-in-javascript.html
Thank you for this Math.
Our files were too intricate and big for this solution with over 20 interactive environments, though, and we could not get it functioning fluently in time.
I don't know exactly where our solution came from because we had a team working on this, but we got the touch screen interaction with the 360° view and triggers to work through a work-around solution in Firefox.
https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/
I hope this solution helps someone else in future as well.
Hi Wilmari,
Thanks so much for sharing the solution that worked for you! I'm sure other community members who encountered the same issue will find this helpful.
Enjoy the rest of your day, and happy developing! 🙂