QML Tumbler (number picker)

Rizzer

Nokia gave Qt/QML the Tumbler object, part of the original Qt Quick Components, cf. "http://doc.qt.digia.com/qtquick-components-symbian-1.1/qml-tumbler.html":http://doc.qt.digia.com/qtquick-components-symbian-1.1/qml-tumbler.html

It was a neat way of enabling a user to pick an item from a list, by spinning through the list. Works great on a touch interface.

Some of the Qt Quick Components have now made their way into Qt5 (Qt Quick Controls, "http://doc-snapshot.qt-project.org/qt5-dev/qtquick-controls-qmlmodule.html":http://doc-snapshot.qt-project.org/qt5-dev/qtquick-controls-qmlmodule.html)

But the Tumbler is not among them. SpinBox and Slider are similar, but not the same.

Has anyone got a clue on providing the Tumbler functionality? Does Digia have plans to add it to Qt Quick Controls?

The old symbian/meego qml source code is still available, but it's not so trivial to port it across to Qt5 (which is to say, I've tried it but it works poorly).

JKSH

Hi,

You could send a feature request to https://bugreports.qt-project.org/ asking for the return of the Tumbler :)

Rizzer

Good idea :)

"QTBUG-38389":https://bugreports.qt-project.org/browse/QTBUG-38389

kenfred

Hi Rizzer,

Did you ever find a Tumbler port for Qt5?

Rizzer

Hi kenfred, I don't have a properly working Tumbler port.

I copied constants.js Tumbler.js TumblerColumn.qml Tumbler.qml TumblerTemplate.qml from git:qtquickcomponents/qt-components/src/meego/extras/

It sort of works using a simple patch to import QtQuick 2.0 and not reference platformStyle. But column spacing gets badly out of kilter. Using "normal" spacing, on Android most columns get rendered as "..." meaning the column is too small for the text. I had simply commented out the line referencing platformStyle.fontPixelSize. I haven't debugged it further yet to see if restoring that line with an appropriate pixelSize fixes the problem. I suspect not. Replacing ImplicitSizeItem with Item is another candidate (ImplicitSizeItem is in the QML internal code but not in the API).

Here's the trivial raw patch which "sort of works" (please excuse the commented lines, left in place for context while debugging) '@@' replaced with %% for code pasting.

@--- qtquickcomponents/qt-components/src/meego/extras/Tumbler.qml 2014-04-16 18:35:33.287548484 +1000
+++ Tumbler.qml 2014-04-16 18:53:39.000000000 +1000
%% -38,8 +38,11 %%
**
****************************************************************************/

-import QtQuick 1.1
-import com.nokia.meego 1.0
+//import QtQuick 1.1
+//import com.nokia.meego 1.0
+import QtQuick 2.0
+import QtQuick.Window 2.0
+
import "Tumbler.js" as Engine
import "constants.js" as C

%% -47,7 +50,8 %%
Class: Tumbler
A tumbler.
*/
-ImplicitSizeItem {
+//ImplicitSizeItem {

Item {
id: root

/*
%% -67,7 +71,7 %%
property list<Item> privateTemplates

implicitWidth: C.TUMBLER_WIDTH

implicitHeight: screen.displayWidth > screen.displayHeight ?

implicitHeight: Screen.width> Screen.height ?
C.TUMBLER_HEIGHT_LANDSCAPE :
C.TUMBLER_HEIGHT_PORTRAIT

%% -137,7 +141,7 %%
height: internal.hasLabel ?
parent.height - C.TUMBLER_LABEL_HEIGHT : // decrease by bottom text height
parent.height

   source: "image://theme/" + theme.colorString + "meegotouch-list-fullwidth-background-selected"

+// source: "image://theme/" + theme.colorString + "meegotouch-list-fullwidth-background-selected"
anchors.top: parent.top
border { left: C.TUMBLER_BORDER_MARGIN; top: C.TUMBLER_BORDER_MARGIN; right: C.TUMBLER_BORDER_MARGIN; bottom: C.TUMBLER_BORDER_MARGIN }
}
--- qtquickcomponents/qt-components/src/meego/extras/TumblerColumn.qml 2014-04-16 18:35:33.287548484 +1000
+++ TumblerColumn.qml 2014-04-16 18:39:31.000000000 +1000
%% -38,7 +38,8 %%
**
****************************************************************************/

-import QtQuick 1.1
+//import QtQuick 1.1
+import QtQuick 2.0

Item {
property variant items
--- qtquickcomponents/qt-components/src/meego/extras/TumblerTemplate.qml 2014-04-16 18:35:33.287548484 +1000
+++ TumblerTemplate.qml 2014-04-16 18:50:50.000000000 +1000
%% -38,8 +38,9 %%
**
****************************************************************************/

-import QtQuick 1.1
-import com.nokia.meego 1.0
+//import QtQuick 1.1
+//import com.nokia.meego 1.0
+import QtQuick 2.0
import "constants.js" as C

Item {
%% -50,7 +51,7 %%
property int index: -1
property Item view: viewContainer.item

property Style platformStyle: LabelStyle{}
+// property Style platformStyle: LabelStyle{}

opacity: enabled ? C.TUMBLER_OPACITY_FULL : C.TUMBLER_OPACITY
width: childrenRect.width
%% -173,7 +174,7 %%
elide: Text.ElideRight
horizontalAlignment: "AlignHCenter"
color: C.TUMBLER_COLOR_TEXT

           font { family: platformStyle.fontFamily; pixelSize: platformStyle.fontPixelSize }

+// font { family: platformStyle.fontFamily; pixelSize: platformStyle.fontPixelSize }
anchors { fill: parent; margins: C.TUMBLER_MARGIN }

             MouseArea {

%% -215,7 +216,7 %%
objectName: "highlight"
width: tumblerColumn ? tumblerColumn.width : 0
height: C.TUMBLER_ROW_HEIGHT

       source: "image://theme/" + theme.colorString + "meegotouch-list-fullwidth-background-selected-horizontal-center"

+// source: "image://theme/" + theme.colorString + "meegotouch-list-fullwidth-background-selected-horizontal-center"
fillMode: Image.TileHorizontally
}
}
@

Rizzer

Actually, upon further inspection, I get fairly good results (column widths behaving decently) if I change TUMBLER_MARGIN to 0 instead of 16 in constants.js

Rizzer

I've posted a "working" set of Tumbler files at the bug report ("QTBUG-38389":https://bugreports.qt-project.org/browse/QTBUG-38389)

JKSH

[quote author="Rizzer" date="1409721198"]I've posted a "working" set of Tumbler files at the bug report ("QTBUG-38389":https://bugreports.qt-project.org/browse/QTBUG-38389)[/quote]Fantastic! Thank you for your work and contribution.