Before and After splitscreen with draggable middle line

milotimbol

Intermediate

Posts: 242

Location: Philippines

Occupation: Software Developer

1

Saturday, March 13th 2021, 12:49am

I am able to create a before and after tour based on the krpano examples
https://tours.exsight360.com/3d-before-and-after/index.html

However I'm trying to create one where I can drag the line in the middle. Similar to what teliport me did
https://blog.teliportme.com/split-view-i…nd-after-shots/

Is this possible in Krpano? How do I go about doing this?

Krpano YouTube Tutorials
exsight360.com

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

2

Saturday, March 20th 2021, 11:17am

Hi,

here an idea how that could done:
- embed the second pano as <layer> with an iframe into the first, size it like the fullpage and make only the size of the layer visible
- create another layer that can be dragged and would resize that layer
- add js to sync the movement between both panos

I will try making such example when I find some time.

Best regards,
Klaus

Go to the top of the page

milotimbol

Intermediate

Posts: 242

Location: Philippines

Occupation: Software Developer

3

Friday, March 26th 2021, 1:49am

Gotcha. Will try that. Thanks!

Krpano YouTube Tutorials
exsight360.com

Go to the top of the page

panomaster

Intermediate

Posts: 297

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

4

Tuesday, March 30th 2021, 3:38am

It would be better if the line could be moved manually.

But example is ok. That is another that I've made a few years ago https://ai360.pl/projekty/sync3/

Mix of pre/post panos: https://www.ai360.pl/panoramy/949

Leszek Cuper
Panoramy 360
Wirtualne spacery

This post has been edited 1 times, last edit by "panomaster" (Mar 30th 2021, 3:48am)

Go to the top of the page

TSchmiesing

Trainee

Posts: 50

5

Thursday, May 20th 2021, 1:23am

Quoted from "milotimbol"

Gotcha. Will try that. Thanks!

Were you able to get this to work?

Go to the top of the page

TSchmiesing

Trainee

Posts: 50

6

Thursday, May 20th 2021, 6:03pm

Quoted from "klaus.krpano"

Hi,

here an idea how that could done:
- embed the second pano as <layer> with an iframe into the first, size it like the fullpage and make only the size of the layer visible
- create another layer that can be dragged and would resize that layer
- add js to sync the movement between both panos

I will try making such example when I find some time.

Best regards,
Klaus

Hi Klaus,

I am having difficulty figuring out how to load a scene into an iframe based on your suggestion above. I have tried many things in the "onloaded" line, but can't quite figure it out. Can you help me figure out this first step, or point me to where I can read about how to do it properly?

(Note: the "We have updated our hosting" is our 404 landing page)
http://sbpanohost.com/Testing/SliderVersionA/index.html

Source code

<scene name="scene_AAAAA" title="AAAAA">
	
<image>
<cube url="panos/AAAAA.tiles/pano_%s.jpg" />
</image>

<layer name="iframe"
url="white.png"
align="center"
renderer="css3d"
onloaded="add_iframe(loadscene(scene_BBBBB, null, MERGE, BLEND(1));"
/>

</scene>

		
<scene name="scene_BBBBB" title="BBBBB">
		
<image>
<cube url="panos/BBBBB.tiles/pano_%s.jpg" />
</image>

</scene>

This post has been edited 1 times, last edit by "TSchmiesing" (May 20th 2021, 7:37pm)

Go to the top of the page

TSchmiesing

Trainee

Posts: 50

7

Friday, May 21st 2021, 6:36pm

Update:
I figured out how to load a pano into an iFrame by loading a scene from a tour saved separately and not part of my base tour. I scaled it to 50% so I could better see what is going on.

I moved onto the next step of figuring out how to sync the two and now see that I am approaching this from the wrong direction. I need to load the two scenes into the base html file and use JS Sync there and not in the KRPano scenes.

What I don't know is how this will work into my full tour. I have 5 scenes, and on the third scene, I was planning to do a before/after split-screen.

Scene loaded into an iFrame within a scene:
http://steelblue.media.s3.us-west-1.amaz…ionB/index.html

	Source code
1 2 3 4 5 6	<layer name="iframe2" url="white.png" align="center" renderer="css3d" onloaded="iframe_embed(iframe2, BBBBB, http://sbpanohost.com/Testing/Slider/BBBBB-Only/index.html );" />

Go to the top of the page

TSchmiesing

Trainee

Posts: 50

8

Tuesday, May 25th 2021, 5:00am

I am slowly making some progress. The two panos are now synced; now I need to find a before/after slider that is easy to set up.

I have found a few that I like, but they are coded for static jpg's, which means I need to figure out how to adapt them to the DIV's that hold each XML file. That task is probably easy for some, but in case you haven't figured it out, I am not a coder, just a hack. ;)

Synced Panos:
https://steelblue.media/Testing/Slider/S…ionC/index.html

Go to the top of the page

TSchmiesing

Trainee

Posts: 50

9

Thursday, May 27th 2021, 5:24am

Quoted from "klaus.krpano"

Hi,

here an idea how that could done:
- embed the second pano as <layer> with an iframe into the first, size it like the fullpage and make only the size of the layer visible
- create another layer that can be dragged and would resize that layer
- add js to sync the movement between both panos

Klaus,

Any thoughts you have would be helpful as I'm struggling to figure out how to make the slider work. Nearly all of them are designed to work with static images, so it is trial and error to try and get them to work with KRpano content.

Version H:
http://steelblue.media/Testing/Slider/Sl…ionH/index.html
I used "VanilaSlider" for this try. I started by getting the slider into my scene. The background panos are staying synced, and the foreground static images are working as a slider.

Version K:
https://steelblue.media/Testing/Slider/SliderVersionK/index.html
This version created two problems. When I moved my KRPano content into the slider DIV's I lost the ability to interact with the KRPano. I am assuming this is due to my double class call, but I am not sure.
Secondly, instead of revealing the second pano in the exact location, it scales/slides out.

Version K Derivative:
http://steelblue.media/Testing/Slider/Sl…t_B1/index.html
http://steelblue.media/Testing/Slider/Sl…t_B2/index.html
I did find one that is a CSS only solution that keeps the panos in sync, but it is less than ideal and has the same problem of scaling the pano instead of revealing it, so I don't think this is the right path.

Thanks,
Travis

Go to the top of the page

TSchmiesing

Trainee

Posts: 50

10

Thursday, May 27th 2021, 7:24am

I decided to take a step back and solve the two problems separately... First is trying to understand how DIVs work and why the pano is always recentering. And more importantly, can that be solved.

This DIV is resizable if you click and drag the lower right corner. The pano resizes/recenters as it would if it were loaded directly into the html code instead of inside a DIV.

Studies in DIVs version A:
http://steelblue.media/Testing/Slider/SliderVersionL_StudiesInDIV_A/index.html

Go to the top of the page

$indexofrefraction is offline$ indexofrefraction

Professional

Posts: 1,362

11

Thursday, May 27th 2021, 11:22am

https://steelblue.media/Testing/Slider/S…ionK/index.html

krpanoLeftDiv and krpanoRightDiv need fixed widths and you cant use width="900px" for a div, thats for images only.
not all solved with this, yet... but first replace width/height with stlye="width:900px;height:900px;"

zFilter plugin -- zFlare plugin -- zSnapshot plugin

This post has been edited 10 times, last edit by "indexofrefraction" (May 27th 2021, 12:45pm)

Go to the top of the page

TSchmiesing

Trainee

Posts: 50

12

Thursday, May 27th 2021, 4:36pm

Quoted from "indexofrefraction"

https://steelblue.media/Testing/Slider/S…ionK/index.html

krpanoLeftDiv and krpanoRightDiv need fixed widths and you cant use width="900px" for a div, thats for images only.
not all solved with this, yet... but first replace width/height with stlye="width:900px;height:900px;"

Thank you!

I made that change and went on to test further, I think I can drop the size from that DIV container altogether as my frame size is controlled in the CSS. The setup I am using is based on this: https://codepen.io/nosurprisethere/pen/xrXjYV

I also dropped one of the class assignments for the "left" DIV and modified the right to have both class assignments for the same DIV. Doing this brought back the interactivity with the pano, so they now stay in sync.

The last problem is that the DIV is designed to scale instead of masking, causing my pan to resize when the slider is moved.

Latest Test:
https://steelblue.media/Testing/Slider/S…antA/index.html

Source code

<div class="wrapper">

	<div class="viewersDiv">
			<div id="krpanoLeftDiv" draggable="false"></div>
	</div>
	
	<div class="viewersDiv after">	
			<div id="krpanoRightDiv" draggable="true"></div>
	</div>
	
	<div class="scroller">
		<svg class="scroller__thumb" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
	</div>
	
</div>

Go to the top of the page

TSchmiesing

Trainee

Posts: 50

13

Friday, June 4th 2021, 3:34am

I made some progress today. If I define the pano using a left-justified "area" with defined x/y, then the pano doesn't scale as the slider moves.

I am going to parse through some of the forum posts regarding resizing and pulling the browser data dynamically. I'll likely have some follow-up questions tomorrow.

Current Progress:
https://steelblue.media/Personify/100Altair/WIP/20210603_BeforeAfter/index.html

Go to the top of the page

Lastwolf

Beginner

Posts: 28

14

Friday, June 4th 2021, 9:26pm

Quoted from "TSchmiesing"

I made some progress today. If I define the pano using a left-justified "area" with defined x/y, then the pano doesn't scale as the slider moves.

I am going to parse through some of the forum posts regarding resizing and pulling the browser data dynamically. I'll likely have some follow-up questions tomorrow.

Current Progress:
https://steelblue.media/Personify/100Altair/WIP/20210603_BeforeAfter/index.html

Great example! Very nice work. Thanks for sharing it.

Rich

Go to the top of the page