(Not) Knobs 2

Continuing where I left in (Not) Knobs 1

So besides radial, knob-looking widgets, I want similar widgets that work linear and give a visual hint at that. They should work with both dragging horizontally and vertically and behave sensible in between. So any jumpy behavior when dragging in odd angles must be avoided.

After talking with David García (blog), one already implemented and proven way is to just add the values for the x and y axis (zero at the center). Not linear if you move away from the axes, but there is no jumpiness and the calculation is always the same.

The only other way I can think of now, is to use the distance from the initial click and to assume a rotating axis. Initialy, north-west to south-east is plus, the other half minus. If the mouse is moved around the center, plus and minus have to rotate accordingly. Picturing this as a physical object, it would be like a slider that can be rotated around its center. Having analogical overlay graphics while dragging would be helpful, but apparently common toolkits aren’t build with things like that in mind.

Earlier experiments led me to the conclusion that a round scale works better than growing circles, rectangles or straight. It seems to be space efficient and just looks better 🙂

No shading for now, just plain geometry to try a number of variations.

Circulars Radial

Circulars Additive

Circulars Distance


About thorwil
I'm a designer from Germany. My main interests are visual and interaction design, free/open-source software and (electronic) music.

Comments are closed.