Example/Tutorial - interactive area in the pano (aligned distorted hotspot)

klaus.krpano · August 19, 2009 at 9:18 PM

Hi,

Update - here an updated tutorial without 'hotspot-inside-cube-face-limitations':
Example/Tutorial - Extract a Distorted Hotspot from any kind of Pano Image (with perfect pixel alignment)

regarding to this request - How it is possible to gain effect in KRpano? - I have made this example:

it shows a way - how to overlay the pano with a distorted hotspots, that shows a different state of the pano:

Example: https://krpano.com/examples/interactivearea/
XML: https://krpano.com/examples/inter…ractivearea.xml

the xml code is very simple - the interactive area is just a distorted hotspot, which fades in and out on mouse hovering:

XML:

Code

<krpano>
    
<image>
  <left  url="pano_l.jpg" />
  <front url="pano_f.jpg" />
  <right url="pano_r.jpg" />
  <back  url="pano_b.jpg" />
  <up	url="pano_u.jpg" />
  <down  url="pano_d.jpg" />
</image>
    
<hotspot name="car"
     	url="hotspot.jpg" 
     	distorted="true"
     	ath="0"
     	atv="0"
     	width="306.842105"
     	height="174.736842"
     	edge="lefttop"
     	ox="-172.631578"
     	oy="-4.736842" 
     	alpha="0.0"
     	onover="tween(alpha,1.0);"
     	onout="tween(alpha,0.0);"
     	/>
</krpano>

Display More

but the most difficult thing here, to get a perfect overlay, would be to find the correct position/size and rotation for the distorted hotspot,

but there is an easy solution:

use cube faces
the changing area should be in one cube face
crop out the modified/different area out
important - note the position and size of the cropped area
then calculate the position and size for the hotspot:
- some explanations first:
  - the internal space in krpano for distorted hotspots is 1000x1000
  - that means a hotspot with a size of 1000x1000 covers the same area like a cube face
- now with the noted sizes about the cropped area the position and size of the hotspot can be calculated:
  - hotspot.width = area-width * 1000 / original-cubeface-width
  - hotspot.height = area-height * 1000 / original-cubeface-height
  - hotspot.ox = area-x * 1000 / original-cubeface-width - 500
  - hotspot.oy = area-y * 1000 / original-cubeface-height - 500
  - the "hotspot.edge" must be set to "lefttop" for these calculations
- finally the ath/atv position of the hotspot must be set to move the hotspot to the correct cube face:
  here are the positions for the cube sides:
  - front: ath="0" atv="0"
  - right: ath="90" atv="0"
  - left: ath="-90" atv="0"
  - back: ath="180" atv="0"
  - up: ath="0" atv="-90"
  - down: ath="0" atv="+90"

here these calculations on the example:

the original image:

the image with the different area:

the cropped area: (which is the hotspot)

the offset to the cropped area in the original image is: x=622 y=941 and the size: w=583 h=332

the original cubeface size is 1900x1900

hotspot.width = 583 * 1000 / 1900 = 306.842105
hotspot.height = 332 * 1000 / 1900 = 174.736842
hotspot.ox = 622 * 1000 / 1900 - 500 = -172.631578
hotspot.oy = 941 * 1000 / 1900 - 500 = -4.736842

these values in the xml:

Quote

<hotspot ...
width="306.842105"
height="174.736842"
edge="lefttop"
ox="-172.631578"
oy="-4.736842"
...

Display More

this would already work, the hotspot is now perfectly aligned to fit the original pano image,
but if the mouse should interact with hotspot, the "area" where it should become active can be a problem,
the hotspot is a rectangle (press TAB to see it) and will already get active when the mouse comes over the area of this rectangle,

now - to limit the interactive area to a non-regular shape:

create a polygonal hotspot with the editor plugin
disable the distored hotspot (enabled="false")
hide the polygonal hotspot (alpha="0.0")
order the hotspots - e.g. image - zorder="1", polygonal - zorder="2"
in the onover/onout events of the polygonal fade in/out the image hotspot

the hit area: (in the editor plugin)

here the example and xml again:

Example: https://krpano.com/examples/interactivearea/
XML: https://krpano.com/examples/inter…ractivearea.xml

have fun

best regards,
Klaus

Graydon · August 20, 2009 at 7:18 AM

great example!

No, I was wrong... it's not a great example... it's a freaking wonderful example

Andrey_K · August 20, 2009 at 7:48 AM

!!!!!!!! !!!!!!!

mzaa · August 20, 2009 at 12:14 PM

impressive example
these calculations are true only for the <front url="pano_f.jpg"/>
hotspot.width = 583 * 1000 / 1900 = 306.842105

hotspot.height = 332 * 1000 / 1900 = 174.736842
hotspot.ox = 662 * 1000 / 1900 - 500 = -172.631578
hotspot.oy = 941 * 1000 / 1900 - 500 = -4.736842

if I use hotspot in another image (<left url="pano_l.jpg"/>), the calculation is not correct

michel · August 20, 2009 at 2:43 PM

Hi mzaa,

Quote

if I use hotspot in another image (<left url="pano_l.jpg"/>), the calculation is not correct

Perhaps here is the reason why:

Quote

"Quoted from KlausExample/Tutorial above"
finally the ath/atv position of the hotspot must be set to move the hotspot to the correct cube face:
here are the positions for the cube sides:

front: ath="0" atv="0"
right: ath="90" atv="0"
left: ath="-90" atv="0"
back: ath="180" atv="0"
up: ath="0" atv="-90"
down: ath="0" atv="+90"

Salut.

klaus.krpano · August 20, 2009 at 5:04 PM

Hi,

yes, michel is right!

here more detailed explanation about that:

with - ath / atv - the "origin" point in the pano for the hotspot is set
the edge="lefttop" aligns the hotspot with its left top edge at this point
and with ox and oy the hotspot is "shifted" left(-)/right(+) and up(-)/down(+) away from this point

best regards,
Klaus

mzaa · August 20, 2009 at 8:08 PM

thanks michel and klaus
this is my inattention
wanted to quickly test
I repeat, an excellent example.

tommo77funk · August 26, 2009 at 12:58 AM

Great post Klaus ! This is really exciting stuff - I can imagine a pirates treasure hunt panorama :) and all sort of other uses.

Many thanks for the continued inspiration and education.

Best wishes,

tom

nelk · October 21, 2009 at 12:51 PM

I'm just discovering this topic. Thanks for this wonderfull example !

I've a question : Does it works the same with multi res hotspot ? I've just have to use the original cube, make all the calcul, and then use the tiles ?

Tuur · October 21, 2009 at 2:47 PM

Nelk,

i think the answere is YES

Tuur

klaus.krpano · October 23, 2009 at 9:07 AM

Quote from nelk

I've a question : Does it works the same with multi res hotspot ? I've just have to use the original cube, make all the calcul, and then use the tiles ?

yes, of course
the calculated values itself are independent of the pano resolution

best regards,
Klaus

michael crane · October 23, 2009 at 9:56 AM

what do you use to get the co-ordinates ?
I'd like a gui to select the area of the cube face to crop but I'd like to be able to type in the numbers manually to refine the position.
I will probably try image magik to crop a bunch once I've got the coordinates but it would be nice to have a gui that I can type in the size of the crop and see it. Photoshop doesn't seem to do it.is only controlled by mouse ?

s_m_taheri · October 24, 2009 at 8:02 PM

is this method compatible with spherical panoramas?

klaus.krpano · October 26, 2009 at 8:48 PM

Quote from s_m_taheri

is this method compatible with spherical panoramas?

Hi, not this method works only for cube faces,

best regards,
Klaus

Dr. Schneckem · March 13, 2010 at 9:10 PM

Using the technic described in this thread I tried to make an animated panorama, whose cube faces change every two seconds automatically. As the pano would have to reload when I'd use set(krpano.image.left.url), I decided to use hotspots as the carrier medium for the cubefaces. A-F are the different face sets. This is my code:

Code

<krpano version="1.0.8" onstart="action(start);">


	<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" />




	<image>
	<cubestrip url="%SWFPATH%/aufraeumpano_preview.jpg" />
	</image>
	
	
	
	<!-- Hotspots -->
	
	<hotspot name="left"
	url="%SWFPATH%/A/aufraeumpano_A_l.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="-90" 
     	atv="0"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
	
	<hotspot name="front"
	url="%SWFPATH%/A/aufraeumpano_A_f.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="0" 
     	atv="0"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>


	<hotspot name="right"
	url="%SWFPATH%/A/aufraeumpano_A_r.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="90" 
     	atv="0"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
	
	<hotspot name="back"
	url="%SWFPATH%/A/aufraeumpano_A_b.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="180" 
     	atv="0"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
	
	<hotspot name="up"
	url="%SWFPATH%/A/aufraeumpano_A_u.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="0" 
     	atv="-90"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
	
		
	<hotspot name="down"
	url="%SWFPATH%/A/aufraeumpano_A_d.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="0" 
     	atv="90"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
     	
	
	
	<!-- Actions -->	
	
	<action name="start">
	delayedcall(2, 
	set(hotspot[left].url,"%SWFPATH%/A/aufraeumpano_A_l.jpg");
	set(hotspot[front].url,"%SWFPATH%/A/aufraeumpano_A_f.jpg");
	set(hotspot[right].url,"%SWFPATH%/A/aufraeumpano_A_r.jpg");
	set(hotspot[back].url,"%SWFPATH%/A/aufraeumpano_A_b.jpg");
	set(hotspot[up].url,"%SWFPATH%/A/aufraeumpano_A_u.jpg");
	set(hotspot[down].url,"%SWFPATH%/A/aufraeumpano_A_d.jpg");		
	);
		
	action(left);
	action(front);
	action(right);
	action(back);	
	action(up);
	action(down);	
	</action>
	
	
	<action name="left">
    	delayedcall(2, set(hotspot[left].url,"%SWFPATH%/B/aufraeumpano_B_l.jpg");	);    
    	delayedcall(2, set(hotspot[left].url,"%SWFPATH%/C/aufraeumpano_C_l.jpg"); 	);  
    	delayedcall(2, set(hotspot[left].url,"%SWFPATH%/D/aufraeumpano_D_l.jpg"); 	); 
    	delayedcall(2, set(hotspot[left].url,"%SWFPATH%/E/aufraeumpano_E_l.jpg"); 	); 
    	delayedcall(2, set(hotspot[left].url,"%SWFPATH%/F/aufraeumpano_F_l.jpg"); 	);   
    	action(start);      	
	</action>
	
	<action name="front">
    	delayedcall(2, set(hotspot[front].url,"%SWFPATH%/B/aufraeumpano_B_f.jpg");	);    
    	delayedcall(2, set(hotspot[front].url,"%SWFPATH%/C/aufraeumpano_C_f.jpg"); 	);  
    	delayedcall(2, set(hotspot[front].url,"%SWFPATH%/D/aufraeumpano_D_f.jpg"); 	); 
    	delayedcall(2, set(hotspot[front].url,"%SWFPATH%/E/aufraeumpano_E_f.jpg"); 	); 
    	delayedcall(2, set(hotspot[front].url,"%SWFPATH%/F/aufraeumpano_F_f.jpg"); 	);   
    	action(start);      	
	</action>
	
	<action name="right">
    	delayedcall(2, set(hotspot[right].url,"%SWFPATH%/B/aufraeumpano_B_r.jpg");	);    
   	delayedcall(2, set(hotspot[right].url,"%SWFPATH%/C/aufraeumpano_C_r.jpg"); 	);  
    	delayedcall(2, set(hotspot[right].url,"%SWFPATH%/D/aufraeumpano_D_r.jpg"); 	); 
    	delayedcall(2, set(hotspot[right].url,"%SWFPATH%/E/aufraeumpano_E_r.jpg"); 	); 
    	delayedcall(2, set(hotspot[right].url,"%SWFPATH%/F/aufraeumpano_F_r.jpg"); 	);   
    	action(start);      	
	</action>
	
	<action name="back">
    	delayedcall(2, set(hotspot[back].url,"%SWFPATH%/B/aufraeumpano_B_b.jpg");	);    
    	delayedcall(2, set(hotspot[back].url,"%SWFPATH%/C/aufraeumpano_C_b.jpg"); 	);  
    	delayedcall(2, set(hotspot[back].url,"%SWFPATH%/D/aufraeumpano_D_b.jpg"); 	); 
    	delayedcall(2, set(hotspot[back].url,"%SWFPATH%/E/aufraeumpano_E_b.jpg"); 	); 
    	delayedcall(2, set(hotspot[back].url,"%SWFPATH%/F/aufraeumpano_F_b.jpg"); 	);   
    	action(start);      	
	</action>
	
	<action name="up">
    	delayedcall(2, set(hotspot[up].url,"%SWFPATH%/B/aufraeumpano_B_u.jpg");		);    
    	delayedcall(2, set(hotspot[up].url,"%SWFPATH%/C/aufraeumpano_C_u.jpg"); 	);  
   	delayedcall(2, set(hotspot[up].url,"%SWFPATH%/D/aufraeumpano_D_u.jpg"); 	); 
   	delayedcall(2, set(hotspot[up].url,"%SWFPATH%/E/aufraeumpano_E_u.jpg"); 	); 
   	delayedcall(2, set(hotspot[up].url,"%SWFPATH%/F/aufraeumpano_F_u.jpg"); 	);   
   	action(start);      	
	</action>
	
	<action name="down">
    	delayedcall(2, set(hotspot[down].url,"%SWFPATH%/B/aufraeumpano_B_d.jpg");	);    
    	delayedcall(2, set(hotspot[down].url,"%SWFPATH%/C/aufraeumpano_C_d.jpg"); 	);  
    	delayedcall(2, set(hotspot[down].url,"%SWFPATH%/D/aufraeumpano_D_d.jpg"); 	); 
    	delayedcall(2, set(hotspot[down].url,"%SWFPATH%/E/aufraeumpano_E_d.jpg"); 	); 
    	delayedcall(2, set(hotspot[down].url,"%SWFPATH%/F/aufraeumpano_F_d.jpg"); 	);   
    	action(start);      	
	</action>	


</krpano>

Display More

Unfortunately, this code gets my browser to crash. So I wrote this:

Dr. Schneckem · March 13, 2010 at 9:10 PM

Code

<krpano version="1.0.8" onstart="action(start);">


	<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" />




	<image>
	<cubestrip url="%SWFPATH%/aufraeumpano_preview.jpg" />
	</image>
	
	
	
	<!-- Hotspots -->
	
	<hotspot name="left"
	url="%SWFPATH%/A/aufraeumpano_A_l.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="-90" 
     	atv="0"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
	
	<hotspot name="front"
	url="%SWFPATH%/A/aufraeumpano_A_f.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="0" 
     	atv="0"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>


	<hotspot name="right"
	url="%SWFPATH%/A/aufraeumpano_A_r.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="90" 
     	atv="0"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
	
	<hotspot name="back"
	url="%SWFPATH%/A/aufraeumpano_A_b.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="180" 
     	atv="0"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
	
	<hotspot name="up"
	url="%SWFPATH%/A/aufraeumpano_A_u.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="0" 
     	atv="-90"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
	
		
	<hotspot name="down"
	url="%SWFPATH%/A/aufraeumpano_A_d.jpg"
     	distorted="true"
     	handcursor="false"
     	ath="0" 
     	atv="90"
     	width="1000"
     	height="1000"
     	edge="center"
     	ox="0"
     	oy="0" 
     	alpha="1.0"
     	capture="false"
     	/>
     	
	
	
	<!-- Actions -->	
	
	<action name="start">
	delayedcall(2, 
	set(hotspot[left].url,"%SWFPATH%/A/aufraeumpano_A_l.jpg");
	set(hotspot[front].url,"%SWFPATH%/A/aufraeumpano_A_f.jpg");
	set(hotspot[right].url,"%SWFPATH%/A/aufraeumpano_A_r.jpg");
	set(hotspot[back].url,"%SWFPATH%/A/aufraeumpano_A_b.jpg");
	set(hotspot[up].url,"%SWFPATH%/A/aufraeumpano_A_u.jpg");
	set(hotspot[down].url,"%SWFPATH%/A/aufraeumpano_A_d.jpg");	
	);	
		
	action(B);
	action(C);
	action(D);
	action(E);	
	action(F);
	</action>
	
	
	<action name="B">
    	delayedcall(2, 
    	set(hotspot[left].url,"%SWFPATH%/B/aufraeumpano_B_l.jpg");	   
    	set(hotspot[front].url,"%SWFPATH%/B/aufraeumpano_B_f.jpg"); 	  
    	set(hotspot[right].url,"%SWFPATH%/B/aufraeumpano_B_r.jpg"); 	 
    	set(hotspot[back].url,"%SWFPATH%/B/aufraeumpano_B_b.jpg");  
    	set(hotspot[up].url,"%SWFPATH%/B/aufraeumpano_B_u.jpg"); 
    	set(hotspot[down].url,"%SWFPATH%/B/aufraeumpano_B_d.jpg"); 	
    	);   
    	
    	action(C);      	
	</action>
	
	<action name="C">
    	delayedcall(2, 
    	set(hotspot[left].url,"%SWFPATH%/C/aufraeumpano_C_l.jpg");	   
    	set(hotspot[front].url,"%SWFPATH%/C/aufraeumpano_C_f.jpg"); 	  
    	set(hotspot[right].url,"%SWFPATH%/C/aufraeumpano_C_r.jpg"); 	 
    	set(hotspot[back].url,"%SWFPATH%/C/aufraeumpano_C_b.jpg");  
    	set(hotspot[up].url,"%SWFPATH%/C/aufraeumpano_C_u.jpg"); 
    	set(hotspot[down].url,"%SWFPATH%/C/aufraeumpano_C_d.jpg"); 	
    	);   
    	
    	action(D);      	
	</action>
	
	
	<action name="D">
    	delayedcall(2, 
    	set(hotspot[left].url,"%SWFPATH%/D/aufraeumpano_D_l.jpg");	   
    	set(hotspot[front].url,"%SWFPATH%/D/aufraeumpano_D_f.jpg"); 	  
    	set(hotspot[right].url,"%SWFPATH%/D/aufraeumpano_D_r.jpg"); 	 
    	set(hotspot[back].url,"%SWFPATH%/D/aufraeumpano_D_b.jpg");  
    	set(hotspot[up].url,"%SWFPATH%/D/aufraeumpano_D_u.jpg"); 
    	set(hotspot[down].url,"%SWFPATH%/D/aufraeumpano_D_d.jpg"); 	
    	);   
    	
    	action(E);      	
	</action>
	
	
	<action name="E">
    	delayedcall(2, 
    	set(hotspot[left].url,"%SWFPATH%/E/aufraeumpano_E_l.jpg");	   
    	set(hotspot[front].url,"%SWFPATH%/E/aufraeumpano_E_f.jpg"); 	  
    	set(hotspot[right].url,"%SWFPATH%/E/aufraeumpano_E_r.jpg"); 	 
    	set(hotspot[back].url,"%SWFPATH%/E/aufraeumpano_E_b.jpg");  
    	set(hotspot[up].url,"%SWFPATH%/E/aufraeumpano_E_u.jpg"); 
    	set(hotspot[down].url,"%SWFPATH%/E/aufraeumpano_E_d.jpg"); 	
    	);   
    	
    	action(F);      	
	</action>
	
	
	<action name="F">
    	delayedcall(2, 
    	set(hotspot[left].url,"%SWFPATH%/F/aufraeumpano_F_l.jpg");	   
    	set(hotspot[front].url,"%SWFPATH%/F/aufraeumpano_F_f.jpg"); 	  
    	set(hotspot[right].url,"%SWFPATH%/F/aufraeumpano_F_r.jpg"); 	 
    	set(hotspot[back].url,"%SWFPATH%/F/aufraeumpano_F_b.jpg");  
    	set(hotspot[up].url,"%SWFPATH%/F/aufraeumpano_F_u.jpg"); 
    	set(hotspot[down].url,"%SWFPATH%/F/aufraeumpano_F_d.jpg"); 	
    	);   
    	
    	action(start);      	
	</action>


</krpano>

Display More

, which actually does the same: Crashing. I've been working half the day on it. I think I regrettably will have to kill myself if no one can help me.

weddy · March 14, 2010 at 2:05 PM

Quote

the changing area should be in one cube face

It's work in two cube face....

Code

<hotspot name="door1" url="door1.jpg" enabled="false" zorder="1" distorted="true" ath="-90" atv="0" width="470.526316" height="971.578947" edge="lefttop" ox="-13.6842105" oy="-471.578947" alpha="0.0" /> 
<hotspot name="door2" url="door2.jpg" enabled="false" zorder="1" distorted="true" ath="0" atv="+90" width="304.736842" height="461.052632" edge="lefttop" ox="-500" oy="-453.157894" alpha="0.0" /> 
...onover="tween(hotspot[door1].alpha,1.0); tween(hotspot[door2].alpha,1.0)" onout="tween(hotspot[door1].alpha,0.0); tween(hotspot[door2].alpha,0.0);"...

Dr. Schneckem · March 20, 2010 at 6:14 PM

I finally got it working: http://www.krpano.com/forum/wbb/inde…13002#post13002

rey · April 7, 2010 at 4:50 PM

http://www.360pano.eu/show/?id=419

Action animate parameters:
%1 - unique name
%2 - name of hotspot images sequence. Can include path. Sequence in images name need to be started from 0.
%3 - number of images in sequence
%4 - delay of delayedcall
%5 - time in seconds for tween
%6 - ox
%7 - oy
%8 - width
%9 - height

NB! We find that action have limitation for 9 parameters only, so there's no way for define ath and atv

You can call animate action for different sets.

Code

<krpano version="1.0.8" onstart="action(onstart);" > 
    <action name="onstart"> 
        loadscene(scene1,null, MERGE); 
    </action> 
    <scene name="scene1" onstart=" 
        animate('a', 'set1_', 9, 2, 0.3, -178.18671, -75.85278, 258.07899, 325.40394); 
        "> 


        <image> 
            <left url="pano_l.jpg" /> 
            <front url="pano_f.jpg" /> 
            <right url="pano_r.jpg" /> 
            <back url="pano_b.jpg" /> 
            <up url="pano_u.jpg" /> 
            <down url="pano_d.jpg" /> 
        </image> 
        <action name="animate"> 
            addhs("%1f", %6, %7, %8, %9, 0, 0, 2); 
            addhs("%1b", %6, %7, %8, %9, 0, 0, 1); 
            delayedcall(%4, loop("%1f","%1b",%2,%3,%4,%5,0)); 
        </action> 
        <action name="addhs"> 
            addhotspot(%1); 
            set(hotspot[%1].ox, %2); 
            set(hotspot[%1].oy, %3); 
            set(hotspot[%1].width, %4); 
            set(hotspot[%1].height, %5); 
            set(hotspot[%1].ath, %6); 
            set(hotspot[%1].atv, %7); 
            set(hotspot[%1].zorder, %8); 
            set(hotspot[%1].enabled, false); 
            set(hotspot[%1].distorted, true); 
            set(hotspot[%1].edge, "lefttop"); 
        </action> 


        <action name="loop"> 
            set(hotspot[%1].alpha, 0); 
            set(hotspot[%1].url, "%3%7.jpg"); 
            tween(hotspot[%1].alpha, 1.0, %6, , set(hotspot[%2].url, "%3%7.jpg") ); 
            set(hotspot[%1].i, %7); 
            inc(hotspot[%1].i); 
            if(hotspot[%1].i EQ %4, set(hotspot[%1].i, 0);); 
            delayedcall(%5, loop(%1,%2,%3,%4,%5,%6,get(hotspot[%1].i))); 
        </action> 
    </scene> 
</krpano>

Display More

klaus.krpano · April 8, 2010 at 9:03 AM

Hi,

great work!

Quote from rey

NB! We find that action have limitation for 9 parameters only, so there's no way for define ath and atv

this limitation will be removed in the next release,
then you can use up to 99 parameters

best regards,
Klaus

Example/Tutorial - interactive area in the pano (aligned distorted hotspot)

Participate now!

Users Viewing This Thread