<!--
	krpano 1.0.8 - compass example

	- it just rotates images accordingly to the viewing direction

	- two examples are used - one compass with rotation pointer
	  and one compass with rotating plate

	- a user defined global variable "heading" is used for the current
	  pano heading, the compass and the hotspots are relative to this value

	- many new function of the 1.0.8 version are used here:
	  - events.onxmlcomplete  - as start event
	  - events.onviewchange	  - as event to recognize a view change
	  - textstyle.fadetime      - for fading out of showtext() texts
	  - tween(var,get(destvar)) - tween to a other variable value, via the get() call
	  - *.parent              - for parent/child system to connect plugins together
	  - *.scalechildren       - for a joint scaling
	  - *.crop                - for croping an image, using one image for more hotspots
	  - loadscene() / <scene> - used for mask preloading and loading an inline xml/pano
	  - sub(a,b,c)            - for rotation calculation
-->

<krpano version="1.0.8" onstart="loadscene(pano,null,MERGE);">

	<!-- vignetting style - preload mask, then load real pano -->
	<plugin name="mask" devices="flash" keep="true" preload="true" url="vignetting.jpg" blendmode="multiply" width="100%" height="100%" enabled="false" zorder="0" />


	<!-- a new scene, it's like a complete new xml file -->
	<scene name="pano">

		<!-- events, show a infotext on start, and call the "onviewchange" action on a view change -->
		<events onxmlcomplete="action(onstart);"
		        onviewchange= "action(onviewchange);"
				/>

		<!-- show info, set heading, create hotpots -->
		<action name="onstart">
			showtext("[b][i]krpano[br]compass example[/i][/b]", infostyle);

			<!-- SET HEADING -->
			set(heading, 0);

			action(add_compass_spots);
		</action>

		<!-- change the rotation of the compass pointer / compass plate image -->
		<action name="onviewchange">
			sub(plugin[compass_pointer].rotate, view.hlookat, heading);
			sub(plugin[compass2_plate].rotate,  heading, view.hlookat);
		</action>


		<!-- enable autorotation -->
		<autorotate enabled="true" waittime="3.0" accel="0.5" speed="3" horizon="0" tofov="100" />


		<!-- text styles for startup text and onhover text -->
		<textstyle name="infostyle"
		           origin="center" edge="center" yoffset="-100" textalign="center" background="false" border="false"
		           fontsize="40" textcolor="0xFFFFFF" bold="false" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);"
		           showtime="4.0" fadeintime="1.0" fadetime="1.0"
		           />		         

		<textstyle name="hoverstyle"
		           background="false" border="false"
		           fontsize="20" textcolor="0xFFFFFF" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);"
		           fadetime="0.2"
		           />


		<!-- first compass (the one on the right side) -->


		<!-- compass with rotating pointer -->
		<plugin name="compass" url="compass.png" keep="true" zorder="1" children="false"
		        align="righttop" x="10" y="10"
		        scale="1.0" scalechildren="true"
		        destscale="1.0"
		        onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
		        onhover="showtext(click to toggle size,hoverstyle);"
		        heading="0"
		        />

		<!-- compass pointer, the rotation will be changed in the "onviewchange" action -->
		<plugin name="compass_pointer" url="compass_pointer.png" keep="true" handcursor="false"
				parent="compass" zorder="1"
				align="center"
				/>

		<!-- compass glass cap (flash only, because there is no blendmode in html5) -->
		<plugin name="glass" devices="flash"  url="glass.jpg" keep="true" enabled="false"
		        blendmode="screen" alpha="0.5"
		        parent="compass" zorder="2"
		        align="center"
		        />




		<!-- second compass (left side) -->


		<!-- compass2 with rotating plate -->
		<plugin name="compass2" url="compass.png" keep="true" zorder="1" children="false"
		        align="lefttop" x="10" y="10"
		        scale="1.0" scalechildren="true"
		        destscale="1.0"
		        onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
		        onhover="showtext(click to toggle size,hoverstyle);"
		        />

		<!-- compass2 plate, the rotation will be changed in the "onviewchange" action -->
		<plugin name="compass2_plate" url="compass_plate.png" keep="true" handcursor="false"
				parent="compass2" zorder="1"
				align="center"
				/>

		<!-- compass2 fixed pointer -->
		<plugin name="compass2_pointer" url="compass_pointer.png" keep="true" handcursor="false"
				parent="compass2" zorder="2"
				align="center"
				/>

		<!-- compass2 fixed outer ring -->
		<plugin name="compass2_ring" url="compass_ring.png" keep="true" handcursor="false"
				parent="compass2" zorder="3"
				align="center"
				/>

		<!-- compass2 glass cap (flash only, because there is no blendmode in html5) -->
		<plugin name="glass2" devices="flash" url="glass.jpg" keep="true" enabled="false"
		        blendmode="screen" alpha="0.5"
		        parent="compass2" zorder="4"
		        align="center"
		        />



		<!-- use only a grid preview pano (to save download space) -->
		<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details="16" />



		<!-- compass direction hotspots, created dynamically -->

		<action name="addhotspot">
			addhotspot(%1);
			set(hotspot[%1].url,%CURRENTXML%/hotspots.png);
			set(hotspot[%1].crop,%3);
			add(hotspot[%1].ath,%2,heading);
			set(hotspot[%1].atv,0);
			set(hotspot[%1].scale,%4);
			set(hotspot[%1].scale1,%4);
			mul(hotspot[%1].scale2,%4,2);
			set(hotspot[%1].zoom,true);
			set(hotspot[%1].onover,tween(scale,get(scale2)));
			set(hotspot[%1].onout,tween(scale,get(scale1)));
			set(hotspot[%1].onclick,lookto(%2,0,90,smooth(),true,true));
		</action>

		<action name="add_compass_spots">
			action(addhotspot, n,  0,     0|0| 76|76, 1.0);
			action(addhotspot, no, 45,   78|0|118|76, 0.5);
			action(addhotspot, o,  90,  202|0| 71|76, 1.0);
			action(addhotspot, so, 135, 281|0|109|76, 0.5);
			action(addhotspot, s,  180, 400|0| 69|76, 1.0);
			action(addhotspot, sw, 225, 469|0|134|76, 0.5);
			action(addhotspot, w,  270, 603|0| 86|76, 1.0);
			action(addhotspot, nw, 315, 689|0|141|76, 0.5);
		</action>

	</scene>

</krpano>

