Example/Tutorial - Extract a Distorted Hotspot from any kind of Pano Image (with perfect pixel alignment) - Page 2 - Examples

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

21

Saturday, June 23rd 2012, 8:00pm

mobile question

doublepost..

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

Go to the top of the page

info@totzek.de

Trainee

Posts: 116

Location: Berlin

Occupation: Panoramafotograf

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

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

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

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

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

Go to the top of the page

info@totzek.de

Trainee

Posts: 116

Location: Berlin

Occupation: Panoramafotograf

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

Go to the top of the page

imge

Beginner

Posts: 33

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"

/>


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


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


mul(hfov,0.5);
Math.tan(hfov);
mul(width,hfov,1000);
set(height,'prop');


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

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

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*

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

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

Go to the top of the page

imge

Beginner

Posts: 33

27

Monday, June 25th 2012, 3:03pm

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

Go to the top of the page

maaike

Trainee

Posts: 143

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.

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

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*

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

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

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*

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

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

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

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

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

32

Monday, June 25th 2012, 3:33pm

funny that it behaves completely different on ipad..

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

Go to the top of the page

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

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*

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

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

Go to the top of the page

dfarjoun

Trainee

Posts: 130

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

Go to the top of the page

igor.socha

Intermediate

Posts: 200

Occupation: Photographer

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

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

Go to the top of the page

Daniel25

Beginner

Posts: 20

Location: london

Occupation: photographer

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

Go to the top of the page

officinepanottiche

Trainee

Posts: 130

Location: Venezia

Occupation: interactive pictures

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.

Go to the top of the page

Daniel25

Beginner

Posts: 20

Location: london

Occupation: photographer

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*

Go to the top of the page

officinepanottiche

Trainee

Posts: 130

Location: Venezia

Occupation: interactive pictures

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

Go to the top of the page

mstoss

Intermediate

Posts: 297

Location: Berlin

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

	<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

Go to the top of the page