Quellcode

<krpano>

	<!--
		Compare Panos Example
		- use krpano-layers for the pano-display and sync their view
		- any two kind of pano images can be used, multires, different resolutions
		- provide side-by-side / top-bottom / splitscreen / overlap-blending modes
		- a slider-control for the splitscreen
		- a blending-control for the overlap-mode
	-->

	<!-- the two pano images to compare -->



	<scene name="pano1" title="p01_Aerial_Existing" onstart="" thumburl="panos/p01_Aerial_Existing.tiles/thumb.jpg" lat="" lng="" alt="" heading="">
		
		<control bouncinglimits="calc:image.cube ? true : false" />

		<view 
		hlookat="0.0" 
		vlookat="0.0" 
		fovtype="DFOV" 
		fov="90" 
		maxpixelzoom="0"
		fovmin="90" 
		fovmax="90" 
		limitview="auto" 
		/>

		<preview url="panos/p01_Aerial_Existing.tiles/preview.jpg" />

		<image>
			<cube url="panos/p01_Aerial_Existing.tiles/pano_%s.jpg" />
		</image>

	</scene>
    	<scene name="pano2" title="p01_Aerial" onstart="" thumburl="panos/p01_Aerial.tiles/thumb.jpg" lat="" lng="" alt="" heading="">
		
		<control bouncinglimits="calc:image.cube ? true : false" />

		<view hlookat="0.0" 
		vlookat="0.0" 
		fovtype="DFOV" 
		fov="90" 
		maxpixelzoom="0" 
		fovmin="90" 
		fovmax="90" 
		limitview="auto" />

		<preview url="panos/p01_Aerial.tiles/preview.jpg" />

		<image>
			<cube url="panos/p01_Aerial.tiles/pano_%s.jpg" />
		</image>

	</scene>



	<!-- the startup view -->
	<view hlookat="0" fovtype="dfov" fov="90" maxpixelzoom="0" fovmin="90" fovmax="90" limitview="auto"/>


		 
		
		

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


	<events onresize="resize_viewers();"
			onviewchange="sync_viewers();"
			/>


	<action name="resize_viewers" scope="local">
		w = stagewidth;
		h = stageheight;
		if(display.safearea_inset,	// iPhone 'notch' fullscreen mode support
			w = display.safearea_inset.sw;
			h = display.safearea_inset.sh;
		);
		layer[krpano1].width = w;
		layer[krpano1].height = h;
		layer[krpano2].width = w;
		layer[krpano2].height = h;
	</action>


	<action name="sync_viewers" type="js">
		var viewFrom = krpano.view;
		var viewTo1 = krpano.layer.getItem("krpano1").krpano.view;
		var viewTo2 = krpano.layer.getItem("krpano2").krpano.view;

		viewTo1.hlookat = viewTo2.hlookat = viewFrom.hlookat;
		viewTo1.vlookat = viewTo2.vlookat = viewFrom.vlookat;
		viewTo1.camroll = viewTo2.camroll = viewFrom.camroll;
		viewTo1.fovtype = viewTo2.fovtype = viewFrom.fovtype;
		viewTo1.fov = viewTo2.fov = viewFrom.fov;
		viewTo1.fisheye = viewTo2.fisheye = viewFrom.fisheye;
		viewTo1.architectural = viewTo2.architectural = viewFrom.architectural;
		viewTo1.pannini = viewTo2.pannini = viewFrom.pannini;
		viewTo1.tx = viewTo2.tx = viewFrom.tx;
		viewTo1.ty = viewTo2.ty = viewFrom.ty;
		viewTo1.tz = viewTo2.tz = viewFrom.tz;
		viewTo1.ox = viewTo2.ox = viewFrom.ox;
		viewTo1.oy = viewTo2.oy = viewFrom.oy;
		viewTo1.oz = viewTo2.oz = viewFrom.oz;
		viewTo1.rx = viewTo2.rx = viewFrom.rx;
		viewTo1.ry = viewTo2.ry = viewFrom.ry;
	</action>


	<style name="button" type="text" zorder="2"
	       css="text-align:center;"
	       padding="4 8"
	       bgborder="4 0xFFFFFF 1"
	       bgroundedge="1"
	       bgshadow="0 1 4 0x000000 1.0"
	       onover="set(bgcolor, 0xC7E4FC);"
	       onout="calc(bgcolor, pressed ? 0x90CAF9 : 0xFFFFFF);"
	       ondown="set(bgcolor, 0x90CAF9);"
	       onup="calc(bgcolor, hovering ? 0xC7E4FC : 0xFFFFFF);"
	       />

	<style name="button_selected"
	       css="text-align:center; text-decoration:underline;"
	       />


	<action name="set_split_screen" scope="local" args="mode, split">
		%1(layer[krpano1container].alpha, 1.0);
		%1(layer[krpano1container].x, 0%);
		%1(layer[krpano1container].y, 0%);
		%1(layer[krpano1container].width, ((1-split) * 100 + '%'));
		%1(layer[krpano1container].height, 100%);
		%1(layer[krpano1].x, 0%);

		%1(layer[krpano2container].alpha, 1.0);
		%1(layer[krpano2container].x, ((1-split) * 100 + '%'));
		%1(layer[krpano2container].y, 0%);
		%1(layer[krpano2container].width, ((split * 100 + '%')));
		%1(layer[krpano2container].height, 100%);
		%1(layer[krpano2].x, 0%);
	</action>

	
<!-- Split line-->

	<layer name="split_slider" type="container" safearea="false" zorder="1"
		x="50%" edge="top" width="20" height="100%" bgcapture="true" cursor="ew-resize" enablechildren="false" autoalpha="true"
		ondown="asyncloop(pressed, x=(mouse.x/stagewidth * 100) + '%'; set_split_screen(set, (1-mouse.x/stagewidth),true) );"
		>
		<layer type="container" align="top" width="2" height="100%" bgcolor="0xFFFFFF" bgshadow="0 0 16 0x000000 .5" bgalpha="1" />
	</layer>


	<layer name="blend_slider" type="container" zorder="1" autoalpha="true" alpha="0"
		align="bottom" y="200" width="200" height="16" bgalpha="0.5" bgcolor="0xFFFFFF" bgborder="1 0xFFFFFF 0.2" bgroundedge="9" bgblur="5"
		>
		<layer name="blend_grip" align="left" edge="center" style="button" width="48" height="28" bgroundedge="20" padding="0" textalign="center" text="50%" x="50%"
			ondown.addevent="asyncloop(pressed,
					pos = (mouse.stagex - parentobject.stagex) / parentobject.pixelwidth;
					clamp(pos,0,1);
					x = 100*pos + '%';
					text = (100-floor(100*pos)) + ':' + floor(100*pos);
					layer[krpano2container].alpha = pos;
					);"
					/>
	</layer>


	<!--
		Here a special and optional hack:
		- The example is created with WebGL disabled (by webgl=false in the html).
		- That's because the panos are in sub-layers (with WebGL) and so
		  no WebGL-layer in the main viewer is required.
		- This safes a few computer resources (but is normally not noticeable).
		- And to have still the context-menu items for the distorted views,
		  which are only available with WebGL, here temporary the device.webgl
		  setting is enabled and then restored again.
	-->
	<set var="backup_device_webgl" val="device.webgl" />
	<set var="device.webgl" val="true" />
	<include url="%VIEWER%/plugins/contextmenu.xml" />
	<set var="device.webgl" val="backup_device_webgl" />



	<!-- select the startup mode -->
	<action autorun="onstart">
		//side_by_side(set);
		//top_bottom(set);
		split_screen(set,0.5);
		//overlap_blending(set);
	</action>



<!-- MENU NAVIGATION BELOW -->

	   <layer name="Orchards"
       type="text"
	   keep="true"
	   visible="true"
       align="lefttop" x="30" y="300"
	   html="[b]Orchards[br] [/b]"
       css="font-family:Arial; font-size:20px; color:#000000;"
       autowidth="auto"
       autoheight="auto"
       vcenter="false"
       padding="10"
       wordwrap="true"
       bg="true"
       bgcolor="0xFFFFFF"
       bgalpha="0.75"
       bgborder="0"
       bgroundedge="0"
       bgshadow=""
       txtshadow=""
       mergedalpha="true"
       interactivecontent="false"
       onautosized=""
	   onclick="looktohotspot(ShepardGlen);
		lookto(0,12,0,smooth(100,50,60));"
       />


	   <layer name="Shepard's Glen"
       type="text"
	   keep="true"
	   visible="true"
       align="lefttop" x="30" y="350"
	   html="[b]Shepard's Glen[br] [/b]"
       css="font-family:Arial; font-size:20px; color:#000000;"
       autowidth="auto"
       autoheight="auto"
       vcenter="false"
       padding="10"
       wordwrap="true"
       bg="true"
       bgcolor="0xFFFFFF"
       bgalpha="0.75"
       bgborder="0"
       bgroundedge="0"
       bgshadow=""
       txtshadow=""
       mergedalpha="true"
       interactivecontent="false"
       onautosized=""
	   onclick="looktohotspot(ShepardGlen);
		lookto(-165,20,0,smooth(100,50,60));"
       />

	   <layer name="Sycamore"
       type="text"
	   keep="true"
	   visible="true"
       align="lefttop" x="30" y="400"
	   html="[b]Sycamore[br] [/b]"
       css="font-family:Arial; font-size:20px; color:#000000;"
       autowidth="auto"
       autoheight="auto"
       vcenter="false"
       padding="10"
       wordwrap="true"
       bg="true"
       bgcolor="0xFFFFFF"
       bgalpha="0.75"
       bgborder="0"
       bgroundedge="0"
       bgshadow=""
       txtshadow=""
       mergedalpha="true"
       interactivecontent="false"
       onautosized=""
	   onclick="looktohotspot(ShepardGlen);
		lookto(175,10,0,smooth(100,50,60));"
       />

	   <layer name="City Green"
       type="text"
	   keep="true"
	   visible="true"
       align="lefttop" x="30" y="450"
	   html="[b]City Green[br] [/b]"
       css="font-family:Arial; font-size:20px; color:#000000;"
       autowidth="auto"
       autoheight="auto"
       vcenter="false"
       padding="10"
       wordwrap="true"
       bg="true"
       bgcolor="0xFFFFFF"
       bgalpha="0.75"
       bgborder="0"
       bgroundedge="0"
       bgshadow=""
       txtshadow=""
       mergedalpha="true"
       interactivecontent="false"
       onautosized=""
	   onclick="looktohotspot(ShepardGlen);
		lookto( 130,72,0,smooth(100,50,60));"
       />



</krpano>