Merge lp:~loic.molinari/ubuntu-ui-toolkit/ubuntu-ui-toolkit-shape-overlay into lp:ubuntu-ui-toolkit/staging

[Loïc Molinari]

[UbuntuShape] Added overlay support.

[UbuntuShape] Added overlay support.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1325
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1296/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/428/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/29/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/29/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/29/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/428/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1296/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1326
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1298/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/432/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/31/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/31/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/31/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/432/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1298/rebuild

review: Needs Fixing (continuous-integration)

[Zsombor Egri (zsombi)]

Some preliminary comments inline.

review: Needs Fixing

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1335
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1495/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/1579/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/222/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/225/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/222/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1577/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1495/rebuild

review: Needs Fixing (continuous-integration)

[lp:~loic.molinari/ubuntu-ui-toolkit/ubuntu-ui-toolkit-shape-overlay]

1336. By Loïc Molinari on 2015-03-04

Merged main branch.

1337. By Loïc Molinari on 2015-03-04

Merged main branch.

1338. By Loïc Molinari on 2015-03-04

Updated components.api.

1339. By Loïc Molinari on 2015-03-05

Made use of qBound() instead of qMin()/qMax().

Unmerged revisions

=== modified file 'modules/Ubuntu/Components/plugin/plugin.cpp'
--- modules/Ubuntu/Components/plugin/plugin.cpp	2015-02-27 14:02:18 +0000
+++ modules/Ubuntu/Components/plugin/plugin.cpp	2015-02-27 14:02:19 +0000
@@ -32,6 +32,7 @@
 #include "ucqquickimageextension.h"
 #include "quickutils.h"
 #include "ucubuntushape.h"
+#include "ucubuntushapeoverlay.h"
 #include "inversemouseareatype.h"
 #include "qquickclipboard.h"
 #include "qquickmimedata.h"
@@ -177,6 +178,7 @@
     qmlRegisterType<UCListItemActions>(uri, 1, 2, "ListItemActions");
     qmlRegisterUncreatableType<UCViewItemsAttached>(uri, 1, 2, "ViewItems", "Not instantiable");
     qmlRegisterType<UCUbuntuShape, 1>(uri, 1, 2, "UbuntuShape");
+    qmlRegisterType<UCUbuntuShapeOverlay>(uri, 1, 2, "UbuntuShapeOverlay");
 }
 
 void UbuntuComponentsPlugin::initializeEngine(QQmlEngine *engine, const char *uri)

=== modified file 'modules/Ubuntu/Components/plugin/plugin.pro'
--- modules/Ubuntu/Components/plugin/plugin.pro	2015-02-27 14:02:18 +0000
+++ modules/Ubuntu/Components/plugin/plugin.pro	2015-02-27 14:02:19 +0000
@@ -35,6 +35,7 @@
     quickutils.h \
     ucubuntushapetexture.h \
     ucubuntushape.h \
+    ucubuntushapeoverlay.h \
     inversemouseareatype.h \
     qquickclipboard.h \
     qquickmimedata.h \
@@ -89,6 +90,7 @@
     ucqquickimageextension.cpp \
     quickutils.cpp \
     ucubuntushape.cpp \
+    ucubuntushapeoverlay.cpp \
     inversemouseareatype.cpp \
     qquickclipboard.cpp \
     qquickmimedata.cpp \
@@ -132,7 +134,9 @@
 
 OTHER_FILES += \
     shaders/shape.vert \
-    shaders/shape.frag
+    shaders/shape.frag \
+    shaders/shapeoverlay.vert \
+    shaders/shapeoverlay.frag
 
 # deployment rules for the plugin
 installPath = $$[QT_INSTALL_QML]/$$replace(uri, \\., /)

=== modified file 'modules/Ubuntu/Components/plugin/plugin.qrc'
--- modules/Ubuntu/Components/plugin/plugin.qrc	2015-02-27 14:02:18 +0000
+++ modules/Ubuntu/Components/plugin/plugin.qrc	2015-02-27 14:02:19 +0000
@@ -2,5 +2,7 @@
     <qresource prefix="/uc">
         <file>shaders/shape.frag</file>
         <file>shaders/shape.vert</file>
+        <file>shaders/shapeoverlay.frag</file>
+        <file>shaders/shapeoverlay.vert</file>
     </qresource>
 </RCC>

=== added file 'modules/Ubuntu/Components/plugin/shaders/shapeoverlay.frag'
--- modules/Ubuntu/Components/plugin/shaders/shapeoverlay.frag	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/shaders/shapeoverlay.frag	2015-02-27 14:02:19 +0000
@@ -0,0 +1,65 @@
+// Copyright © 2015 Canonical Ltd.
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as published by
+// the Free Software Foundation; version 3.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+//
+// Author: Loïc Molinari <[e-mail]>
+
+// Static flow control (branching on a uniform value) is fast on most GPUs (including ultra-low
+// power ones) because it allows to use the same shader execution path for an entire draw call. We
+// rely on that technique here (also known as "uber-shader" solution) to avoid the complexity of
+// dealing with a multiple shaders solution.
+// FIXME(loicm) Validate GPU behavior with regards to static flow control.
+
+uniform sampler2D shapeTexture;
+uniform sampler2D sourceTexture;
+uniform lowp float sourceOpacity;
+uniform lowp float opacity;
+uniform bool textured;
+
+varying mediump vec2 shapeCoord;
+varying mediump vec4 sourceCoord;
+varying lowp vec4 backgroundColor;
+varying mediump vec2 overlayCoord;
+varying lowp vec4 overlayColor;
+
+void main(void)
+{
+    // Early texture fetch to cover latency as best as possible.
+    lowp vec4 shapeData = texture2D(shapeTexture, shapeCoord);
+
+    lowp vec4 color = backgroundColor;
+
+    // FIXME(loicm) Would be better to use a bitfield but bitwise ops have only been integrated in
+    //     GLSL 1.3 (OpenGL 3) and GLSL ES 3 (OpenGL ES 3).
+    if (textured) {
+        // Blend the source over the current color (static flow control prevents the texture fetch).
+        lowp vec2 axisMask = -sign((sourceCoord.zw * sourceCoord.zw) - vec2(1.0));
+        lowp float mask = clamp(axisMask.x + axisMask.y, 0.0, 1.0);
+        lowp vec4 source = texture2D(sourceTexture, sourceCoord.st) * vec4(sourceOpacity * mask);
+        color = vec4(1.0 - source.a) * color + source;
+    }
+
+    // Blend the overlay over the current color.
+    lowp vec2 overlayAxisMask = -sign((overlayCoord * overlayCoord) - vec2(1.0));
+    lowp float overlayMask = clamp(overlayAxisMask.x + overlayAxisMask.y, 0.0, 1.0);
+    lowp vec4 overlay = overlayColor * vec4(overlayMask);
+    color = vec4(1.0 - overlay.a) * color + overlay;
+
+    // Shape the current color with the mask.
+    color *= vec4(shapeData.b);
+
+    // Blend the border over the current color.
+    color = vec4(1.0 - shapeData.r) * color + shapeData.gggr;
+
+    gl_FragColor = color * vec4(opacity);
+}

=== added file 'modules/Ubuntu/Components/plugin/shaders/shapeoverlay.vert'
--- modules/Ubuntu/Components/plugin/shaders/shapeoverlay.vert	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/shaders/shapeoverlay.vert	2015-02-27 14:02:19 +0000
@@ -0,0 +1,49 @@
+// Copyright © 2015 Canonical Ltd.
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as published by
+// the Free Software Foundation; version 3.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+//
+// Author: Loïc Molinari <[e-mail]>
+
+uniform mediump mat4 matrix;
+uniform bool textured;
+
+attribute mediump vec4 positionAttrib;
+attribute mediump vec2 shapeCoordAttrib;
+attribute mediump vec4 sourceCoordAttrib;
+attribute lowp vec4 backgroundColorAttrib;
+attribute mediump vec2 overlayCoordAttrib;
+attribute lowp vec4 overlayColorAttrib;
+
+// FIXME(loicm) Optimize by reducing/packing varyings.
+varying mediump vec2 shapeCoord;
+varying mediump vec4 sourceCoord;
+varying lowp vec4 backgroundColor;
+varying mediump vec2 overlayCoord;
+varying lowp vec4 overlayColor;
+
+void main()
+{
+    shapeCoord = shapeCoordAttrib;
+
+    // FIXME(loicm) Would be better to use a bitfield but bitwise ops have only been integrated in
+    //     GLSL 1.3 (OpenGL 3) and GLSL ES 3 (OpenGL ES 3).
+    if (textured) {
+        sourceCoord = sourceCoordAttrib;
+    }
+
+    backgroundColor = backgroundColorAttrib;
+    overlayCoord = overlayCoordAttrib;
+    overlayColor = overlayColorAttrib;
+
+    gl_Position = matrix * positionAttrib;
+}

=== added file 'modules/Ubuntu/Components/plugin/ucubuntushapeoverlay.cpp'
--- modules/Ubuntu/Components/plugin/ucubuntushapeoverlay.cpp	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/ucubuntushapeoverlay.cpp	2015-02-27 14:02:19 +0000
@@ -0,0 +1,445 @@
+/*
+ * Copyright 2015 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Loïc Molinari <[e-mail]>
+ */
+
+// FIXME(loicm) Overlay data is passed as geometry and interpolated as varying so that it can be
+//     batched. It would be very useful to implement it with uniforms and compare the perf by
+//     plotting the rendering speed of a scene with an increasing number of overlaid shapes.
+
+#include "ucubuntushapeoverlay.h"
+
+// -- Scene graph shader ---
+
+ShapeOverlayShader::ShapeOverlayShader()
+{
+    setShaderSourceFile(QOpenGLShader::Vertex, QStringLiteral(":/uc/shaders/shapeoverlay.vert"));
+    setShaderSourceFile(QOpenGLShader::Fragment, QStringLiteral(":/uc/shaders/shapeoverlay.frag"));
+}
+
+char const* const* ShapeOverlayShader::attributeNames() const
+{
+    static char const* const attributes[] = {
+        "positionAttrib", "shapeCoordAttrib", "sourceCoordAttrib", "backgroundColorAttrib",
+        "overlayCoordAttrib", "overlayColorAttrib", 0
+    };
+    return attributes;
+}
+
+// --- Scene graph material ---
+
+QSGMaterialType* ShapeOverlayMaterial::type() const
+{
+    static QSGMaterialType type;
+    return &type;
+}
+
+QSGMaterialShader* ShapeOverlayMaterial::createShader() const
+{
+    return new ShapeOverlayShader;
+}
+
+// --- Scene graph node ---
+
+ShapeOverlayNode::ShapeOverlayNode()
+    : QSGGeometryNode()
+    , m_material()
+    , m_geometry(attributeSet(), ShapeNode::vertexCount, ShapeNode::indexCount,
+                 ShapeNode::indexType)
+{
+    memcpy(m_geometry.indexData(), ShapeNode::indices(),
+           ShapeNode::indexCount * ShapeNode::indexTypeSize);
+    m_geometry.setDrawingMode(ShapeNode::drawingMode);
+    m_geometry.setIndexDataPattern(ShapeNode::indexDataPattern);
+    m_geometry.setVertexDataPattern(ShapeNode::vertexDataPattern);
+    setMaterial(&m_material);
+    setGeometry(&m_geometry);
+}
+
+// static
+const QSGGeometry::AttributeSet& ShapeOverlayNode::attributeSet()
+{
+    static const QSGGeometry::Attribute attributes[] = {
+        QSGGeometry::Attribute::create(0, 2, GL_FLOAT, true),
+        QSGGeometry::Attribute::create(1, 2, GL_FLOAT),
+        QSGGeometry::Attribute::create(2, 4, GL_FLOAT),
+        QSGGeometry::Attribute::create(3, 4, GL_UNSIGNED_BYTE),
+        QSGGeometry::Attribute::create(4, 2, GL_FLOAT),
+        QSGGeometry::Attribute::create(5, 4, GL_UNSIGNED_BYTE)
+    };
+    static const QSGGeometry::AttributeSet attributeSet = {
+        6, sizeof(Vertex), attributes
+    };
+    return attributeSet;
+}
+
+// --- QtQuick item ---
+
+/*! \qmltype UbuntuShapeOverlay
+    \instantiates UCUbuntuShapeOverlay
+    \inqmlmodule Ubuntu.Components 1.2
+    \ingroup ubuntu
+    \brief Extended UbuntuShape adding a colored overlay layer.
+
+    The UbuntuShapeOverlay is a rounded rectangle (based on a \l
+    {https://en.wikipedia.org/wiki/Squircle}{squircle}) containing a set of layers composed, from
+    top to bottom, of a colored rectangle overlay, an optional source image and a background color
+    (solid or linear gradient). Different properties allow to change the look of the shape.
+
+    Example:
+
+    \qml
+        import Ubuntu.Components 1.2
+
+        UbuntuShapeOverlay {
+            backgroundColor: "white"
+            overlayColor: "black"
+            overlayGeometry: Qt.rect(0.25, 0.25, 0.5, 0.5)
+        }
+    \endqml
+*/
+UCUbuntuShapeOverlay::UCUbuntuShapeOverlay(QQuickItem* parent)
+    : UCUbuntuShape(parent)
+    , m_overlayX(0)
+    , m_overlayY(0)
+    , m_overlayWidth(0)
+    , m_overlayHeight(0)
+    , m_overlayColor(qRgba(0, 0, 0, 0))
+{
+}
+
+/*! \qmlproperty rect UbuntuShapeOverlay::overlayGeometry
+    \since Ubuntu.Components 1.2
+
+    This property sets the overlay rectangle. The default value is the empty rectangle.
+
+    It is defined by a position and a size in normalized item coordinates (in the range between 0
+    and 1) with the origin at the top-left corner. An overlay covering the bottom part and starting
+    at the vertical center can be done like that:
+
+    \qml
+        UbuntuShapeOverlay {
+            width: 200; height: 200
+            overlayColor: Qt.rgba(0.0, 0.0, 0.5, 0.5)
+            overlayGeometry: Qt.rect(0.0, 0.5, 1.0, 0.5)
+        }
+    \endqml
+
+    Converting a position and a size in pixels to normalized item coordinates can be done with a
+    division by the size. Here is an equivalent of the previous code sample:
+
+    \qml
+        UbuntuShapeOverlay {
+            width: 200; height: 200
+            overlayColor: Qt.rgba(0.0, 0.0, 0.5, 0.5)
+            overlayGeometry: Qt.rect(100.0/width, 100.0/height, 200.0/width, 100.0/height)
+        }
+    \endqml
+
+    A geometry exceeding the item area is cropped.
+*/
+void UCUbuntuShapeOverlay::setOverlayGeometry(const QRectF& overlayGeometry)
+{
+    // Crop rectangle and pack to 16-bit unsigned integers.
+    const float x = qMax(0.0f, qMin(1.0f, static_cast<float>(overlayGeometry.x())));
+    float width = qMax(0.0f, static_cast<float>(overlayGeometry.width()));
+    if ((x + width) > 1.0f) {
+        width += 1.0f - (x + width);
+    }
+    const float y = qMax(0.0f, qMin(1.0f, static_cast<float>(overlayGeometry.y())));
+    float height = qMax(0.0f, static_cast<float>(overlayGeometry.height()));
+    if ((y + height) > 1.0f) {
+        height += 1.0f - (y + height);
+    }
+    const float f32toU16 = static_cast<float>(0xffff);
+    const quint16 overlayX = static_cast<quint16>(x * f32toU16);
+    const quint16 overlayY = static_cast<quint16>(y * f32toU16);
+    const quint16 overlayWidth = static_cast<quint16>(width * f32toU16);
+    const quint16 overlayHeight = static_cast<quint16>(height * f32toU16);
+
+    if ((m_overlayX != overlayX) || (m_overlayY != overlayY) ||
+        (m_overlayWidth != overlayWidth) || (m_overlayHeight != overlayHeight)) {
+        m_overlayX = overlayX;
+        m_overlayY = overlayY;
+        m_overlayWidth = overlayWidth;
+        m_overlayHeight = overlayHeight;
+        update();
+        Q_EMIT overlayGeometryChanged();
+    }
+}
+
+/*! \qmlproperty color UbuntuShapeOverlay::overlayColor
+    \since Ubuntu.Components 1.2
+
+    This property sets the color of the overlay rectangle defined by \l overlayGeometry. The default
+    value is transparent black.
+*/
+void UCUbuntuShapeOverlay::setOverlayColor(const QColor& overlayColor)
+{
+    const QRgb overlayColorRgb = qRgba(
+        overlayColor.red(), overlayColor.green(), overlayColor.blue(), overlayColor.alpha());
+    if (m_overlayColor != overlayColorRgb) {
+        m_overlayColor = overlayColorRgb;
+        update();
+        Q_EMIT overlayColorChanged();
+    }
+}
+
+QSGNode* UCUbuntuShapeOverlay::createSceneGraphNode() const
+{
+    return new ShapeOverlayNode;
+}
+
+// Pack to a premultiplied 32-bit ABGR integer.
+static quint32 packColor(QRgb color)
+{
+    const quint32 a = qAlpha(color);
+    const quint32 b = ((qBlue(color) * a) + 0xff) >> 8;
+    const quint32 g = ((qGreen(color) * a) + 0xff) >> 8;
+    const quint32 r = ((qRed(color) * a) + 0xff) >> 8;
+    return (a << 24) | ((b & 0xff) << 16) | ((g & 0xff) << 8) | (r & 0xff);
+}
+
+void UCUbuntuShapeOverlay::updateGeometry(
+    QSGNode* node, float width, float height, float radius, const float shapeCoordinate[][2],
+    const QVector4D& sourceCoordTransform, const QVector4D& sourceMaskTransform,
+    const quint32 backgroundColor[4])
+{
+    ShapeOverlayNode* shapeOverlayNode = static_cast<ShapeOverlayNode*>(node);
+    ShapeOverlayNode::Vertex* v = reinterpret_cast<ShapeOverlayNode::Vertex*>(
+        shapeOverlayNode->geometry()->vertexData());
+
+    // Convert radius to normalized coordinates.
+    const float rw = radius / width;
+    const float rh = radius / height;
+
+    // Get the affine transformation for the overlay coordinates, pixels lying inside the mask
+    // (values in the range [-1, 1]) will be considered overlaid in the fragment shader.
+    const float u16toF32 = 1.0f / static_cast<float>(0xffff);
+    const float invOverlayWidth = 1.0f / (m_overlayWidth * u16toF32);
+    const float invOverlayHeight = 1.0f / (m_overlayHeight * u16toF32);
+    const float overlaySx = invOverlayWidth * 2.0f;
+    const float overlaySy = invOverlayHeight * 2.0f;
+    const float overlayTx = -((m_overlayX * u16toF32) * invOverlayWidth) * 2.0f - 1.0f;
+    const float overlayTy = -((m_overlayY * u16toF32) * invOverlayHeight) * 2.0f - 1.0f;
+
+    // The overlay affine transformation doesn't exist when width or height is null, whenever that
+    // is the case we simply set the color to transparent. GPUs handle NaN/Inf values flowlessly.
+    const quint32 overlayColor = qIsFinite(invOverlayHeight + invOverlayWidth) ?
+        packColor(m_overlayColor) : 0x00000000;
+
+    // Set top row of 4 vertices.
+    v[0].position[0] = 0.0f;
+    v[0].position[1] = 0.0f;
+    v[0].shapeCoordinate[0] = shapeCoordinate[0][0];
+    v[0].shapeCoordinate[1] = shapeCoordinate[0][1];
+    v[0].sourceCoordinate[0] = sourceCoordTransform.z();
+    v[0].sourceCoordinate[1] = sourceCoordTransform.w();
+    v[0].sourceCoordinate[2] = sourceMaskTransform.z();
+    v[0].sourceCoordinate[3] = sourceMaskTransform.w();
+    v[0].backgroundColor = backgroundColor[0];
+    v[0].overlayCoordinate[0] = overlayTx;
+    v[0].overlayCoordinate[1] = overlayTy;
+    v[0].overlayColor = overlayColor;
+    v[1].position[0] = radius;
+    v[1].position[1] = 0.0f;
+    v[1].shapeCoordinate[0] = shapeCoordinate[1][0];
+    v[1].shapeCoordinate[1] = shapeCoordinate[1][1];
+    v[1].sourceCoordinate[0] = rw * sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[1].sourceCoordinate[1] = sourceCoordTransform.w();
+    v[1].sourceCoordinate[2] = rw * sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[1].sourceCoordinate[3] = sourceMaskTransform.w();
+    v[1].backgroundColor = backgroundColor[0];
+    v[1].overlayCoordinate[0] = rw * overlaySx + overlayTx;
+    v[1].overlayCoordinate[1] = overlayTy;
+    v[1].overlayColor = overlayColor;
+    v[2].position[0] = width - radius;
+    v[2].position[1] = 0.0f;
+    v[2].shapeCoordinate[0] = shapeCoordinate[2][0];
+    v[2].shapeCoordinate[1] = shapeCoordinate[2][1];
+    v[2].sourceCoordinate[0] = (1.0f - rw) * sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[2].sourceCoordinate[1] = sourceCoordTransform.w();
+    v[2].sourceCoordinate[2] = (1.0f - rw) * sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[2].sourceCoordinate[3] = sourceMaskTransform.w();
+    v[2].backgroundColor = backgroundColor[0];
+    v[2].overlayCoordinate[0] = (1.0f - rw) * overlaySx + overlayTx;
+    v[2].overlayCoordinate[1] = overlayTy;
+    v[2].overlayColor = overlayColor;
+    v[3].position[0] = width;
+    v[3].position[1] = 0.0f;
+    v[3].shapeCoordinate[0] = shapeCoordinate[3][0];
+    v[3].shapeCoordinate[1] = shapeCoordinate[3][1];
+    v[3].sourceCoordinate[0] = sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[3].sourceCoordinate[1] = sourceCoordTransform.w();
+    v[3].sourceCoordinate[2] = sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[3].sourceCoordinate[3] = sourceMaskTransform.w();
+    v[3].backgroundColor = backgroundColor[0];
+    v[3].overlayCoordinate[0] = overlaySx + overlayTx;
+    v[3].overlayCoordinate[1] = overlayTy;
+    v[3].overlayColor = overlayColor;
+
+    // Set middle-top row of 4 vertices.
+    v[4].position[0] = 0.0f;
+    v[4].position[1] = radius;
+    v[4].shapeCoordinate[0] = shapeCoordinate[4][0];
+    v[4].shapeCoordinate[1] = shapeCoordinate[4][1];
+    v[4].sourceCoordinate[0] = sourceCoordTransform.z();
+    v[4].sourceCoordinate[1] = rh * sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[4].sourceCoordinate[2] = sourceMaskTransform.z();
+    v[4].sourceCoordinate[3] = rh * sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[4].backgroundColor = backgroundColor[1];
+    v[4].overlayCoordinate[0] = overlayTx;
+    v[4].overlayCoordinate[1] = rh * overlaySy + overlayTy;
+    v[4].overlayColor = overlayColor;
+    v[5].position[0] = radius;
+    v[5].position[1] = radius;
+    v[5].shapeCoordinate[0] = shapeCoordinate[5][0];
+    v[5].shapeCoordinate[1] = shapeCoordinate[5][1];
+    v[5].sourceCoordinate[0] = rw * sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[5].sourceCoordinate[1] = rh * sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[5].sourceCoordinate[2] = rw * sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[5].sourceCoordinate[3] = rh * sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[5].backgroundColor = backgroundColor[1];
+    v[5].overlayCoordinate[0] = rw * overlaySx + overlayTx;
+    v[5].overlayCoordinate[1] = rh * overlaySy + overlayTy;
+    v[5].overlayColor = overlayColor;
+    v[6].position[0] = width - radius;
+    v[6].position[1] = radius;
+    v[6].shapeCoordinate[0] = shapeCoordinate[6][0];
+    v[6].shapeCoordinate[1] = shapeCoordinate[6][1];
+    v[6].sourceCoordinate[0] = (1.0f - rw) * sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[6].sourceCoordinate[1] = rh * sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[6].sourceCoordinate[2] = (1.0f - rw) * sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[6].sourceCoordinate[3] = rh * sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[6].backgroundColor = backgroundColor[1];
+    v[6].overlayCoordinate[0] = (1.0f - rw) * overlaySx + overlayTx;
+    v[6].overlayCoordinate[1] = rh * overlaySy + overlayTy;
+    v[6].overlayColor = overlayColor;
+    v[7].position[0] = width;
+    v[7].position[1] = radius;
+    v[7].shapeCoordinate[0] = shapeCoordinate[7][0];
+    v[7].shapeCoordinate[1] = shapeCoordinate[7][1];
+    v[7].sourceCoordinate[0] = sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[7].sourceCoordinate[1] = rh * sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[7].sourceCoordinate[2] = sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[7].sourceCoordinate[3] = rh * sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[7].backgroundColor = backgroundColor[1];
+    v[7].overlayCoordinate[0] = overlaySx + overlayTx;
+    v[7].overlayCoordinate[1] = rh * overlaySy + overlayTy;
+    v[7].overlayColor = overlayColor;
+
+    // Set middle-bottom row of 4 vertices.
+    v[8].position[0] = 0.0f;
+    v[8].position[1] = height - radius;
+    v[8].shapeCoordinate[0] = shapeCoordinate[8][0];
+    v[8].shapeCoordinate[1] = shapeCoordinate[8][1];
+    v[8].sourceCoordinate[0] = sourceCoordTransform.z();
+    v[8].sourceCoordinate[1] = (1.0f - rh) * sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[8].sourceCoordinate[2] = sourceMaskTransform.z();
+    v[8].sourceCoordinate[3] = (1.0f - rh) * sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[8].backgroundColor = backgroundColor[2];
+    v[8].overlayCoordinate[0] = overlayTx;
+    v[8].overlayCoordinate[1] = (1.0f - rh) * overlaySy + overlayTy;
+    v[8].overlayColor = overlayColor;
+    v[9].position[0] = radius;
+    v[9].position[1] = height - radius;
+    v[9].shapeCoordinate[0] = shapeCoordinate[9][0];
+    v[9].shapeCoordinate[1] = shapeCoordinate[9][1];
+    v[9].sourceCoordinate[0] = rw * sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[9].sourceCoordinate[1] = (1.0f - rh) * sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[9].sourceCoordinate[2] = rw * sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[9].sourceCoordinate[3] = (1.0f - rh) * sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[9].backgroundColor = backgroundColor[2];
+    v[9].overlayCoordinate[0] = rw * overlaySx + overlayTx;
+    v[9].overlayCoordinate[1] = (1.0f - rh) * overlaySy + overlayTy;
+    v[9].overlayColor = overlayColor;
+    v[10].position[0] = width - radius;
+    v[10].position[1] = height - radius;
+    v[10].shapeCoordinate[0] = shapeCoordinate[10][0];
+    v[10].shapeCoordinate[1] = shapeCoordinate[10][1];
+    v[10].sourceCoordinate[0] = (1.0f - rw) * sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[10].sourceCoordinate[1] = (1.0f - rh) * sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[10].sourceCoordinate[2] = (1.0f - rw) * sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[10].sourceCoordinate[3] = (1.0f - rh) * sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[10].backgroundColor = backgroundColor[2];
+    v[10].overlayCoordinate[0] = (1.0f - rw) * overlaySx + overlayTx;
+    v[10].overlayCoordinate[1] = (1.0f - rh) * overlaySy + overlayTy;
+    v[10].overlayColor = overlayColor;
+    v[11].position[0] = width;
+    v[11].position[1] = height - radius;
+    v[11].shapeCoordinate[0] = shapeCoordinate[11][0];
+    v[11].shapeCoordinate[1] = shapeCoordinate[11][1];
+    v[11].sourceCoordinate[0] = sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[11].sourceCoordinate[1] = (1.0f - rh) * sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[11].sourceCoordinate[2] = sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[11].sourceCoordinate[3] = (1.0f - rh) * sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[11].backgroundColor = backgroundColor[2];
+    v[11].overlayCoordinate[0] = overlaySx + overlayTx;
+    v[11].overlayCoordinate[1] = (1.0f - rh) * overlaySy + overlayTy;
+    v[11].overlayColor = overlayColor;
+
+    // Set bottom row of 4 vertices.
+    v[12].position[0] = 0.0f;
+    v[12].position[1] = height;
+    v[12].shapeCoordinate[0] = shapeCoordinate[12][0];
+    v[12].shapeCoordinate[1] = shapeCoordinate[12][1];
+    v[12].sourceCoordinate[0] = sourceCoordTransform.z();
+    v[12].sourceCoordinate[1] = sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[12].sourceCoordinate[2] = sourceMaskTransform.z();
+    v[12].sourceCoordinate[3] = sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[12].backgroundColor = backgroundColor[3];
+    v[12].overlayCoordinate[0] = overlayTx;
+    v[12].overlayCoordinate[1] = overlaySy + overlayTy;
+    v[12].overlayColor = overlayColor;
+    v[13].position[0] = radius;
+    v[13].position[1] = height;
+    v[13].shapeCoordinate[0] = shapeCoordinate[13][0];
+    v[13].shapeCoordinate[1] = shapeCoordinate[13][1];
+    v[13].sourceCoordinate[0] = rw * sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[13].sourceCoordinate[1] = sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[13].sourceCoordinate[2] = rw * sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[13].sourceCoordinate[3] = sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[13].backgroundColor = backgroundColor[3];
+    v[13].overlayCoordinate[0] = rw * overlaySx + overlayTx;
+    v[13].overlayCoordinate[1] = overlaySy + overlayTy;
+    v[13].overlayColor = overlayColor;
+    v[14].position[0] = width - radius;
+    v[14].position[1] = height;
+    v[14].shapeCoordinate[0] = shapeCoordinate[14][0];
+    v[14].shapeCoordinate[1] = shapeCoordinate[14][1];
+    v[14].sourceCoordinate[0] = (1.0f - rw) * sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[14].sourceCoordinate[1] = sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[14].sourceCoordinate[2] = (1.0f - rw) * sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[14].sourceCoordinate[3] = sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[14].backgroundColor = backgroundColor[3];
+    v[14].overlayCoordinate[0] = (1.0f - rw) * overlaySx + overlayTx;
+    v[14].overlayCoordinate[1] = overlaySy + overlayTy;
+    v[14].overlayColor = overlayColor;
+    v[15].position[0] = width;
+    v[15].position[1] = height;
+    v[15].shapeCoordinate[0] = shapeCoordinate[15][0];
+    v[15].shapeCoordinate[1] = shapeCoordinate[15][1];
+    v[15].sourceCoordinate[0] = sourceCoordTransform.x() + sourceCoordTransform.z();
+    v[15].sourceCoordinate[1] = sourceCoordTransform.y() + sourceCoordTransform.w();
+    v[15].sourceCoordinate[2] = sourceMaskTransform.x() + sourceMaskTransform.z();
+    v[15].sourceCoordinate[3] = sourceMaskTransform.y() + sourceMaskTransform.w();
+    v[15].backgroundColor = backgroundColor[3];
+    v[15].overlayCoordinate[0] = overlaySx + overlayTx;
+    v[15].overlayCoordinate[1] = overlaySy + overlayTy;
+    v[15].overlayColor = overlayColor;
+
+    node->markDirty(QSGNode::DirtyGeometry);
+}

=== added file 'modules/Ubuntu/Components/plugin/ucubuntushapeoverlay.h'
--- modules/Ubuntu/Components/plugin/ucubuntushapeoverlay.h	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/ucubuntushapeoverlay.h	2015-02-27 14:02:19 +0000
@@ -0,0 +1,112 @@
+/*
+ * Copyright 2015 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Loïc Molinari <[e-mail]>
+ */
+
+#ifndef UCUBUNTUSHAPEOVERLAY_H
+#define UCUBUNTUSHAPEOVERLAY_H
+
+#include "ucubuntushape.h"
+
+// --- Scene graph shader ---
+
+class ShapeOverlayShader : public ShapeShader
+{
+public:
+    ShapeOverlayShader();
+    virtual char const* const* attributeNames() const;
+};
+
+// --- Scene graph material ---
+
+class ShapeOverlayMaterial : public ShapeMaterial
+{
+public:
+    virtual QSGMaterialType* type() const;
+    virtual QSGMaterialShader* createShader() const;
+};
+
+// --- Scene graph node ---
+
+class ShapeOverlayNode : public QSGGeometryNode
+{
+public:
+    struct Vertex {
+        float position[2];
+        float shapeCoordinate[2];
+        float sourceCoordinate[4];
+        quint32 backgroundColor;
+        float overlayCoordinate[2];
+        quint32 overlayColor;
+    };
+
+    static const QSGGeometry::AttributeSet& attributeSet();
+
+    ShapeOverlayNode();
+    QSGGeometry* geometry() { return &m_geometry; }
+
+private:
+    ShapeOverlayMaterial m_material;
+    QSGGeometry m_geometry;
+};
+
+// --- QtQuick item ---
+
+class UCUbuntuShapeOverlay : public UCUbuntuShape
+{
+    Q_OBJECT
+
+    // Overlay properties.
+    Q_PROPERTY(QRectF overlayGeometry READ overlayGeometry WRITE setOverlayGeometry
+               NOTIFY overlayGeometryChanged)
+    Q_PROPERTY(QColor overlayColor READ overlayColor WRITE setOverlayColor
+               NOTIFY overlayColorChanged)
+
+public:
+    UCUbuntuShapeOverlay(QQuickItem* parent=0);
+
+    QRectF overlayGeometry() const {
+        const float u16ToF32 = 1.0f / static_cast<float>(0xffff);
+        return QRectF(m_overlayX * u16ToF32, m_overlayY * u16ToF32, m_overlayWidth * u16ToF32,
+                      m_overlayHeight * u16ToF32); }
+    void setOverlayGeometry(const QRectF& overlayGeometry);
+    QColor overlayColor() const { return m_overlayColor; }
+    void setOverlayColor(const QColor& overlayColor);
+
+Q_SIGNALS:
+    void overlayGeometryChanged();
+    void overlayColorChanged();
+
+protected:
+    virtual QSGNode* createSceneGraphNode() const;
+    virtual void updateGeometry(
+        QSGNode* node, float width, float height, float radius, const float shapeCoordinate[][2],
+        const QVector4D& sourceCoordTransform, const QVector4D& sourceMaskTransform,
+        const quint32 backgroundColor[4]);
+
+private:
+    quint16 m_overlayX;
+    quint16 m_overlayY;
+    quint16 m_overlayWidth;
+    quint16 m_overlayHeight;
+    QRgb m_overlayColor;
+
+    Q_DISABLE_COPY(UCUbuntuShapeOverlay)
+};
+
+QML_DECLARE_TYPE(UCUbuntuShapeOverlay)
+
+#endif  // UCUBUNTUSHAPEOVERLAY_H

=== added file 'tests/resources/ubuntushape/UbuntuShapeOverlayTest.qml'
--- tests/resources/ubuntushape/UbuntuShapeOverlayTest.qml	1970-01-01 00:00:00 +0000
+++ tests/resources/ubuntushape/UbuntuShapeOverlayTest.qml	2015-02-27 14:02:19 +0000
@@ -0,0 +1,330 @@
+/*
+ * Copyright 2015 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.2
+
+Item {
+    id: root
+    width: 1000
+    height: 600
+    focus: true
+
+    // Enum to string tables.
+    property variant backgroundModeTable: [
+        "SolidColor", "VerticalGradient"
+    ]
+    property variant sourceHAlignmentTable: [
+        "AlignLeft", "AlignHCenter", "AlignRight"
+    ]
+    property variant sourceVAlignmentTable: [
+        "AlignTop", "AlignVCenter", "AlignBottom"
+    ]
+    property variant sourceFillModeTable: [
+        "Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Pad"
+    ]
+    property variant wrapModeTable: [
+        "Transparent", "Repeat"
+    ]
+    property variant imageFillModeTable: [
+        "Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Tile", "TileVertically",
+        "TileHorizontally", "Pad"
+    ]
+
+    // Zoom properties.
+    property variant translation: Qt.point(0.0, 0.0)
+    property real scaleBase: 1.1
+    property real scaleExponent: 0.0
+    property real minScaleExponent: 0.0
+    property real maxScaleExponent:  48.317715856  // Logarithm of 100 to base 1.1 (scaleBase).
+    property real scaleFactor: 1.0
+    property real scale: 1.0
+
+    // Overlay text properties. French keymapping... :)
+    property string textOverlayString:
+        "Zoom            (scroll):   x " + root.scaleFactor.toFixed(1) + "\n\n" +
+        "Background colors  (a/z):   " + shape.backgroundColor + ", " + shape.secondaryBackgroundColor + "\n" +
+        "Background mode      (e):   " + root.backgroundModeTable[shape.backgroundMode] + "\n\n" +
+        "Overlay color        (r):   " + shape.overlayColor + "\n" +
+        "Overlay geometry (t/y/u/i): " + shape.overlayGeometry.x.toFixed(2) + ", " + shape.overlayGeometry.y.toFixed(2) + ", " + shape.overlayGeometry.width.toFixed(2) + ", " + shape.overlayGeometry.height.toFixed(2) + "\n\n" +
+        "Source               (o):   " + shape.source + "\n" +
+        "Source opacity       (p):   " + shape.sourceOpacity.toFixed(2) + "\n" +
+        "Source fill          (q):   " + root.sourceFillModeTable[shape.sourceFillMode] + "\n" +
+        "Source hwrap         (s):   " + root.wrapModeTable[shape.sourceHorizontalWrapMode] + "\n" +
+        "Source vwrap         (d):   " + root.wrapModeTable[shape.sourceVerticalWrapMode] + "\n" +
+        "Source halign        (f):   " + root.sourceHAlignmentTable[shape.sourceHorizontalAlignment] + "\n" +
+        "Source valign        (g):   " + root.sourceVAlignmentTable[shape.sourceVerticalAlignment] + "\n" +
+        "Source translation (h/j):   " + shape.sourceTranslation.x.toFixed(2) + ", " + shape.sourceTranslation.y.toFixed(2) + "\n" +
+        "Source scale       (k/l):   " + shape.sourceScale.x.toFixed(2) + ", " + shape.sourceScale.y.toFixed(2) + "\n\n" +
+        "Image (deprecated)   (m):   " + shape.image + "\n" +
+        "Image fill           (w):   " + root.imageFillModeTable[img1.fillMode] + "\n" +
+        "Image halign         (x):   " + img1.horizontalAlignment + "\n" +
+        "Image valign         (c):   " + img1.verticalAlignment + "\n\n" +
+        "Radius               (v):   " + "\"" + shape.radius + "\"\n" +
+        "Border               (b):   " + "\"" + shape.borderSource + "\"\n\n" +
+        "Colors (deprecated) (n/,):  " + shape.color + ", " + shape.gradientColor
+
+    // Main scene.
+    Item {
+        id: scene
+        anchors.fill: parent
+
+        Image {
+            id: background
+            anchors.fill: parent
+            source: "background.jpg"
+            fillMode: Image.Tile
+        }
+
+        // Put the UbuntuShape source image in the middle of a texture atlas. We use img1.
+        Image { id: img1; visible: false; source: "img1.png"; }
+        Image { id: img2; visible: false; source: "img2.png"; }
+        Image { id: img3; visible: false; source: "img3.png"; }
+        Image { id: img4; visible: false; source: "img4.png"; }
+
+        UbuntuShapeOverlay {
+            id: shape
+            anchors.fill: parent
+            anchors.leftMargin: 400
+            anchors.rightMargin: 100
+            anchors.topMargin: 100
+            anchors.bottomMargin: 100
+        }
+    }
+
+    // Zoom support.
+    ShaderEffectSource {
+        id: shaderEffectSource
+        anchors.fill: scene
+        sourceItem: scene
+        hideSource: true
+        visible: false
+        smooth: false
+    }
+    ShaderEffect {
+        anchors.fill: scene
+        property variant tex: shaderEffectSource
+        property variant translation: root.translation
+        property real scaleFactor: root.scale
+        vertexShader: "
+            uniform mat4 qt_Matrix;
+            uniform float scaleFactor;
+            uniform vec2 translation;
+            attribute vec4 qt_Vertex;
+            attribute vec2 qt_MultiTexCoord0;
+            varying vec2 texCoord;
+            void main() {
+                texCoord = vec2(scaleFactor) * qt_MultiTexCoord0 + translation;
+                gl_Position = qt_Matrix * qt_Vertex;
+            }"
+        fragmentShader: "
+            uniform sampler2D tex;
+            uniform float qt_Opacity;
+            varying vec2 texCoord;
+            void main() {
+                gl_FragColor = texture2D(tex, texCoord) * qt_Opacity;
+            }"
+    }
+
+    // Text overlay.
+    Text {
+        id: textOverlay
+        width:200
+        anchors.top: parent.top
+        anchors.topMargin: 10
+        anchors.left: parent.left
+        anchors.leftMargin: 10
+        font.family: "Ubuntu Mono"
+        font.pixelSize: 14
+        font.weight: Font.Bold
+        color: "black"
+        text: textOverlayString
+    }
+
+    // Mouse handling.
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton
+        hoverEnabled: true
+
+        property real lastX: 0.0
+        property real lastY: 0.0
+
+        onPressed: {
+            if (pressedButtons & Qt.LeftButton) {
+                lastX = mouseX;
+                lastY = mouseY;
+            }
+        }
+        onPositionChanged: {
+            if (pressedButtons & Qt.LeftButton) {
+                var tx = root.translation.x;
+                var ty = root.translation.y;
+                var sx = root.scale / root.width;
+                var sy = root.scale / root.height;
+                var x = mouseX - lastX;
+                var y = mouseY - lastY;
+                root.translation = Qt.point(Math.max(0.0, Math.min(1.0 - root.scale, tx - sx * x)),
+                                            Math.max(0.0, Math.min(1.0 - root.scale, ty - sy * y)));
+                lastX = mouseX;
+                lastY = mouseY;
+            }
+        }
+        onWheel: {
+            root.scaleExponent = Math.max(minScaleExponent, Math.min(maxScaleExponent,
+                root.scaleExponent + (wheel.angleDelta.y < 0.0 ? -1.0 : 1.0)));
+            root.scaleFactor = Math.pow(root.scaleBase, root.scaleExponent);
+            var oldScale = root.scale;
+            root.scale = 1.0 / root.scaleFactor;
+            var s = oldScale - root.scale;
+            var tx = root.translation.x;
+            var ty = root.translation.y;
+            var x = mouseX / root.width;
+            var y = mouseY / root.height;
+            root.translation = Qt.point(Math.max(0.0, Math.min(1.0 - root.scale, tx + s * x)),
+                                        Math.max(0.0, Math.min(1.0 - root.scale, ty + s * y)));
+        }
+    }
+
+    // Keyboard handling.
+    Keys.onPressed: {
+        var shift = Qt.ShiftModifier;
+
+        // Background.
+        if (event.key == Qt.Key_A) {
+            shape.backgroundColor = Qt.rgba(
+                Math.random(), Math.random(), Math.random(), Math.random());
+        } else if (event.key == Qt.Key_Z) {
+            shape.secondaryBackgroundColor = Qt.rgba(
+                Math.random(), Math.random(), Math.random(), Math.random());
+        } else if (event.key == Qt.Key_E) {
+            shape.backgroundMode = (shape.backgroundMode + 1) % 3;
+
+        // Overlay.
+        } else if (event.key == Qt.Key_R) {
+            shape.overlayColor = Qt.rgba(
+                Math.random(), Math.random(), Math.random(), Math.random());
+        } else if (event.key == Qt.Key_T) {
+            var x = Math.max(0.0, Math.min(1.0,
+            shape.overlayGeometry.x + ((event.modifiers & shift) ? 0.005 : -0.005)));
+            shape.overlayGeometry = Qt.rect(
+                x, shape.overlayGeometry.y, shape.overlayGeometry.width,
+                shape.overlayGeometry.height);
+        } else if (event.key == Qt.Key_Y) {
+            var y = Math.max(0.0, Math.min(1.0,
+            shape.overlayGeometry.y + ((event.modifiers & shift) ? 0.005 : -0.005)));
+            shape.overlayGeometry = Qt.rect(
+                shape.overlayGeometry.x, y, shape.overlayGeometry.width,
+                shape.overlayGeometry.height);
+        } else if (event.key == Qt.Key_U) {
+            var width = Math.max(0.0, Math.min(1.0,
+            shape.overlayGeometry.width + ((event.modifiers & shift) ? 0.005 : -0.005)));
+            shape.overlayGeometry = Qt.rect(
+                shape.overlayGeometry.x, shape.overlayGeometry.y, width,
+                shape.overlayGeometry.height);
+        } else if (event.key == Qt.Key_I) {
+            var height = Math.max(0.0, Math.min(1.0,
+            shape.overlayGeometry.height + ((event.modifiers & shift) ? 0.005 : -0.005)));
+            shape.overlayGeometry = Qt.rect(
+                shape.overlayGeometry.x, shape.overlayGeometry.y, shape.overlayGeometry.width,
+                height);
+
+        // Source.
+        } else if (event.key == Qt.Key_O) {
+            if (shape.source == null) {
+                shape.source = img1;
+            } else {
+                shape.source = null;
+            }
+        } else if (event.key == Qt.Key_P) {
+            shape.sourceOpacity = Math.max(0.0, Math.min(
+                1.0, shape.sourceOpacity + ((event.modifiers & shift) ? 0.01 : -0.01)));
+        } else if (event.key == Qt.Key_Q) {
+            shape.sourceFillMode = (shape.sourceFillMode + 1) % 4;
+        } else if (event.key == Qt.Key_S) {
+            shape.sourceHorizontalWrapMode = (shape.sourceHorizontalWrapMode + 1) % 3;
+        } else if (event.key == Qt.Key_D) {
+            shape.sourceVerticalWrapMode = (shape.sourceVerticalWrapMode + 1) % 3;
+        } else if (event.key == Qt.Key_F) {
+            shape.sourceHorizontalAlignment = (shape.sourceHorizontalAlignment + 1) % 3;
+        } else if (event.key == Qt.Key_G) {
+            shape.sourceVerticalAlignment = (shape.sourceVerticalAlignment + 1) % 3;
+        } else if (event.key == Qt.Key_H) {
+            shape.sourceTranslation = Qt.vector2d(
+                shape.sourceTranslation.x + ((event.modifiers & shift) ? 0.01 : -0.01),
+                shape.sourceTranslation.y);
+        } else if (event.key == Qt.Key_J) {
+            shape.sourceTranslation = Qt.vector2d(
+                shape.sourceTranslation.x,
+                shape.sourceTranslation.y + ((event.modifiers & shift) ? 0.01 : -0.01));
+        } else if (event.key == Qt.Key_K) {
+            shape.sourceScale = Qt.vector2d(
+                shape.sourceScale.x + ((event.modifiers & shift) ? 0.02 : -0.02),
+                shape.sourceScale.y);
+        } else if (event.key == Qt.Key_L) {
+            shape.sourceScale = Qt.vector2d(
+                shape.sourceScale.x,
+                shape.sourceScale.y + ((event.modifiers & shift) ? 0.02 : -0.02));
+
+        // Image.
+        } else if (event.key == Qt.Key_M) {
+            if (shape.image == null) {
+                shape.image = img1;
+            } else {
+                shape.image = null;
+            }
+        } else if (event.key == Qt.Key_W) {
+            img1.fillMode = (img1.fillMode + 1) % 7;
+        } else if (event.key == Qt.Key_X) {
+            if (img1.horizontalAlignment == Image.AlignLeft) {
+                img1.horizontalAlignment = Image.AlignHCenter;
+            } else if (img1.horizontalAlignment == Image.AlignHCenter) {
+                img1.horizontalAlignment = Image.AlignRight;
+            } else {
+                img1.horizontalAlignment = Image.AlignLeft;
+            }
+        } else if (event.key == Qt.Key_C) {
+            if (img1.verticalAlignment == Image.AlignTop) {
+                img1.verticalAlignment = Image.AlignVCenter;
+            } else if (img1.verticalAlignment == Image.AlignVCenter) {
+                img1.verticalAlignment = Image.AlignBottom;
+            } else {
+                img1.verticalAlignment = Image.AlignTop;
+            }
+
+        // Styling.
+        } else if (event.key == Qt.Key_V) {
+            shape.radius = (shape.radius == "medium") ? "small" : "medium";
+        } else if (event.key == Qt.Key_B) {
+            if (shape.borderSource == "radius_idle.sci") {
+                shape.borderSource = "radius_pressed.sci";
+            } else if (shape.borderSource == "radius_pressed.sci") {
+                shape.borderSource = "";
+            } else {
+                shape.borderSource = "radius_idle.sci";
+            }
+
+        // Colors.
+        } else if (event.key == Qt.Key_N) {
+            shape.color = Qt.rgba(
+                Math.random(), Math.random(), Math.random(), Math.random());
+        } else if (event.key == Qt.Key_Comma) {
+            shape.gradientColor = Qt.rgba(
+                Math.random(), Math.random(), Math.random(), Math.random());
+        }
+    }
+}