
JQuery knobs - agumonkey
http://anthonyterrien.com/knob/
======
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.

~~~
Udo
I think it might be interesting to have a knob-like control that responds to
the scrolling action of the mouse/touchpad. At least with that, you'd have
(somewhat) clearly defined up and down actions. Touchscreens could support
this with a two-finger-up/down gesture, and then we'd be very well on our way
to Trek-like UIs ;-)

~~~
ricardobeat
Some iOS apps already do (can't remember right now).

~~~
bodhi
I'm not sure if it's what Udo meant, but the date/time widgets are in this
vein. Actually, a knob that functioned like those widgets would be quite
interesting.

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

~~~
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

~~~
romaniv
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.

~~~
DanBC
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.

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

~~~
jowiar
Not really for ratios. If there's a min and a max, sliders make sense.

You can make a better argument for a knob if you have an unbounded range, or
an effectively unbounded one (making small adjustments on a large scale).
Think old iPods.

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

~~~
gresrun
if (curLevel == maxLevel && angleFromCenter > 0 && angleFromCenter < 45){ //
Ignore } else { // Process normally }

------
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_);

~~~
peter_l_downs
Thank you!

~~~
klr
This still does the same thing for me, can you show your code?

~~~
peter_l_downs
I never got it working. I switched to the twitter bootstrap progress bars
instead.

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

------
bluetshirt
These feel very strange. They don't behave like any knobs I've ever
encountered in software.

------
ben0x539
It's pretty, but I think it would be more usable if it didn't wrap between 100
and 0.

~~~
54mf
A fair point, and I imagine it would be trivial to add a min and max to the
configuration options. Without looking at the source, my hope is that it's
utilizing <input type="range">, which has min and max built right in.

[Edit] I had to look. Apparently it's just adjusting the value of a text
field, which is probably better for backwards compatibility but does make me a
little bit sad.

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

~~~
rhizome
Maybe the mousewheel can be put to use here?

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

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

~~~
rhizome
hmm, i was thinking along these lines: <http://jsfiddle.net/gDfcY/6/>

this gives NaN, tho, because I suck at javascript, but I'm sure there's
something workable in there.

~~~
yoklov
<http://jsfiddle.net/gDfcY/8/> Seems to work, but it's probably not the most
elegant way it can be done

------
reid
For comparision, YUI offers a similar widget: Dial.

"It's like a real-world, analog volume control dial, but with much finer UI
control."

<http://yuilibrary.com/yui/docs/dial/>

~~~
junto
'Dial' is a better word than 'knob'.

In British English the word has a variety of profane implications, inviting
childish sniggers from grown men:
<http://www.urbandictionary.com/define.php?term=knob>

The following are quoted extracts from Roger's Profanisaurus:

"knob 1. n. Penis; prick; John Thomas. 2. v. To shag. As in “I knobbed the
arse off her”. knob cheese n. 1. Smeg-ma. 2. Foreskin feta found underneath
Kojak’s roll-neck (qv) and around the banjo (qv) or cheese ridge. Also knob
Stilton, knob yoghurt, Helmetdale (qv). knob chopper n. Precariously balanced
lavatory seat which falls down while you’re having a piss and therefore must
be held up manually. knob head . knob end n. Fuck wit; thick head; oaf. knob
jockey n. Someone who sits on a door handle whilst the door is in motion for
sexual gratification. knob shiner n. Someone who is always prepared to polish
a pink oboe (qv)."

Source: <http://en.wikipedia.org/wiki/Rogers_Profanisaurus>

------
coda_
Reminds me of this:
[http://www.schillmania.com/projects/soundmanager2/demo/360-p...](http://www.schillmania.com/projects/soundmanager2/demo/360-player/)

... which has been around for a few years.

------
sltkr
It seems that the text field accepts arbitrary numbers and then sets the knob
to a rather random-looking position. It would make a lot more sense if these
values were clipped to the range of the knob.

------
grigy
One use-case would be setting clock time, though with some modifications. I
had such control in mind before. I think for some of us it would easier to
make two clicks rather than enter numbers.

------
biznickman
So I first tried this on mobile and that's where this interface becomes
horrific. As my thumb slides over the number toward the top of the circle, I
can't see what I've selected.

------
biznickman
So I first tried this on mobile and that's where this interface because
horrific. As my thumb slides over the number toward the top of the circle, I
can't see what I've selected.

------
Sym3tri
"jQuery Knobs" sounds like a term for dickish jQuery enthusiasts.

------
csomar
I don't like to sound negative but this looks to me the wrong way to do it.

You are redefining here a UX/UI element: The slider. Well, I like breaking the
rules and innovation, but you have to care about the end user. I have been
working with computers for over 10 years now, and I didn't figure out what
these small circles do until I checked the HN comments.

I might be a little sleepy, it's late here; however, I have strong doubts that
any Internet/Computer semi-literate will figure out what this do and how to
make it works. This is the case where a 3D shadowed boundaries, little bars
and gradient colors can make a huge difference and guide the user to use the
tool.

------
dm8
This is stunning. UX metaphors can work in number of situations.

~~~
objectatrest
Yep. I have been waiting for something like this for a UI doodle I have.
Brilliant start.

------
captaincrunch
Thanks! We were starting to create our own custom knobs for our site
(verelo.com). This saved us a lot of time. We'll definitely be contributing
back.

Thanks!

------
faramarz
Works beautifully on my iPhone. I can see this being used for filtering
"results per page" on ajax shopping websites Great work!

------
gdubs
Works really nicely on an iPhone – much better than a lot of knob controls in
many native apps.

------
holgersindbaek
I would love to be able to use this with other canvas-shapes... How can this
be implemented?

------
agumonkey
I wonder how long it will take before someone publish cubase.js now:)

------
etfb
Even for JavaScript, that's an accessibility nightmare. Horrible!

------
msmamet
I thought this was going to be an article about "brogrammers,"

------
michael_f
Am I the only one who thought this post was about people?

Cool coding though :)

~~~
joneil
I came in expecting to hear people ranting about why jQuery is inferior to
some other Javascript framework / coding style. Instead the people are
positive and the sample code is sweet...

------
LyleK
Very nice!

------
Palomides
complaint: no visual way to determine if a knob is read-only?

------
dhruvbird
fuckin awesome!!

------
mmukhin
watch out, honeywell might sue you

