Synchronise viewers - how to synchronise more than two viewers

venca.venca · December 11, 2022 at 9:15 PM

Hey krpanians,
using the: https://krpano.com/releases/1.20.5/examples/#js-sync-viewers, could someone kindly help me with how to synchronize more than two viewers I would need to synchronize 2 (done using example), 3 and 4 viewers in one html. Any help is highly appreciated (I am strong in photography but not so strong in javascript). Thx
V.

Tuur · December 12, 2022 at 12:36 PM

Hi,

a good, and relative simple, option is to use the layer type krpano for such.
https://krpano.com/docu/xml/#layer.type

I have done this and it works just great.

Tuur

venca.venca · December 12, 2022 at 4:56 PM

Quote from Tuur

Hi,
a good, and relative simple, option is to use the layer type krpano for such.
https://krpano.com/docu/xml/#layer.type
I have done this and it works just great.
Tuur

Hi Tuur!
it seems reasonable to use layers in this case, but how do you then synchronise all the views (in individual layers) in a way that all (in my case 4) views are synchronised and the view can be controlled from any one of them. That's what I have been struggling with, I have been trying to modify sync.xml from https://krpano.com/releases/1.20.5/examples/#js-sync-viewer, but I haven't really sucseeded . Thanks

Venca

kme · December 12, 2022 at 6:51 PM

I managed to do it using a modified version of the syncscreen example.
Basically, I modified the sync.xml to take an array of syncviewers and loop through the array to update the other views:

Code

<action name="sync_to_other_viewer" type="Javascript"><![CDATA[


		viewers = krpano.get("syncviewer").split(",");
		
		viewers.forEach(function(viewer) {


			var otherviewer = document.getElementById( viewer );
			if (otherviewer && otherviewer.get)
			{
			
				var lastuserinteraction = args[1] | 0;
				
				if (lastuserinteraction)
					krpano.sync_lastuserinteraction = lastuserinteraction;
				else
					lastuserinteraction = krpano.sync_lastuserinteraction | 0;
				
				var otherkrpano = otherviewer.get("global");
				


				
				otherkrpano_lastuserinteraction = otherkrpano.sync_lastuserinteraction | 0;
				
				if (lastuserinteraction > otherkrpano_lastuserinteraction)
				{
					// An internal API call to remove the focus from the other viewer.
					// That will stop any movement frictions, release pressed keyboard-keys and close an open contextmenu.
					otherkrpano.control.panoControl.focusLoss();
					
					krpano.call("trace(" + krpano.get("syncviewer").split(",") + ")");
				
					var view1 = otherkrpano.view;
					var view2 = krpano.view;
					
					view1.hlookat = view2.hlookat;
					view1.vlookat = view2.vlookat;
					view1.camroll = view2.camroll;
					view1.fovtype = view2.fovtype;
					view1.fov = view2.fov;
					view1.fisheye = view2.fisheye;
					view1.architectural = view2.architectural;
					view1.pannini = view2.pannini;
					view1.tx = view2.tx;
					view1.ty = view2.ty;
					view1.tz = view2.tz;
					view1.ox = view2.ox;
					view1.oy = view2.oy;
					view1.oz = view2.oz;
					view1.rx = view2.rx;
					view1.ry = view2.ry;
				}
			}
		});


		
	]]></action>

Display More

and for the html:

Code

<div id="viewersDiv" style="position:absolute; left:0; top:0; width:100%; height:100%;">
		<div id="div1"  style="position:absolute; left:0%;  top:0; width:25%; height:100%;"></div>
		<div id="div2" style="position:absolute; left:25%; top:0; width:25%; height:100%;"></div>
		<div id="div3" style="position:absolute; left:50%; top:0; width:25%; height:100%;"></div>
		<div id="div4" style="position:absolute; left:75%; top:0; width:25%; height:100%;"></div>
	</div>
	
	<script>
		embedpano({html5:"only", consolelog:true, basepath:"../../../", id:"pano1viewer",  target:"div1",  xml:"pano1.xml", vars:{syncside:"pano1",syncviewer:"pano2viewer,pano3viewer,pano4viewer"}, passQueryParameters:true});
		embedpano({html5:"only", consolelog:true,basepath:"../../../", id:"pano2viewer", target:"div2", xml:"pano2.xml", vars:{syncside:"pano2",syncviewer:"pano1viewer,pano3viewer,pano4viewer"}, passQueryParameters:true});
		embedpano({html5:"only", consolelog:true,basepath:"../../../", id:"pano3viewer", target:"div3", xml:"pano3.xml", vars:{syncside:"pano3",syncviewer:"pano1viewer,pano2viewer,pano4viewer"}, passQueryParameters:true});
		embedpano({html5:"only", consolelog:true,basepath:"../../../", id:"pano4viewer", target:"div4", xml:"pano4.xml", vars:{syncside:"pano4",syncviewer:"pano1viewer,pano2viewer,pano3viewer"}, passQueryParameters:true});
	</script>

Display More

venca.venca · December 12, 2022 at 7:31 PM

Quote from kme

I managed to do it using a modified version of the syncscreen example.
Basically, I modified the sync.xml to take an array of syncviewers and loop through the array to update the other views:

Code

and for the html:

Code

embedpano({html5:"only", consolelog:true, basepath:"../../../", id:"pano1viewer",  target:"div1",  xml:"pano1.xml", vars:{syncside:"pano1",syncviewer:"pano2viewer,pano3viewer,pano4viewer"}, passQueryParameters:true});
		embedpano({html5:"only", consolelog:true,basepath:"../../../", id:"pano2viewer", target:"div2", xml:"pano2.xml", vars:{syncside:"pano2",syncviewer:"pano1viewer,pano3viewer,pano4viewer"}, passQueryParameters:true});
		embedpano({html5:"only", consolelog:true,basepath:"../../../", id:"pano3viewer", target:"div3", xml:"pano3.xml", vars:{syncside:"pano3",syncviewer:"pano1viewer,pano2viewer,pano4viewer"}, passQueryParameters:true});
		embedpano({html5:"only", consolelog:true,basepath:"../../../", id:"pano4viewer", target:"div4", xml:"pano4.xml", vars:{syncside:"pano4",syncviewer:"pano1viewer,pano2viewer,pano3viewer"}, passQueryParameters:true});

Awesome, working fine here, thanks kme, highly appreciated

Eric Chen · December 13, 2022 at 5:50 AM

One way to do this is through webgl shaders.
Better performance for multiple identical views.
https://shader-split.vercel.app/

Another option is to use multiple layers of type "krpano". The plug-in will be released soon, but it currently only supports two views.
https://contrast-plugin.vercel.app/pano.html

If you have a customization requirement, we can talk about it.

Participate now!