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