air compass

Tuur · June 12, 2012 at 3:44 PM

hi,

is it true that in combination with the compass.js we need to stitch the north in the middle of the equirectangular?
I can't get that canvas (photo) get turned according to the real north..

i have

Code

<plugin name="compass" devices="html5"
        url="compass.js"
		enabled="true"
		keep="true"
        onavailability="copy(view.hlookat, heading);"
		onchange="copy(view.hlookat, heading);"
		    />

and no hlookat in the scene.

and also when i touch the leveler button, i have to touch the screen before it works nice again...
what could that be?
i only change some plugin url's from the aircompass and make some plugins visible...
as i should reset the gyro ..

Tuur

ciul · June 15, 2012 at 10:45 PM

In fact, this effect could be (similar) achieved without having to update hotspots ath and atv properties, using their flying property.

Code

<!-- Hotspots ([...] means other properties) -->
<hotspot name="fb" distorted="true" url="images/fb.png" flying="1" [...] />
<hotspot name="rl" distorted="true" url="images/rl.png" flying="1" [...] />
<hotspot name="ho" distorted="true" url="images/ho.png" flying="1" [...] />
<!-- events - show a compass -->
<events onviewchange="
  sub(hfbang,0,get(view.hlookat)); 
  set(hotspot[fb].rx,get(view.vlookat));
  set(hotspot[fb].ry,get(hfbang));


  sub(hrlang,90,get(view.hlookat)); 
  set(hotspot[rl].rx,get(view.vlookat));
  set(hotspot[rl].ry,get(hrlang));


  add(vhoang,-90,get(view.vlookat)); 
  set(hotspot[ho].rx,get(vhoang));


  " />

Display More

Thanks Mr. YASUSHI KUMON for your contribution!

But notice that this way they behave different on zooming in/out.

Regards,
Ciul

ciul · June 20, 2012 at 4:27 PM

Quote from YASUSHI KUMON

Please solve my question.
It is very difficult to rectify the direction of "hotspot[ho]" by hookat.
(The present "hotspot[ho]" does not rotate by hlookat! )
It is difficulty which compounds the angle to which three axes are moved.
I would like to solve it. If it is solvable, the arrow display used, for example with the "google street view" will be attained.

Mr. Yasushi,

by the way, to rectify the direction of "hotspot[ho]", it's easier if you set inverserotation property to true.
Hope this helps.

Regards,
Ciul

jeromebg · August 13, 2012 at 4:20 PM

Hi, I have a problem when the stageheight is too small, then the air compass is not visible anymore (I guess it's because the voffset is too big ?)
Is there a way to set the oy of the hotspots to keep theme always visible and aligned to the bottom of the window ?

Here the exemple : http://www.360images.fr/haras/index.html?pano=box_ext.xml

If you resize your browser window to make it smaller then the aircompass will be invisible...

Thanx for your help !

klaus.krpano · August 13, 2012 at 5:09 PM

Hi,

you can try to use the <area> settings to resize the pano area and place the interface elements via parent="STAGE" outside that pano area. This should cause the 'aircompass' hotspot not to become overlapped.

Best regards,
Klaus

jeromebg · August 14, 2012 at 1:04 PM

Thanx Klaus, it's working with the aircompass now, no more overlapped !

But now I have a problem with the scrollable thumbs, the button to show the scollable area isn't displayed anymore, so I tried to put another button in to execute skin_showthumbs with parent="stage".
When I click on this button the thumbs are displayed as the originale button and when I click again to hide the thumbs the originale button goes back on the right position and is displayed...
I really don't understand why I can't make it visible before clicking on the second button with parent="stage" ?

the thumbs xml :

Code

<!-- Skin Layout -->
	
<layer name="skin_scroll_window" type="container" keep="true" align="leftbottom" width="100%" height="100%" x="0" y="0" y_shown="0" y_hidden="-2" maskchildren="true" >


<layer name="skin_scroll_layer" type="container" align="leftbottom" width="100%" height="100%" x="0" y="-100%">
		


<layer name="skin_title"     url="%SWFPATH%/skin/plugins/textfield.swf" align="lefttop" edge="leftbottom" width="95%" height="32" autoheight="true" x="5" y="-3" zorder="4" enabled="false" background="false" border="false" css="text-align:left; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;" textshadow="1" visible="false" />
<layer name="skin_btn_thumbs" url="icons/thumbs.png"  align="top"  y="-44" scale="1" visible="true" onloaded="if(ismobile, set(scale,1.5))" ondown="skin_showthumbs();"/>
							
<layer name="skin_scroll_container" type="container" bgcolor="0x000000" bgalpha="0.5" align="lefttop" width="100%" height="100%" x="0" y="0" maskchildren="true">


<layer name="skin_btn_prev"   url="icons/prev_scene.png"   align="topleft"        x="15"    y="40"   scale="0.7" alpha="0.5" onclick="skin_nextscene(-1);" devices="desktop|tablet"/>
<layer name="skin_btn_next"   url="icons/next_scene.png"  align="topright"       x="15"    y="40"   scale="0.7" alpha="0.5" onclick="skin_nextscene(+1);" devices="desktop|tablet"/>
			
<layer name="skin_thumbs" state="hidden" url="%SWFPATH%/skin/plugins/scrollarea.swf" alturl="%SWFPATH%/skin/plugins/scrollarea.js" direction="h" visible="false" align="top" width="100%" height="100" onloaded="skin_updatescroll();" /></layer>


</layer>
</layer>

Display More

the second button:

Code

<plugin name="pouet" url="icons/thumbs.png"  align="bottom"  devices="desktop" style="buttons_style"  ondown="skin_showthumbs();" parent="STAGE"/>

thanx for looking !

jeromebg · August 16, 2012 at 1:51 PM

My fault...
with parent=stage on the skin_scroll_window layer and it works !
thanx

ciul · August 16, 2012 at 2:04 PM

Hi Krpano pals,

aircompass plugin used here: (arrows on the floor)
http://virtualstep.com/ferias/asoindu…illo-35&tab=map

I modified it a little to give a space between arrows and them to place down when looking at a certain vertical limit on the pano for not bothering user looking.

Thanks for it!

Regards,
Ciul

YASUSHI KUMON · September 6, 2012 at 8:09 AM

Hello

Thank you very much for people which brought much comment and a new work.
Some improvement was added to the aircompass.
Please see.

1)Perpendicular offset
2)Compensation of the scale by a viewing angle
3)Compensation of the position by a viewing angle

・・・・・Compensation of a position and a scale is not worked by the wide angle side.

http://dowjow.com/panorama/2012p…aircompass.html

※I am sorry for poor English.

YASUSHI KUMON · September 7, 2012 at 2:46 AM

I mistook.
This is the completion version.
Please see.

http://www.dowjow.com/panorama/2012p…aircompass.html

Tuur · September 26, 2012 at 2:54 PM

please see here:
http://www.krpano.com/forum/wbb/inde…41223#post41223

Tuur

heomin61 · September 26, 2012 at 4:27 PM

The site says : "This recipient is currently unable to receive money."

Please check it. I would like to get it ASAP.

Min

Tuur · October 4, 2012 at 6:07 PM

problems solved.

on ipad: http://www.virtualtuur.com/vosbergen/

Thanks to Yasushi!!

Tuur

YASUSHI KUMON · October 24, 2012 at 11:56 AM

Hello

'airhotspot' was applied and 'aircompass' was made.

http://www.dowjow.com/panorama/2012p…pot_e/tour.html
I wanted to make this from the beginning.
The problem still remains.
However, I am very glad.
Thank you for people which gave advice.

yasushi kumon

nefar1ous · November 28, 2012 at 5:15 PM

Is it possible to move the aircompass to the bottom right corner. Cool as it is, it is too much of a distraction sitting in the middle of the screen, even with the vertical offset lowered. I tried hoffset in the events but nothing.

ciul · January 19, 2013 at 2:01 PM

Hi Krpano pals,

I've done similar code to aircompass in the past but for a different request from a client, it was to create hotspots likely google street view arrow floors .

They are not exactly the same but hey, behaves similar.

Here an example made by me:
http://depanorama.com/hV5IhI
http://depanorama.com/embed/hV5IhI (bigger view)

Three scenes with arrows inside each one to load other two

Client request was make it easy to place as many arrows as wanted with less code possible. Thus, to add a new floor arrow only needed to use:
<hotspot name="scene_1" style="airhotspot" edge="bottom" north="0" title="scene_1" />

Where key hotspot properties are:
1- Set style to airhotspot so I can catch it on actions and events I wrote.
2- Set a north value which is likely an ath property, it is used to know where it has to point to.
3- Set title to the scene it has to load on hotspot click. This can easily be modified to load a xml file instead.

What do you think?

Regards,
Ciul

YASUSHI KUMON · January 19, 2013 at 3:14 PM

Hello Ciul,

It seems to be simple and seems to be easy-to-use.
It is wonderful!

Yasushi Kumon

sachagriffin · January 19, 2013 at 6:41 PM

I think it's awesome!

Quote

What do you think?
Regards,
Ciul

bulp · June 28, 2013 at 4:11 PM

hurm.. i need air compass staticly at rightbottom of screen... but do rotate in that position...

Tuur · June 28, 2013 at 4:26 PM

i tried that.. but i think it is not possible

Tuur

Participate now!