Sie sind nicht angemeldet.

Tooltips for VR Mode

augustommm

Anfänger

  • »augustommm« ist der Autor dieses Themas

Beiträge: 36

Wohnort: Goiânia-Goiás-Brazil

Beruf: Photographer

  • Nachricht senden

1

Donnerstag, 8. Dezember 2016, 15:24

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

Quellcode

 
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:

Quellcode

 
1

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



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

Quellcode

 
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:

Quellcode

 
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« hat folgende Datei angehängt:
  • vr_tooltips.xml (1,31 kB - 238 mal heruntergeladen - zuletzt: Heute, 06:45)

Arsdezi

Fortgeschrittener

Beiträge: 174

Wohnort: Ukraine

  • Nachricht senden

2

Freitag, 9. Dezember 2016, 11:44

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

Schüler

Beiträge: 125

Wohnort: De Haan

Beruf: Freelance Photographer

  • Nachricht senden

3

Mittwoch, 14. Dezember 2016, 05:21

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

Profi

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

4

Mittwoch, 14. Dezember 2016, 18:08

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

Fortgeschrittener

Beiträge: 141

Wohnort: San Anselmo, CA

Beruf: Code-Slave

  • Nachricht senden

5

Donnerstag, 15. Dezember 2016, 23:57

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.

Quellcode

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Douglas Rhiner« (16. Dezember 2016, 00:46)

TKO

Anfänger

Beiträge: 1

  • Nachricht senden

6

Dienstag, 12. Dezember 2017, 22:02

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

Anfänger

Beiträge: 38

  • Nachricht senden

7

Freitag, 9. März 2018, 16:16

Zitat von »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).


Quellcode

 
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:

Quellcode

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »omegas« (9. März 2018, 17:17)

adk

Anfänger

Beiträge: 2

  • Nachricht senden

8

Donnerstag, 14. Juni 2018, 01:22

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

Quellcode

 
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

Anfänger

Beiträge: 1

  • Nachricht senden

9

Donnerstag, 8. August 2019, 10:32

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

Anfänger

Beiträge: 25

Wohnort: Austria

Beruf: VR

  • Nachricht senden

10

Montag, 3. August 2020, 18:23

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?

Ähnliche Themen