Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Quick2 Form.ui.qml & Connections



  • I have a AnimatedImage in Page1Form.ui.qml form.
    I want to add a Connections link to catch the onFrameChanged signal.

    If I add this to the ui.form, I get "invalidPropertyName" and cannot use the designer to finish working on the Form...

    If I add it to the Page1.qml, I get the same error... and the signal is not activated.

    What am I doing wrong?

    Page1Form.ui.qml:

    import QtQuick 2.14
    import QtQuick.Controls 2.14
    import QtQml 2.12
    
    Page {
        id: splashPage
    
        signal splashed(bool splashDone)
    
        property alias splashPage: splashPage
        property alias animatedImage: animatedImage
    
        Rectangle {
            id: rectangle
            anchors.fill: parent
            color: "#000000"
        }
    
        AnimatedImage {
            id: animatedImage
            x: 0
            y: 0
            width: parent.width
            height: parent.height
            anchors.horizontalCenter: parent.horizontalCenter
            playing: true
            fillMode: Image.PreserveAspectFit
            source: "img/myAnimation.gif"
    
            Text {
                id: loadingText
                x: 276
                y: 344
                color: "#ffffff"
                text: qsTr("...loading...")
                visible: false
                anchors.horizontalCenter: parent.horizontalCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 18
            }
            Connections {
                target: animatedImage
                onFrameChanged: {
                    console.log("Frame: " + animatedImage.currentFrame)
                }
            }
        }
    }
    
    /*##^##
    Designer {
        D{i:0;autoSize:true;height:480;width:640}
    }
    ##^##*/
    

    Page1.qml:

    import QtQuick 2.14
    import QtQuick.Controls 2.14
    import QtQml 2.12
    
    Page1Form {
        Timer {
            id: splashTimer
            interval: 500
            running: false
            repeat: false
            onTriggered: {
                mainWin.showLoginOptions();
            }
        }
    //    Connections {
    //        target: animatedImage
    //        onFrameChanged: {
    //            //console.log("Frame: " + animatedImage.currentFrame)
    //            if (animatedImage.currentFrame === animatedImage.frameCount - 1) {
    //                animatedImage.playing = false
    
    //                animatedImage.width = animatedImage.width * .5
    //                animatedImage.height = animatedImage.height * .5
    //                animatedImage.top = splashPage.top
    
    //                splashTimer.start()
    //                //splashed(true)
    //            }
    //        }
    //    }
    }
    


  • @BTSTOnline said in QML Quick2 Form.ui.qml & Connections:

    animatedImage

    In your Page1.qml:

    animatedImage.onFrameChanged: {
            // code here
        }
    

    Or

    animatedImage {
            onFrameChanged: {
                // code here
            }
        }
    


  • @sonicss
    Modified like this.. but the onFrameChanged does not fire...

    Page1Form.ui.qml

    import QtQuick 2.14
    import QtQuick.Controls 2.14
    import QtQml 2.12
    
    Page {
        id: splashPage
    
        signal splashed(bool splashDone)
    
        property alias splashPage: splashPage
        property alias animatedImage: animatedImage
        property alias loginButton: loginButton
    
        Rectangle {
            id: rectangle
            anchors.fill: parent
            color: "#000000"
        }
    
        AnimatedImage {
            id: animatedImage
            width: parent.width
            height: parent.height
            anchors.horizontalCenter: parent.horizontalCenter
            playing: true
            fillMode: Image.PreserveAspectFit
            source: "img/myAnimation.gif"
        }
    
        Button {
            id: loginButton
            text: "Login"
            anchors.centerIn: parent
    
            visible: mainWin.loginOptions
        }
    }
    
    /*##^##
    Designer {
        D{i:0;autoSize:true;height:480;width:640}
    }
    ##^##*/
    

    Page1.qml:

    import QtQuick 2.14
    import QtQuick.Controls 2.14
    import QtQml 2.12
    
    Page1Form {
        Timer {
            id: splashTimer
            interval: 500
            running: false
            repeat: false
            onTriggered: {
                mainWin.showLoginOptions();
            }
        }
        animatedImage {
            onFrameChanged: {
                console.log("Frame: " + animatedImage.currentFrame)
                if (animatedImage.currentFrame === animatedImage.frameCount - 1) {
                    animatedImage.playing = false
    
                    animatedImage.width = animatedImage.width * .5
                    animatedImage.height = animatedImage.height * .5
                    animatedImage.top = splashPage.top
    
                    splashTimer.start()
                }
            }
        }
    
        loginButton {
            onClicked: {
                mainWin.swipeView.incrementCurrentIndex()
            }
        }
    }
    

    also tried this in Page1.qml:
    ```
    animatedImage.onFrameChanged: {
    console.log("Frame: " + animatedImage.currentFrame)
    if (animatedImage.currentFrame === animatedImage.frameCount - 1) {
    animatedImage.playing = false

                animatedImage.width = animatedImage.width * .5
                animatedImage.height = animatedImage.height * .5
                animatedImage.top = splashPage.top
    
                splashTimer.start()
            }
    }
    


  • Got it figured out...

    My Page1Form is in a SwipeView, so I had to add the implementation code to the Page1Form declaration in the SwipeView.

    --Sam


Log in to reply