Hotspot tooltips in smart devices
-
-
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.
-
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 -
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:
Code
Display More<!-- 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.
-
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 -
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.
-
Hey M,
So here is revised code that will keep the tooltip with the hotspot in touch situations:
Code
Display More<!-- 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.Code
Display More<!-- 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.
-
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.
-
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 -
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?
Participate now!
Don’t have an account yet? Register yourself now and be a part of our community!