summaryrefslogtreecommitdiffstats
path: root/examples/declarative/dynamic/dynamic.qml
blob: 0e6e197aacfaad08fa4e73547ab5775a2bafa3db (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
146
147
148
149
150
151
152
153
154
155
156
157
import Qt 4.7
import Qt.labs.particles 1.0
import "qml"

Item {
    id: window
    //This is a desktop-sized example
    width: 1024; height: 512
    property int activeSuns: 0
    
    //This is the message that pops up when there's an error
    Rectangle{
        id: dialog
        opacity: 0
        anchors.centerIn: parent
        width: dialogText.width + 6
        height: dialogText.height + 6
        border.color: 'black'
        color: 'lightsteelblue'
        z: 65535 //Arbitrary number chosen to be above all the items, including the scaled perspective ones.
        function show(str){
            dialogText.text = str;
            dialogAnim.start();
        }
        Text{
            id: dialogText
            x:3
            y:3
            font.pixelSize: 14
        }
        SequentialAnimation{
            id: dialogAnim
            NumberAnimation{target: dialog; property:"opacity"; to: 1; duration: 1000}
            PauseAnimation{duration: 5000}
            NumberAnimation{target: dialog; property:"opacity"; to: 0; duration: 1000}
        }
    }

    // sky
    Rectangle { id: sky
        anchors { left: parent.left; top: parent.top; right: toolbox.right; bottom: parent.verticalCenter }
        gradient: Gradient {
            GradientStop { id: stopA; position: 0.0; color: "#0E1533" }
            GradientStop { id: stopB; position: 1.0; color: "#437284" }
        }
    }

    // stars (when there's no sun)
    Particles {
        id: stars
        x: 0; y: 0; width: parent.width; height: parent.height / 2
        source: "images/star.png"; angleDeviation: 360; velocity: 0
        velocityDeviation: 0; count: parent.width / 10; fadeInDuration: 2800
        opacity: 1
    }

    // ground, which has a z such that the sun can set behind it
    Rectangle {
        id: ground
        z: 2
        anchors { left: parent.left; top: parent.verticalCenter; right: toolbox.right; bottom: parent.bottom }
        gradient: Gradient {
            GradientStop { position: 0.0; color: "ForestGreen" }
            GradientStop { position: 1.0; color: "DarkGreen" }
        }
    }

    //Day state, for when you place a sun
    states: State {
        name: "Day"; when: window.activeSuns > 0
        PropertyChanges { target: stopA; color: "DeepSkyBlue"}
        PropertyChanges { target: stopB; color: "SkyBlue"}
        PropertyChanges { target: stars; opacity: 0 }
    }

    transitions: Transition {
        PropertyAnimation { duration: 3000 }
        ColorAnimation { duration: 3000 }
    }

    SystemPalette { id: activePalette }

    // toolbox
    Rectangle {
        id: toolbox
        z: 3 //Above ground
        color: activePalette.window;
        width: 480
        anchors { right: parent.right; top:parent.top; bottom: parent.bottom }
        Rectangle { //Not a child of any positioner
            border.color: "black";
            width: toolRow.width + 4
            height: toolRow.height + 4
            x: toolboxPositioner.x + toolRow.x - 2
            y: toolboxPositioner.y + toolRow.y - 2
        }
        Column {
            id: toolboxPositioner
            anchors.centerIn: parent
            spacing: 8
            Text { text: "Drag an item into the scene." }
            Row {
                id: toolRow
                spacing: 8;
                PaletteItem {
                    anchors.verticalCenter: parent.verticalCenter
                    file: "Sun.qml";
                    image: "../images/sun.png"
                }
                PaletteItem {
                    file: "GenericItem.qml"
                    image: "../images/moon.png"
                }
                PaletteItem {
                    anchors.verticalCenter: parent.verticalCenter
                    file: "PerspectiveItem.qml"
                    image: "../images/tree_s.png"
                }
                PaletteItem {
                    anchors.verticalCenter: parent.verticalCenter
                    file: "PerspectiveItem.qml"
                    image: "../images/rabbit_brown.png"
                }
                PaletteItem {
                    anchors.verticalCenter: parent.verticalCenter
                    file: "PerspectiveItem.qml"
                    image: "../images/rabbit_bw.png"
                }
            }
            Text { text: "Active Suns: " + activeSuns }
            Rectangle { width: 440; height: 1; color: "black" }
            Text { text: "Arbitrary QML: " }
            TextEdit {
                id: qmlText
                width: 460
                height: 220
                readOnly: false
                focusOnPress: true
                font.pixelSize: 14

                text: "import Qt 4.7\nImage {\n  id: smile;\n  x: 500*Math.random();\n  y: 200*Math.random(); \n  source: 'images/face-smile.png';\n  NumberAnimation on opacity { \n    to: 0; duration: 1500;\n  }\n   Component.onCompleted: smile.destroy(1500);\n}"
            }
            Button {
                text: "Create"
                function makeCustom() {
                    try{ 
                        Qt.createQmlObject(qmlText.text, window, 'CustomObject');
                    }catch(err){
                        dialog.show('Error on line ' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message );
                    }
                }
                onClicked: makeCustom();
            }
        }
    }

}