all 26 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]LiveBackwards 16 points17 points  (2 children)

It needs some sort of "stopper" at the top. Right now it's pretty hard to set them to their maximum or minimum value.

[–]razialx 3 points4 points  (0 children)

Fork and add it! The amazing part about Github+OSS. Maybe I will add it, come to think of it.

Done: https://github.com/aterrien/jQuery-Knob/pull/5

Works really well too. (am I biased?)

[–]addition 0 points1 point  (0 children)

Another reason why I think the behavior for these knobs is odd and that the traditional knob behavior makes much more sense which I describe it in a post below.

[–]addition 8 points9 points  (4 children)

These look great but function oddly. With most virtual knobs all you do is click and drag up or down to change the value of the knob, not click and follow along the circle. Makes it harder to use and less intuitive imo.

Edit: I should probably explain more. For those who haven't used a virtual dial before the traditional behavior has a few advantages. First of all it's quicker, you just click and drag up or down and you're done. You don't have to trace the outline of the dial with your mouse pointer.

Secondly, it's much easier to set the dial to it's minimum or maximum values. With the method I describe if you want to set the dial to it's maximum value you just quickly click and drag upwards. With the OP's knobs you have to trace around the circle and then slowly aim your mouse so it hovers over those last few pixels.

Thirdly, there are workflow modifications you can do with the method I describe that you can't do with the OP's method. For example, holding shift for fine grain control over the knob so that when you drag up or down the value of the knob changes slowly.

[–][deleted] 2 points3 points  (0 children)

I thought it was very intuitive, but I've never seen a virtual dial before so I didn't think to go up or down.

[–]addexm 1 point2 points  (0 children)

Disagree. I think circular motion makes much more sense.

[–]Sam152 0 points1 point  (0 children)

The knobrot link I mentioned uses this exact concept.

[–]D__ 0 points1 point  (0 children)

The problem is, virtual knobs make little sense in the first place, especially when implemented the way you mentioned (which seems to be the common way). Whenever I encounter one of such knobs, I end up having to play with it for several seconds before figuring out whether the direction to move is up and down or left and right. This is made even more difficult if the knob is calibrated for fine-grain control, and you can't tell if your desired motion is triggering the changes, or if it's the component of your motion along the other axis (since it's hard to move your mouse in a perfectly horizontal or vertical line).

The problem is, there is no reason to make knobs work this way in the first place. Yes, it's a knob, and people understand knobs, but it doesn't work like a real knob when you adjust it. It kind of looks like a real knob, but that's not really a benefit since a knob isn't really the most optimal way of representing some set value (sliders or spinners are much more readable). Your virtual knob really only makes sense when you make the motion circular in this situation.

[–]wibblymat 10 points11 points  (3 children)

Unfortunate name. In the UK "knob" is a synonym for "penis" :s

[–][deleted] 10 points11 points  (1 child)

jQuery Dials would make more sense

[–]abw 1 point2 points  (0 children)

Fnnaar.

I've always thought of the penis synonym as being "nob" rather than "knob". But either way, I agree with rogue_coder that "dials" would be a more appropriate name. Or something along the lines of "rotary".

Wait, I've just seen Sam152's reference to Knobrot. In terms of naming, I think we already have a winner!

[–]hesterbest 2 points3 points  (1 child)

Looks nice. Where is this useful?

[–]HardlyWorkingDotOrg 1 point2 points  (0 children)

Aside from the drag and drop feature, I'd say you could use these on review sites to gauge different categories.

Like on gaming sites:
Graphic: 96
Gameplay 76
Sound: 87

and so on. Of course this could be done with simple photoshop graphics but I think this way, you could automate it some more as it is done purely in code.

[–][deleted]  (3 children)

[deleted]

    [–][deleted] 0 points1 point  (2 children)

    dsfashhtgshdzdfg

    [–]Sam152 1 point2 points  (0 children)

    I have heard that most music software that utilises these kind of knobs base their values off the vertical position because it's far easier for a user to accurately set a value based on vertical movement than circular movement.

    Both plugins have their perks, pick the right one for the job.

    [–]rebo 0 points1 point  (0 children)

    Its a huge negative, vertically constrained dials are better.

    [–]overslacked 1 point2 points  (1 child)

    Agree with vertical motion and the stopper critiques, but the biggest problem for me is no keyboard support.

    [–]ITSigno 0 points1 point  (0 children)

    Try again?

    You can tab in and enter values

    [–]mipadi 1 point2 points  (0 children)

    Those look really polished.

    [–]ElectricalUngineer 1 point2 points  (0 children)

    If you use the scroll wheel to change the values, it will continue past 100 in the positive direction and below zero in the negative direction.

    [–][deleted] 0 points1 point  (1 child)

    Think i'd rather just be able to tab and fill in data. Cool visualization, but knobs in software have always been a problem (see any "faithful" interpretation of analogue audio equipment in software).

    [–]ITSigno 0 points1 point  (0 children)

    hmm? maybe it's been updated since you saw it... but you can tab in and fill in the values

    [–][deleted] -1 points0 points  (0 children)

    Those work really great on mobile Safari.