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.
Javascript api to control a tour in an iFrame
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:
Then the normal output html is loaded into this iframe.
Hope this helps.
cheers,
Tony
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>
Hope this helps.
cheers,
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Hi Tony,
your example does not work on my iPad Air 2.
your example does not work on my iPad Air 2.
Bugger, works on desktop and on my Android devices, Samsung S8 and Galaxy Tab. Bloody iOS
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
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
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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Thank you, Tony, works well.
- Isaac Brown
- Posts: 77
- Joined: Tue Jun 13, 2017 12:55 pm
- Location: Australia
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.
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.
Isaac / IBCreative
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
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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
- Isaac Brown
- Posts: 77
- Joined: Tue Jun 13, 2017 12:55 pm
- Location: Australia
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,
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,
Isaac / IBCreative
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
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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
- Isaac Brown
- Posts: 77
- Joined: Tue Jun 13, 2017 12:55 pm
- Location: Australia
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,
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,
Isaac / IBCreative
- Multimediafabrik
- Posts: 63
- Joined: Thu Jun 21, 2018 11:28 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
now you can change the values in the link for the iframe and it will automatically go to the set position
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);
});