summaryrefslogtreecommitdiffstats
path: root/QtDemo/qml/QtDemo/demos/radio/VolumeButton.qml
blob: abd8dd341d779c910e6805b81b626c9aaaa0fa75 (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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import QtQuick 2.0

Item {
    id: root
    width: size
    height: size

    property int steps: 10
    property int size: 0
    property real volume: .5
    property bool playing: false
    signal clicked();

    Item {
        id: bg
        anchors.fill: parent

        Rectangle {
            id: bgRect

            gradient: Gradient {
                GradientStop {position: .0; color: "lightgray"}
                GradientStop {position: 1.0; color: "white"}
            }

            border {width:1; color: "#888888"}
            radius: root.size/2
            anchors.centerIn: parent
            width: parent.width
            height: parent.height
        }

        Rectangle {
            gradient: Gradient {
                GradientStop {position: .0; color: playButtonMouseArea.pressed ? "#052e41": "#095477"}
                GradientStop {position: 1.0; color: playButtonMouseArea.pressed ? "#095477": "#052e41"}
            }

            border {width:1; color: "#888888"}
            radius: width/2
            anchors.centerIn: parent
            width: parent.width*.6
            height: parent.height*.6

            Image {
                anchors {fill: parent; margins: parent.height*.3}
                source: !root.playing ? "images/radio_btn_play.svg" : "images/radio_btn_pause.svg"
            }

            MouseArea {
                id: playButtonMouseArea
                anchors.fill: parent
                anchors.margins: parent.width*.2
                onClicked:{
                    root.clicked()
                }
            }
        }
    }

    Item {
        id: volumeIndicator
        anchors.centerIn: root
        width: root.size
        height: root.size
        z:2

        Rectangle{
            id: volumeCircle
            objectName: "volumeCircle"
            anchors {horizontalCenter: parent.horizontalCenter; top: parent.top}

            gradient: Gradient {
                GradientStop {position: .1; color: "#095477"}
                GradientStop {position: 1.0; color: "#0e82b8"}
            }

            width: root.size * .2
            height: width
            radius: width/2
            border {width:1; color: "#888888"}

            Image {
                anchors {fill: parent; margins: parent.height*.2}
                source: "images/radio_sound_icon.svg"
                rotation: -volumeRotation.angle
            }
        }

        transform: Rotation {
            id: volumeRotation
            origin.x: volumeIndicator.width/2
            origin.y: volumeIndicator.height/2
            angle: 270.0*root.volume+225
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: volumeIndicator
        property bool grabbed: false
        anchors.margins: -root.size*.2
        z: -1

        onPressed: {
            var object = mapToItem(volumeIndicator, mouse.x, mouse.y)
            var item = volumeIndicator.childAt(object.x,object.y)
            if (item && item.objectName === 'volumeCircle') {
                grabbed = true
                return;
            } else {
                grabbed = false
            }

            object = mapToItem(root, mouse.x, mouse.y)
            item = root.childAt(object.x,object.y)
            if (item && item.objectName === 'volumePoint') {
                root.volume = item.level
            }
        }

        onPositionChanged: {
            if (!grabbed) return;
            var ang = (225+Math.atan2((mouse.y-mouseArea.height/2.0), (mouse.x-mouseArea.width/2.0))*180.0/Math.PI)
            if (ang >360) ang-=360
            if (ang > 270) return;
            root.volume = (ang)/270.0
        }
    }

    function init(){
        for (var i=0; i<=root.steps; i++){
            var x=Math.cos(((i)*270/root.steps+135)*0.01745)*root.size*.40
            var y=Math.sin(((i)*270/root.steps+135)*0.01745)*root.size*.40
            var component = Qt.createComponent("VolumePoint.qml")
            if (component.status === Component.Ready) {
                var object = component.createObject(root);
                object.size = root.size*.05
                object.x = root.size/2+x-object.size/2
                object.y = root.size/2+y-object.size/2
                object.level = i/root.steps
            }
        }
    }
}