Looking for more ways to interact on mobile

Mobile
1

I have an application, where you draw cards and put them e.g. side by side on a free area on a screen.

I have interactions with the drawn cards, and they work well on a computer:

  • just move them around (dragging)
  • let them disappear (double click)
  • turn them to the left (click + shift key) - one click turns the card by 22.5 degrees left
  • turn them to the right (click - alt key) - one click turns the card by 22.5 degrees right

The problem comes with mobile devices. I use an iPad for experiments, and I can do

  • the dragging
  • I can tap and I can tap and hold

I cannot

  • double click (the browser reacts by magnifying the page)
  • any click plus a key (there are no keys)
  • anything with two fingers (because the browser does with it, what browsers do :wink: e.g. change to the next tab, close a tab or similar things)

So right now for the disappearance of the cards I drag them to the lower edge of the screen, and when they are lower than a certain threshold, then they disappear.
But how can I initiate the rotation?
The “natural way” (of using two fingers to rotate) the browser does not allow.

The only idea that comes to my mind is a context menu: Tapping and holding a card brings up a small menu offering “left turn”, “right turn”, “delete”. You slide with the finger across and choose one of the three options.

If you have another idea, please tell me. I am grateful for any hints.

2

You should be able to uncheck “Allow user scaling” in the Document Inspector to avoid the double-click as zoom problem (probably coupled with “Initial scale 1.0”). However you’d still need code yourself to do the double-click and other gesture detection.

I haven’t used it, but there are gesture events you may be able to hook into:
https://developer.apple.com/documentation/webkitjs/gestureevent

There’s also abstraction libraries like hammer.js that might help out; I think there are some forum posts with references to folks using this.

1 Like
3

Hammer.js has a 'tapcount' function which lets you do something if a double tap occurs:

mc.add( new Hammer.Tap({ event: 'doubletap', taps: 2 }) );

1 Like