RotaryKnob component

Hi folks!

My small contribution to Vaadin community - RotaryKnob widget. The name will speak for itself, it’s a tweakable knob alike component for selecting a value within some range. The main purpose of this component was to learn more about GWT internals used in Vaadin client side implementations , especially about the event handling framework.

for further info and a live demo.
source code
or try ready-to-go Vaadin 6.2+ compatible jar file bundling RotaryKnob component

  • Mikael

The attention to detail is impressive.

Is it possible to customize the knob image and size of the widget?

One preference - know activation (by clicking) is a bit awkward. IMO use might be smoother if one could start dragging value up/down or use scrollwheel without first activating the knob, but with mouse down. (Scrollwheel requires some activation as one would otherwise accidentally turn knobs when scrolling through a page. Holding left mouse button could be quite natural activation. Better than click - scroll - click IMO.)

Great !
another canidate to a go-to-vaadin-core-widgets vote list, I think ! :slight_smile:

I don’t know if it has been updated but dragging it to a new value works just fine for me (click’n’hold → drag → release) and it feels quite natural to me. Using chrome as the browser.

Knob image itself is straitforward to customize. All knob backgrouds are bundled into one png file and depending on the knob mode the right one is shown by setting image offset via css. When it comes to the size of the widget… not so easy. Knob backgound images have fixed size and though the widget. I thought of making two different size themes but ran out of time. Some vector graphic based solution would make scaling trivial, but browser support is another issue then :). And of course there is a some minimum limit for the knob size to keep it usable.

“Activation” behaviour that Jens described is the intended one. No extra clicks should be needed, pressing mouse button down focuses the widged and dragging (still keeping mouse down) changes knob value. In order to change value with a scrollwheel knob must have focus first, the reasoning is just that what you mentioned and the component should work that way all ready. I tested this with all Vaadin supported browsers, but there may be some incompatibility issues still out there… Joonas what browser did you use and can you confirm the odd behaviour with some other browser too?

A nice component but the acceleration support could use some tuning.

In practice, when moving the mouse carefully, the rotation is often too slow. However, even a small fast “jerk” of the mouse makes it jump all the way to an extreme. Therefore, medium-range changes are hard to make accurately.

This could be a difference in mouse acceleration is different OS:s. In OS X mouse behaves quite naturally with RotaryKnob widget.

Jens - you are right. Now the widget feels more natural.

Henri, you’re right. Though the acceleration feature is quite usable on all platforms at the moment it definitely needs some tuning. The goal is to make it feel natural and give a feeling of predicting user intentions. At the same time it shouldn’t get too complex when it comes to client side performance. Under the hood more weight is given to time measurements than to tracking absolute wheel or mouse positions since different platforms seems to behave all but uniformly with those thing.

Trivially there could be a acceleration sensitivity property assigned to the component, but I want to avoid any extra parametrization and try to make the component work out of the box. The tricky part is make it feel usable within different value ranges. Of course the acceleration must be more aggressive when the range is large and vice versa. Ok, selecting a double decimal precision number within a range of thousands is maybe not anymore that kind of usage this component is intended for.

Some updates coming up with a loose schedule…

Nice component!

But I suggest that the current “immediate” mode could be “instant”, since the component generates a lot of POSTs by just dragging the knob around a little. Immediate mode could instead be such, that when the user releases mouse button, a POST is sent?

// Johan

Updated just a new version, see
live demo

  • Mikael

Hi guys,

How do I use this add-on with Liferay ? I have the following error :

I guess I have to recompile the widgetset. How can I do this as I rely on the PortalDefaultWidgetSet of Liferay ?


The easiest way to do this is to use the
Vaadin Control Panel for Liferay portlet
. It allows you to recompile the portal widgetset with any add-ons you have copied to the portal.