(Resolved) How to call scenes via content inside an HTML widget?

(Jobes) #1

Hi. I’m struggling to understand something re: URLs for individual scenes

I have created some interactive 360° content, and have linked to this within an HTML widget in my Hype document so it displays natively. I would like to use various hotspots triggered from inside this piece of content to call different scenes within the wider Hype document. So one hotspot will create a pop-up inside the 360° content, with a ‘more info’ link. If that’s clicked, the user breaks out to the relevant scene.

Both the HTML 360° content .html file and my Hype-generated content .hyperesources & .html are all in same folder on my server.

I have tried to use the first and second methods outlined here…

… but I can’t seem to make the the hotspot in my HTML widget content correctly call the scene # URL

When trying to understand the relationship between the two HTML files I’m a bit lost… is my 360° content being treated as inline, external or something else I’ve not yet considered? As a non-coder I’m experimenting (rather unsuccessfully) to find answers so any help would be greatly appreciated.

N.B. The Hype document has 20+ scenes and I’d prefer not to split it up into smaller separate sections if possible (I’d have to change a lot of other nav elements as a result) but I could do this as a last resort.

(Jobes) #2

Ok, I’ve got it working :smile: Looks like I had some badly formatted Javascript… fixed this and everything is fine.
Here’s the proof-of-concept to show it in action http://anti-dev.com/work/test/tester.html

(JJ) #3

I can someone share how this was exactly done? I have an HTML widget and would like to put in some buttons or hyperlinks that will jump to specific scenes.

I looked at the post:
“Linking to a specific scene from inside and outside of a Tumult Hype document”

But this didn’t help me get it working, although I may have missed something.

Thank you


Awesome, I love panoramic content. What library did you use for the Pano?

(Jobes) #5

I use Pano2VR and Object2VR, each of which output HTML/CSS & use a couple of custom JS elements to display 360° content. Initially I got stuck following the Javascript setup instructions here, but actually it was easy to do.

Once I figured out how to do it properly (by setting up each scene with a separate title, and call it via a custom URL) I was able to make certain hotspots inside the HTML widget trigger those external URLs. It just called the full URL including the appropriate #SCENENAME with a _parent target. Actually very simple.

You can view the final piece here Object VR demo

Only thing I wasn’t able to do in time for the completion deadline was work out a way of triggering a fullscreen action, which I’d like to have done. That uses a JS command in Object2VR, and from memory I couldn’t seem to get that to affect anything outside the HTML widget. I should try and revisit it sometime.

(JJ) #6

Ok thank you, your Panos look great, no stitching errors and very crisp.

So from what you mentioned, I take it you used the # method where you added the custom JS function to load on all scenes. It also sounds like you have it working on a live server.

But how would I be able to get this to work locally, for example if I want to deploy it into a mobile app using Phonegap. All the files will be contained in the project itself.

There must be a way for a widget to call scenes, no?