JQuery knobs
anthonyterrien.com
anthonyterrien.com
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)
Which then gets me thinking about direct vs indirect manipulation. Which then distracts me from eating my breakfast.
I realized this was a mistake when I gave my app to friends to test and had to stop myself from saying "no! you're moving the knob wrong!" and went back to the drawing board :)
Which is why this piece of UI is rather counter-intuitive, and it's obvious the author hasn't ever really used any other software with knob controls.
But even then, I kinda think knob controls aren't very user-friendly either way. I can sort of understand their usage in software synths as a skeuomorph, but that's about it.
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.
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
(I'm expecting/hoping to get schooled on this.)
EDIT: Oops, I guess I can't read
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.
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.
A slider instantly tells you the current level (relative to minimum and maximum) and is very easy to adjust.
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.
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).
http://updates.html5rocks.com/2012/02/Pointer-Lock-API-Bring...
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.
"75%/25% odds" would be nicer on a knob display, for instance.
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.
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.
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.
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.
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>
<style type="text/jquery-knob">
.knob { ... }
</style>
<input style="width: 150px; -jquery-knob-skin: tron"> $('#myProgressKnob').attr('value', _new_value_);
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?
$('#myProgressKnob').val(_new_value_);Want to help update the script to keep the number in the middle?
Alternatively, I don't think I would want to use a mouse with these.
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.
Infographics meant for web consumption should be made using HTML, CSS and JS not images and this library will help a great deal.
[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.
http://archive.plugins.jquery.com/project/mousewheel (untested)
this gives NaN, tho, because I suck at javascript, but I'm sure there's something workable in there.
"It's like a real-world, analog volume control dial, but with much finer UI control."
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)."
... which has been around for a few years.
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.
Thanks!
Cool coding though :)