|
Topic: Tour embedding solutions |
 |
|
madmux |
 |
Standard Member
 |
 |
Lithuania
August-03-2010
246 Posts |
|
|
|
Hello,
There were several attempts trying to embed tours into external website. Until now 2 methods were proposed.
First one - was to use Flash VR (swf) publishing. The bad thing about this approach was that the whole tour has to be loaded before starting first scene. I proposed a solution which offered custom preloader, which could be found hehe: http://www.optitecha.lt/file/view/10/8. Still the problem of large file remained.
Another - was to use Flash VR (html) publishing along with iframes. While the html mode offers lots of advantages, using iframes is not very attractive and not allways possible as some external sites or CMS components wants .swf for embed and nothing more.
Togeather with pixelator we managed to find a way to the third approach. Using Flash VR (html) mode for publishing mode with embeding .swf (twviewer.swf) file. It was not possible, because .html file has critical variable for twviewer.swf - configuration file name. So, if someone was embedding twviewer.swf directly - the configuration file name by default was config_essimatour.bin, viewer couldn't load it and the loading stopped.
Therefore the simple solution is to rename your tour configuration file (with .bin extension) to config_essimatour.bin. That's all - now you may enjoy advantages of both approaches.
Best wishes,
Madmux
------------- My Tourweaver components: http://www.optitecha.lt/categories/3
|
|
|
|
|
nerjaace |
 |
Platinum Member
 |
 |
May-10-2008
585 Posts |
|
|
|
Nice work Madux & Pixelator, I really appreciate your time spent on this good work.
|
|
|
|
|
360panz |
Standard Member
 |
 |
September-10-2011
17 Posts |
|
|
|
I believe I was more of a crash test dummy than a help
Thank you madmux for taking time out of your busy schedule and helping with this, greatly appreciated!
One thing using this technique, I have noticed. If you use either of the .html pages tourweaver creates (file-name.html & prefix-file-name.html) they do not render. You will need to embed the tour when changing the name of .bin file.
This embed technique works perfectly in wordpress. I'm now also able to embed the tour in a facebook post. Using the fb:og (open graph) meta tags, I am able to hard code the ones repeatably used in the header.php and use the custom fields in wordpress to call the thumb and video. Users can now view the embedded tour in facebook without leaving.
Best regards,
360panz aka pixelator
|
|
|
|
|
Guest |
Standard Member
 |
 |
April-23-2002
-12 Posts |
|
|
|
Thank for your time and hard work, Madmux.Your solution is very useful and professional. Great job! Tourweaver7 will be supported Facebook Shareing features which you can embed your tour in the Facebook and share with friends.
|
|
|
|
|
vilmer |
 |
Gold Member
 |
 |
April-08-2006
218 Posts |
|
|
|
I just found out myself about this mystery 'config_essimatour.bin', wish I had red this post before.
I just managed to merge the tourweaver flash output with the html5 output from another application made by some gnomes. So the tour will show the other html5 tour embedded instead of flash when used on an iThing.
Anyway, I noticed that when I use this method, calling twviewer.swf and using config_essimatour.bin, I loose my tourweaver splash screen with custom loading indicator. Is that correct?
**edit: I noticed that none of the so.addParam and so.addVariable work anymore. Maybe someone who actually knows what he's doing can have a look at this code?
Thanks
[code]
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("9.0.0")) {
// TOURWEAVER YADAYADA:
var so = new SWFObject("twviewer.swf", "sotester", "100%", "100%", "9.0.0", "#FFFFFF");
so.addParam("allowNetworking", "all");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
//<!-%% Share Mode %%->
so.addVariable("lwImg", "resources/splash2.jpg");
so.addVariable("lwBgColor", "255,146,177,205");
so.addVariable("lwBarBgColor", "255,255,255,255");
so.addVariable("lwBarColor", "255,0,255,0");
so.addVariable("lwBarBounds", "-70,59,140,70");
so.addVariable("lwlocation", "4");
so.addVariable("lwShowLoadingPercent", "true");
so.addVariable("lwTextColor", "255,0,0,0");
so.addVariable("iniFile", "config_essimatour.bin");
so.addVariable("progressType", "1");
so.addVariable("swfFile", "resources/load.swf");
so.addVariable("percentType", "0");
so.addVariable("sizeFile", "filesize.txt");
so.addVariable("href", location.href);
// GNOME YADAYADA:
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "pano";
attributes.name = "pano";
attributes.align = "middle"
swfobject.embedSWF(
"twviewer.swf", "container",
"100%", "100%",
"9.0.0", "expressInstall.swf",
flashvars, params, attributes);
} else
// check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
pano.readConfigUrl("tour.xml");
// hide the URL bar on the iPhone
hideUrlBar();
// add gyroscope controller
gyro=new pano2vrGyro(pano,"container");
}
</script>
[/code]
-------------
|
|
|
|
|
madmux |
 |
Standard Member
 |
 |
Lithuania
August-03-2010
246 Posts |
|
|
|
Hi Vilmer!
In this case, Yes, you will not have splash screen.
But i guess you may pass splash screen image (and other) as URL variable.
Kind of attach to your URL things after ?:
http://www.yoursite.com/path_to_your_tour/index.html?lwImg=resources/splash2.jpg&lwShowLoadingPercent=true
P.S. The parameters in the html file used for initialization does not have any influence as twviewer.sfw doesn't use it. It is useful just to see parameter names and values to be passed using URL.
Best wishes,
Madmux
|
|
|
|
|
vilmer |
 |
Gold Member
 |
 |
April-08-2006
218 Posts |
|
|
|
Thanx Madmux,
unfortunately it's not possible to put those variables in a link, because I want that tour to appear on the frontpage of my new site.
Or maybe I can do a redirect with those variables involved. I will experiment a bit more.
-------------
|
|
|
|
|
madmux |
 |
Standard Member
 |
 |
Lithuania
August-03-2010
246 Posts |
|
|
|
You don't need no redirection. If you embed tour using source (src) link - that's the same URL. I can see into it if you'll give me link to your site.
|
|
|
|
|
vilmer |
 |
Gold Member
 |
 |
April-08-2006
218 Posts |
|
|
|
|
|
|
madmux |
 |
Standard Member
 |
 |
Lithuania
August-03-2010
246 Posts |
|
|
|
Well, this has a little to do with the topic as you are embeding tour in an usual way. You almost managed to do it, your code needs just a couple of corrections. You need to embed twviewer.swf either TW way or Gnome way, but not both at the same time.
You can try kind of this one if we use TW swfobject:
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("9.0.0")) {
// TOURWEAVER YADAYADA:
var so = new SWFObject("twviewer.swf", "sotester", "100%", "100%", "9.0.0", "#FFFFFF");
so.addParam("allowNetworking", "all");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
//<!-%% Share Mode %%->
so.addVariable("lwImg", "resources/splash2.jpg");
so.addVariable("lwBgColor", "255,146,177,205");
so.addVariable("lwBarBgColor", "255,255,255,255");
so.addVariable("lwBarColor", "255,0,255,0");
so.addVariable("lwBarBounds", "-70,59,140,70");
so.addVariable("lwlocation", "4");
so.addVariable("lwShowLoadingPercent", "true");
so.addVariable("lwTextColor", "255,0,0,0");
so.addVariable("iniFile", "config_essimatour.bin");
so.addVariable("progressType", "1");
so.addVariable("swfFile", "resources/load.swf");
so.addVariable("percentType", "0");
so.addVariable("sizeFile", "filesize.txt");
so.addVariable("href", location.href);
// adding object to DOM
so.write("container");
// GNOME YADAYADA:
// deleted all gnome yadayada
} else
// check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
pano.readConfigUrl("tour.xml");
// hide the URL bar on the iPhone
hideUrlBar();
// add gyroscope controller
gyro=new pano2vrGyro(pano,"container");
}
</script>
If you want Gnome tour output, then you need to delete Tourweaver yadayada and add the variables into flashvars array.
|
|
|
|
|