Demo: Detective Security Leaks within 360 panorama

Dec 20, 2021

I used to love using 2D office layouts for creating learning activities for different course topics. Learners can explore the virtual office and learn to deal with whatever might actually happened in real world and that always leads to a good learning performance. So when Storyline add the 360 image function, I think I should transform the virtual office from 2D to 360 panorama and see how it works.

Below are the functions I want to test in the new 360 image:

  • Zoom in/out function: I got this worked, however the tooltip won't show while the 360 image is zoomed in, I hope Articulate team will fix this. I think I don't actually need zoom function in this demo but I can see in different applications will need it.
  • Jump between different 360 images: I am satisfied with this, they can be in different slides or different layers.
  • A message(layer) shows properly no matter it is zoomed or not: it won't be a problem if no zoom function here. But since I use zoom function, and a layer will also be zoomed when opening. It took me a little time to figure out how to zoom out first when a layer opens so it will show the correct size I want.
  • The shown message(layer) hides automatically(without clicking close) when user keep exploring: it also works as expect in a 360 image environment.  

One thing I found weird is if I click on any non interactive area of the 360 image, the hotspots I've interacted with will also show at the same time. I assume that's a bug for beta version.

Demo

17 Replies
Sarah Hodge

This is awesome, Joanne! I love the badges at the top to let me know how many I have left to find. And the topic is so perfect for 360° images. Thanks so much for sharing this example with the community! 

The hotspot behavior is expected. You can learn more about that here. I love the ideas you shared to help us improve the 360° learning experience. Would you mind submitting a feature request

Joanne Chen

Thank you Sarah for explaining the behavior of the hotspot,  I can see that behavior could help users aware of where they have interacted. I've updated the demo by adding hints because I found that it will be more difficult for users to find all the "correct" hotspots than in a 2D environment.
I've submitted a feature request for zoom function in 360 image. And I also like having states for 360 image so for example I could change the whiteboard to be cleaned after users click the related hotspot. And I've submitted that too.

Joanne Chen

At first, I used the zoom function built in SL with the jump to time triggers to create the zoom effect. Though I got that work it would also zoom layers too. So I had to add more triggers to fix it (described in the third point of the article). After I post, one day an idea came to me that since we can use JS to scale an image, maybe it could scale the panorama image too since it is a jpg file. And then I instead SL zoom function with JS code and it works perfectly.

The JS code I used is:

var myElement = document.querySelectorAll("[NAME OF THE PANORAMA IMAGE']");
gsap.to(myElement, {duration: 0.5,scale:2});

Ayse Sahin

Hello, in case some of you wants to have the steps to do it : 

You can zoom in and zoom out by executing 2 javascript here :

To zoom in :

var panoramaImg = document.querySelectorAll("canvas");
gsap.to(panoramaImg, { duration:1, scale:2 });

--> You can call the variable with any name
--> The queryselector must be All since it's the Canvas (when inspecting the module, you see that the image is "canvas")
--> Duration can be changed (1 is good for the zooming effect)
--> Scale can be changed too (2 is x2, don't do zoom too much if the quality is not high)


To zoom out :

var panoramaImg = document.querySelectorAll("canvas");
gsap.to(panoramaImg, { duration:1, scale:1 });

Like before but the scale is 1 (100% of the image)

Also, don't forget to execute the javascript with a trigger (here by clicking on the icon 1 to zoom in and on the icon 2 to zoom out)
Don't forget to change hide the icon 1 when icon 2 is normal, hide icon 2 when icon 1 is normal
Don't forget to hide the icon 1 when you click on it, hide icon 2 when you click on it

You can't do it by states (except if you have the solution, in this case, please share us !)

Mekesh Aietan

Hi everyone, 

I have tried adding a new post but haven't had any feedback or direction. 

I am trying to add a tracking of an interaction/knowledge check to the a 360 image. There is a link below to showcase more. 

https://360.articulate.com/review/content/adcecfb0-8fa4-411f-b55d-fad1eb7b8dd3/review

The specific part I am looking at is Part 2 of the course, where the question stays in the same place even when the users is moving around the screen. 


CAN ANYBODY HELP PLEASE? 

Thanks

Mekesh

Math Notermans

One thing to remember... querySelectorAll gets ALL elements of the type 'canvas' in your project. And so the variable is a HTMLCollection. If you only have one canvas element in your Storyline that will not be an issue...if you have more.. do use either querySelector to get a specific one...or just this coding to get a specific one out of a collection.

var panoramaImg = document.querySelector("canvas"); // if you have just one

var panoramaImages = document.querySelectorAll("canvas"); // if you have more
//then you can select any specific on the collection like this.
gsap.to(panoramaImages[1], {duration:1, scale:2 });