1 |
import Qt 4.7
|
2 |
|
3 |
Item {
|
4 |
id: toggleswitch
|
5 |
width: background.width + label.width + gui.width/24; height: background.height
|
6 |
|
7 |
property string stOn: "false"
|
8 |
property string text: "Toggle switch"
|
9 |
signal changed
|
10 |
|
11 |
function toggle() {
|
12 |
if (toggleswitch.state == "on")
|
13 |
toggleswitch.state = "off";
|
14 |
else toggleswitch.state = "on";
|
15 |
}
|
16 |
|
17 |
function startup () {
|
18 |
if (toggleswitch.stOn == "1" )
|
19 |
toggleswitch.stOn = "true";
|
20 |
else if (toggleswitch.stOn == "0" )
|
21 |
toggleswitch.stOn = "false";
|
22 |
if (toggleswitch.stOn == "true")
|
23 |
toggleswitch.state = "on";
|
24 |
else
|
25 |
toggleswitch.state = "off";
|
26 |
}
|
27 |
|
28 |
Component.onCompleted: startup();
|
29 |
|
30 |
Text {
|
31 |
id: label; text: toggleswitch.text; color: "White"; font.pointSize: gui.height/20;
|
32 |
anchors.left: background.right; anchors.leftMargin: gui.width/24;
|
33 |
anchors.verticalCenter: background.verticalCenter
|
34 |
}
|
35 |
|
36 |
|
37 |
Image {
|
38 |
id: background; source: "background.svg"
|
39 |
MouseArea { anchors.fill: parent; onClicked: toggle() }
|
40 |
height: gui.height/6; width: height*2.4;
|
41 |
}
|
42 |
|
43 |
Image {
|
44 |
id: knob; source: "knob.svg"; x: 1; y: 2
|
45 |
height: gui.height/6; width: gui.height/6;
|
46 |
|
47 |
MouseArea {
|
48 |
anchors.fill: parent
|
49 |
drag.target: knob; drag.axis: "XAxis"; drag.minimumX: 1; drag.maximumX: background.width-knob.width
|
50 |
hoverEnabled: false; onReleased: toggle()
|
51 |
}
|
52 |
}
|
53 |
|
54 |
states: [
|
55 |
State {
|
56 |
name: "on"
|
57 |
PropertyChanges { target: knob; x: background.width-knob.width }
|
58 |
PropertyChanges { target: toggleswitch; stOn: "true" }
|
59 |
StateChangeScript { script: toggleswitch.changed(); }
|
60 |
},
|
61 |
State {
|
62 |
name: "off"
|
63 |
PropertyChanges { target: knob; x: 1 }
|
64 |
PropertyChanges { target: toggleswitch; stOn: "false" }
|
65 |
StateChangeScript { script: toggleswitch.changed(); }
|
66 |
}
|
67 |
]
|
68 |
|
69 |
transitions: Transition {
|
70 |
NumberAnimation { properties: "x"; easing.type: "InOutQuad"; duration: 200 }
|
71 |
}
|
72 |
}
|