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

  • 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

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

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

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

    Edited once, last by omegas (March 9, 2018 at 5:17 PM).

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

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

Don’t have an account yet? Register yourself now and be a part of our community!