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.

My jQuery knob plugin called knobRot has relative controls. It uses sprites rather than canvas, and there are a few other issues in the tracker, but you can see a demo here: http://www.domitable.com/static/side-projects/jquery-plugins... and this is the source on GitHub https://github.com/AlexanderParker/knobRot

I also would like to have a way of locking the mouse position, but sadly that would give black hat developers a nice exploit (for harvesting likes etc).

The pointer lock API should be in Chrome and FF.

http://updates.html5rocks.com/2012/02/Pointer-Lock-API-Bring...

https://bugzilla.mozilla.org/show_bug.cgi?id=633602

https://developer.mozilla.org/en/API/Pointer_Lock_API

This is good news, though I don't see it becoming a standard any time soon without a way of blocking nefarious sites from taking hold of people's pointers. Perhaps a browser warning bar when a site tries to lock the cursor (or does this already happen)?

It's not good UX for audio production software either. The good ones (in my opinion) work by clicking and dragging up and down (or left and right) and merely render the knob as if it's spinning.

Now as it happens I'm of completely the opposite opinion - I much prefer the kind where you have to click and drag in an orbit around the control, because you can move further away (screen space permitting) to achieve finer control.

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 would anyone want to use this over Tangle's sliders aside from prettiness.

The only sensible simulation of a "knob" in HTML I can think of would be a text field with a value that goes up or down based on how much you scroll mouse scroll-wheel. Thinking about it, I don't see why it should be different from a slider. You can have a tangle slider that is also scrollable with a wheel (if that is possible to capty with JS). Which is kind of the way normal UI sliders work.

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.

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.

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.

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

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

That wouldn't be a knob though. That'd be a circular progress bar.

My old boss's boss once told our team that he had a dream... that on really high traffic days, our site was so well tuned, all we did was sit back and turn knobs and smoke cigars. This combined with the right backend tools brings that closer to reality. (Because i'm way too lazy to program a real graphical interface)

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.

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

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.

Did you even try the demo? I'm using it on an iPad right now and it works great (with one finger even!).

Yes, I'm referring to a 'knob' interface, not this emulation. This is more of a round slider bar.

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

I'm wondering the same thing, but one consolation is that I can see these being used as indicators vs. as a control.

It's the wrong UX for sound related apps because in that industry people expect to adjust knob controls by dragging on them up or down so they're going to be confused and decide these knob controls are "wrong".