Circular slider and timepicker in qml

The default qml components timepicker uses a slotmachine arrangement which is terrible in terms of usability, and is by definition a dialog, which is not always desired.

On the other hand the circular meegotouch timepicker is visually beautiful, easy and intuitive to use (like an analog clock), so I decided to implement a similar qml component for nemo. The component is not a direct clone nor it uses the harmattan meegotouch theme assets, but if somebody wants to change the artwork it should be trivial to do it.

For the time being it doesn’t have animations (PathAnimation, which is coming in qml2 will help do that animation easily, so for now it’s deferred) and it is 12h only (you have to create a switch by yourself to cater for AM/PM.

The component is comprised by two circular slider components which are also part of the project. So if you need a custom qml circular slider just include CircularSlider.qml in your project.
The code is on

P.S. The reasons I think the slotmachine is not good in terms of usability are the following:

1. 60 items are too much to show in a flickable list. The user can’t know how hard to flick to go directly to (or even near) the minute he wants, and one big swipe often isn’t enough (you run out of screen). On the other hand you need one tap on the circle, and it’s obvious where to tap unless you can’t read an analog clock.

2. When you flick upwards you cover the slot with your finger so it’s difficult to see what you’re going to choose

3. If we had an inline slotmachine with only the selected time visible and the other values showed up only while dragging I might prefer it in some circumstances (depending on the frequency of choosing times and screen space constraints) over a pop-up circular picker but in the current situation the qml timepicker is a dialog that by definition takes up the whole screen and adds two unnecessary taps.

4. Inconsistency: There’s no cancel button in other dialogs, the buttons aren’t themed like the other dialog buttons, and there is no X button. That dialog is like a hastily made custom component.









I also feel obliged to mention this effort which I was not aware of and tries to bring the meegotouch timepicker to harmattan qml.


One thought on “Circular slider and timepicker in qml

  1. Ok, like the concept and implementation. But maybe lessen the drop shadow, don’t you think ? For subtlety ? Other than that, definitely a good direction :)