tumbler doesnot fit rectangle when rotation -90 is given.

dsba

I am running following example code, output does not fit in entire window as it does with vertical view.

Is tumbler can not be used for horizontal visualization?
Can I use SwipeView on the same and also I want wrapping.

Thanks in advance.

import QtQuick 2.12
import QtQuick.Controls 2.12

Tumbler {
id: control
model: 15
width: 200
height: 100
rotation: -90
background: Item {
Rectangle {
opacity: control.enabled ? 0.2 : 0.1
border.color: "#000000"
width: parent.width
height: 1
anchors.top: parent.top
}

    Rectangle {
        opacity: control.enabled ? 0.2 : 0.1
        border.color: "#000000"
        width: parent.width
        height: 1
        anchors.bottom: parent.bottom
    }
}

delegate: Text {
    text: qsTr("Item %1").arg(modelData + 1)
    font: control.font
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
}

Rectangle {
    anchors.horizontalCenter: control.horizontalCenter
    y: control.height * 0.4
    width: 40
    height: 1
    color: "#21be2b"
}

Rectangle {
    anchors.horizontalCenter: control.horizontalCenter
    y: control.height * 0.6
    width: 40
    height: 1
    color: "#21be2b"
}

}

Markkyboy

I have no idea about SwipeView in this scenario, but you can certainly use Tumbler in horizontal view by adding Rotation to your Text;

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Tumbler {
        id: control
        model: 15
        width: 200
        height: 200
        rotation: -90
        anchors.fill: parent
        background: Item {
            Rectangle {
                opacity: control.enabled ? 0.2 : 0.1
                border.color: "#000000"
                width: parent.width
                height: 1
                anchors.top: parent.top
            }

            Rectangle {
                opacity: control.enabled ? 0.2 : 0.1
                border.color: "#000000"
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
            }
        }

        delegate: Text {
            rotation: 90
            text: qsTr("Item %1").arg(modelData + 1)
            font: control.font
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
        }

        Rectangle {
            anchors.horizontalCenter: control.horizontalCenter
            y: control.height * 0.4
            width: 40
            height: 1
            color: "#21be2b"
        }

        Rectangle {
            anchors.horizontalCenter: control.horizontalCenter
            y: control.height * 0.6
            width: 40
            height: 1
            color: "#21be2b"
        }
    }
}

dsba

@dsba said in tumbler doesnot fit rectangle when rotation -90 is given.:

Thanks for the reply.

Kindly expand the window, you will see Tumbler that does not fit completely. I want It to fit completely in below mentioned Width and Height.

width: 200
height: 100

Markkyboy

@dsba said in tumbler doesnot fit rectangle when rotation -90 is given.:

@dsba said in tumbler doesnot fit rectangle when rotation -90 is given.:

Thanks for the reply.

Kindly expand the window, you will see Tumbler that does not fit completely. I want It to fit completely in below mentioned Width and Height.

width: 200
height: 100

yes, I noticed that when I first ran your code, it is because rotation is performed on the x axis not from the centre of the object.

Look at my code, the Tumbler is anchored to fill the main window. The main window is set to accommodate a maximum height or width of 200 allowing tumbler to fit when rotated.

dsba

I copied your code and executing, I still have same issue. I am using ubuntu 18.04.
Do you still get completely filled if you increase width to 500?

Markkyboy

Try pasting the following code. You should now get the size you want with some tweaking to make the text readable;

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 200
    height: 100
    title: qsTr("Hello World")

    Tumbler {
        id: control
        model: 15
        width: 200
        height: 100
        rotation: -90
        anchors.fill: parent
        opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
        delegate: Text {
            rotation: 90
            text: qsTr("Item\n %1").arg(modelData + 1)
            font.pixelSize: 8
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
        }
        Rectangle {
            anchors.horizontalCenter: control.horizontalCenter
            y: control.height * 0.35
            width: 80
            height: 2
            color: "red"
        }
        Rectangle {
            anchors.horizontalCenter: control.horizontalCenter
            y: control.height * 0.65
            width: 80
            height: 2
            color: "red"
        }
    }
}

dsba

Thanks for the help.
Maybe my question is not explained properly I believe.
Tumbler does not get fit inside window completely. I have highlighted tumbler color so that it could be explained well for your kind reference.
ApplicationWindow {
visible: true
width: 200
height: 100
title: qsTr("Hello World")

Tumbler {
    id: control
    model: 15
    width: 200
    height: 100
    background: Rectangle {
        anchors.fill: control
        color: "lightblue"
    }

    rotation: -90
    anchors.fill: parent
    delegate: Text {
        rotation: 90
        text: qsTr("Item\n %1").arg(modelData + 1)
        font.pixelSize: 8
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}

}

Markkyboy

Yeah, I got the feeling I wasn't understanding you correctly, I may still have this wrong but here goes.

We can maintain the size of the main window (width: 200; height: 100) but to fill the window with Tumbler, increase the height of Tumbler from '150' to '200' and change 'anchors.fill: parent' to 'anchors.centerIn: parent'

    Tumbler {
        id: control
        model: 15
        width: 200
        height: 200
        rotation: -90
        anchors.centerIn: parent

Do I still misunderstand @dsba ?.....or are we getting somewhere?

dsba

@Markkyboy said in tumbler doesnot fit rectangle when rotation -90 is given.:

anchors.centerIn: parent

Thanks @Markkyboy .
During Horizontal representation of tumbler, parent.width becomes height of the Tumbler and parent.height to be width of the Tumbler. Hence, this seems to be working for the width and height that I was required with.
Tumbler {
id: tumbler
width: parent.height
height: parent.width
rotation: -90 // <---- Rotate there
anchors.centerIn: parent