You are not logged in.

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.

Tuur

Sage

Posts: 3,733

Location: Netherlands

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

  • Send private message

Posts: 114

Location: Berlin

Occupation: Panoramafotograf

  • Send private message

22

Monday, June 25th 2012, 12:08pm

link to example code

Hi Tuur,

this is a very nice use of this new possibility!
I tried to have a look into the code, but found the links to the xml dead.

Would you mind sharing your solution with us?

Cheers,
Jan
Jan Totzek | Panoramafotografie | Berlin
www.panographer.de

Tuur

Sage

Posts: 3,733

Location: Netherlands

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

  • Send private message

23

Monday, June 25th 2012, 12:15pm

Hi Jan,

http://virtualtuur.com/WBtest/7/

http://virtualtuur.com/WBtest/7/desktop.xml

there is also phone.xml and pad.xml

i'm not fully satisfied but it works nice..

Could be very interesting to use your burst mode now, once and a while, when shooting pano's..

the base code is simple:

i call the movie(); in the onstart in this case.

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
<action name="movie">

		delayedcall(0.05, set(hotspot[move].alpha,1););
		delayedcall(0.15, set(hotspot[move2].alpha,1));
		delayedcall(0.3, set(hotspot[move3].alpha,1););
		delayedcall(0.45, set(hotspot[move4].alpha,1));
		delayedcall(0.60, set(hotspot[move5].alpha,1));
		delayedcall(0.75, set(hotspot[move6].alpha,1));
		delayedcall(0.9, set(hotspot[move7].alpha,1));
		delayedcall(1.05, set(hotspot[move8].alpha,1));
		delayedcall(1.2, set(hotspot[move9].alpha,1));
		delayedcall(1.35, set(hotspot[move10].alpha,1));
		delayedcall(1.5, set(hotspot[move11].alpha,1));
		delayedcall(1.65, set(hotspot[move12].alpha,1));
		delayedcall(1.8, set(hotspot[move13].alpha,1));
		delayedcall(1.95, set(hotspot[move14].alpha,1));
		delayedcall(2.1, hide(););
</action>	

<action name="hide">

		set(hotspot[move2].alpha,0);
		set(hotspot[move3].alpha,0);
		set(hotspot[move4].alpha,0);
		set(hotspot[move5].alpha,0);
		set(hotspot[move6].alpha,0);
		set(hotspot[move7].alpha,0);
		set(hotspot[move8].alpha,0);
		set(hotspot[move9].alpha,0);
		set(hotspot[move10].alpha,0);
		set(hotspot[move11].alpha,0);
		set(hotspot[move12].alpha,0);
		set(hotspot[move13].alpha,0);
		set(hotspot[move14].alpha,0); 
		movie();
	</action>
	
	
<style name="htsp_mov" 	distorted="true" preload="true"
	         onloaded="calc_pos_from_hfov_yaw_pitch_roll(62, 15, 7, 2);"
	         enabled="false"
	         />
	
	
<hotspot name="move" url="1_move_1.jpg" style="htsp_mov" alpha="0" zorder="10" />
<hotspot name="move2" url="1_move_2.jpg" style="htsp_mov" alpha="0" zorder="11" />
<hotspot name="move3" url="1_move_3.jpg" style="htsp_mov" alpha="0" zorder="12" />
<hotspot name="move4" url="1_move_4.jpg" style="htsp_mov" alpha="0" zorder="13" />
<hotspot name="move5" url="1_move_5.jpg" style="htsp_mov" alpha="0" zorder="14" />
<hotspot name="move6" url="1_move_6.jpg" style="htsp_mov" alpha="0" zorder="15" />
<hotspot name="move7" url="1_move_7.jpg" style="htsp_mov" alpha="0" zorder="16" />
<hotspot name="move8" url="1_move_8.jpg" style="htsp_mov" alpha="0" zorder="17" />
<hotspot name="move9" url="1_move_9.jpg" style="htsp_mov" alpha="0" zorder="18" />
<hotspot name="move10" url="1_move_10.jpg" style="htsp_mov" alpha="0" zorder="19" />
<hotspot name="move11" url="1_move_11.jpg" style="htsp_mov" alpha="0" zorder="20" />
<hotspot name="move12" url="1_move_12.jpg" style="htsp_mov" alpha="0" zorder="21" />
<hotspot name="move13" url="1_move_13.jpg" style="htsp_mov" alpha="0" zorder="22" />
<hotspot name="move14" url="1_move_14.jpg" style="htsp_mov" alpha="0" zorder="23" />


	<!-- lower resolution images for HTML5 and mobile devices 
	<hotspot name="water" url="pool_extract_html5desktop.jpg" devices="html5+desktop" />
	<hotspot name="water" url="pool_extract_html5mobile.jpg"  devices="mobile|tablet" />
-->

<action name="calc_pos_from_hfov_yaw_pitch_roll">
		div(hfov,%1,57.295779);
		div(yaw,%2,-57.295779);
		div(pitch,%3,57.295779);
		div(roll,%4,-57.295779);
	
		<!-- calc width -->
		mul(hfov,0.5);
		Math.tan(hfov);
		mul(width,hfov,1000);
		set(height,'prop');
	
		<!-- calc ath,atv,rotate -->
		Math.cos(ch,yaw);
		Math.sin(sh,yaw);
		Math.cos(ca,pitch);
		Math.sin(sa,pitch);
		Math.cos(cb,roll);
		Math.sin(sb,roll);
		mul(m0,ca,ch);
		mul(tmp,cb,sa);
		mul(tmp,ch);
		mul(tmp2,sb,sh);
		add(m3,tmp,tmp2);
		mul(m4,cb,ca);
		mul(tmp,cb,sa);
		mul(tmp,sh);
		mul(tmp2,sb,ch);
		sub(m5n,tmp,tmp2);
		mul(m5n,-1);
		mul(tmp,sb,sa);
		mul(tmp,ch);
		mul(tmp2,cb,sh);
		sub(m6n,tmp,tmp2);
		mul(m6n,-1);
		Math.atan2(yaw,m6n,m0);
		Math.atan2(roll,m5n,m4);
		Math.asin(pitch,m3);
		mul(ath,yaw,57.295779);
		mul(atv,pitch,57.295779);
		mul(rotate,roll,57.295779);
	</action>


cheers

Tuur *thumbsup*

Posts: 114

Location: Berlin

Occupation: Panoramafotograf

  • Send private message

24

Monday, June 25th 2012, 12:55pm

thanks, definatly worth a try

Hi Tuur,
as soon, as i have some time, i will definatly try that. This is a kind of new dimension in VR-Tours.
Your example runs really smooth on my pc. Only tried Chrome so far.
All the best,
Jan
Jan Totzek | Panoramafotografie | Berlin
www.panographer.de

25

Monday, June 25th 2012, 1:38pm

Hi Tuur, if y understand german, have a look at this thread

wie vertical png filmstrip für html5 erstellen?

the main point is....instead of loading individual jpges for the animation, create in photoshop a png strip with this photograms and use the hotspot animation action

this way:

<hotspot name="testspot"
style="anim"
distorted="true"
onloaded="calc_pos_from_hfov_yaw_pitch_roll(91, -13, 32, -1); "
enabled="false"
alpha="1.0"


/>

<!-- strip with photograms -->
<style name="anim"
url="animpng.png"
crop="0|0|800|800"
framewidth="800" frameheight="800" frame="0" lastframe="3"
onloaded="hotspot_animate();calc_pos_from_hfov_yaw_pitch_roll(91, -13, 32, -1);"
/>

<!-- hotspot animation action -->
<action name="hotspot_animate">
inc(frame,1,get(lastframe),0);
mul(ypos,frame,frameheight);
txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));
delayedcall(0.03, if(loaded, hotspot_animate() ) );
</action>



<action name="calc_pos_from_hfov_yaw_pitch_roll">
div(hfov,%1,57.295779);
div(yaw,%2,-57.295779);
div(pitch,%3,57.295779);
div(roll,%4,-57.295779);

<!-- calc width -->
mul(hfov,0.5);
Math.tan(hfov);
mul(width,hfov,1000);
set(height,'prop');

<!-- calc ath,atv,rotate -->
Math.cos(ch,yaw);
Math.sin(sh,yaw);
Math.cos(ca,pitch);
Math.sin(sa,pitch);
Math.cos(cb,roll);
Math.sin(sb,roll);
mul(m0,ca,ch);
mul(tmp,cb,sa);
mul(tmp,ch);
mul(tmp2,sb,sh);
add(m3,tmp,tmp2);
mul(m4,cb,ca);
mul(tmp,cb,sa);
mul(tmp,sh);
mul(tmp2,sb,ch);
sub(m5n,tmp,tmp2);
mul(m5n,-1);
mul(tmp,sb,sa);
mul(tmp,ch);
mul(tmp2,cb,sh);
sub(m6n,tmp,tmp2);
mul(m6n,-1);
Math.atan2(yaw,m6n,m0);
Math.atan2(roll,m5n,m4);
Math.asin(pitch,m3);
mul(ath,yaw,57.295779);
mul(atv,pitch,57.295779);
mul(rotate,roll,57.295779);
</action>


test this link on an iPad (is a draft)

homepage.mac.com/imge/test/test.html

is an anim of a png strip with 4 photograms...the quality is pretty good


imge

Tuur

Sage

Posts: 3,733

Location: Netherlands

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

  • Send private message

26

Monday, June 25th 2012, 1:51pm

ah yes,

smart!

da habe ich nicht auf gedacht.
Ich versuche es mahl.

but i'm afraid that the png strip gets very large with 14times 4000x875
that's why i made the pad jpg's smaller but that is not serious option.

i'll try.
Thanx!

EDIT: to big to save as png (875x56000)
30000 long makes 11 mb :-|
to heavy, even for desktop http://virtualtuur.com/WBtest/8/


Tuur *thumbsup*

This post has been edited 3 times, last edit by "Tuur" (Jun 25th 2012, 2:56pm)


27

Monday, June 25th 2012, 3:03pm

Tuur, is this size needed for a tablet?? is not too much?

28

Monday, June 25th 2012, 3:11pm

Why should you use png? Just use jpg, also for the 'animation strip'.

But yes, it will be huge.

Tuur

Sage

Posts: 3,733

Location: Netherlands

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

  • Send private message

29

Monday, June 25th 2012, 3:14pm

well half size jpg was ugly also on better quality.
fullsize gets rescaled on ipad (i think) =ugly

but that halfsize png strip doen'st even work on desktop
so i think it's not the best option for large hotspots.
@Maaike: i'll try jpg... just a minute.
Tuur *thumbsup*

Tuur

Sage

Posts: 3,733

Location: Netherlands

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

  • Send private message

30

Monday, June 25th 2012, 3:23pm

he he not so good job in the strip ;-)
a.. ah i change the size.. well
but clear that the quality is less!
i try quick to make it better..



:-|

Tuur *thumbsup*

Tuur

Sage

Posts: 3,733

Location: Netherlands

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

  • Send private message

31

Monday, June 25th 2012, 3:27pm

a jpg or png can't be that long.

i'm not sure what to try for ipad and how to calculate for a, not exactely, smaller size..
the whole is now 30000 pixels heigh (that's like half and that is 14x 2142,85714285714 (pixels heigh per picture) ... *w00t*


mmm...
*thumbsup*

Tuur

Sage

Posts: 3,733

Location: Netherlands

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

  • Send private message

32

Monday, June 25th 2012, 3:33pm

funny that it behaves completely different on ipad..

Tuur

Sage

Posts: 3,733

Location: Netherlands

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

  • Send private message

33

Monday, June 25th 2012, 3:53pm

what you see now on ipad is the same size of frames as with the single jpg's but now as a film strip..

don't understand why the difference is...

EDIT: i understand from Hans Nijberg that they also get downscaled to like 1414 pixels or so..

so for that it's not ideal..
Tuur *thumbsup*

This post has been edited 1 times, last edit by "Tuur" (Jun 25th 2012, 5:21pm)


34

Thursday, August 30th 2012, 12:51am

Hi Tuur,

Wouldn't it work if you go into photoshop and create a video file with the frames instead of the strip?

Or the problem is using the video as hotspot for loading on iDevices?

Best Regards!!

Daniel
www.xyz360.com.br

igor.socha

Intermediate

Posts: 200

Occupation: Photographer

  • Send private message

35

Tuesday, November 27th 2012, 10:00am

interactive hotspot with slider?

Hi guys, can somebody help me as I am not very good coder:
I need to make the example with the pool, but with the slider, like in "slider/blending" example http://www.krpano.com/examples/10815/exa…bes/slider.html

how should I change the code to not change the cube faces, but the hotspot

Source code

1
2
3
4
5
6
<hotspot name="spotNNN"
         url="pool_extract.jpg" 
         distorted="true"
         onloaded="calc_pos_from_hfov_yaw_pitch_roll(150, -90, -4, -30);"
         ...
         />
used in this example?

here is the xml http://www.krpano.com/examples/10815/exa…ubes/slider.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
27
28
29
30
31
32
33
34
35
36
37
38
39
<!--
krpano 1.0.8 - xml slider / blending cubes example
-->
<krpano version="1.0.8" onstart="start();">
<!-- text style for startup 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"/>
<view hlookat="11" vlookat="14" fovtype="HFOV" fov="110" fovmin="60" fovmax="140"/>
<plugin name="slider_bg" url="slider_background.png" align="bottom" x="0" y="30" handcursor="false" zorder="1"/>
<plugin name="slider_grip" url="slider_grip.png" align="left" edge="center" parent="slider_bg" x="0" zorder="2" dragging="if(pressed, sub(dx, mouse.stagex, drag_stagex); add(newx, drag_currentx, dx); if(newx LT 0, set(newx,0)); if(newx GT plugin[slider_bg].pixelwidth, copy(newx,plugin[slider_bg].pixelwidth)); copy(x,newx); div(val, newx, plugin[slider_bg].pixelwidth); setblend(get(val)); delayedcall(0,dragging()); );" ondown="copy(drag_currentx,x); copy(drag_stagex,mouse.stagex); dragging();"/>
<action name="addface">
addhotspot(%1); set(hotspot[%1].url, %2); set(hotspot[%1].ath, %3); set(hotspot[%1].atv, %4); set(hotspot[%1].width, 1000); set(hotspot[%1].height, 1000); if(ishtml5, if(isdesktop,
<!-- desktop html5 browsers need overlapping cube faces -->
set(hotspot[%1].width, 1002); set(hotspot[%1].height, 1002); )); set(hotspot[%1].distorted, true); set(hotspot[%1].enabled, false); if(isflash, set(hotspot[%1].visible, false)); set(hotspot[%1].alpha, 0.0); set(hotspot[%1].details, 16);
</action>
<action name="addcube">
addface(face_%1_F, '%CURRENTXML%/%1_f.jpg', 0, 0); addface(face_%1_L, '%CURRENTXML%/%1_l.jpg', -90, 0); addface(face_%1_R, '%CURRENTXML%/%1_r.jpg', +90, 0); addface(face_%1_B, '%CURRENTXML%/%1_b.jpg', +180, 0); addface(face_%1_Z, '%CURRENTXML%/%1_u.jpg', 0, -90); addface(face_%1_N, '%CURRENTXML%/%1_d.jpg', 0, +90);
</action>
<action name="setalpha" devices="flash">
set(%1.alpha, %2); if(%1.alpha == 0.0, set(%1.visible,false), set(%1.visible,true));
</action>
<action name="setalpha" devices="html5">
<!--
safari has some framerate stops/problems when toggling the visibility - so keep here the spots always visible
-->
set(%1.alpha, %2);
</action>
<action name="setcubealpha">
setalpha(hotspot[face_%1_F], %2); setalpha(hotspot[face_%1_L], %2); setalpha(hotspot[face_%1_R], %2); setalpha(hotspot[face_%1_B], %2); setalpha(hotspot[face_%1_Z], %2); setalpha(hotspot[face_%1_N], %2);
</action>
<action name="start">
showtext('[b][i]krpano[br]xml slider / blending cubes example[/i][/b]', infostyle); addcube(pano1); addcube(pano2); setblend(0);
</action>
<action name="setblend" devices="flash">
sub(blend2, 1.0, %1); setcubealpha(pano1, %1); setcubealpha(pano2, get(blend2));
</action>
<action name="setblend" devices="html5">
set(blend1, %1); sub(blend2, 1.0, %1); copy(hotspot[face_pano1_F].alpha, blend1); copy(hotspot[face_pano1_L].alpha, blend1); copy(hotspot[face_pano1_R].alpha, blend1); copy(hotspot[face_pano1_B].alpha, blend1); copy(hotspot[face_pano1_Z].alpha, blend1); copy(hotspot[face_pano1_N].alpha, blend1); copy(hotspot[face_pano2_F].alpha, blend2); copy(hotspot[face_pano2_L].alpha, blend2); copy(hotspot[face_pano2_R].alpha, blend2); copy(hotspot[face_pano2_B].alpha, blend2); copy(hotspot[face_pano2_Z].alpha, blend2); copy(hotspot[face_pano2_N].alpha, blend2);
</action>
</krpano>


I can see, what is this code doing, but I don´t kow, how to change it for my purpose - it is too much for me :(
Can somebody help? Thanx a lot!
Best regards,
Igor Socha

This post has been edited 1 times, last edit by "igor.socha" (Nov 27th 2012, 4:02pm)


Daniel25

Beginner

Posts: 20

Location: london

Occupation: photographer

  • Send private message

36

Friday, December 21st 2012, 11:30am

How to link the hotspot to a 2d photo?

Hi all,

well let me tell you that we should have such tutorial a bit more often!

Thanks Klaus! I can now manage hot spots! What about a page with more tutorial such as this one?

Tuur your panorama is really great!

Well but now let see if I can get some further help!? *smile*

I have followed in detail all the instruction on how to create a Hotspot in any shape an place in my virtual tour.

My end result is exactly as good as the sample of the swimming pool.

However, being a bit silly and not really good at it, how do I link my blinking hot spot to a 2D photo?
I have tried several code both in the tour.xml and in vtourskin.xml but I cannot manage it.

I think it must be something pretty simple that I'm missing! Any help!?

Thanks!!!

Daniel

Posts: 130

Location: Venezia

Occupation: interactive pictures

  • Send private message

37

Friday, December 21st 2012, 6:09pm

http://www.officinepanottiche.com/vegapark/natale12.html
it is done with png animation.
As I do understand we could rewrite teh code of png animation to read the thing horizontally.
:-P
It could help.
But using a movie could help in ipads too.

Daniel25

Beginner

Posts: 20

Location: london

Occupation: photographer

  • Send private message

38

Tuesday, December 25th 2012, 11:01pm

I did manage ma problem

Hi all again,

I did finally manage to link my hotspot to a jpg,
with onclick=openurl, and enable=true.
(very simple after you know how to do it) *smile*

However I would like to open the image above the tour, with fancy box.

I did even pay the fancy box license but still not manage to use it.
Any success out there? suggestions?

I have looked at the following sample but... no success
any ideas?
How to insert a PDF document in Virtual Tour

hopefully wil get there soon, meanwhile Merry Christmas to you all!!!! *smile* *smile* *smile* *thumbsup* *thumbsup* *smile* *smile* ;-) ;-)

Posts: 130

Location: Venezia

Occupation: interactive pictures

  • Send private message

39

Wednesday, January 16th 2013, 1:42pm

Ok ok, here we are with an example.
http://www.lucavascon.net/refound/trenino/trenino.html

something still not working properly. Click me and I will disappear and reappear randomly, you will see some fuzzy error in alpha fading.
I think it is because the open air situation, with light wind etc.
:-D

mstoss

Intermediate

Posts: 297

Location: Berlin

  • Send private message

40

Wednesday, February 13th 2013, 1:19pm

zorder issue on iPad with distorted hotspot?

Strange: For the second time I found an issue with this kind of distorted hotspots. Is the zorder parameter not working here?





I only tested in Safari with user agent set to iPad, but I don't understand why the high zorder value of the triggering hotspot is not working.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	<hotspot name="spot4" distorted="false" url="icons/b_switch.png" scale="1.0" zorder="99" ath="49.588" atv="10.970" onclick="a_switch(maps,spot4)" />

	<hotspot name="maps" url="panos/kartenfach.jpg" distorted="true" 
		onloaded="calc_pos_from_hfov_yaw_pitch_roll(35, -64, 4,-4); " 
		enabled="false" 
		alpha="0"
	/>
		

	<action name="a_switch">
			set(hotspot[%1].visible,true);
			tween(hotspot[%1].alpha,1,0.5);
			set(hotspot[%2].onclick,a_switchback(%1,%2));  		
	</action>


Any help appreciated very much,

Michael