UI widget for rotation/heading/angle?

General
1

I’m building a (demo) app where I’d need to edit direction. In my domain it is stored simply as degrees, but I’m bit stuck on figuring out how should I let users adjust it in the UI :thinking: Currently I have IntegerField (with ± buttons enabled), but using that, espcially on mobile devices feels quite clumbsy. In the use case a rought direction would be enough.

Any good ideas? A custom UI widget idea (or integrating some JS widget) would be fine as well. In the form there wouldn’t be too much space for the widget.

My curent (bad :thinking:) ideas:

  • Slider. No decent buillt in available, but Directory has couple. Visually that don’t really help as it is still just a number, would be just a faster method to pick a number (and visual min/max values).
  • Migrate/re-implement something like RotaryKnob for version 24.
  • Popover based custom field with that opens a bit bigger arrow/compass symbol and click listener to reset the direction (from the center).
2

I’d be happy with e.g this, if it would also work with mobile devices: UI Anglepicker - Brian Grinstead

3

One thing I’ve found is that UI widgets that replicate the look of a real-world knob/switch/whatever don’t work because you’re not really interacting with them with your fingers (even on a touch screen). So you can’t rotate a dial with your fingers, that just makes the user interaction awkward and imprecise. If you want something for touchscreens, I’d recommend something that makes use of clear finger swipes (and maybe pinches).

1 Like
4

Yup, some kind of drag gesture towards the desired direction would probably be best for mobile users.