Viewport window position and size demonstration.

The viewport window can be sized and positioned to display the panorama anywhere within the virtual tour area. The viewport can be used to fill the full virtual tour space or just a specific section or an interface design to leave room for maps and overview text. By using a faded .png background image you can set transparency effects around the panorama and even have a circular viewport.

panorama.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="panorama.xsl"?>
<config>
<main>
	<pageTitle>Viewport Demo</pageTitle>
	<theme_enabled>true</theme_enabled>
	<numConnections>3</numConnections>
	<retryItem>5</retryItem>
	<qualityMotion>low</qualityMotion>
	<loresFolder>pano/pano_lo</loresFolder>
	<defaultRes>low</defaultRes>
	<panoType>spherical</panoType>
	<sphereSize>5000</sphereSize>
	<segments>high</segments>
	<loaderImage>images/loader.png</loaderImage>
</main>
<panorama>
	<frameId>viewport_demo</frameId>
	<sphere>grid.jpg</sphere>	
	<roomTitle>Demo</roomTitle>
	<startX>0</startX>
	<startY>0</startY>
	<startAuto>0.1</startAuto>
	<startDelay>10</startDelay>
	<zoomMin>1</zoomMin>
	<zoomMax>4</zoomMax>
	<zoomStart>1</zoomStart>
	<zoomSteps>0.1</zoomSteps>
	<stepsKeyboard>75</stepsKeyboard>
	<stepsMouse>60</stepsMouse>
	<friction>0.2</friction>
	<threshold>0.001</threshold>
</panorama>
</config>	

config.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<config>
<themeDir>themes/demo</themeDir>
<fullscreenPluginSize>1.0</fullscreenPluginSize>
<plugin>
	<name>info</name>
	<swf>info.swf</swf>
	<posX>150</posX>
	<posY>300</posY>
	<canvas>true</canvas>
	<fullscreen>true</fullscreen>
	<fullscreenPos>bottom right,-420,-220</fullscreenPos>
</plugin>
</config>

theme.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<config>
<theme>
	<canvasWidth>700</canvasWidth>						
	<canvasHeight>513</canvasHeight>					
	<tourWindowWidth>686</tourWindowWidth>							
	<tourWindowHeight>233</tourWindowHeight>	
	<tourWindow_PosX>7</tourWindow_PosX>			  					
	<tourWindow_PosY>10</tourWindow_PosY>	
	<cameraFocus>220</cameraFocus>		
	
	<loadingTxt>Loading</loadingTxt>					
	<mainLoader_PosX>200</mainLoader_PosX>
	<mainLoader_PosY>250</mainLoader_PosY>
	<loader_PosX>200</loader_PosX>
	<loader_PosY>230</loader_PosY>
	
	<canvas>true</canvas>																					
	<canvasImage>canvas.png</canvasImage>
	
	<fullscreen>true</fullscreen>
	<viewportFullscreenIcon_PosX>15</viewportFullscreenIcon_PosX>
	<viewportFullscreenIcon_PosY>15</viewportFullscreenIcon_PosY>
	<buttonPanel_fullscreenButton_altTag>Fullscreen mode</buttonPanel_fullscreenButton_altTag>
	<buttonPanel_enable_altTags>true</buttonPanel_enable_altTags>
	
	<altTagFontName>Verdana</altTagFontName>
	<altTagFontSize>11</altTagFontSize>
	<altTagFontColour>0xFFFFFF</altTagFontColour>
	<altTagFontBold>false</altTagFontBold>
	<altTagBackground>true</altTagBackground>
	<altTagBackgroundColor>0x462c64</altTagBackgroundColor>
	<altTagHeight>5</altTagHeight>
</theme>
</config>