Live data from Hacker News

JQuery knobs

anthonyterrien.com

31–40 of 101 posts

Re: JQuery knobs

#31
post #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.

The paradigm of a knob isn't that great at all. I think it's only because of the size contraints (you often need many controls) that you see knobs being used over sliders.

A slider instantly tells you the current level (relative to minimum and maximum) and is very easy to adjust.

Re: JQuery knobs

#32
post #21
post #10

Earlier quoted context omitted.

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

Knobs are the primary interface in many DAWs because their developers copy hardware interfaces without too much thought. They translate to computer interfaces very poorly. The main advantage of a hardware knob (over slider) is that you have very good control over it's rate of change. The main disadvantage is that it's hard to turn multiple knobs at once. None of this applies to software knobs. I can't think of why wo…

Well, they also have the benefit of being compact which can be beneficial in complex audio applications, but I agree that they generally suck and would almost always be better off as a slider.

Re: JQuery knobs

#33
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

In all the DAW software and plugins I've used, there is at least an option to enable traditional up/down or left/right click-dragging. The knob still appears to spin, but you get the precise control of linear motion. Any good audio software will show you the numerical value anyway, so it's a bit of a stretch to say that knob widgets like this one are standard.

Re: JQuery knobs

#34
post #24
post #10

Earlier quoted context omitted.

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

[deleted]

Sorry, I could have sworn I read it without it and then noticed it when I checked back later. I edited my previous statement.

Re: JQuery knobs

#35
post #33
post #10

Earlier quoted context omitted.

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

In all the DAW software and plugins I've used, there is at least an option to enable traditional up/down or left/right click-dragging. The knob still appears to spin, but you get the precise control of linear motion. Any good audio software will show you the numerical value anyway, so it's a bit of a stretch to say that knob widgets like this one are standard.

That's "traditional" in audio software. In 2D graphics software, radial manipulation is common. And don't forget the wonky 3D software modes where you just wiggle the mouse until something sort of rotates. Those are my favorite.

Re: JQuery knobs

#36
post #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)

Kind of ... the focus has to be on the number before the mousewheel works though: http://jsfiddle.net/dmethvin/gDfcY/

Re: JQuery knobs

#37
post #21
post #10

Earlier quoted context omitted.

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

Knobs are the primary interface in many DAWs because their developers copy hardware interfaces without too much thought. They translate to computer interfaces very poorly. The main advantage of a hardware knob (over slider) is that you have very good control over it's rate of change. The main disadvantage is that it's hard to turn multiple knobs at once. None of this applies to software knobs. I can't think of why wo…

The only time I enjoyed using software dial-knobs was when I had a hardware controller to tweak them with.

In that situation having the visuals match is handy to avoid dissonance.

In general, I dislike software knobs. They're an example of skeuomorphism that could be done much better.

Re: JQuery knobs

#38
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.)

It’s a much nicer input mechanism to just click and drag left/right or up/down, or to use a scroll wheel (or trackpad scrolling).

What distinguishes a physical knob from a physical slider is that the knob affords relative movements, rather than absolute ones: you turn the knob with the same motion from every starting setting and your hand stays in the same place, whereas a slider has a distinct physical position corresponding to each setting. This allows control of knobs at various scales, from careful adjustments (“fine tuning”) up through fast dramatic changes. [And this is why the iPod wheel was such an ingenious input device.] Sometimes you want one type of control, and sometimes you want the other.

This particular software implementation, however, has the interface characteristics of a physical slider, not a physical knob. The visual display of these knobs is probably alright for some uses though, if you swapped out the mouse logic.

I really wish that browsers would get around to implementing mouse lock, so that it would be possible to construct interface widgets where a click/drag could perform some action without necessarily moving the pointer around the screen. http://dvcs.w3.org/hg/pointerlock/raw-file/default/index.htm...

Edit: to answer your question, I think relative adjustments are often appropriate in tools for picking or adjusting values, for everything from scrolling down a long page (witness the popularity of scroll wheels over clicking on scrollbars) to modifying parameters in interactive diagrams, to changing color or line width in vector drawing tools, &c. Physical examples of knobs are common: toaster settings, old manual camera controls, radio tuners, car steering wheels, pedals on a bike, fishing reels, hand drills, clocks & timers, and so on. Relative controls are underused in software, and I think showing them visually as knobs can be helpful in some cases, though getting the implementation details right is important.

Re: JQuery knobs

#39
post #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.

Not even then. Touch interfaces pay no attention to the rotation of a single point, so this would require two fingers, and if even then, you couldn't rotate it more than 180 degrees (try it without lifting up your hand). Scrollbars seem to win as far as touchscreens are concerned. Also, it's dependent on the visual indicator. For example, to set something at 50%, you need to move the visual indicator to the 50% mark. So, you'd need to first determine whether the indicator is clockwise to the mark, or counterclockwise, and rotate in reverse accordingly. Contrast that with a slider - if you want it at 50%, no problem, just put your finger at the 50% mark and you're done - muscle memory can help with this.

Re: JQuery knobs

#40
post #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?

Completely agree, but I think the solution is simpler: just like a physical knob, don't let it cross over from 100 to 0 and back. If it's 100, you need to drag it back around the centre to get to 0.
Post reply on HN