touch screen interface on 360 content.

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.

• 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.

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! 🙂

I've was also successful in Chrome. I hope this can be done natively though as you need to setup the inputs every time you restart the browser or computer. Looks like maybe they are still working on this? I found a message here:

https://community.articulate.com/discussions/articulate-storyline/360-images-not-working-on-windows-touch-devices

Here's my steps but it may be overkill/could be simplified:

1. Find your story.html file and RMB click to open it up in Chrome. 
2. When open, set it to full screen mode by pressing F11.
3. Open up Dev Tools in Chrome by pressing F12. 
4. Find the little mobile icon and make sure to click it til it toggles a light blue color as seen here to turn Mobile mode on:
   
5. Change your Dimensions size to the size of your monitor. 1920X1080 worked for me.
6. Change the Zoom percentage to 100%.
7. Now select your Device Type with the 3 dots menu at top right and make sure Mobile shows up at the top:
   
   
8. You should now be able to close the Dev Tool by pressing F12 again so it's out of the way.
9. Hit the play button and test out the course. 
10. If you still cannot select the screen via touch, try reloading the course by pressing Ctrl + R  and try checking the steps again starting at step 3.

Articulate should really stepup and ensure touchevents work on every device.