gistfile1.xml

<!--
	krpano - tooltips example (for Flash and HTML5)
-->

<krpano>

	<!-- pano -->
	<preview type="grid(cube,32,32,256,0x223344,0x000011,0xFFFFFF);" details="8" />
	
	<!-- default view -->
	<view hlookat="0" vlookat="0" fovtype="VFOV" fov="100" fovmin="60" fovmax="150" />
	
	
	<!-- some example buttons for the tooltip testing -->
	<style name="button" url="buttons.png" width="40" height="40" align="left" />
	
	<!-- a container layer with the default navigation buttons -->
	<layer name="buttons" keep="true" type="container" align="bottom" width="240" height="40" y="10">
		<layer name="in"       style="button|tooltip" tooltip="Zoom In"    x="0"   crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);"      onup="set(fov_moveforce,0);" />
		<layer name="out"      style="button|tooltip" tooltip="Zoom Out"   x="40"  crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);"      onup="set(fov_moveforce,0);" />
		<layer name="left"     style="button|tooltip" tooltip="Look Left"  x="80"  crop=  "0|0|40|40" onovercrop=  "0|40|40|40" ondowncrop=  "0|80|40|40" ondown="set(hlookat_moveforce,-1);"  onup="set(hlookat_moveforce,0);" />
		<layer name="right"    style="button|tooltip" tooltip="Look Right" x="120" crop= "40|0|40|40" onovercrop= "40|40|40|40" ondowncrop= "40|80|40|40" ondown="set(hlookat_moveforce,+1);"  onup="set(hlookat_moveforce,0);" />
		<layer name="up"       style="button|tooltip" tooltip="Look Up"    x="160" crop= "80|0|40|40" onovercrop= "80|40|40|40" ondowncrop= "80|80|40|40" ondown="set(vlookat_moveforce,-1);"  onup="set(vlookat_moveforce,0);" />
		<layer name="down"     style="button|tooltip" tooltip="Look Down"  x="200" crop="120|0|40|40" onovercrop="120|40|40|40" ondowncrop="120|80|40|40" ondown="set(vlookat_moveforce,+1);"  onup="set(vlookat_moveforce,0);" />
	</layer>

	<!-- when fullscreen is supported - add fullscreen buttons and make the container larger -->
	<layer name="buttons" width="280" devices="fullscreensupport">
		<layer name="openfs"   style="button|tooltip" tooltip="Enter Fullscreen Mode" x="240" crop="280|0|40|40" onovercrop="280|40|40|40" ondowncrop="280|80|40|40" onclick="set(fullscreen,true);"  visible="true"  />
		<layer name="closefs"  style="button|tooltip" tooltip="Exit Fullscreen Mode"  x="240" crop="320|0|40|40" onovercrop="320|40|40|40" ondowncrop="320|80|40|40" onclick="set(fullscreen,false);" visible="false" />
	</layer>
	
	<!-- events to change the fullscreen buttons, set cursor on start -->
	<events name="buttonevents" keep="true"
	        onenterfullscreen="set(layer[openfs].visible,false); set(layer[closefs].visible,true);"
	        onexitfullscreen ="set(layer[openfs].visible,true);  set(layer[closefs].visible,false);"
	        />


	<!-- some example hotspots -->

	<!-- style for dragging hotspot -->
	<style name="draghotspot"
	       distorted="true"
	       ondown="spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery); sub(drag_adjustx, mouse.stagex, hotspotcenterx); sub(drag_adjusty, mouse.stagey, hotspotcentery); asyncloop(pressed, sub(dx, mouse.stagex, drag_adjustx); sub(dy, mouse.stagey, drag_adjusty); screentosphere(dx, dy, ath, atv); );"
	       onclick="oninterrupt(break); lookto(get(ath), get(atv), get(view.fov), smooth(), true, true);"
	       />

	<!-- style for animated hotspot -->
	<style name="hotspot_ani_white"
	       url="../animated-hotspots/hotspot_ani_white_64x64x20.png"
	       crop="0|0|64|64"
	       framewidth="64" frameheight="64" frame="0" lastframe="19"
	       frameanimation="if(loaded, inc(frame,1,get(lastframe),0); mul(ypos,frame,frameheight); txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight)); delayedcall(0.03, if(loaded, frameanimation() ) ); );"
	       onloaded="frameanimation();"
	       />

	<hotspot name="spot1" url="../../images/css3d_logo.png"  style="draghotspot|tooltip" tooltip="CSS-3D Transforms Logo" ath="+33" atv="-16" />
	<hotspot name="spot2" url="../../images/flashlogo80.png" style="draghotspot|tooltip" tooltip="Flash Logo" ath="+28" atv="+11" />
	<hotspot name="spot3" url="../../images/html5logo80.png" style="draghotspot|tooltip" tooltip="HTML5 Logo" ath="-22" atv="-22" />
	<hotspot name="spot4" url="../../images/webgl_logo.png"  style="draghotspot|tooltip" tooltip="WebGL Logo" ath="-33" atv="+10" />
	<hotspot name="spot5" url="../../images/krpano_logo.png" style="draghotspot|tooltip" tooltip="krpano Logo" ath="0" atv="+20" />
	<hotspot name="spot6" style="hotspot_ani_white|tooltip" tooltip="Animated Hotspot" ath="0" atv="-20" />
	

	<!-- the 'tooltip' style - show tooltip textfield and update positions as long as hovering -->
	<style name="tooltip"
	       onover="copy(layer[tooltip].html, tooltip);
	               set(layer[tooltip].visible, true);
	               tween(layer[tooltip].alpha, 1.0, 0.5);
	               asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
	       onout="tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"
	       />


	<!-- the 'tooltip' textfield -->
	<layer name="tooltip" keep="true"
	       url="%SWFPATH%/plugins/textfield.swf"
	       parent="STAGE"
	       visible="false" alpha="0"
	       enabled="false"
	       align="lefttop"
	       edge="bottom"
	       oy="-2"
	       autowidth="true"
	       autoheight="true"
	       background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0"
	       border="false" bordercolor="0x000000" borderalpha="1.0"
	       borderwidth="1.0" roundedge="0"
	       shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0"
	       textshadow="1" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"
	       css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:14px;"
	       html=""
	       />
		
</krpano>