C

Qt Quick Ultralite painteditem Example

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.15
import QtQuickUltralite.Extras 2.0
import QtQuickUltralite.Layers 2.0
import QtQuick.Controls 2.15

ApplicationScreens {
    id: root

    property bool automaticAnimation: false

    Screen {
        ItemLayer {
            anchors.fill: parent

            // Make sure not to use OTF layers on TRAVEO™ T2G,
            // as they don't have a framebuffer
            renderingHints: ItemLayer.NoRenderingHint

            Rectangle {
                anchors.fill: parent
                color: "gray"

                property real scale: 1
                Rectangle {
                    id: app
                    anchors.centerIn: parent
                    color: "white"
                    width: 200
                    height: 200

                    readonly property real radianRatio: 0.0174532925
                    readonly property real accGravity: 9.80665
                    readonly property int dampingFactor: 1
                    property real angularVelocity: Math.sqrt(accGravity / delegate.pivotLength)
                    property real time: 0.0;

                    //PaintedItem Object
                    PaintedItem {
                        id: oscillator
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.fill: parent

                        delegate_: OscillatorPaintedItem {
                            id: delegate
                            angle: 0.0
                            initialAngle: 50
                            pivotLength: 50

                            onAngleChanged: {
                                delegate.update()
                            }
                        }
                    }

                    /*Display the Instantaneous angle and damping Factor*/
                    Text {
                        anchors.top: parent.top
                        anchors.topMargin: 8
                        anchors.left: parent.left
                        anchors.leftMargin: 8
                        text: "Angle: " + delegate.initialAngle + "\ndamping: " + app.dampingFactor
                        font.pixelSize: 13
                    }

                    Button {
                        id: replay

                        //For platforms not supporting touch input, hide Replay button.
                        visible: !root.automaticAnimation

                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.bottom: parent.verticalCenter
                        height: 40
                        width: 70
                        font.pixelSize: 13
                        text: "Replay"

                        background: Rectangle {
                            color: replay.down ? "#A39D9C" : "#B8B3B2"
                            radius: 8
                        }

                        onClicked: {
                          /*Setting the initialAngle property to maximum value disturbs the equilibrium and
                          triggers the animation again.*/
                          delegate.initialAngle = 50
                        }
                    }

                    //For platforms not supporting touch input, below timer triggers animation after event trigger.
                    Timer {
                        running: root.automaticAnimation
                        repeat: true
                        interval: 8000
                        onTriggered: delegate.initialAngle = 50
                    }
                }

                Timer {
                    interval: 100; running: true; repeat: true
                    onTriggered: {
                        //Calculate instantaneous angular position of the blob
                        delegate.angle = 90.0 - delegate.initialAngle * Math.cos(app.angularVelocity * app.time)

                        //decrement the amplitude of oscillations
                        if(delegate.initialAngle != 0)
                        {
                          delegate.initialAngle -= app.dampingFactor
                        }

                        //Time factor is increased
                        app.time += 1.0
                    }
                }
            }
        }
    }
}