Before / After tour  

Share what you've done with Panotour or Panotour Pro.
Montrez nous vos oeuvres avec Panotour ou Panotour Pro.
no avatar
theo_gio
New member
 
Topic author
Posts: 8
Likes: 0 post
Liked in: 1 post
Joined: Thu Dec 03, 2015 6:13 pm
Info

Before / After tour

by theo_gio » Fri Jan 13, 2017 9:23 pm

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.
Last edited by theo_gio on Fri Feb 10, 2017 9:01 am, edited 1 time in total.

no avatar
Relive360
Member
 
Posts: 17
Likes: 0 post
Liked in: 1 post
Joined: Sun Aug 28, 2016 10:22 pm
Info

Re: Before / After tour

by Relive360 » Fri Feb 03, 2017 3:58 am

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?

no avatar
theo_gio
New member
 
Topic author
Posts: 8
Likes: 0 post
Liked in: 1 post
Joined: Thu Dec 03, 2015 6:13 pm
Info

Re: Before / After tour

by theo_gio » Fri Feb 03, 2017 6:26 am

Sorry for that ,
I moved it , you can find it here,
http://rocket-tower-konferenz.de/raeume/#360

no avatar
Relive360
Member
 
Posts: 17
Likes: 0 post
Liked in: 1 post
Joined: Sun Aug 28, 2016 10:22 pm
Info

Re: Before / After tour

by Relive360 » Tue Feb 07, 2017 10:46 am

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

no avatar
theo_gio
New member
 
Topic author
Posts: 8
Likes: 0 post
Liked in: 1 post
Joined: Thu Dec 03, 2015 6:13 pm
Info

Re: Before / After tour

by theo_gio » Tue Feb 07, 2017 11:44 am

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 + ")");

      }

no avatar
theo_gio
New member
 
Topic author
Posts: 8
Likes: 0 post
Liked in: 1 post
Joined: Thu Dec 03, 2015 6:13 pm
Info

Re: Before / After tour

by theo_gio » Tue Feb 07, 2017 11:50 am

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.

no avatar
Relive360
Member
 
Posts: 17
Likes: 0 post
Liked in: 1 post
Joined: Sun Aug 28, 2016 10:22 pm
Info

Re: Before / After tour

by Relive360 » Fri Feb 10, 2017 8:53 am

Hi Theo

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

Cheers,
Markus

User avatar
360-compunics-com-ni
Member
 
Posts: 418
Likes: 15 posts
Liked in: 163 posts
Joined: Wed Dec 17, 2014 12:37 am
Location: León, Nicaragua
Info

Re: Before / After tour

by 360-compunics-com-ni » Sun Mar 26, 2017 5:30 am

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?
Out now: DeviceCheck for PTP plugins! https://www.kolor.com/forum/viewtopic.php?f=40&t=37446

Want to know how clients use your tours? Google Analytics Track Events plugin: http://www.kolor.com/forum/viewtopic.php?f=40&t=34442

Add actions to your hotspots: Hotspot Actionlist plugin: http://www.kolor.com/forum/viewtopic.php?f=40&t=35829

no avatar
Destiny
Moderator
 
Posts: 7883
Likes: 6 posts
Liked in: 228 posts
Joined: Mon Apr 26, 2010 11:55 pm
Info

Re: Before / After tour

by Destiny » Sun Mar 26, 2017 7:06 am

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..

no avatar
Destiny
Moderator
 
Posts: 7883
Likes: 6 posts
Liked in: 228 posts
Joined: Mon Apr 26, 2010 11:55 pm
Info

Re: Before / After tour

by Destiny » Sun Mar 26, 2017 7:14 am

This is a cool use for the blend slider..

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

Destiny..

no avatar
theo_gio
New member
 
Topic author
Posts: 8
Likes: 0 post
Liked in: 1 post
Joined: Thu Dec 03, 2015 6:13 pm
Info

Re: Before / After tour

by theo_gio » Sun Mar 26, 2017 8:05 am

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

no avatar
theo_gio
New member
 
Topic author
Posts: 8
Likes: 0 post
Liked in: 1 post
Joined: Thu Dec 03, 2015 6:13 pm
Info

Re: Before / After tour

by theo_gio » Sun Mar 26, 2017 8:31 am

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

no avatar
Destiny
Moderator
 
Posts: 7883
Likes: 6 posts
Liked in: 228 posts
Joined: Mon Apr 26, 2010 11:55 pm
Info

Re: Before / After tour

by Destiny » Sun Mar 26, 2017 10:15 pm

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.


Who is online

Users browsing this forum: No registered users and 0 guests

cron