Hotspot tooltips in smart devices

Anfänger

Dienstag, 14. April 2020, 00:48

Hi,
In tour.xml I've set

	Quellcode
1	tooltips_hotspots="true"

In desktop computers, mouse pointer over the hotspot displays the scene title.
How can I set the titles be displayed fixed below the hotspot arrow no matter where the pointer is and also be displayed in smart devices?
Thank you

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

2

Donnerstag, 16. April 2020, 05:27

Hi Marciano,

What I do is set the tooltip's parent to the hotspot. The tooltip must also be a hotspot and you only need the one. Then when you mouse over or press down it loads the tooltip text into the tooltip hotspot and sets the tooltip's parent to that hotspot. Mouse out or onup from the hotspot makes the tooltip invisible, again. If you also want this to work in WebVR, where hotspots cannot have children, you set the tooltip hotspot to the same ath/atv of the hotspot and git the tooltip a sufficient oy (y offset) value.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

marciano

Anfänger

Beiträge: 6

3

Freitag, 17. April 2020, 23:07

Hi Scott,
I don't understand what your suggestion.
My testing tour.xml contains vtourskin.xml also very-small skin, startup action and scenes with some hotspots.
From a smartphone I cannot see hotspot texts in any way.

Is it possible to have hotspot title always displayed for all kind of devices like this?

Thank you

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

4

Samstag, 18. April 2020, 02:09

OK. Short answer is "yes" but it will take some work.

You have to modify how tooltips are handled in vtourskin.xml, mostly the skin_tooltips style. You need to add ondown.touch/onup.touch events that are similar to the onover.mouse/onout.mouse events to display the tooltip.

BTW, you will want to increase the tooltip oy from -2 to -30 or so your finger doesn't cover the tooltip.

You want to add a delayedcall timer to ondown that, after 0.2 seconds or so sets the onclick event to null. Otherwise when you lift up the onclick event will fire. Then your onup event should restore the onclick event to the hotspot or it won't fire when you do want to click it.

Here is revised code in vtourskin.xml:

Quellcode

	<!-- skin_tooltip - style for the thumb, hotspot and mapspot tooltips -->
	<style name="skin_tooltips"
	       onover.mouse="copy(layer[skin_tooltip].html, tooltip);
	                     set(layer[skin_tooltip].visible, calc(webvr.isenabled ? false : true));
	                     tween(layer[skin_tooltip].alpha, 1.0, 0.1);
	                     asyncloop(hovering, copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );"
	       onout="tween(layer[skin_tooltip].alpha, 0.0, 0.1, default, set(layer[skin_tooltip].visible,false), 
                            copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );"
	       ondown.touch="copy(layer[skin_tooltip].html, tooltip);
	                     set(layer[skin_tooltip].visible, calc(webvr.isenabled ? false : true));
	                     tween(layer[skin_tooltip].alpha, 1.0, 0.1);
			     copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); 
			     delayedcall(tool_delay, 0.2, set(onclick, null));" 
		onup.touch="stopdelayedcall(tool_delay); onout(); delayedcall(0.1, set(onclick, 'skin_hotspotstyle_click();'));"
	       />

And in the skin_tooltip layer change oy="-2" to oy.desktop="-10" oy.no-desktop="-40"

I think that does it.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Scott Witte« (18. April 2020, 03:09)

Zum Seitenanfang

marciano

Anfänger

Beiträge: 6

5

Samstag, 18. April 2020, 18:11

Thanks a lot Scott."touch" is the key for smart devices.

The problem I see here is that tooltips text stays in a display fixed position, it doesn't stay tied up to the arrow when the finger drags the screen

It would be desirable that it remains tied up above the arrow. If not possible, then hide it after finger drag is detected.
Thank you again.
M

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

6

Samstag, 18. April 2020, 19:19

Ah. Didn't notice that because in my modified skin I added capture="true" in the skin_hotspotstyle style. When someone presses on the hotspot they can't move the pano, which is my preference.

If you want to move the pano while pressing the hotspot... OK. I have a solution in mind that will require a complete rewrite but may actually be more elegant. Will get that out perhaps tonight.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

7

Sonntag, 19. April 2020, 03:17

Hey M,

So here is revised code that will keep the tooltip with the hotspot in touch situations:

Quellcode

	<!-- skin_tooltip - style for the thumb, hotspot and mapspot tooltips -->
	<style name="skin_tooltips"
		onover.mouse="copy(layer[skin_tooltip].html, tooltip);
			set(layer[skin_tooltip].visible, calc(webvr.isenabled ? false : true));
			tween(layer[skin_tooltip].alpha, 1.0, 0.1);
			asyncloop(hovering, copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );"
		onout.mouse="tween(layer[skin_tooltip].alpha, 0.0, 0.1, default, set(layer[skin_tooltip].visible,false), 
			copy(layer[skin_tooltip].x,mouse.stagex); copy(layer[skin_tooltip].y,mouse.stagey); );"
		ondown.touch="copy(hotspot[skin_hstooltip].html, tooltip);
			set(hotspot[skin_hstooltip].visible, calc(webvr.isenabled ? false : true));
			tween(hotspot[skin_hstooltip].alpha, 1.0, 0.1);
			copy(hotspot[skin_hstooltip].ath, ath); calc(hotspot[skin_hstooltip].atv, atv - 2); 
			delayedcall(tool_delay, 0.2, set(onclick, null));" 
		onup.touch="stopdelayedcall(tool_delay); delayedcall(0.1, set(onclick, 'skin_hotspotstyle_click();')); 
			tween(hotspot[skin_hstooltip].alpha, 0.0, 0.1, default, set(hotspot[skin_hstooltip].visible,false));"
	/>

	<layer name="skin_tooltip" keep="true"
	       type="text"
	       parent="STAGE"
	       visible="false" alpha="0" enabled="false" zorder="2"
	       align="lefttop" edge="bottom" oy.desktop="-10" oy.no-desktop="-40" width="200"
	       bg="false"
	       textshadow="get:skin_settings.design_text_shadow" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"
	       css="calc:skin_settings.design_text_css + ' text-align:center; font-size:16px;'"
	       html=""
	       />

	<hotspot name="skin_hstooltip" keep="true"
	       type="text"
	       Xparent="STAGE"
	       visible="false" alpha="0" enabled="false" zorder="2"
	       align="lefttop" edge="bottom" width="200"
	       bg="false"
	       textshadow="get:skin_settings.design_text_shadow" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"
	       css="calc:skin_settings.design_text_css + ' text-align:center; font-size:16px;'"
	       mipmapping="true" oversampling="2.0"
	       html=""
	       />

Or my preferred solution, only use the hotspot tooltip: If you plan to use tooltips with layer elements such as buttons the below method won't work. So the above method would be preferred.

Quellcode

	<!-- skin_tooltip - style for the thumb, hotspot and mapspot tooltips -->
	<style name="skin_tooltips"
		onover.mouse="show_tooltip()"
		onout.mouse="hide_tooltip()"
		ondown.touch="show_tooltip(); delayedcall(tool_delay, 0.2, set(onclick, null));" 
		onup.touch="stopdelayedcall(tool_delay); delayedcall(0.1, set(onclick, 'skin_hotspotstyle_click();')); hide_tooltip(); "
	/>
	
	<action name="show_tooltip" >
		trace("Show Tooltip");
		copy(hotspot[skin_tooltip].html, tooltip);
		set(hotspot[skin_tooltip].visible, true);
		tween(hotspot[skin_tooltip].alpha, 1.0, 0.1);
		copy(hotspot[skin_tooltip].ath, ath); calc(hotspot[skin_tooltip].atv, atv - 2); 
	</action>
	
	<action name="hide_tooltip" >
		tween(hotspot[skin_tooltip].alpha, 0.0, 0.1, default, set(hotspot[skin_tooltip].visible,false));		
	</action>

	<!-- the tooltip textfield -->
	<hotspot name="skin_tooltip" keep="true"
		type="text"
		visible="false" alpha="0" enabled="false" zorder="2"
		align="lefttop" edge="bottom" width="200"
		bg="false"
		textshadow="get:skin_settings.design_text_shadow" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"
		css="calc:skin_settings.design_text_css + ' text-align:center; font-size:16px;'"
		mipmapping="true" oversampling="2.0"
		html=""
	/>

"Disadvantage" of the second method is that the tooltip won't move with the mouse (although that should be programmable). I don't see a problem with that so I don't plan to worry about it.

I trust this works.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Scott Witte« (19. April 2020, 04:04)

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

8

Sonntag, 19. April 2020, 03:58

Actually.... There can be a big disadvantage of the second method above if you want to use tooltips with layers such as buttons. Since layers don't have ath/atv values, the second method won't work. Stick with the first.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

marciano

Anfänger

Beiträge: 6

9

Sonntag, 19. April 2020, 18:28

Hi Scott,
That works great in smart devices. Finger on the arrow displays the text and out hides it.
Thank you!

I also am reading this thread about the other option I asked.
PS:This post from Klaus works okay for me

Zum Seitenanfang

joschii

Anfänger

Beiträge: 25

Wohnort: Austria

Beruf: VR

10

Montag, 3. August 2020, 16:26

hi. i made a plugin that puts the hotspot's-name under every hotspot as a textfield automatically.
textfield can be edited of course.
simple integration.
works also in VR and smartdevices.
https://www.my360.at/krpanodemo/
would that help you?

Zum Seitenanfang