Program a 'second tap' action for touch devices?

trek

I have a pano of a room with furniture in. I am using polygon hotspots, so that (on a PC browser) when you hover over an item a short description appears, a mouse tap (onclick) then opens a new browser tab and display the full item details from an online catalogue.

All works fine, where I am struggling is with touch devices, obviously there is no concept of 'hovering' so on a touch device I display the short description when you touch the item and I update another hotspot at the bottom of the screen with the external link. So basically this bottom hotspot always has a link to the catalogue for the last item touched.

Again this works 'OK' but it's not so intuitive as the PC version.

Is there a way of displaying the text for the polygon hotspot after a first tap and then a second tap does the openurl?

indexofrefraction

not having the time for a detailed solution,
but you must change the onclick actions of your hotspots.

there must be some counter, any a timeout to reset the counter to 0 if there is no second click.
or you must clear the tooltip when the user clicks on another hotspot.

see: vtourskin.xml
style : skin_hotspotstyle
action: skin_hotspotstyle_onclick()

w_guelcker

I realized a solution. Please look here:

http://bode360.smb.museum

If you press an i-hotspot for half a second, the tooltip is shown. An offset is applied, otherwise the tip of the finger would hide the tooltip. A shorter click starts the normal action.

If you are interested I can try to extract the code fragments.

Wolfgang

trek

Hi Wolfgang

Just tried http://bode360.smb.museum on my ipad, yes this is what I am looking for whereby a short tap brings up a description and a longer tap fires another action.

I am doing this for an online store where the products are placed around a room, so a short tap would display a short description, for example "Dining Table with 4 chairs" and a longer tap would then do an openurl action and open a new browser tab to the store's online catalog.

If you can extract the code it would be much appreciated.

cheers
Tim

ramirox3

I am also interested
thanks
Ramiro

w_guelcker

here it is:
Onclick, onover, ondown, ... are defined in "meta_hotspot_style". The variable "tooltip" here is an attribute of my hotspot that holds the text to be displayed as tooltip, f.i. hotspot[h12].tooltip. Explanations are at the end.

Code

<style name="meta_hotspot_style"
    onover.no-touch="tooltip_onover(tooltip);"
    onout.no-touch="tooltip_onout();"
    ondown.touch="delayedcall(tt, 0.5,tooltip_ondown(tooltip));"
    onup.touch="stopdelayedcall(tt);tooltip_onup();"
    onclick="open_metabox(get(name));"
/>


<action name="tooltip_ondown">
      set(settings.tt_touch, true);
      copy(layer[skin_tooltip].html, '%1');
      set(layer[skin_tooltip].visible, true);
      sub(layer[skin_tooltip].x, mouse.stagex,40); sub(layer[skin_tooltip].y, mouse.stagey, 40);
      tween(layer[skin_tooltip].alpha, 1.0, 0.1);
</action>
<action name="tooltip_onup">
       set(layer[skin_tooltip].visible,false);
       set(layer[skin_tooltip].alpha,0);
       set(layer[skin_tooltip].html,"");
</action>
<action name="tooltip_onover">
        ...
</action>
<action name="tooltip_onout">
    ...
</action>


<action name="open_metabox">
    if(settings.tt_touch,
      <!-- Finger lifted after TT on touch device: do nothing  -->
      set(settings.tt_touch, false);
    ,   
      <!-- do the normal onclick handling  -->
      ...
    );
</action>

Alles anzeigen

On touch devices a delayedcall() calls after 0.5 sec the action "tooltip_ondown()", which shows the tooltip with an offset of 40 px.
The corresponding onup() stops the delayedcall. The problem is: the onup() starts also the onclick() action which should do nothing in this case.
To handle this a variable is set to true in ondown (here "settings.tt_touch"), which is questioned in the onclick action and set to false. If the variable is true onclick does nothing else.

I hope this helps.

Wolfgang

Birdseye

Just saw this thread. I was looking for such a solution, tnx for sharing your code Wolfgang.

Program a 'second tap' action for touch devices?

Jetzt mitmachen!

Benutzer online in diesem Thema