JQuery knobs

[ender7]

Nit: it's jarring that when I first mousedown on the control, the value changes. This makes small, incremental changes difficult.

Now, if I click on an area of the circle that is far from the pointer, perhaps it should snap. But if I'm close (or on top of the pointer), snapping is undesirable.

(compare to a physical knob, which is the thing being emulated here: touching the knob does not change the input, you must touch and then move)

[bodhi]

This is the crucial annoyance with knobs in a lot of synthesisers (real and virtual). Another problem with them is that it's not obvious how you change the value. Do you drag to the angle you want? Do you drag vertically? Horizontally

Which then gets me thinking about direct vs indirect manipulation. Which then distracts me from eating my breakfast.

[JangoSteve]

Protip: If you want to make small incremental changes, mousedown on the knob and drag way out, making the radius of your turning motion much larger.

I actually thought that part was kinda nice in allowing me to make either quick large changes or small incremental changes. But then again, I'm not your average interwebs user, so I probably would be aware of the same issue if actually implementing it.

[eskimoblood]

Made a pull request that supports arrow keys and mousewheel, which makes it more usable for finer adjustments: https://github.com/aterrien/jQuery-Knob/pull/3/files

[cubicle67]

this could be solved by requiring a minimum cursor movement before the value changes. If you want only a small change, you need to move it beyond the trigger limit, then back again

the same idea would help with getting exactly 100 or 0 values - if moving back set the "zero" zone between 0 and about -10, or going the other way once you hit 100 you need to progress significantly past it, say to about 10, before it wraps value

[tptacek]

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

[jacobolus]

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.

[baddox]

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.

[zmitri]

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

[peterwwillis]

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)

[jonknee]

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.

[meanguy]

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

[bjcy]

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

[tripzilch]

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".

[meanguy]

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.

[jowiar]

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.

[inghoff]

For quantities, yes, but for ratios, I'd prefer pie charts and knobs.

"75%/25% odds" would be nicer on a knob display, for instance.

[unwiredben]

I'd really like to see some limits put in -- if you approach 100 from the 90s, have it stick at 100 instead of wrapping around immediately. Same if you try to go below 0. Right now it's really hard to get the know to fix at the limits of its range, something easy to do with traditional sliding controls.

[radiowave]

Agreed, there are some things (like volume controls) where you really don't want wrap-around.

[there]

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?

[mseebach]

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.

[noonespecial]

My nit: I can't crank it to 100 without it flipping back to 0 on me. If this was a volume control, that would suck huge.

[marcusf]

Like a few other in the thread I'm now stuck looking at an application where I can use this. They look friggin' awesome.

For some reason, the basic CSS reminds me of Wipeout, and that makes me both nostalgic in general and nostalgic for my young naivitë for future (I bought everything associated with that game when I was ~12). It's weird that UX can evoke that sort of response, but now I want to use it everywhere.

[illamint]

I wanted to work on some of the usability issues raised in this thread, but I'm not the biggest fan of the style of the original JavaScript, so I ported (most of) the code to CoffeeScript:

https://github.com/wyattanderson/jQuery-Knob

I left out some of the configurability by choice, and there's no Cakefile yet, but I added the ability to color the knob through CSS via the addition of a hidden style target element. Maybe not a great practice, but I like it better than embedding style information in the code and HTML. Additionally, it'll draw resolution-doubled on Retina displays.

Feel free to hack on it.

[10dpd]

I implemented something like this for my 'Clock' iOS app about 6 months ago.

Check out: http://itunes.apple.com/us/app/clock-free/id497161475?mt=8 and double tap to set the alarm using this UI metaphor.

The takeaway for me was that UIWebView is still too unresponsive to handle touch events, so although the app uses HTML5, the touch event handling had to be implemented in ObC.

[smoody]

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.

[superuser2]

Being familiar with knobs in digital audio workstation UIs, it's somewhat frustrating that I have to trace the thing around in a circle. Convention is that clicking in the knob and then dragging continuously up or down or using the scroll wheel should change its value.

[jacobr]

Nice, but a bit annoying to mix styles and other settings in the data attribute like that, and they would have to be repeated for each knob.

A library to easily parse custom CSS properties would be pretty cool. The "CSS" could be either in regular stylesheets (browsers ignore properties they don't understand), in a data-style attribute or maybe in a <style> element with a custom type attribute value. Browsers ignore properties and selectors they don't understand anyway.

    <style>
      .knob::-jquery-knob { ... }
    </style>

or

    <style type="text/jquery-knob">
      .knob { ... }
    </style>

or

    <input style="width: 150px; -jquery-knob-skin: tron">

[peter_l_downs]

Extremely awesome. My only (nitpicky) objection: I wasn't able to do a simple

  $('#myProgressKnob').attr('value', _new_value_);

and have the graph around the edges update. The number in the center changes, but the circular part doesn't get updated (at least, for me). I really wanted to use this in my latest project (shameless plug: http://wwikt-peterldowns.dotcloud.com) but couldn't make it happen so I'm switching back over to the twitter bootstrap progress bars in the meantime.

Disclaimer: I'm a totally new to JS and could be trying to do something un-possible. Thoughts? Has anyone else been able to make this happen?

[shanekenney]

Use this instead:

  $('#myProgressKnob').val(_new_value_);

[csmeder]

jQuery knobs + jQuery Rumble

http://jsfiddle.net/NQBjn/

Want to help update the script to keep the number in the middle?

[hackNightly]

This is simply stunning. Fantastic work, can't wait until I have a good reason to use this.

[SoftwareMaven]

I really like the interaction on my iPad with a couple small issues: don't jump with I first touch and don't allow wrapping from max to min.

Alternatively, I don't think I would want to use a mouse with these.

[lunixbochs]

The design is visually nice.

UX-wise... I never encounter controls like this, they don't look functional, and I wouldn't necessarily be likely to click one in the wild.

[sushi]

I think we will see this being used in lot of 'web infographics'. I personally was never fond of infographics in the image format but it helped spammers derive SEO juice which is how the whole infographic mania started.

Infographics meant for web consumption should be made using HTML, CSS and JS not images and this library will help a great deal.

[agumonkey]

It would be a very good addition to Bret Victor's reactive document widgets.

[wildmXranat]

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.