Page 1 of 1

Before / After tour

PostPosted: Fri Jan 13, 2017 9:23 pm
by theo_gio
http://rocket-tower-konferenz.de/raeume/#360
This is fully custom tour featuring 2 synchronised tours with toggle switching between them, also there is a customisation in the floormap plugin to render the map outside the pano viewer.
This may look like Krpano , but it is build with Panotour ( and some coding of course).
Any feedback is appreciated.

Re: Before / After tour

PostPosted: Fri Feb 03, 2017 3:58 am
by Relive360
I'd really like to have a look at that, but it's gone?

I have been searching for a compare solution for a long time, would you share how it's done?

Re: Before / After tour

PostPosted: Fri Feb 03, 2017 6:26 am
by theo_gio
Sorry for that ,
I moved it , you can find it here,
http://rocket-tower-konferenz.de/raeume/#360

Re: Before / After tour

PostPosted: Tue Feb 07, 2017 10:46 am
by Relive360
Hi Theo

this is a very neat setup. I'd be very interested in how you went about syncing two tours and getting that transition feature. Would you mind pointing me in the right direction?

No competition here, we're in New Zealand.

Cheers,
Markus

Re: Before / After tour

PostPosted: Tue Feb 07, 2017 11:44 am
by theo_gio
Hi and thank you ,
The process of creating such a tour is not a very simple thing and it is done in steps,
step 1 - the stitching part , after stitching the before-after images one should allign them as much as possible in Photoshop (left right panning so that the common ground overlaps).Name the before|after images exactly the same.
step 2 - create the "before" tour and add the Floorplan in it.
step 3 - create the "after" tour and add hotspots to it.
step 4 - place the two tours in the same directory ( they will have different html name so no problem there)
create a new html file in the root that will load the 2 tours in two different divs. a snippet of the code that does this is this:
Code: Select all
function loadPlayer(isWebVr) {
            if (isWebVr) {
               embedpano({
                  id:"krpanoSWFObject"
                  ,xml:"v1data/v1_vr.xml"
                  ,target:"panoDIV"
                  ,passQueryParameters:true
                  ,bgcolor:"#000000"
                  ,html5:"only+webgl"
                  ,focus: false
                  ,vars:{skipintro:true,norotation:true}
               });
               embedpano({
                  id:"krpanoSWFObject2"
                  ,xml:"v2data/v2_vr.xml"
                  ,target:"panoDIV2"
                  ,passQueryParameters:true
                  ,bgcolor:"#000000"
                  ,html5:"only+webgl"
                  ,focus: false
                  ,vars:{skipintro:true,norotation:true}
               });
            } else {
               embedpano({
                  id:"krpanoSWFObject2"

                  ,swf:"v2data/v2.swf"

                  ,target:"panoDIV2"
                  ,passQueryParameters:true
                  ,bgcolor:"#000000"
                  ,focus: false

                  ,html5:"prefer"


                  ,wmode: getWmodeValue()

               });
                     embedpano({
                  id:"krpanoSWFObject"

                  ,swf:"v1data/v1.swf"

                  ,target:"panoDIV"
                  ,passQueryParameters:true
                  ,bgcolor:"#000000"
                  ,focus: false

                  ,html5:"prefer"


                  ,wmode: getWmodeValue()

               });

step 5 - the divs that load the tours need to follow the structure you will find here https://tympanus.net/codrops/2016/09/29 ... css-masks/ this is also responsible for the transitions
step 6 - krpano coding . On each of the produced XML's you add this code somewhere close to the top.
Code: Select all
     <events onmousedown="set(syncother,true); events.onviewchange();"
           onmousewheel="events.onmousedown();"
           onviewchange="if(syncother, js( sync_1to2() ) );"
         onnewscene="js( syncscene_1to2());"
           />

what this does is that on new pano it runs a js function called syncscene (in after.xml it passes parameters to sync the other viewer e.t.c.), and on newscene it syncs scenes An example of this functions is here:
Code: Select all
   function sync_2to1()
      {
         var krpano1 = document.getElementById("krpanoSWFObject");
               var krpano2 = document.getElementById("krpanoSWFObject2");

         krpano1.set("syncother",    false);
         krpano1.set("view.hlookat", krpano2.get("view.hlookat"));
         krpano1.set("view.vlookat", krpano2.get("view.vlookat"));
         krpano1.set("view.fov",     krpano2.get("view.fov"));

      }

      //sync scenes
            function syncscene_1to2()
      {
         var krpano1 = document.getElementById("krpanoSWFObject");
               var krpano2 = document.getElementById("krpanoSWFObject2");
         var scene1 = krpano1.get("xml.scene");
         console.log(scene1);
         krpano2.call("mainloadscene(" + scene1 + ")");

      }

Re: Before / After tour

PostPosted: Tue Feb 07, 2017 11:50 am
by theo_gio
Second part:
for the above functions to work the panoid's of the two tours need to be the same for each image (tricky ,this one is), this is why i wrote about naming the images the same. If everything is done correctly the two tours are perfectly aligned. when you move one of them , the other one follows. There is no need for a second floormap , because by moving the second tour the first tour chanes so the floorplan is always synced. The problem is to keep the first floormap always visible, ion order to do that you need to edit kolor's minified floorplan js and have the div attached to another div in the HTML.
Let me know if you need more info , i know i am not very good at explaining some things.
As for conflicts and stuff, don't think about it no competitive, i would love if people in this forum actually shared tips and tricks more.

Re: Before / After tour

PostPosted: Fri Feb 10, 2017 8:53 am
by Relive360
Hi Theo

This is incredible. Thanks for sharing! I will need a spare night to have a go at this. Much appreciated!

Cheers,
Markus

Re: Before / After tour

PostPosted: Sun Mar 26, 2017 5:30 am
by 360-compunics-com-ni
This is an interesting project, and i like the look&feel of the "KRPano-Controlbar" very much.
Thanks for sharing it and the explanations. But it's a rather complex setup, may i ask what are the advantages of having two synchronized tours?

Re: Before / After tour

PostPosted: Sun Mar 26, 2017 7:06 am
by Destiny
Krpano had a demo Before and After slider but I have not found a solution for html5..

http://www.destinyvirtualtours.com/Befo ... lider.html

Like, garden before and after or building before and after.. So many appications to use it. I asked for this option in feature request years ago, but nothing much from that list ever gets added.. We just have to wait for any new updates in PTP... I think there will be one soon.. Not sure.. Its been while since any major updates...

Destiny..

Re: Before / After tour

PostPosted: Sun Mar 26, 2017 7:14 am
by Destiny
This is a cool use for the blend slider..

http://www.cinod.fr/wordpress/wp-conten ... essin.html

Destiny..

Re: Before / After tour

PostPosted: Sun Mar 26, 2017 8:05 am
by theo_gio
360-compunics-com-ni wrote:This is an interesting project, and i like the look&feel of the "KRPano-Controlbar" very much.
Thanks for sharing it and the explanations. But it's a rather complex setup, may i ask what are the advantages of having two synchronized tours?

First of all thank you for finding this interesting.
yes it is a very complex setup, i could have done it quite simpler by building only one tour and using krpano's keepview, But then i wouldn't have the control i wanted over the possible transition between the two tours. By building the tour this way i was able to apply any possible transition effect (based on thousands available scripts that exist today)between the tours.If i sticked to the Keepview approach i would be limited to some (awfull in my opinion) blend transitions based on weird xml code (again this just my opinion).
My main issue with Krpano (and of course Panotour) is still the usage of XML coding to generate everything related to the tour (transition , hotspot effects e.t.c.) I believe that by using this approach Krpano has limited the usage a lot. By using more advanced approach like js and json (some other viewers let you do far more advanced things) instead of XML , it would clear the competition at any level.
P.S. this procedure may seem a bit complex but the workflow and possible implementation is a lot easier the second time you do it.
Regards

Re: Before / After tour

PostPosted: Sun Mar 26, 2017 8:31 am
by theo_gio
Destiny wrote:Krpano had a demo Before and After slider but I have not found a solution for html5..



Destiny..

Hi Destiny,
First of all thank you for being the most active member on this forum , your posts helped me a lot in some of my projects.
http://demo.virtualsolutions.gr/chris_p ... lider.html this is the slider with 3 images. This is not flash , it is html5 and it is based on a hackish way of using the hotspots. It also has a major drawback . as it doesn't work with multiresolution. the link to the xml is here http://demo.virtualsolutions.gr/chris_p ... lider.html .
The same result ( but with multiresolution) can get achieved by using the method i posted with tour synchronization and a slider that blends the different tours between them.
Regards

Re: Before / After tour

PostPosted: Sun Mar 26, 2017 10:15 pm
by Destiny
Thank you!.. Its nice to be appreciated.. =D =D :cool:

Destiny...

theo_gio wrote:Hi Destiny,
First of all thank you for being the most active member on this forum , your posts helped me a lot in some of my projects.