Compare panos multiple scenes

jeromebg · October 30, 2024 at 4:07 PM

Hi,

Trying to update Compare Scenes exemple to be able to select which scene to load in left and right krpano layers.
But when action called I have : FATAL ERROR: loadxml() - xml parsing failed!
A clue ?
Many thanks

Code

	<layer name="krpano1container" type="container" safearea="false" x="0%" width="50%" height="100%" maskchildren="true" enabled="false" zorder="0">
		<layer name="krpano1" type="krpano" align="left" width="200%" height="100%"
			onloaded="krpano.actions.loadxml(('&lt;krpano&gt;' + scene[0].content + '&lt;/krpano&gt;'),null,IMAGEONLY);"
			/>
	</layer>

	<layer name="krpano2container" type="container" safearea="false" x="50%" width="50%" height="100%" maskchildren="true" enabled="false" zorder="0">
		<layer name="krpano2" type="krpano" align="right" width="200%" height="100%"
			onloaded="krpano.actions.loadxml(('&lt;krpano&gt;' + scene[1].content + '&lt;/krpano&gt;'),null,IMAGEONLY);"
			/>
	</layer>

	<combobox name="cb_left" design="rounded" align="top" x="-25%" y="20" onchange="selectItemByName(0);">
		<item name="item0" caption="AEB edited" onclick="update_scene(krpano1,0)"/>
		<item name="item1" caption="AEB unedited" onclick="update_scene(krpano1,1)"/>
		<item name="item2" caption="DNG8 edited" onclick="update_scene(krpano1,2)"/>
		<item name="item3" caption="DNG8 unedited" onclick="update_scene(krpano1,3)"/>
		<item name="item4" caption="Q360 edited" onclick="update_scene(krpano1,4)"/>
		<item name="item5" caption="Q360 unedited" onclick="update_scene(krpano1,5)"/>
		<item name="item6" caption="Q360 JPG" onclick="update_scene(krpano1,6)"/>
	</combobox>

	<combobox name="cb_right" design="rounded" align="top" x="25%" y="20" onchange="selectItemByName(0);">
		<item name="item0" caption="AEB edited" onclick="update_scene(krpano2,0)"/>
		<item name="item1" caption="AEB unedited" onclick="update_scene(krpano2,1)"/>
		<item name="item2" caption="DNG8 edited" onclick="update_scene(krpano2,2)"/>
		<item name="item3" caption="DNG8 unedited" onclick="update_scene(krpano2,3)"/>
		<item name="item4" caption="Q360 edited" onclick="update_scene(krpano2,4)"/>
		<item name="item5" caption="Q360 unedited" onclick="update_scene(krpano2,5)"/>
		<item name="item6" caption="Q360 JPG" onclick="update_scene(krpano2,6)"/>
	</combobox>

<action name="update_scene">
layer[%1].krpano.actions.loadxml(('&lt;krpano&gt;' + scene[%2].content + '&lt;/krpano&gt;'),null,IMAGEONLY);
</action>

Display More

klaus.krpano · October 31, 2024 at 2:46 PM Official Post

Hi,

in version 1.22 there is actually an example for comparing multiple pano images:
krpano.com - Examples

And there is also a template/config file included for creating such automatically, therefore select the 'comparepanos.config' in the MAKE VTOUR Droplet.

Best regards,
Klaus

jeromebg · October 31, 2024 at 2:49 PM

Yes saw that, great !
But what is wrong with my code ?

klaus.krpano · October 31, 2024 at 3:22 PM Official Post

I think the < and > inside the action might not get resolved to <,>...

Try using a CDATA tag in the action and directly the <,> characters.

YASUSHI KUMON · November 1, 2024 at 9:53 AM

Hi Klaus,

Is it possible to overlay multiple panoramas with comparepanos?

I want to achieve this using a flat panorama.

Tuur · November 1, 2024 at 11:10 AM

Hi,

If you use for each pano a layer type krpano, put them on top of each other, and use some alpha then you're ready to go. With a slider you could change the alpha of the different layers. Done it with 1.21 and it works great.
Obviously you need to sync the 'layers'/view..

Not sure if it is easier to start from that compare example, or from scratch. I prefer scratch.

Tuur

klaus.krpano · November 1, 2024 at 12:20 PM Official Post

Hi,

thanks Tuur!

Right, just use multiple krpano layers and stack them with some alpha settings.

Syncing is easier in version 1.22, there only the view.syncto() action need to be called:
krpano.com - Documentation - XML Reference

That means one viewer would be the main one that controls the view, and the others be synchronized to that one.

For details please see the sources of these examples:
krpano.com - Examples
krpano.com - Examples

Best regards,
Klaus

ramirox3 · November 1, 2024 at 2:48 PM

Great
How good it would be to know an example of a stack with multiple krpano layers and some alpha settings

YASUSHI KUMON · November 1, 2024 at 3:17 PM

Hi Tuur and Klaus,

Thanks for the great advice.

I'll try different methods.

YASUSHI KUMON · November 2, 2024 at 7:29 AM

Hi,

It seems like a relatively simple way to do this.

krpano - 4

However, while the zoom function works with the buttons, it doesn't work with mouse scrolling.

(The coordinates are linked in both cases.)

Code

	<events name="sync"	keep="true" 
						onviewchange="
									layer[base].krpano.view.syncto(get(view)); 	
									layer[overlay1].krpano.view.syncto(get(view)); 
									layer[overlay2].krpano.view.syncto(get(view)); 
									"	/>



	
	<scene name="scene_2" title="2" onstart="" thumburl="panos/2.tiles/thumb.jpg" lat="" lng="" alt="" heading="">


			 <layer name="base" type="krpano" width="100%" height="100%" onloaded="krpano.actions.loadpano('overlay0.xml');"	alpha="1"	 
				 capture="false" /> 
	
			 <layer name="overlay1" type="krpano" width="40%" height="40%" align="left" edge="leftbottom" x="10" y="20" onloaded="krpano.actions.loadpano('overlay1.xml');"	alpha="0.6"	 
				 capture="false" onclick="toggle(alpha);" /> 

			 <layer name="overlay2" type="krpano" width="40%" height="40%"  align="left" edge="lefttop" x="30" y="-20" onloaded="krpano.actions.loadpano('overlay2.xml');"	alpha="0.6"	 
				 capture="false" onclick="toggle(alpha);" /> 


	</scene>

Display More

Is something wrong?

klaus.krpano · November 2, 2024 at 8:07 AM Official Post

Quote from YASUSHI KUMON

However, while the zoom function works with the buttons, it doesn't work with mouse scrolling.

The mouse wheel gets captured by the 'base' layer - and therefore the view gets only changed there.
Its the same when using the mouse wheel over the other layers.

But the pano-controlling itself is done below the 'base' layer on an empty pano and from there synced to the others.

Solutions:
- either set enabled=false for the base layer
- or instead the base layer, define the pano directly without extra layer

E.g.

Code

<include url="overlay0.xml" /> 
	
<layer name="overlay1" type="krpano" width="40%" height="40%" align="left" edge="leftbottom" x="10" y="20" onloaded="krpano.actions.loadpano('overlay1.xml');"	alpha="0.6"	 
				 capture="false" onclick="toggle(alpha);" /> 

<layer name="overlay2" type="krpano" width="40%" height="40%"  align="left" edge="lefttop" x="30" y="-20" onloaded="krpano.actions.loadpano('overlay2.xml');"	alpha="0.6"	 
				 capture="false" onclick="toggle(alpha);" />

YASUSHI KUMON · November 2, 2024 at 9:12 AM

Hi Klaus,

Great!

Solved.

Thanks.

YASUSHI KUMON · November 2, 2024 at 9:25 AM

Mouse scrolling of the child layer does not seem to be reflected in the scaling of the base.

krpano - 4

YASUSHI KUMON · November 2, 2024 at 10:13 AM

enabled="false"

I put this on everything and it was solved. Thank you.

Code

				 <include url="overlay0.xml" enabled="false"/> 

	
			 <layer name="overlay1" type="krpano" width="40%" height="40%" align="left" edge="leftbottom" x="10" y="20" onloaded="krpano.actions.loadpano('overlay1.xml');"	alpha="0.6"	 
				 capture="false" onclick="toggle(alpha);" enabled="false"/> 

			 <layer name="overlay2" type="krpano" width="40%" height="40%"  align="left" edge="lefttop" x="30" y="-20" onloaded="krpano.actions.loadpano('overlay2.xml');"	alpha="0.6"	 
				 capture="false" onclick="toggle(alpha);" enabled="false"/>

YASUSHI KUMON · November 14, 2024 at 8:38 AM

Hi，

Additional questions.

1) Is it possible to use a transparency channel for the overlapping panorama? For example, using png.

2) Is it possible to change the blend mode of the panorama layer? For example, adding.

Thanks.

klaus.krpano · November 14, 2024 at 9:09 AM Official Post

Quote from YASUSHI KUMON

1) Is it possible to use a transparency channel for the overlapping panorama? For example, using png.

Probably not... there is no explicit support for that yet.
Maybe, when not using multi-resolution, because there the tiles are rendered/drawn on top of each other during loading and that doesn't work with transparency...

Quote from YASUSHI KUMON

2) Is it possible to change the blend mode of the panorama layer? For example, adding.

Should be possible by using the CSS 'mix-blend-mode' setting:

mix-blend-mode - CSS: Cascading Style Sheets | MDN

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

developer.mozilla.org

E.g.

Code

<layer ... cssstyle="mix-blend-mode:difference;"

YASUSHI KUMON · November 17, 2024 at 9:17 AM

Hi Klaus,

Awesome!
Now I can easily create what I want.

Thanks for all the great advice.

Thank you very much.

indexofrefraction · November 17, 2024 at 10:27 AM

would it be rendering-wise demanding to add more blend modes in the future ?

krpano.com - Documentation - XML Reference

eg. screen, multiply, etc

YASUSHI KUMON · November 21, 2024 at 9:28 AM

Hi，

Is it possible to display the hotspot on top of layer type="krpano"?
Even if I change the zorder, the hotspot seems to get hidden under layer type="krpano".

klaus.krpano · November 21, 2024 at 9:36 PM Official Post

Hi,

that's possible, but only with a specific setup:

1. the main viewer need to have a transparent background, therefore in the embedpano() call the bgcolor setting need to be set to transparent:

Code

embedpano({..., bgcolor:"transparent"});

2. then the main viewer will get no pano <image> and keeps empty, only the hotspots can be defined. The overlapping pano images need to be defined in separate krpano layers and need to have set parent="BGLAYER", e.g.

Code

<layer name="pano1" type="krpano" parent="BGLAYER" zorder="1" ... />
<layer name="pano2" type="krpano" parent="BGLAYER" zorder="2" ... />

This way the panos are drawn behind the hotspots, can optionally use CSS blend modes for mixing and the hotspots are above that and unaffected by any blending-modes.

Best regards,
Klaus

Participate now!