Forum Discussion
360 images: no annotations?
It is bizarre to me that you can't add simple text objects to Storyline immersive training lessons. I'll add an example from something I developed using an older tool.
In CenarioVR, adding a text annotation to a 360 image is only slightly more complex than adding text to a normal slide in Storyline. In SL, annotating a 360 image would seem to require my opening the image in Photoshop and adding it directly to the bitmap. It's pointless extra work for the developer and less flexible.
Please, please tell me I'm missing something obvious and it's really easy to add text to the image.
4 Replies
- CarlFink1Community Member
At the very, very least, can you add a property so the label on a marker is displayed by default, not hidden? Please? Or a slide trigger I can use to show labels? You know, put the client developer (me) in charge of my product, not whoever is developing Storyline? I'm sure she's great, but I want to actually create the stuff myself, not follow some hyperstrict template she worked on.
- Nathan_HilliardCommunity Member
You already know the answer, but I'll add this for the benefit of anyone else who might come along and read your post.
Just for the sake of argument, if you want to manually show or hide the marker text panels you can can follow this general approach (included mainly as a starting point for further exploration):
const tsImage = object('5tuAs0h4VnH'); let elTsImage = document.querySelector("[data-model-id='"+tsImage.name+"']") let panel = elTsImage.querySelectorAll(".panel-el") //console.log("tsImage:", elTsImage) //console.log("Panels:", panel) //Assumes 2 markers with text panels are available panelVisibilityMap = [1,1] //1= visible, 0 = hidden panel.forEach((e,i,a)=> { if(panelVisibilityMap[i]) { panelVisibilityMap[i] ? e.classList.add("panel-shown") : e.classList.remove("panel-shown") e.style.visibility = panelVisibilityMap[i] ? "visible" : "hidden" } })FYI- The panels are listed in the DOM in the reverse order they are listed in the 360-degree image editor panel. To show/hide the panel requires a style change and a class addition/removal for each affected marker text panel.
This technically works, BUT the text panels are not dynamically updated before the markers are clicked or during image click and drags movements. Showing them will just yield stationary and likely mispositioned text.
Another option would be to replace or augment the clickable markers with HTML text, or possibly add an image of your label. This would take some work, and require resize management. From my understanding, the visible markers themselves are technically part of (embedded into) the movable image. The clickable markers are actually invisible overlays that track the markers embedded into the image. If you were to make them visible, they would resemble the embedded markers and you would see them track to approximately the same locations. You could use the associated DOM container to display something else over the embedded visible markers, but you cannot actually get rid of the visible markers entirely. Whatever you added would roughly track with the image movements however.
- CarlFink1Community Member
I did not know that. I've never used JS with Storyline. (With Lectora, yes.)
Thanks. That looks doable. Not ideal, but OK. I'm actually sort of tempted to just PhotoShop my text right into the image, which will (obviously) guarantee it always being placed correctly. I can leave my .psd file for my successor with all the layers clearly labeled, so they can modify the text. Hmm ....