Live data from Hacker News

JQuery knobs

anthonyterrien.com

11–20 of 101 posts

Re: JQuery knobs

#11
post #7

Beautiful, but, when is this ever the best UX for a control (outside of sound mixers and sequencers)? (I'm expecting/hoping to get schooled on this.)

In general this is probably more useful for touch devices--the paradigm of a knob is much more realistic when you're using your fingers. Though it would make a nice progress indicator regardless of touch.

Re: JQuery knobs

#12
post #5

Cute. One thing that would improve it would be keyboard shortcuts. The editing of the number in the middle feels a bit awkward too. I guess it might make a nice replacement for a slider in certain circumstances.

Maybe the mousewheel can be put to use here?

http://archive.plugins.jquery.com/project/mousewheel (untested)

Re: JQuery knobs

#13
Very slick looking stuff man. If I could suggest something, it would be to give an option to show the data display numbers outside of the circle, or give an option to call a callback handler when the data changes. This way a finger motion adjusts the knob, and the data display is not obscured. Good stuff.

Re: JQuery knobs

#14
post #10
post #7

Beautiful, but, when is this ever the best UX for a control (outside of sound mixers and sequencers)? (I'm expecting/hoping to get schooled on this.)

Knobs are the primary interface in many live music controllers. Check out Ableton live, or the evolution uc-33 to see how they are commonly used. Would be very neat for a web based controller. EDIT: Oops, I guess I can't read

It could also be used as a percentage indicator for instance a round a persons picture in the middle.

Re: JQuery knobs

#15
Really nice. I'd make one change if I had the time to fork it myself... allow vertical and/or horizontal mouse movement to control the slider in addition to circular movement. In some cases (such as time-based scrubbing), having the control spin one or more times by moving the mouse across the window is easier than trying to adjust it by circling.

Re: JQuery knobs

#16
Audio software made a bit of mess with the whole knob vs. slider thing. Digidesign released several products that used their linear fader code, but they only changed the graphics -- not the mouse code! Yup, you'd move up or down and the thing would randomly turn clockwise or counterclockwise.

Somehow this became a standard.

20 years of customer confusion and complaints yields this advice: there are at least three common modes for interacting. 1) up/down | left/right, 2) radial (follow the mouse pointer) and 3) relative radial (follow the pointer, but use it as an an offset in degrees of the original position).

The latter is useful for something like a volume control (or any real-world control, really). Otherwise one wrong click and you're at max.

In each mode you want both a linear and logarithmic scaling option. Otherwise you have the "soundblaster volume" problem where all the range is between 0 and 30, and 31 to 100 is largely ornamental.

There's a bonus mode using the number in the middle as a target. If you click and drag on that, you get the up/down mode even if the outside zone is normally radial. This guarantees that nobody is happy and seems to be the alternate standard in much audio software.

Click to activate THEN mousewheel to increment/decrement (again, using the linear or log scaling) is a sane compromise.

Re: JQuery knobs

#17
post #7

Beautiful, but, when is this ever the best UX for a control (outside of sound mixers and sequencers)? (I'm expecting/hoping to get schooled on this.)

They take up less room than a slider. And certain controls are commonly radial: dimmers, volume dials, focus. Sometimes it just feels right.

Re: JQuery knobs

#18
Beautiful, but I don't want to see this in the wild. Knobs are bad for the same reason that pie charts are bad. Perceiving one-dimensional differences is easier than rotational/angular ones.

Re: JQuery knobs

#19
It's hard to make it 100 without it going back to 0. Maybe a gap between them and if you're already moused down going to up to 100, it stays at 100 as you continue to move the mouse right, but will go back down as you mouse left?
Post reply on HN