You are not logged in.

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

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,363

  • Send private message

1

Wednesday, August 19th 2009, 9:18pm

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

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: http://krpano.com/examples/interactivearea/
XML: http://krpano.com/examples/interactivear…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:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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


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:

Quoted

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



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: http://krpano.com/examples/interactivearea/
XML: http://krpano.com/examples/interactivear…ractivearea.xml

have fun

best regards,
Klaus

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

  • Send private message

2

Thursday, August 20th 2009, 7:18am

great example!

*thumbsup*

No, I was wrong... it's not a great example... it's a freaking wonderful example *tongue* *thumbup* *w00t* *thumbsup*
Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Andrey_K

Beginner

Posts: 36

Location: Ukraine

Occupation: photographer

  • Send private message

3

Thursday, August 20th 2009, 7:48am

*g* !!!!!!!! *thumbsup* !!!!!!!
http://vrphoto.com.ua

mzaa

Beginner

Posts: 10

  • Send private message

4

Thursday, August 20th 2009, 12:14pm

impressive example *thumbsup*
these calculations are true only for the <front url="pano_f.jpg"/> *huh*
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

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

5

Thursday, August 20th 2009, 2:43pm

Hi mzaa,

Quoted

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

Quoted

"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

Administrator

  • "klaus.krpano" started this thread

Posts: 13,363

  • Send private message

6

Thursday, August 20th 2009, 5:04pm

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

Beginner

Posts: 10

  • Send private message

7

Thursday, August 20th 2009, 8:08pm

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

tommo77funk

Intermediate

Posts: 159

Location: London

Occupation: Photographer

  • Send private message

8

Wednesday, August 26th 2009, 12:58am

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

Intermediate

Posts: 358

Location: Paris

  • Send private message

9

Wednesday, October 21st 2009, 12:51pm

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 ?
VideoStitch, a video stitching engine / blog sur les visites virtuelles ( french ).

This post has been edited 1 times, last edit by "nelk" (Oct 21st 2009, 1:10pm)

Tuur

Sage

Posts: 3,733

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

10

Wednesday, October 21st 2009, 2:47pm

Nelk,

i think the answere is YES

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,363

  • Send private message

11

Friday, October 23rd 2009, 9:07am

Quoted 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

Trainee

Posts: 133

  • Send private message

12

Friday, October 23rd 2009, 9:56am

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

Beginner

Posts: 16

  • Send private message

13

Saturday, October 24th 2009, 8:02pm

is this method compatible with spherical panoramas?
I wish my Blood was Blue

S.M.Taheri

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,363

  • Send private message

14

Monday, October 26th 2009, 8:48pm

Quoted 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

Trainee

Posts: 162

  • Send private message

15

Saturday, March 13th 2010, 9:10pm

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:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

<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>
Unfortunately, this code gets my browser to crash. So I wrote this:
0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

Dr. Schneckem

Trainee

Posts: 162

  • Send private message

16

Saturday, March 13th 2010, 9:10pm

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

<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>
, 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.
0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

weddy

Beginner

Posts: 5

  • Send private message

17

Sunday, March 14th 2010, 2:05pm

Quoted

the changing area should be in one cube face


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

Source code

 
1
2
3

<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);"...

This post has been edited 1 times, last edit by "weddy" (Mar 14th 2010, 5:30pm)

Dr. Schneckem

Trainee

Posts: 162

  • Send private message

18

Saturday, March 20th 2010, 6:14pm

0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

rey

Trainee

Posts: 48

Location: Tallinn, Estonia

Occupation: 360VR photographer

  • Send private message

19

Wednesday, April 7th 2010, 4:50pm

One more interactive chrono-panorama with open source code

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.

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 13,363

  • Send private message

20

Thursday, April 8th 2010, 9:03am

Hi,

great work!

Quoted 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

Similar threads