← Back to branch summary

~zsombi/ubuntu-ui-toolkit/03-styleditem-styleset

« back to all changes in this revision

Viewing changes to tests/resources/ubuntushape/UbuntuShapeOverlayTest.qml

  • Committer: Zsombor Egri
  • Date: 2015-03-10 18:03:58 UTC
  • mfrom: (1434.1.13 02-styleset)
  • Revision ID: zsombor.egri@canonical.com-20150310180358-aunnni7a9z9k9c7h
prereq sync

Show diffs side-by-side

added added

removed removed

Lines of Context:
tests/resources/ubuntushape/UbuntuShapeOverlayTest.qml
 
1
/*
 
2
 * Copyright 2015 Canonical Ltd.
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU Lesser General Public License as published by
 
6
 * the Free Software Foundation; version 3.
 
7
 *
 
8
 * This program is distributed in the hope that it will be useful,
 
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
11
 * GNU Lesser General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU Lesser General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 */
 
16
 
 
17
import QtQuick 2.0
 
18
import Ubuntu.Components 1.2
 
19
 
 
20
Item {
 
21
    id: root
 
22
    width: 1000
 
23
    height: 600
 
24
    focus: true
 
25
 
 
26
    // Enum to string tables.
 
27
    property variant backgroundModeTable: [
 
28
        "SolidColor", "VerticalGradient"
 
29
    ]
 
30
    property variant sourceHAlignmentTable: [
 
31
        "AlignLeft", "AlignHCenter", "AlignRight"
 
32
    ]
 
33
    property variant sourceVAlignmentTable: [
 
34
        "AlignTop", "AlignVCenter", "AlignBottom"
 
35
    ]
 
36
    property variant sourceFillModeTable: [
 
37
        "Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Pad"
 
38
    ]
 
39
    property variant wrapModeTable: [
 
40
        "Transparent", "Repeat"
 
41
    ]
 
42
    property variant imageFillModeTable: [
 
43
        "Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Tile", "TileVertically",
 
44
        "TileHorizontally", "Pad"
 
45
    ]
 
46
 
 
47
    // Zoom properties.
 
48
    property variant translation: Qt.point(0.0, 0.0)
 
49
    property real scaleBase: 1.1
 
50
    property real scaleExponent: 0.0
 
51
    property real minScaleExponent: 0.0
 
52
    property real maxScaleExponent:  48.317715856  // Logarithm of 100 to base 1.1 (scaleBase).
 
53
    property real scaleFactor: 1.0
 
54
    property real scale: 1.0
 
55
 
 
56
    // Overlay text properties. French keymapping... :)
 
57
    property string textOverlayString:
 
58
        "Zoom            (scroll):   x " + root.scaleFactor.toFixed(1) + "\n\n" +
 
59
        "Background colors  (a/z):   " + shape.backgroundColor + ", " + shape.secondaryBackgroundColor + "\n" +
 
60
        "Background mode      (e):   " + root.backgroundModeTable[shape.backgroundMode] + "\n\n" +
 
61
        "Overlay color        (r):   " + shape.overlayColor + "\n" +
 
62
        "Overlay geometry (t/y/u/i): " + shape.overlayRect.x.toFixed(2) + ", " + shape.overlayRect.y.toFixed(2) + ", " + shape.overlayRect.width.toFixed(2) + ", " + shape.overlayRect.height.toFixed(2) + "\n\n" +
 
63
        "Source               (o):   " + shape.source + "\n" +
 
64
        "Source opacity       (p):   " + shape.sourceOpacity.toFixed(2) + "\n" +
 
65
        "Source fill          (q):   " + root.sourceFillModeTable[shape.sourceFillMode] + "\n" +
 
66
        "Source hwrap         (s):   " + root.wrapModeTable[shape.sourceHorizontalWrapMode] + "\n" +
 
67
        "Source vwrap         (d):   " + root.wrapModeTable[shape.sourceVerticalWrapMode] + "\n" +
 
68
        "Source halign        (f):   " + root.sourceHAlignmentTable[shape.sourceHorizontalAlignment] + "\n" +
 
69
        "Source valign        (g):   " + root.sourceVAlignmentTable[shape.sourceVerticalAlignment] + "\n" +
 
70
        "Source translation (h/j):   " + shape.sourceTranslation.x.toFixed(2) + ", " + shape.sourceTranslation.y.toFixed(2) + "\n" +
 
71
        "Source scale       (k/l):   " + shape.sourceScale.x.toFixed(2) + ", " + shape.sourceScale.y.toFixed(2) + "\n\n" +
 
72
        "Image (deprecated)   (m):   " + shape.image + "\n" +
 
73
        "Image fill           (w):   " + root.imageFillModeTable[img1.fillMode] + "\n" +
 
74
        "Image halign         (x):   " + img1.horizontalAlignment + "\n" +
 
75
        "Image valign         (c):   " + img1.verticalAlignment + "\n\n" +
 
76
        "Radius               (v):   " + "\"" + shape.radius + "\"\n" +
 
77
        "Border               (b):   " + "\"" + shape.borderSource + "\"\n\n" +
 
78
        "Colors (deprecated) (n/,):  " + shape.color + ", " + shape.gradientColor
 
79
 
 
80
    // Main scene.
 
81
    Item {
 
82
        id: scene
 
83
        anchors.fill: parent
 
84
 
 
85
        Image {
 
86
            id: background
 
87
            anchors.fill: parent
 
88
            source: "background.jpg"
 
89
            fillMode: Image.Tile
 
90
        }
 
91
 
 
92
        // Put the UbuntuShape source image in the middle of a texture atlas. We use img1.
 
93
        Image { id: img1; visible: false; source: "img1.png"; }
 
94
        Image { id: img2; visible: false; source: "img2.png"; }
 
95
        Image { id: img3; visible: false; source: "img3.png"; }
 
96
        Image { id: img4; visible: false; source: "img4.png"; }
 
97
 
 
98
        UbuntuShapeOverlay {
 
99
            id: shape
 
100
            anchors.fill: parent
 
101
            anchors.leftMargin: 400
 
102
            anchors.rightMargin: 100
 
103
            anchors.topMargin: 100
 
104
            anchors.bottomMargin: 100
 
105
        }
 
106
    }
 
107
 
 
108
    // Zoom support.
 
109
    ShaderEffectSource {
 
110
        id: shaderEffectSource
 
111
        anchors.fill: scene
 
112
        sourceItem: scene
 
113
        hideSource: true
 
114
        visible: false
 
115
        smooth: false
 
116
    }
 
117
    ShaderEffect {
 
118
        anchors.fill: scene
 
119
        property variant tex: shaderEffectSource
 
120
        property variant translation: root.translation
 
121
        property real scaleFactor: root.scale
 
122
        vertexShader: "
 
123
            uniform mat4 qt_Matrix;
 
124
            uniform float scaleFactor;
 
125
            uniform vec2 translation;
 
126
            attribute vec4 qt_Vertex;
 
127
            attribute vec2 qt_MultiTexCoord0;
 
128
            varying vec2 texCoord;
 
129
            void main() {
 
130
                texCoord = vec2(scaleFactor) * qt_MultiTexCoord0 + translation;
 
131
                gl_Position = qt_Matrix * qt_Vertex;
 
132
            }"
 
133
        fragmentShader: "
 
134
            uniform sampler2D tex;
 
135
            uniform float qt_Opacity;
 
136
            varying vec2 texCoord;
 
137
            void main() {
 
138
                gl_FragColor = texture2D(tex, texCoord) * qt_Opacity;
 
139
            }"
 
140
    }
 
141
 
 
142
    // Text overlay.
 
143
    Text {
 
144
        id: textOverlay
 
145
        width:200
 
146
        anchors.top: parent.top
 
147
        anchors.topMargin: 10
 
148
        anchors.left: parent.left
 
149
        anchors.leftMargin: 10
 
150
        font.family: "Ubuntu Mono"
 
151
        font.pixelSize: 14
 
152
        font.weight: Font.Bold
 
153
        color: "black"
 
154
        text: textOverlayString
 
155
    }
 
156
 
 
157
    // Mouse handling.
 
158
    MouseArea {
 
159
        id: mouseArea
 
160
        anchors.fill: parent
 
161
        acceptedButtons: Qt.LeftButton
 
162
        hoverEnabled: true
 
163
 
 
164
        property real lastX: 0.0
 
165
        property real lastY: 0.0
 
166
 
 
167
        onPressed: {
 
168
            if (pressedButtons & Qt.LeftButton) {
 
169
                lastX = mouseX;
 
170
                lastY = mouseY;
 
171
            }
 
172
        }
 
173
        onPositionChanged: {
 
174
            if (pressedButtons & Qt.LeftButton) {
 
175
                var tx = root.translation.x;
 
176
                var ty = root.translation.y;
 
177
                var sx = root.scale / root.width;
 
178
                var sy = root.scale / root.height;
 
179
                var x = mouseX - lastX;
 
180
                var y = mouseY - lastY;
 
181
                root.translation = Qt.point(Math.max(0.0, Math.min(1.0 - root.scale, tx - sx * x)),
 
182
                                            Math.max(0.0, Math.min(1.0 - root.scale, ty - sy * y)));
 
183
                lastX = mouseX;
 
184
                lastY = mouseY;
 
185
            }
 
186
        }
 
187
        onWheel: {
 
188
            root.scaleExponent = Math.max(minScaleExponent, Math.min(maxScaleExponent,
 
189
                root.scaleExponent + (wheel.angleDelta.y < 0.0 ? -1.0 : 1.0)));
 
190
            root.scaleFactor = Math.pow(root.scaleBase, root.scaleExponent);
 
191
            var oldScale = root.scale;
 
192
            root.scale = 1.0 / root.scaleFactor;
 
193
            var s = oldScale - root.scale;
 
194
            var tx = root.translation.x;
 
195
            var ty = root.translation.y;
 
196
            var x = mouseX / root.width;
 
197
            var y = mouseY / root.height;
 
198
            root.translation = Qt.point(Math.max(0.0, Math.min(1.0 - root.scale, tx + s * x)),
 
199
                                        Math.max(0.0, Math.min(1.0 - root.scale, ty + s * y)));
 
200
        }
 
201
    }
 
202
 
 
203
    // Keyboard handling.
 
204
    Keys.onPressed: {
 
205
        var shift = Qt.ShiftModifier;
 
206
 
 
207
        // Background.
 
208
        if (event.key == Qt.Key_A) {
 
209
            shape.backgroundColor = Qt.rgba(
 
210
                Math.random(), Math.random(), Math.random(), Math.random());
 
211
        } else if (event.key == Qt.Key_Z) {
 
212
            shape.secondaryBackgroundColor = Qt.rgba(
 
213
                Math.random(), Math.random(), Math.random(), Math.random());
 
214
        } else if (event.key == Qt.Key_E) {
 
215
            shape.backgroundMode = (shape.backgroundMode + 1) % 3;
 
216
 
 
217
        // Overlay.
 
218
        } else if (event.key == Qt.Key_R) {
 
219
            shape.overlayColor = Qt.rgba(
 
220
                Math.random(), Math.random(), Math.random(), Math.random());
 
221
        } else if (event.key == Qt.Key_T) {
 
222
            var x = Math.max(0.0, Math.min(1.0,
 
223
            shape.overlayRect.x + ((event.modifiers & shift) ? 0.005 : -0.005)));
 
224
            shape.overlayRect = Qt.rect(
 
225
                x, shape.overlayRect.y, shape.overlayRect.width,
 
226
                shape.overlayRect.height);
 
227
        } else if (event.key == Qt.Key_Y) {
 
228
            var y = Math.max(0.0, Math.min(1.0,
 
229
            shape.overlayRect.y + ((event.modifiers & shift) ? 0.005 : -0.005)));
 
230
            shape.overlayRect = Qt.rect(
 
231
                shape.overlayRect.x, y, shape.overlayRect.width,
 
232
                shape.overlayRect.height);
 
233
        } else if (event.key == Qt.Key_U) {
 
234
            var width = Math.max(0.0, Math.min(1.0,
 
235
            shape.overlayRect.width + ((event.modifiers & shift) ? 0.005 : -0.005)));
 
236
            shape.overlayRect = Qt.rect(
 
237
                shape.overlayRect.x, shape.overlayRect.y, width,
 
238
                shape.overlayRect.height);
 
239
        } else if (event.key == Qt.Key_I) {
 
240
            var height = Math.max(0.0, Math.min(1.0,
 
241
            shape.overlayRect.height + ((event.modifiers & shift) ? 0.005 : -0.005)));
 
242
            shape.overlayRect = Qt.rect(
 
243
                shape.overlayRect.x, shape.overlayRect.y, shape.overlayRect.width,
 
244
                height);
 
245
 
 
246
        // Source.
 
247
        } else if (event.key == Qt.Key_O) {
 
248
            if (shape.source == null) {
 
249
                shape.source = img1;
 
250
            } else {
 
251
                shape.source = null;
 
252
            }
 
253
        } else if (event.key == Qt.Key_P) {
 
254
            shape.sourceOpacity = Math.max(0.0, Math.min(
 
255
                1.0, shape.sourceOpacity + ((event.modifiers & shift) ? 0.01 : -0.01)));
 
256
        } else if (event.key == Qt.Key_Q) {
 
257
            shape.sourceFillMode = (shape.sourceFillMode + 1) % 4;
 
258
        } else if (event.key == Qt.Key_S) {
 
259
            shape.sourceHorizontalWrapMode = (shape.sourceHorizontalWrapMode + 1) % 3;
 
260
        } else if (event.key == Qt.Key_D) {
 
261
            shape.sourceVerticalWrapMode = (shape.sourceVerticalWrapMode + 1) % 3;
 
262
        } else if (event.key == Qt.Key_F) {
 
263
            shape.sourceHorizontalAlignment = (shape.sourceHorizontalAlignment + 1) % 3;
 
264
        } else if (event.key == Qt.Key_G) {
 
265
            shape.sourceVerticalAlignment = (shape.sourceVerticalAlignment + 1) % 3;
 
266
        } else if (event.key == Qt.Key_H) {
 
267
            shape.sourceTranslation = Qt.vector2d(
 
268
                shape.sourceTranslation.x + ((event.modifiers & shift) ? 0.01 : -0.01),
 
269
                shape.sourceTranslation.y);
 
270
        } else if (event.key == Qt.Key_J) {
 
271
            shape.sourceTranslation = Qt.vector2d(
 
272
                shape.sourceTranslation.x,
 
273
                shape.sourceTranslation.y + ((event.modifiers & shift) ? 0.01 : -0.01));
 
274
        } else if (event.key == Qt.Key_K) {
 
275
            shape.sourceScale = Qt.vector2d(
 
276
                shape.sourceScale.x + ((event.modifiers & shift) ? 0.02 : -0.02),
 
277
                shape.sourceScale.y);
 
278
        } else if (event.key == Qt.Key_L) {
 
279
            shape.sourceScale = Qt.vector2d(
 
280
                shape.sourceScale.x,
 
281
                shape.sourceScale.y + ((event.modifiers & shift) ? 0.02 : -0.02));
 
282
 
 
283
        // Image.
 
284
        } else if (event.key == Qt.Key_M) {
 
285
            if (shape.image == null) {
 
286
                shape.image = img1;
 
287
            } else {
 
288
                shape.image = null;
 
289
            }
 
290
        } else if (event.key == Qt.Key_W) {
 
291
            img1.fillMode = (img1.fillMode + 1) % 7;
 
292
        } else if (event.key == Qt.Key_X) {
 
293
            if (img1.horizontalAlignment == Image.AlignLeft) {
 
294
                img1.horizontalAlignment = Image.AlignHCenter;
 
295
            } else if (img1.horizontalAlignment == Image.AlignHCenter) {
 
296
                img1.horizontalAlignment = Image.AlignRight;
 
297
            } else {
 
298
                img1.horizontalAlignment = Image.AlignLeft;
 
299
            }
 
300
        } else if (event.key == Qt.Key_C) {
 
301
            if (img1.verticalAlignment == Image.AlignTop) {
 
302
                img1.verticalAlignment = Image.AlignVCenter;
 
303
            } else if (img1.verticalAlignment == Image.AlignVCenter) {
 
304
                img1.verticalAlignment = Image.AlignBottom;
 
305
            } else {
 
306
                img1.verticalAlignment = Image.AlignTop;
 
307
            }
 
308
 
 
309
        // Styling.
 
310
        } else if (event.key == Qt.Key_V) {
 
311
            shape.radius = (shape.radius == "medium") ? "small" : "medium";
 
312
        } else if (event.key == Qt.Key_B) {
 
313
            if (shape.borderSource == "radius_idle.sci") {
 
314
                shape.borderSource = "radius_pressed.sci";
 
315
            } else if (shape.borderSource == "radius_pressed.sci") {
 
316
                shape.borderSource = "";
 
317
            } else {
 
318
                shape.borderSource = "radius_idle.sci";
 
319
            }
 
320
 
 
321
        // Colors.
 
322
        } else if (event.key == Qt.Key_N) {
 
323
            shape.color = Qt.rgba(
 
324
                Math.random(), Math.random(), Math.random(), Math.random());
 
325
        } else if (event.key == Qt.Key_Comma) {
 
326
            shape.gradientColor = Qt.rgba(
 
327
                Math.random(), Math.random(), Math.random(), Math.random());
 
328
        }
 
329
    }
 
330
}