Touch screens: picking points with a finger is hard

[cyryllo]

Question: do you plan better support for touch screens (tablets, touch laptops)?

layerling already works on a tablet in many ways: two fingers zoom and move the view, one finger works like the left mouse button, and "Rotate the view with one finger" turns the view. What is hard is hitting small targets with a finger:

• points and segments in a sketch (selecting, moving, Add or Remove Points, Erase)
• measurement points of the tape measure and the section measure
• edges in the chamfer/fillet tool
• align dots, the rotation pivot, small handles

A fingertip is much larger than a mouse pointer and covers the very point you want, so it often takes several tries, or the neighbouring point or edge gets picked instead.

Ideas, in case they help:

• a larger hit area for points, edges and handles when the pointer is coarse (pointer: coarse / pointerType === "touch")
• a magnifier or an offset cursor while the finger is down, so the point under the finger stays visible
• a touch alternative to things that now need a key, such as Shift for adding a single edge or Alt while dragging

Device I tried it on: (Android tablet, Chrome)

I am happy to test anything on a tablet.

[henmedia]

@cyryllo, thank you for the clear list. Looking at the code: shapes on the work plate already had a larger touch area (16 px instead of 6 px), but the rest did not. Sketch points were 10 px wide and segments only 2.5 px thick, and the tape measure and the edge tool used the same radius for a finger as for a mouse. So what you describe was real.

I built the simple part, without changing how anything looks. For a finger:

• in a sketch, a press beside a point, a handle or a thin line goes to that part (handles first, then points, then lines);
• the tape measure (points, lines, reference points), the section measure and the edges of the chamfer and fillet tools catch the pointer from a larger distance.

A mouse and a stylus keep the reach they had. A magnifier or an offset cursor is a bigger step; I'd see first whether this is enough. The guide now also recommends a stylus on a tablet, which is finer and does not cover what you aim at. It comes with the next release. I can only try touch with simulated events, so your offer to test on the tablet helps a lot - I'll tell you when it is out. Please tell me where it still misses.

[henmedia]

@cyryllo, the handles and the long press are in 1.82.0: the handles hold the drag, they catch a finger or a rubber stylus from a little further out, and a finger held still for half a second opens the menu, with Select all on empty space. Reload the page to get it; the installed app needs a restart. Please try it on the tablet as you wrote: does the drag of the handles still let go, how is the catch area, how is the long press menu, with a finger and with a rubber stylus? A short note on what you tried is enough.

[cyryllo]

I tested 1.82.0 on the tablet, with a finger and with a rubber stylus, and everything works as I hoped:

• the handles hold the drag now, it no longer lets go,
• the catch area is much better, I hit the handles on the first try,
• the long press menu opens reliably, and Select all on empty space works.

Thank you very much for this, it makes a real difference for using layerling on tablets.

One more thing I'm still missing for now: selecting several bodies, but not all of them. With a mouse this is Shift+click, but on a tablet there is no Shift. Could the long press menu get a "Select multiple" entry next to Select all? After choosing it, each tap on a body would add it to the selection (or remove it if it is already selected), until you tap empty space or leave the mode. That would let the children pick just the parts they want to group, align or move together.

[henmedia]

@cyryllo, thank you for testing it so carefully, and I am glad the handles, the catch area and the long press work for the children. "Select multiple" is a good addition: without a Shift key on a tablet there was no way to pick only some bodies. It is built, as you describe: in the long press menu, on a shape or on empty space, Select multiple switches it on; then each tap on a body adds it to the selection or takes it out again, and a tap on empty space or Esc ends it and keeps the selection. A finger on empty space still turns the view. It comes with the next release.

[cyryllo]

Thank you, that's exactly how I imagined it, and keeping the selection after leaving the mode is a nice touch. I'll try it on the tablet with a finger and a rubber stylus as soon as the next release is out, and let you know how it works with the children.

[henmedia]

@cyryllo, Select multiple is in 1.85.0: in the long press menu, on a shape or on empty space; then each tap on a body adds it to the selection or takes it out again, and a tap on empty space or Esc ends it and keeps the selection. Reload the page to get it; the installed app needs a restart. Please try it with the children and tell me how it works on the tablet.

[cyryllo]

Thank you very much for adding Select multiple, and for all the touch work in this thread: the larger catch areas, handles that hold the drag, the long press menu with Select all, and now Select multiple. With these, everything I was missing for using layerling on tablets is there.

I'm closing this discussion, since everything I asked for is done. If something comes up in the workshops with the children, I'll open a new one.

Thanks again!

Cyryl

[henmedia]

@cyryllo thank you, and for testing it with real use. Good luck with the workshops.