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

26 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 });

Amelia King

It's great to hear that you are exploring the use of 360 panorama images for creating engaging learning activities! It seems like you have already tested various functions and encountered a few issues. Let's address each of them:

  1. Zoom in/out function: You mentioned that the zoom function is working, but the tooltip doesn't show when the image is zoomed in. This could be a limitation or bug in the current version of the software you're using. It would be beneficial to report this issue to the Articulate team so they can be aware of it and consider fixing it in future updates.

  2. Jump between different 360 images: It's great to hear that you are satisfied with the ability to jump between different 360 images. This functionality allows for more immersive and interactive experiences within your learning activities.

  3. Message (layer) visibility while zoomed: You mentioned that when you open a layer while zoomed in, it takes some time to figure out how to zoom out first so that the layer displays at the correct size. It's important to ensure that the layer is set up to display at the desired size and position within the zoomed-in environment. Consider adjusting the layer properties or settings to achieve the desired outcome.

  4. Automatic hiding of shown messages (layers): You mentioned that the shown message (layer) hides automatically when users keep exploring, which is the expected behavior in a 360 image environment. This is great as it allows users to focus on exploring the virtual space without being interrupted by unnecessary overlays.

  5. Hotspots showing when clicking non-interactive areas: You observed that clicking on non-interactive areas of the 360 image causes the hotspots you've previously interacted with to show simultaneously. This does sound like a bug or unexpected behavior, especially if the hotspots are not intended to be visible in non-interactive areas. You may want to report this issue to the Articulate team so they can investigate and address it.

Overall, it seems like you have made good progress in testing the functions of the 360 panorama image within your learning activities. Remember to provide feedback and report any issues you encounter to the software provider, as this can contribute to improving the functionality and user experience for future versions.

Mishrik Khan

In the new 360 image functionality in Storyline, the user has tested several functions, including zoom in/out, jumping between different 360 images, displaying messages (layers) properly, and having them hide automatically while exploring. However, they found a bug in the beta version where clicking on a non-interactive area of the 360 image causes previously interacted hotspots to show simultaneously...!

Riaz Ahmad

To enlarge:

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

--> Any name can be used to refer to the variable.
--> Since the image is a canvas, the query selector must be All (you can see this by analyzing the module and noticing that the image is a "canvas").
- Duration is adjustable (1 works well for the zooming effect).
--> You can also vary the scale (2 is x2, don't zoom in too much if the quality is low).


For enlarge:

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

Similar to previously, but with a scale of 1 (the entire image).

Additionally, remember to run the javascript with a trigger (in this case, by clicking on icons 1 and 2 to zoom in and out, respectively).
Do not neglect to replace icons 1 and 2 are normal, conceal them. When icons 1 and 2 are normal, reveal them.
Don't forget to click on icon 1 to conceal it, and click on icon 2 to hide it.

You can't do it by state (unless you already know the answer; in that case, please share it with us!)

Maura Frankline

It seems that the tooltip functionality might be disabled when the 360 image is zoomed in. This could be due to a conflict in the code or settings. I recommend checking the code for any conditions or events related to zooming that might be affecting the tooltip display. Additionally, reviewing the plugin or library documentation for specific guidance on tooltips during zoomed-in states could be helpful in resolving this issue.