Forum Discussion

PennySpacht's avatar
PennySpacht
Community Member
3 years ago

How do you zoom in on a 360° image?

Is there a way learners can zoom in on a 360° image?  It's probably starring me in the face and I'm just not seeing it.  If I can't, I can always add a hotspot with an up close picture of the item, but I see that getting very messy. I want the learner to explore on their own. Ideas? Suggestions? 

Thanks!

Penny

14 Replies

  • Currently, the feature isn't set to allow zooming in like you would if you were just looking at a 360 image online. 

  • Hi Penny!

    As Tom mentioned, we do not have a current feature to allow learners to zoom in on a 360° image in Storyline. 

    Please feel free to submit a feature request and share how this would benefit you. Then, we can update you if it makes it onto our feature roadmap in the future! 

  • PennySpacht's avatar
    PennySpacht
    Community Member

    Thanks Tom & Andrea.  I'll put through a request for this.

    This is my vision: Insurance professionals often look for "clues."

    Example 1: An insurance agent is meeting with the homeowners in their house.  If you look around, there are several items indicating that they are operating a home business - . If the agent doesn't ask the right questions and the homeowners don't disclose the information the business might not be covered.  While I could put a hotspot showing there is mail on the coffee table addressed to "Marie's Let Them Eat Cake," it's not the same as letting learners find the clues for themselves. 

    Example 2: you are an insurance adjuster at the scene of a traffic accident.  Several businesses in the area have security cameras but they are not visible at first glance. This is an important clue as the video could prove that our policyholder was not at fault for the accident. 

    It could also be turned into a fun game. You could "link" multiple rooms together and send learners on a scavenger hunt. Who knows it could be Colonel Mustard in the conservatory with the lead pipe. :) 

     

     

  • PennySpacht's avatar
    PennySpacht
    Community Member

    About 10 years ago we bought a product called Tourweaver.  While it had a lot of bells and whistles for the time, it was a pain to work with. We have no intentions of using them again. But here is a sample of their work https://www.easypano.com/virtual-tour-gallery.html Controls are similar to PDF where you can use + or - to zoom in or out.

  • Hi, I am also very interested in the possibility to zoom in a 3d image.
    In the context of a serious game, it now seems essential to have this option so that the learner can really find hidden objects. Could you program this development?

  • Hello Penny and hello everyone.

    My contribution comes a little late, but I hope it will be useful 🍀

    I had the same situation, and with a JavaScript code (automatically triggered at the beginning of the slide) I managed to create a Zoom effect with the mouse wheel.

    Here's the code and the values "scaleStep" (each zoom "notch") and "maxScale" (zoom power) can be adjusted.

    This is still experimental (so think about testing), but I'm sure there will be people to help and improve this code.

    It's also important to use the recommended image sizes (to avoid blurring with zoom): https://community.articulate.com/series/articulate-storyline-360/articles/storyline-360-adding-and-editing-360-degree-images

    Here's an example if you're interested: https://lesdemos.elearningimpact.com/qt/zoom_360

    ---

    let scale = 1;
    const scaleStep = 0.1;
    const maxScale = 2;

    const slideContainer = document.getElementById('slide-window');
    slideContainer.style.transition = "transform 0.1s";

    slideContainer.addEventListener('wheel', function(event) {
        if (event.deltaY < 0) {
            if (scale < maxScale) {
                scale += scaleStep;
                if (scale > maxScale) {
                    scale = maxScale;
                }
            }
        } else {
            if (scale > 1) {
                scale -= scaleStep;
                if (scale < 1) {
                    scale = 1;
                }
            }
        }

        slideContainer.style.transform = `scale(${scale})`;
        event.preventDefault();
    }, { passive: false });

    • JeremyHaddock-2's avatar
      JeremyHaddock-2
      Community Member

      I have a project where we want to zoom on 360 images. I added your JavaScript and it seems to work great. Thank you!

  • AVPrice's avatar
    AVPrice
    Community Member

    I would like to add on that our team would certainly appreciate this feature also. Will take a look at the java too. Thank you

    • LucianaPiazza's avatar
      LucianaPiazza
      Staff

      Hello AVPrice

      Thanks for reaching out and sharing your voice with us! We do not have any updates to share at this time. I have gone ahead and shared your insight with our product team. We'll be sure to share any updates in this thread so all are in the loop! 

      Have a great afternoon! 

    • Nathan_Hilliard's avatar
      Nathan_Hilliard
      Community Member

      FYI- While the 360 image viewer is not accessible in SL 360, if you really want to manipulate it to allow zoom you can reference this post:

      https://community.articulate.com/discussions/discuss/prevent-vertical-movement-in-360%C2%BA-images/1221414/replies/1221575

      You can use the project file atatched here. You will need to modify bootstrapper.min.js as described in the post.

      Demo: https://paedagogus.org/elh/360_ZoomPin/

       

      • PennySpacht's avatar
        PennySpacht
        Community Member

        Thank you, Nathan for the instructions. Unfortunately, we're not permitted to do any type of code modifications. We previously had someone that had coding skills and was the only person who could maintain or troubleshoot the courses she modified. This created a bottleneck. When she unexpectantly passed away, no one had the knowledge to update/fix her courses.

        I work for an insurance company. I want to create scenarios where the learner is a claims adjuster, and they need to look around and identify damage to a room. If they don't look up, they might not see the water damage on the ceiling. They should be able to zoom in on an item and assess the damage. This is about building observation skills and zoom would help.