Add button in iframe pano that triggers scene transition

79pxls · June 4, 2020, 3:27pm

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!!

MaxZieb · June 4, 2020, 6:13pm

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

79pxls · June 4, 2020, 10:00pm

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

79pxls · June 4, 2020, 10:34pm

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.

79pxls · June 4, 2020, 11:20pm

This solution worked para mi:

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

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

Thanks!

MaxZieb · June 5, 2020, 2:25am

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

79pxls · June 5, 2020, 1:19am

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

MaxZieb · June 5, 2020, 7:41am

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

79pxls · June 19, 2020, 6:20pm

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

MaxZieb · June 19, 2020, 6:34pm

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

79pxls · June 19, 2020, 6:35pm

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