How to debug: Transition sometimes doesn't work

ben80

Hi,
i am trying to find an error for a simple transition between two states.

I use a Transition beween two picture elements. This worked well for a long while. Now, i changed some of the java script code and sometime the animation doesn't work. Instead the state change happens instantaneously.

Do you have any hints, how i could debug this problem?

// Define States
states: [
    State{
        name: "stateLeft"
        PropertyChanges {target: idScreenLeft;  opacity:1}
        PropertyChanges {target: idScreenRight; opacity:0}
    },
    State{
        name: "stateRight"
        PropertyChanges {target: idScreenLeft;  opacity:0}
        PropertyChanges {target: idScreenRight; opacity:1}
    }
]//states


// State transitions
transitions: [
    Transition {
        from: "stateLeft"; to: "stateRight"
        ParallelAnimation{
            NumberAnimation{properties: "opacity"; duration: 2000; easing.type: Easing.InOutQuad }
        }

        onRunningChanged: {
            console.log("Transition Left to Right - running: " + running)
        }
    },
    Transition {
        from: "stateRight"; to: "stateLeft"
        ParallelAnimation{
            NumberAnimation{properties: "opacity"; duration: 2000; easing.type: Easing.InOutQuad }
        }

        onRunningChanged: {
            console.log("Transition Right to Left - running: " + running)
        }
    }
]//transitions

dheerendra

I don't see any issue with state and transition. However I suspect the issue with your state transition code. U may not be doing the right state transition. Can u paste your transition code as well ? Also you don't require two transitions. Use reversible true for one transition.

ben80

This is the main code, that does the switch between the two "screens".
But even, when the transition animation doesn't work, the state change and thus the image change takes place. Only without animation.

function fUpdate(){
    if (parFileName != ""){

        // determine the next active state
        if (idViewer.state == "stateLeft")  nextState = "stateRight"
        else                                nextState = "stateLeft"

        // determine the next active screen
        if (nextState == "stateLeft")   idScreenX = idScreenLeft  // get screen ID
        else                            idScreenX = idScreenRight

        // change properties of the next active screen
        idScreenX.aliasImg.source    = Qt.resolvedUrl(parFileName)
        idScreenX.aliasImg.fillMode   = parFillMode
        idScreenX.aliasRot.angle      = parRotate
        idScreenX.width               = parWidth
        idScreenX.height              = parHeight

        // Now, change the state of the viewer, so that the state transition can start (only after it has been set up!)
        if (nextState == "stateLeft")   idViewer.state = "stateLeft"
        else                            idViewer.state = "stateRight"

mostefa

HI @ben80

Normally transition from state to another state is triggered with signal,

So what about using SignalSpy to know if signal that lead to a specific state is triggered ?

http://doc.qt.io/qt-5/qml-qttest-signalspy.html#details

ben80

So far, i am pretty sure, that the state change takes place. But sometimes i see no animation.
It seems like, that after the animation time ~2s, it simply switches without animation.

So the current question is:
What has to happen, that inside a Transition (a) the console.log() function is executed, but (b) the ParallelAnimation is not shown? -> see my code samples

ben80

Can this be a memory issue?
The code is running on a raspberry pi, which has limited memory. QtQuick is using OpenGL ES, though.

If i limit the image dimensions (img.sourceSize) the transition animation seem to work all the time.

Nominate our 2022 Qt Champions!

How to debug: Transition sometimes doesn't work