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
Luciana Piazza

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

 

Ryan Michael Zwicker

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. 

Ryan Michael Zwicker

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.

Math Notermans

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

Wilmari van der Merwe

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.

  • We published our docs for the web so that we could run them offline. (There was not very good internet connectivity where we showcased our project, and it is over 1GB)
  • Open the story.html file with Firefox web browser on the touch screen PC.
  • Once it is open, activate the responsive design mode. (Ctrl + Shift + M).
    https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/
  • Play around with the settings. One of the iPad settings worked for us.
  • Remember to enable touch mode as well.

I hope this solution helps someone else in future as well.