Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

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

  • Nachricht senden

21

Samstag, 23. Juni 2012, 20:00

mobile question

doublepost..
http://www.virtualtuur.com
Skype:studiotuur

Beiträge: 103

Wohnort: Berlin

Beruf: Panoramafotograf

  • Nachricht senden

22

Montag, 25. Juni 2012, 12:08

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

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

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

  • Nachricht senden

23

Montag, 25. Juni 2012, 12:15

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.

Quellcode

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*
http://www.virtualtuur.com
Skype:studiotuur

Beiträge: 103

Wohnort: Berlin

Beruf: Panoramafotograf

  • Nachricht senden

24

Montag, 25. Juni 2012, 12:55

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

Montag, 25. Juni 2012, 13:38

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

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

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

  • Nachricht senden

26

Montag, 25. Juni 2012, 13:51

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*
http://www.virtualtuur.com
Skype:studiotuur

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Tuur« (25. Juni 2012, 14:56)


27

Montag, 25. Juni 2012, 15:03

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

28

Montag, 25. Juni 2012, 15:11

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

But yes, it will be huge.

Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

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

  • Nachricht senden

29

Montag, 25. Juni 2012, 15:14

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*
http://www.virtualtuur.com
Skype:studiotuur

Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

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

  • Nachricht senden

30

Montag, 25. Juni 2012, 15:23

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*
http://www.virtualtuur.com
Skype:studiotuur

Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

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

  • Nachricht senden

31

Montag, 25. Juni 2012, 15:27

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*
http://www.virtualtuur.com
Skype:studiotuur

Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

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

  • Nachricht senden

32

Montag, 25. Juni 2012, 15:33

funny that it behaves completely different on ipad..
http://www.virtualtuur.com
Skype:studiotuur

Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

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

  • Nachricht senden

33

Montag, 25. Juni 2012, 15:53

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*
http://www.virtualtuur.com
Skype:studiotuur

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Tuur« (25. Juni 2012, 17:21)


34

Donnerstag, 30. August 2012, 00:51

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

Fortgeschrittener

Beiträge: 159

Wohnort: Tirol, Austria

Beruf: Photographer

  • Nachricht senden

35

Dienstag, 27. November 2012, 10:00

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

Quellcode

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:

Quellcode

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »igor.socha« (27. November 2012, 16:02)


Daniel25

Anfänger

Beiträge: 20

Wohnort: london

Beruf: photographer

  • Nachricht senden

36

Freitag, 21. Dezember 2012, 11:30

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

Beiträge: 130

Wohnort: Venezia

Beruf: interactive pictures

  • Nachricht senden

37

Freitag, 21. Dezember 2012, 18:09

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

Anfänger

Beiträge: 20

Wohnort: london

Beruf: photographer

  • Nachricht senden

38

Dienstag, 25. Dezember 2012, 23:01

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* ;-) ;-)

Beiträge: 130

Wohnort: Venezia

Beruf: interactive pictures

  • Nachricht senden

39

Mittwoch, 16. Januar 2013, 13:42

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

40

Mittwoch, 13. Februar 2013, 13:19

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.

Quellcode

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