QML Quick2 Form.ui.qml & Connections

BTSTOnline

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)
//            }
//        }
//    }
}

sonicss

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

animatedImage

In your Page1.qml:

animatedImage.onFrameChanged: {
        // code here
    }

Or

animatedImage {
        onFrameChanged: {
            // code here
        }
    }

BTSTOnline

@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()
        }
}

BTSTOnline

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