Best mouse interaction on knob (dial/rotary controller)

I'm creating a custom skeumorphic dial and I have some doubts about what could be the better way of interacting with it using the mouse, which should be as intuitive and effective as possible.

Dial example

Right now my control has the following rules:

  • click and drag on the cursor (the small circle near the edge of the internal circle) allows angular control;
  • click on the scale (the outer annulus) selects the value directly, while dragging allows angular control;
  • click and drag anywhere else: linear control (vertical/horizontal)
  • mouse wheel;

There are two problems here.

First, I'm afraid that the linear control can be confusing, expecially when the dial is very small; maybe changing the mouse cursor (circular arrow on angular control, NWSE on linear) could be a solution? I'd prefer to leave the linear control option, which is sometimes faster than angular, and in my program it could be very useful since there are about 100 of them.

Second, linear control on dials should be available for both horizontal and vertical directions, and the reason is that some dials could be at the edge of the screen: if one control is near the top edge, for example, increasing its value would require at least two click+drag actions to reach the maximum value if the control orientation is only vertical. What could be the best practice for the movement > value conversion? Radial distance is an option, but wouldn't account for relative distance once the range is reached; another possibility could be waiting for a minimum amount of pixel-space reached and then decide the orientation (horizontal if delta X > delta Y, otherwise use vertical).

PS: please, don't suggest to use sliders: there are specific reasons for dials, most importantly the space occupied by the whole interface, which has to contain all controls, and tabs/multiple windows/mdi/panels are not an option.

Tags: