QML Tumbler (number picker)



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


  • Moderators

    Hi,

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





  • Hi Rizzer,

    Did you ever find a Tumbler port for Qt5?



  • 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
    }
    }
    @



  • 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



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


  • Moderators

    [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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.