You are not logged in.

augustommm

Beginner

  • "augustommm" started this thread

Posts: 34

Location: Goiânia-Goiás-Brazil

Occupation: Photographer

  • Send private message

1

Thursday, December 8th 2016, 3:24pm

Tooltips for VR Mode

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

Source code

1
2
3
4
5
6
7
<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:

Source code

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



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

Source code

1
<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:

Source code

1
<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!
augustommm has attached the following file:
  • vr_tooltips.xml (1.31 kB - 119 times downloaded - latest: Aug 9th 2019, 11:32am)

Arsdezi

Intermediate

Posts: 174

Location: Ukraine

  • Send private message

2

Friday, December 9th 2016, 11:44am

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! ;)
Panoreal — to make and see this wonderful world! *whistling*

Birdseye

Trainee

Posts: 124

Location: De Haan

Occupation: Freelance Photographer

  • Send private message

3

Wednesday, December 14th 2016, 5:21am

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

Professional

Posts: 874

Location: Poland, Europe

Occupation: krpano developer : virtual tours

  • Send private message

4

Wednesday, December 14th 2016, 6:08pm

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
You own online, cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: facebook group :: youtube

cms4vr team *thumbsup*

Posts: 89

Location: Fairfax, CA

Occupation: Code-Slave

  • Send private message

5

Thursday, December 15th 2016, 11:57pm

VR tooltip

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.

Source code

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
<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=""
/>

This post has been edited 1 times, last edit by "Douglas Rhiner" (Dec 16th 2016, 12:46am)


6

Tuesday, December 12th 2017, 10:02pm

Thank you for sharing

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!

7

Friday, March 9th 2018, 4:16pm

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


Source code

1
2
<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:

Source code

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

This post has been edited 1 times, last edit by "omegas" (Mar 9th 2018, 5:17pm)


8

Thursday, June 14th 2018, 1:22am

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

Source code

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

9

Thursday, August 8th 2019, 10:32am

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?