Tooltips for VR Mode

augustommm · December 8, 2016 at 3:24 PM

Hello guys!

I've been working with VR Mode Tours for some time and as long as KRPano is IMHO great, hotspots tooltips don't work on VR Mode.

So the solution I found was making a PNG tooltips for each scene and a new hotspot style on the file "skin/vr_tooltips.xml" (attached):

Code

<krpano>	
	<!-- Tooltips VR -->
	<!-- skin_hotspotstyle_vr - style for the hotspots with VR enabled tooltips -->	<style name="skin_hotspotstyle_vr" url="arrow.png" scale="0.5" edge="top" distorted="true"		 tooltip=""	 	linkedscene=""	 	linkedscene_lookat=""	 	onclick="skin_hotspotstyle_click();"		 onover="tween(scale,0.55);"	 	onout="tween(scale,0.5);"		 onloaded="if(linkedscene AND skin_settings.tooltips_hotspots, copy(tooltip,scene[get(linkedscene)].legenda); loadstyle(vr_tooltips); );"	 />
	<style name="vr_tooltips"  	onover="tween(scale,0.55);			 copy(hotspot[vr_tooltip].url, tooltip);			 copy(hotspot[vr_tooltip].ath, ath);			 copy(hotspot[vr_tooltip].atv, atv);			 set(hotspot[vr_tooltip].visible, true);			 tween(hotspot[vr_tooltip].alpha, 1.0, 0.2);"	 	onout="tween(scale,0.5);			 tween(hotspot[vr_tooltip].alpha, 0.0, 0.2, default, set(hotspot[vr_tooltip].visible,false); );"	 />
	<hotspot name="vr_tooltip" keep="true"		 url="" distorted="true" vr_timeout="750"		 visible="false" alpha="0" enabled="false" zorder="2"		 edge="bottom" oy="-2"	       devices="html5.and.webgl"	 />


</krpano>

Include the file on your main XML:

Code

<include url="skin/vr_tooltips.xml"/>

Then, on each scene, add a new parameter "legenda":

Code

<scene name="pano" title="Title" thumburl="panos/pano.tiles/thumb.jpg" legenda="legendas/pano.png">

And, for every hotspot you want to give a VR mode tooltip, make it's style the following:

Code

<hotspot name="spot1" style="skin_hotspotstyle_vr" ath="31.860" atv="1.305" linkedscene="pano" />

Here is a working example:
http://www.onzeonze.com.br/clientes/dreampark/360/

Hope it's useful for someone!

Arsdezi · December 9, 2016 at 11:44 AM

Hi,
Thank you for sharing of the your solution!
Because actually question for me too, at this time, but not yet dealt with this issue! ;)

Birdseye · December 14, 2016 at 5:21 AM

A problem for us too, because we're using multilang hotspots. But this can be a good base. Thank you for sharing this augustommm.

spacerywirtualne · December 14, 2016 at 6:08 PM

Hello

If you do multilingual projects, it may interest you to know how our dynamic VR menu works.
Check in VR mode. The menu is automatically generated by php. You do not need anything programming or preparing images. VR menu does everything itself automatically, dynamically int the fly.

http://www.krpanostore.com/examples/vrmenu/

Best regards

Douglas Rhiner · December 15, 2016 at 11:57 PM

Here is how I pull it off.
Works great when the overlap is @ 1.20, which puts the vr_cursor about in the middle of the 2 vr view areas....
Still working on how to take into account the mobilevr_lens_overlap. to keep this centered with respect to the position of the vr cursor when the overlap is changed.

Code

<style name="tooltip"
       onover="tooltipover()"
       onout="tooltipout()"
/><action name="tooltipover">
    if(webvr.isenabled,
    trace('tooltipover');
    copy(layer[vrtooltip].html, tooltip);
    set(layer[vrtooltip].visible, true);
    tween(layer[vrtooltip].alpha, 1.0, 0.5);
    copy(layer[vrtooltipa].html, tooltip);
    set(layer[vrtooltipa].visible, true);
    tween(layer[vrtooltipa].alpha, 1.0, 0.5);
    asyncloop(hovering, positionTooltip(););
    );
</action>
<action name="positionTooltip">
    spheretoscreen(hotspot[vr_cursor].ath, hotspot[vr_cursor].atv, pos_x, pos_y);
    div(pos_x, stagewidth, 4);
    div(pos_y, stageheight, 2);
    sub(pos_x_a, stagewidth, pos_x);


    trace(plugin[WebVR].mobilevr_lens_overlap);
    trace(view.hlookat);


    copy(layer[vrtooltip].x,pos_x); copy(layer[vrtooltip].y,pos_y);
    copy(layer[vrtooltipa].x,pos_x_a); copy(layer[vrtooltipa].y,pos_y);
</action>
<action name="tooltipout">
    if(webvr.isenabled,
    tween(layer[vrtooltip].alpha, 0.0, 0.25, default, set(layer[vrtooltip].visible,false));
    tween(layer[vrtooltipa].alpha, 0.0, 0.25, default, set(layer[vrtooltipa].visible,false));
    positionTooltip();
    );
</action>


<layer name="vrtooltip" keep="true"
       url="%SWFPATH%/plugins/textfield.swf"
       parent="STAGE"
       visible="false"
       alpha="0"
       enabled="false"
       align="lefttop"
       edge="bottom"
       oy="-20"
       width="400"
       autoheight="true"
       background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0"
       border="false" bordercolor="0x000000" borderalpha="1.0"
       borderwidth="1.0" roundedge="0"
       shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0"
       textshadow="1" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"
       css=" text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:14px;"
       html=""
/>


<layer name="vrtooltipa" keep="true"
       url="%SWFPATH%/plugins/textfield.swf"
       parent="STAGE"
       visible="false"
       alpha="0"
       enabled="false"
       align="lefttop"
       edge="bottom"
       oy="-20"
       width="400"
       autoheight="true"
       background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0"
       border="false" bordercolor="0x000000" borderalpha="1.0"
       borderwidth="1.0" roundedge="0"
       shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0"
       textshadow="1" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"
       css=" text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:14px;"
       html=""
/>

Display More

TKO · December 12, 2017 at 10:02 PM

Hi:

It is great to know there is a solution for this.

I was looking into the code, and what is that "seta_frente.png" content in the xml you provided?

And I assume that "pano.png" is the image that we need to create.

Thanks!

omegas · March 9, 2018 at 4:16 PM

Quote from augustommm

Here is a working example:
http://www.onzeonze.com.br/clientes/dreampark/360/
Hope it's useful for someone!

I use this example to make some information hotspots (without linkedscene).

Code

<krpano><!-- Tooltips VR -->	<!-- skin_hotspotstyle_vr - style for the hotspots with VR enabled tooltips --><style name="skin_hotspotstyle_vr" url="vtourskin_hotspot_hexa.png" scale="0.5" edge="top" distorted="true"		 tooltip=""	 	linkedscene=""	 	linkedscene_lookat=""	 	onclick=" if (legendb, set(hotspot[vr_tooltip].enabled,false); copy(tooltip,legendb);  loadstyle(vr_tooltips); set(hotspot[vr_tooltip].enabled,true), skin_hotspotstyle_click());"		 onover="tween(scale,0.55);"	 	onout="tween(scale,0.5);"		 onloaded="if(skin_settings.tooltips_hotspots, copy(tooltip,legenda); loadstyle(vr_tooltips); );"	 />	<style name="vr_tooltips"  	onover="tween(scale,0.55);			 copy(hotspot[vr_tooltip].url, tooltip);			 copy(hotspot[vr_tooltip].ath, ath);			 copy(hotspot[vr_tooltip].atv, atv);			 set(hotspot[vr_tooltip].visible, true);			 tween(hotspot[vr_tooltip].alpha, 1.0, 0.2);"	 	onout="tween(scale,0.5);			 tween(hotspot[vr_tooltip].alpha, 0.0, 0.2, default, set(hotspot[vr_tooltip].visible,false); );"	 />	<hotspot name="vr_tooltip" keep="true"		 url="" distorted="true" vr_timeout="750"		 visible="false" alpha="0" enabled="false" zorder="2"		 edge="bottom" oy="-2"	       devices="html5.and.webgl"	 />
</krpano>

Im modified onload part.

And my information spots look like:

Code

<hotspot name="spot2" style="skin_hotspotstyle_vr" ath="-139.559" atv="37.041" linkedscene=" "  legenda="legendas/pan2_1.png" vr_timeout="2000" legendb="legendas/pan2_1b.png"/>

I want change tooltip image with onclick event directly (onclick). It works, but you need mouse out and than mouse in. How i can change image instant after click?! It works perfect with onhover on PC (but didn work on mobile VR)...

adk · June 14, 2018 at 1:22 AM

Thank you for that awesome example augustommm !

It is precisely what I want to accomplish but try as I might I can not get your example to work like it does on your site. Great renders of the park btw.

I have followed the example to the letter but not having any luck with the tooltips appearing on hover like you have ?

vr_tooltips.xml sits inside the skin folder and there's a legendas folder with all the png's

tour.xml has this included

Code

<include url="skin/vr_tooltips.xml"/>

Together with all the other code bits for scene and hotspots.

I've taken a peek at the code in your park example and your tour.xml doesn't have that include code so I'm wondering if you or anyone else could point me in the right direction.
Is there a different main xml file that that should sit in as opposed to the standard tour.xml ?

Thanks a lot.

robfosse · August 8, 2019 at 10:32 AM

Hi all.
I'm trying to get this working and followed all the steps, but alas. They're not showing up.
Is this method obsolete now?

joschii · August 3, 2020 at 6:23 PM

hi. i made a plugin that puts the hotspot's-name under every hotspot as a textfield automatically.
like the tooltip is visible always an clickable if you want to.
textfield can be edited of course.
simple integration.
works also in VR and smartphone, or touch devices.
DEMO_TOUR_EXAMPLE
would that help you? or do you need something else?

Participate now!