summaryrefslogtreecommitdiffstats
path: root/basicsuite/qt5-cinematicdemo/content/Button.qml
blob: c6ab64339abfe3a5a3ea7de97b950b82dfa9f350 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import QtQuick 2.0
import QtQuick.Particles 2.0

Item {
    id: root

    property alias text: buttonTextItem.text
    property bool effectsOn: true
    signal clicked

    width: buttonBackgroundImage.width
    height: buttonBackgroundImage.height
    scale: mouseArea.pressed && mouseArea.containsMouse ? 0.9 : 1.0
    opacity: mouseArea.pressed && mouseArea.containsMouse ? 0.8 : 1.0

    Behavior on scale {
        NumberAnimation { duration: 150; easing.type: Easing.OutQuad }
    }
    Behavior on opacity {
        NumberAnimation { duration: 150; easing.type: Easing.OutQuad }
    }

    BorderImage {
        id: buttonBackgroundImage
        source: "images/button.png"
        border.left: 24
        border.right: 24
        border.top: 20
        border.bottom: 20
        width: 140
    }

    // Stars effect
    ParticleSystem {
        id: particleSystem
        anchors.fill: buttonBackgroundImage
        running: root.effectsOn
        ImageParticle {
            source: "images/star.png"
            rotationVariation: 180
            color:"#ffffff"
        }
        Emitter {
            width: parent.width
            height: 8
            emitRate: 16
            lifeSpan: 2000
            size: 32
            sizeVariation: 16
            endSize: 8
            velocity: PointDirection{ y: 20; x:-2; xVariation: 5; yVariation: 10 }
        }
        Turbulence {
            width: parent.width
            height: (parent.height / 2)
            strength: 8
        }
    }

    // Button background
    ShaderEffectSource {
        id: shaderSource
        anchors.fill: buttonBackgroundImage
        sourceItem: buttonBackgroundImage
        hideSource: true
        visible: false
    }

    // Particles
    ShaderEffectSource {
        id: shaderSource2
        anchors.fill: particleSystem
        sourceItem: particleSystem
        hideSource: true
        visible: false
    }

    // Mask particles inside the button
    ShaderEffect {
        id: shaderEffectItem
        anchors.fill: shaderSource

        property variant source: shaderSource
        property variant source2: shaderSource2

        fragmentShader: "
            uniform sampler2D source;
            uniform sampler2D source2;
            uniform lowp float qt_Opacity;
            varying highp vec2 qt_TexCoord0;
            void main() {
                lowp vec4 pix = texture2D(source, qt_TexCoord0);
                lowp vec4 pix2 = texture2D(source2, qt_TexCoord0);
                gl_FragColor = qt_Opacity * (pix + pix.a * pix2);
            }"
    }

    Text {
        id: buttonTextItem
        anchors.centerIn: parent
        color: "#000000"
        font.pixelSize: 28
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        anchors.margins: -16
        onClicked: {
            root.clicked();
        }
    }
}