magnum-boostrap-qtquick/src/qml/main.qml

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import Magnum 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("My Application")

    RowLayout {
        id: root
        anchors.fill: parent
        spacing: 0

        ColumnLayout {
            Layout.fillHeight: true
            Layout.preferredWidth: parent.width * 0.25
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.margins: 20
            spacing: 20

            Label {
                text: "Controls"
                font.pointSize: 14
            }
            GroupBox {
                Layout.preferredWidth: parent.width

                RowLayout {
                    anchors.left: parent.left
                    anchors.right: parent.right

                    Label {
                        Layout.preferredWidth: parent.width/4
                        text: "Hue"
                    }
                    Label {
                        text: qsTr("%1°").arg(Math.round((180/Math.PI)*hue.value))
                        color: palette.highlight
                    }
                    Slider {
                        id: hue
                        anchors.right: parent.right
                        Layout.preferredWidth: parent.width/2

                        from: 0
                        to: Math.PI*2
                    }
                }
            }
            GroupBox {
                Layout.preferredWidth: parent.width

                RowLayout {
                    anchors.left: parent.left
                    anchors.right: parent.right

                    Label {
                        Layout.preferredWidth: parent.width/4
                        text: "Count"
                    }
                    Label {
                        text: count.value
                        color: palette.highlight
                    }
                    Slider {
                        id: count
                        anchors.right: parent.right
                        Layout.preferredWidth: parent.width/2

                        from: 1
                        to: 5
                        stepSize: 1
                        snapMode: Slider.SnapAlways
                    }
                }
            }
            Item {
                Layout.preferredWidth: parent.width

                CheckBox {
                    text: "Lagging"
                }
            }
        }
        Magnum {
            Layout.fillHeight: true
            Layout.fillWidth: true

            hue: hue.value
            count: count.value

            SequentialAnimation on t {
                NumberAnimation { to: 10; duration: 10000; easing.type: Easing.InQuad }
                NumberAnimation { to: 0; duration: 10000; easing.type: Easing.OutQuad }
                loops: Animation.Infinite
                running: true
            }
        }
    }
}