You are not logged in.

Tooltips for VR Mode

augustommm

Beginner

  • "augustommm" started this thread

Posts: 36

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:

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

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

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

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

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Douglas Rhiner

Intermediate

Posts: 141

Location: San Anselmo, 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)

TKO

Beginner

Posts: 1

  • Send private message

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!

omegas

Beginner

Posts: 38

  • Send private message

7

Friday, March 9th 2018, 4:16pm

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


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)

adk

Beginner

Posts: 2

  • Send private message

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.

robfosse

Beginner

Posts: 1

  • Send private message

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?

joschii

Beginner

Posts: 25

Location: Austria

Occupation: VR

  • Send private message

10

Monday, August 3rd 2020, 6:23pm

Hotspot Name Tag Label Text Plugin

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?

Similar threads