Add button in iframe pano that triggers scene transition

Scenes
1

Morning Hypers!
I looking for a little help with a HTML widget iframe button.
Here’s the set up. (everything lives in the same folder, same server)

Hype Scene 1:
HTML Widget with Specified URL (/pano/index.html) showing a pan0 (made with Marzipano)

Hype Scene 2:
Regular Hype scene

I’m looking to add a button/link in the pano in scene 1 that when fired just transitions to scene 2.
As the pano is using a 3D canvas I can’t just add a hype button.

Any help is muchly appreaché!!
Thanks!!

2

Here is an example using the Hype HTML Widget but should also work with manual iFrames.
TriggerHypeParentFromHTMLWidget.hype.zip (28,3 KB)

2 Likes
3

test.zip (121.2 KB) Whats up Max!
Thanks for this suggestion.
I tried to implement this using both manual iframe and also specified url but I cant get it to fire.
I’ve included a demo file incase anyone is able to help.
Thanks!!!
3|690x372

7
7968×522 15.8 KB

4

To clarify…the message example you gave works…but if I try to change to the next scene with:
hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)
it fails.

5

This solution worked para mi:

var hypeDocument = window.parent.HYPE.documents[‘index’];

	hypeDocument.showSceneNamed('Area2-1',
	hypeDocument.kSceneTransitionCrossfade, 1.1);

Thanks!

6

The other way of addressing it should also work. Hardcoding the document name only works if the document name doesn’t change. Which it unfortunately sometimes does.

This approach takes the first found document in the parent so it works despite the name but has the shortcoming that it might fail or be error prune if there are more than one Hype documents on the parent page.

	var hypeDocument = Object.values(window.parent.HYPE.documents)[0];
	hypeDocument.showSceneNamed('Area2-1',
	hypeDocument.kSceneTransitionCrossfade, 1.1);

Or if you use the document name make sure to cover the case with index. Hype exports in preview mode as index but in exports as the desired name.

	var hypeDocument = window.parent.HYPE.documents['YOUR-EXPORT-NAME-HERE'] || window.parent.HYPE.documents['index'];
	hypeDocument.showSceneNamed('Area2-1',
	hypeDocument.kSceneTransitionCrossfade, 1.1);
2 Likes
7

This worked great! Thank you @MaxZieb
By chance to you have a method to unload an iframe on click?
I was working on this but no luck yet…

var frame = hypeDocument.getElementById(“scaled-frame”),
frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.removeChild(frameDoc.documentElement);

8

Just set the iframe src to “about:blank”.

9

Can this be applied to a persistent symbol also?
I’l like to trigger a timeline in the symbol from within the iframe.

The symbol will be a navigation screen that fades in over the scene.

Something like this?

var hypeDocument = Object.values(window.parent.HYPE.documents)[0];
	hypeDocument.getSymbolInstanceById('id',
	hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, false);
10

You can always use the extension Hype Global Behavior as it doesn't require any coding and works across all Hype documents and iFrames …

Your code should also work but you nested it wrong:

var hypeDocument = Object.values(window.parent.HYPE.documents)[0];
var symbolInstance = hypeDocument.getSymbolInstanceById('YOUR_SYMBOL_ID');

symbolInstance.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, false);
1 Like
11

I’ll read that post after lunch and get that cooking!
Cheers mate

1 Like