Javascript api to control a tour in an iFrame

Isaac Brown · Tue Mar 13, 2018 9:43 pm

Hi all,
I am hoping for some assistance.

I am familiar with using the JavaScript API to control a tour externally. I am yet to work out how to control a tour that is embedded in an iFrame using the API I cannot work out how to make the pano.### api commands work.

What am I missing here?

Thanks in advance.

Tony · Tue Mar 13, 2018 10:29 pm

Hi Isaac,

Here is a sample of a Pano2VR project, in an iframe, controlled externally by api commands.

https://s3-ap-southeast-2.amazonaws.com ... index.html

To use the api commands via the iframe you need to set an ID for the iframe and then call it using "myIframe.contentWindow.pano.###. This is the index.html from the example above:

Code: Select all

<!DOCTYPE html>
<html>
<body>
<iframe id="myIframe" src="iframe.html" width="100%" height="600px" frameBorder="2"></iframe>
</iframe>

		<a onClick="myIframe.contentWindow.pano.moveTo(140,-40,70,10);" href="#">Move To 140,-40</a>
		<a onClick="myIframe.contentWindow.pano.moveTo(-100,40,70,3);" href="#">Move To -100,40</a>
		<a onClick="myIframe.contentWindow.pano.moveTo(-140,30);" href="#">Move To -140,30</a>
</body>
</html>

Then the normal output html is loaded into this iframe.

Hope this helps.

cheers,

Tony

panox · Wed Mar 14, 2018 9:56 am

Hi Tony,

your example does not work on my iPad Air 2.

Tony · Wed Mar 14, 2018 10:10 am

Bugger, works on desktop and on my Android devices, Samsung S8 and Galaxy Tab. Bloody iOS

Tony · Wed Mar 14, 2018 12:15 pm

Hi Harald,

Okay, so a little investigation and a bit of playing around and I have a working version that works in my iPad Air, Samsung S8, Galaxy Tab and Desktop. Can you test it for me.

https://s3-ap-southeast-2.amazonaws.com ... index.html

Tony

panox · Wed Mar 14, 2018 5:36 pm

Thank you, Tony, works well.

Isaac Brown · Thu Mar 15, 2018 9:37 pm

Hi Tony,
Thank you SO MUCH for this info. I haven't tested but this will be the first thing I test when I have the time.

I came across your Pano2VR to Cordova tutorial series which I found extremely useful, thanks! Good to have another Australian here!!

I am compiling a Pano2VR tour inside of Tumult Hype to give another layer of UI design and interaction. Essentially replacing the Pano2VR skin with a Hype skin. This will enable me to add other features to my app and have the panoramas just as one component. Thought this might be of interest to you.

Ill provide my outcome once complete.

Thanks again.

Tony · Fri Mar 16, 2018 12:34 am

Hi Issac,

My pleasure.

I have an older copy of Tumult Hype and I'd be very interested in seeing what you have developed using that platform. I might have to upgrade to the latest version.

Tony

Isaac Brown · Mon Mar 19, 2018 9:19 pm

Hi Tony,
Thanks for your examples above. I have had time to test these out. Your second example does work on iOS, thanks!

I am struggling to replicate this in a HYPE file on iOS (MacOS works great!) though and am hoping you can help me learn. This is a bit off topic so I completely understand if this is something that you cannot assist with.

My files are set up as following:

I am using a HYPE HTML Widget, which is essentially a DIV which contains an iframe. I can access the iframe by doing the following:

var pano2vr = hypeDocument.getElementById('pano2vr').children[0];

More info on a HYPE HTML Widget can be found here:
https://forums.tumult.com/t/how-to-targ ... idget/3603

The above iframe is correctly loading a pano2vr index.html page.

I also have a DIV with an ID of #button01 with the following JS function applied (using jQuery):

var pano2vr = document.getElementById('pano2vrWidget').children[0];

$('#button01').on('click touch', function () {
pano2vr.contentWindow.pano.moveTo(120,0,0,0);
});

This works on MacOS in Chrome.
The Pano2VR iframe runs on iOS but when pressing the #button01 div the pano2vr API is not activated. I have tested with an alert and the on click / touch event is being registered by iOS.

Lastly this is being tested on iOS wrapped in a Cordova app.

I know i'm close. Like is said, I know this is off topic let me know if you can assist I would be extremely gratefui.

Regards,

Tony · Mon Mar 19, 2018 9:50 pm

Hi Issac,

After your first post where you discussed the hype project I downloaded the latest version of Hype Pro and had a play around with the HTML widget and I have to say you've got a lot further than I did! Would it be possible for you to send me your Hype project file and I'll be happy to take a look at it.

cheers,

Tony

Isaac Brown · Tue Mar 20, 2018 6:59 am

Hi Tony,
File attached. It is a slimmed down folder structure of my Pano2VR + Hype + Cordova + NWjs workflow.

You will see that both Pano2VR and Hype export their files to the Cordova > www location. You should have everything you need to open both Hype and Pano2VR.

I'm excited to hear how you go with it. Let me know if you need any assistance with the files.
Kind regards,

UE4U · Thu Apr 14, 2022 5:53 am

Dear tony
but link in iframe, how to i open link and run in master tab ?
when i open my link in iframe, all display only inside iframe

Multimediafabrik · Fri Apr 15, 2022 1:56 pm

you can also add query parameter to you tour:
https://tour.example.com/?node=node3&fo ... =20&pan=10

this way you can set the position with the link you set in the iframe

in your tour index.html you have to add a script that handles the position of the query parameter.

Here's a quick example

Code: Select all

pano.on("configloaded",function(){
	const params = new URLSearchParams(window.location.search);
	let position = {
		node:params.get("node"),
		fov:params.get("fov"),
		pan:params.get("pan"),
		tilt:params.get("tilt"),
	}
	if(position.node) pano.openNext(`{${position.node}}`);
	if(position.fov) pano.setFov(position.fov);
	if(position.pan) pano.setPan(position.pan);
	if(position.tilt) pano.setTilt(position.tilt);
});

now you can change the values in the link for the iframe and it will automatically go to the set position