panorama software,virtual tour software
Alternate Text
Joined: 2010-08-03
Send Msg:
Posts: 246
2011-09-18
#1

Tour embedding solutions

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
Alternate Text
Joined: 2008-05-10
Send Msg:
Posts: 590
2011-09-18
#2
Nice work Madux & Pixelator, I really appreciate your time spent on this good work.

Apartment rentals Nerja

Villa rentals Nerja

Accommodation Nerja

Alternate Text
Joined: 2011-09-10
Send Msg:
Posts: 17
2011-09-19
#3
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




Alternate Text
Joined: 2002-04-23
Send Msg:
Posts: 58
2011-09-20
#4

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. 


Alternate Text
Joined: 2006-04-08
Send Msg:
Posts: 221
2011-11-08
#5
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]


Alternate Text
Joined: 2010-08-03
Send Msg:
Posts: 246
2011-11-09
#6
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
My Tourweaver components: http://www.optitecha.lt/categories/3
Alternate Text
Joined: 2006-04-08
Send Msg:
Posts: 221
2011-11-09
#7
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.




Alternate Text
Joined: 2010-08-03
Send Msg:
Posts: 246
2011-11-09
#8
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.
My Tourweaver components: http://www.optitecha.lt/categories/3
Alternate Text
Joined: 2006-04-08
Send Msg:
Posts: 221
2011-11-09
#9
its at http://www.vamos360.com/cms/
Thank you.


Alternate Text
Joined: 2010-08-03
Send Msg:
Posts: 246
2011-11-09
#10
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.
My Tourweaver components: http://www.optitecha.lt/categories/3
Alternate Text
Joined: 2006-04-08
Send Msg:
Posts: 221
2011-11-09
#11
Madmux, I can't thank you enough for this. Works flawless

              // adding object to DOM
               so.write("container");


I would never have come up with that.

Thanx!