New shader demo, more suitable for touch and embedded

Change-Id: I48af8bc9c58930c26e822503c5c94c55690f37db
Reviewed-by: Gunnar Sletta <gunnar.sletta@digia.com>

18 files changed, 677 insertions, 0 deletions

diff --git a/basicsuite/Graphical Effects/Checkers.qml b/basicsuite/Graphical Effects/Checkers.qml
new file mode 100644
index 0000000..9ebdcff
--- /dev/null
+++ b/basicsuite/Graphical Effects/Checkers.qml
@@ -0,0 +1,28 @@
+import QtQuick 2.0
+
+
+// The checkers background
+ShaderEffect {
+
+    property real tileSize: 16
+    property color color1: Qt.rgba(0.7, 0.7, 0.7, 1);
+    property color color2: Qt.rgba(0.6, 0.6, 0.6, 1);
+
+    property size _pixelSize: Qt.size(Math.PI * width / tileSize, Math.PI * height / tileSize);
+
+    fragmentShader:
+        "
+        uniform lowp vec4 color1;
+        uniform lowp vec4 color2;
+        uniform lowp float qt_Opacity;
+        uniform highp vec2 _pixelSize;
+        varying highp vec2 qt_TexCoord0;
+        void main() {
+            highp vec2 tc = sign(sin(qt_TexCoord0 * _pixelSize));
+            if (tc.x != tc.y)
+                gl_FragColor = color1 * qt_Opacity;
+            else
+                gl_FragColor = color2 * qt_Opacity;
+        }
+        "
+}
diff --git a/basicsuite/Graphical Effects/description.txt b/basicsuite/Graphical Effects/description.txt
new file mode 100644
index 0000000..645aa99
--- /dev/null
+++ b/basicsuite/Graphical Effects/description.txt
@@ -0,0 +1,3 @@
+This example shows the QtGraphicalEffect module. Qt Quick 2.0 provides the ability to use inline GLSL in your Qt Quick applications to create stunning visual effects. However, as UIs typically reuse many of the same effects, the QtGraphicalEffects module provides a set of predefined, commonly used effects. This includes blur, drop-shadows, glow, blending, opacity maskes and more.
+
+The example is taken from the manual testbed application in the qtgraphicaleffects module. It has been adapted slightly to run in the launcher.
diff --git a/basicsuite/Graphical Effects/effect_BrightnessContrast.qml b/basicsuite/Graphical Effects/effect_BrightnessContrast.qml
new file mode 100644
index 0000000..97ccb48
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_BrightnessContrast.qml
@@ -0,0 +1,35 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+
+    id: root
+
+    property real inputX: 0.7;
+    property real feedbackX: effect.brightness
+    property string nameX: "Brightness"
+
+    property real inputY: 0.8;
+    property real feedbackY: effect.contrast
+    property string nameY: "Contrast"
+
+    Image {
+        id: image
+        source: "images/bug.jpg"
+        anchors.centerIn: parent
+        visible: false
+    }
+
+    BrightnessContrast {
+        id: effect;
+
+        source: image
+        anchors.fill: source
+
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+
+        brightness: inputX * 2 - 1;
+        contrast: inputY * 2 - 1;
+    }
+
+}
diff --git a/basicsuite/Graphical Effects/effect_Colorize.qml b/basicsuite/Graphical Effects/effect_Colorize.qml
new file mode 100644
index 0000000..c2057ed
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_Colorize.qml
@@ -0,0 +1,34 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    property real inputX: 0.6;
+    property real feedbackX: effect.hue
+    property string nameX: "Hue"
+
+    property real inputY: 0.7
+    property real feedbackY: effect.saturation
+    property string nameY: "Saturation"
+
+    Image {
+        id: image
+        source: "images/bug.jpg"
+        width: Math.min(root.width, root.height) * 0.8;
+        height: width
+        sourceSize: Qt.size(width, height);
+        anchors.centerIn: parent
+    }
+
+    Colorize {
+        id: effect;
+
+        source: image
+        anchors.fill: source
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+
+        hue: root.inputX * 2 - 1;
+        saturation: root.inputY * 2 - 1
+    }
+}
diff --git a/basicsuite/Graphical Effects/effect_CustomWave.qml b/basicsuite/Graphical Effects/effect_CustomWave.qml
new file mode 100644
index 0000000..66e91be
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_CustomWave.qml
@@ -0,0 +1,118 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+
+    property real inputX: 0.9;
+    property real feedbackX: shader.zrot
+    property string nameX: "Rotation"
+
+    property real inputY: 0.7
+    property real feedbackY: shader.amp
+    property string nameY: "Amplitude"
+
+
+    ShaderEffect {
+        id: shader
+        width: height
+        height: parent.height
+        anchors.centerIn: parent;
+        scale: height > root.height * 0.8 ? root.height * 0.8 / height : 1;
+
+        blending: true
+
+        mesh: "50x50"
+
+        property variant size: Qt.size(width, height);
+
+        property variant source: Image { source: "images/bug.jpg" }
+
+        property real amp: root.inputY * 0.1;
+
+        property real xrot: 2 / 8 * Math.PI;
+
+        property real zrot: -root.inputX * Math.PI * 2
+
+        property real time: 0
+        NumberAnimation on time {
+            id: timeAnimation
+            from: 0;
+            to: Math.PI * 2;
+            duration: 3457;
+            loops: Animation.Infinite
+            running: true;
+        }
+
+        vertexShader: "
+        attribute highp vec4 qt_Vertex;
+        attribute highp vec2 qt_MultiTexCoord0;
+        uniform highp mat4 qt_Matrix;
+        uniform highp float xrot;
+        uniform highp float zrot;
+        uniform highp vec2 size;
+        uniform highp float time;
+        uniform highp float amp;
+        varying lowp vec2 v_TexCoord;
+        varying lowp float v_light;
+        void main() {
+            highp float xcosa = cos(xrot);
+            highp float xsina = sin(xrot);
+
+            highp mat4 xrot = mat4(1, 0, 0, 0,
+                                   0, xcosa, xsina, 0,
+                                   0, -xsina, xcosa, 0,
+                                   0, 0, 0, 1);
+
+            highp float zcosa = cos(zrot);
+            highp float zsina = sin(zrot);
+
+            highp mat4 zrot = mat4(zcosa, zsina, 0, 0,
+                                   -zsina, zcosa, 0, 0,
+                                   0, 0, 1, 0,
+                                   0, 0, 0, 1);
+
+            highp float near = 2.;
+            highp float far = 6.;
+            highp float fmn = far - near;
+
+            highp mat4 proj = mat4(near, 0, 0, 0,
+                                   0, near, 0, 0,
+                                   0, 0, -(far + near) / fmn, -1.,
+                                   0, 0, -2. * far * near / fmn, 1);
+
+            highp mat4 model = mat4(2, 0, 0, 0,
+                                    0, 2, 0, 0,
+                                    0, 0, 2, 0,
+                                    0, -.5, -4, 1);
+
+            vec4 nLocPos = vec4(qt_Vertex.xy * 2.0 / size - 1.0, 0, 1);
+            nLocPos.z = cos(nLocPos.x * 5. + time) * amp;
+
+            vec4 pos = proj * model * xrot * zrot * nLocPos;
+            pos = vec4(pos.xyx/pos.w, 1);
+
+            gl_Position = qt_Matrix * vec4((pos.xy + 1.0) / 2.0 * size , 0, 1);
+
+            v_TexCoord = qt_MultiTexCoord0;
+
+
+            v_light = dot(normalize(vec3(-sin(nLocPos.x * 5.0 + time) * 5.0 * amp, 0, -1)), vec3(0, 0, -1));
+        }
+        "
+
+        fragmentShader: "
+            uniform lowp sampler2D source;
+            uniform lowp float qt_Opacity;
+            varying highp vec2 v_TexCoord;
+            varying lowp float v_light;
+            void main() {
+                highp vec4 c = texture2D(source, v_TexCoord);
+                gl_FragColor = (vec4(pow(v_light, 16.0)) * 0.3 + c) * qt_Opacity;
+            }
+        "
+
+    }
+
+}
+
+
diff --git a/basicsuite/Graphical Effects/effect_Displacement.qml b/basicsuite/Graphical Effects/effect_Displacement.qml
new file mode 100644
index 0000000..c25827c
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_Displacement.qml
@@ -0,0 +1,40 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+
+    id: root
+
+    property real inputX: 0.1;
+
+    property real feedbackX: effect.displacement
+
+    property string nameX: "Displacement"
+
+    Image {
+        id: image
+        source: "images/bug.jpg"
+        anchors.centerIn: parent
+        visible: false
+    }
+
+    Image {
+        id: displacementMap
+        source: "images/glass_normal.png"
+        smooth: true
+        visible: false
+    }
+
+    Displace {
+        id: effect;
+
+        source: image
+        displacementSource: displacementMap
+        anchors.fill: source
+
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+
+        displacement: inputX
+    }
+
+}
diff --git a/basicsuite/Graphical Effects/effect_DropShadow.qml b/basicsuite/Graphical Effects/effect_DropShadow.qml
new file mode 100644
index 0000000..125fe64
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_DropShadow.qml
@@ -0,0 +1,43 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+
+    id: root
+
+    property real inputX: 0.5;
+    property real inputY: 0.2;
+
+    property real feedbackX: effect.radius
+    property real feedbackY: effect.spread
+
+    property string nameX: "Radius"
+    property string nameY: "Spread"
+
+    Image {
+        id: image
+        source: "images/butterfly.png"
+        anchors.centerIn: parent
+        visible: false
+    }
+
+    DropShadow {
+        id: effect;
+
+        source: image
+        anchors.fill: source
+
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+
+        samples: 4
+
+        radius: root.inputX * 7
+        spread: root.inputY;
+
+        color: Qt.rgba(0, 0, 0, 0.4);
+
+        verticalOffset: 30.5
+        horizontalOffset: 30.5
+    }
+
+}
diff --git a/basicsuite/Graphical Effects/effect_GaussianBlur.qml b/basicsuite/Graphical Effects/effect_GaussianBlur.qml
new file mode 100644
index 0000000..f9a029c
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_GaussianBlur.qml
@@ -0,0 +1,39 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+
+    id: root
+
+    property real inputX: 0.5;
+    property real inputY: 1
+
+    property real feedbackX: effect.radius
+    property real feedbackY: effect.deviation
+
+    property string nameX: "Radius"
+    property string nameY: "Deviation"
+
+    Image {
+        id: image
+        source: "images/bug.jpg"
+        width: Math.min(root.width, root.height) * 0.8;
+        height: width
+        sourceSize: Qt.size(width, height);
+        anchors.centerIn: parent
+    }
+
+    GaussianBlur {
+        id: effect;
+
+        source: image
+        anchors.fill: source
+
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+        samples: 4
+
+        deviation: root.inputY * 20;
+        radius: root.inputX * 7
+    }
+
+}
diff --git a/basicsuite/Graphical Effects/effect_Glow.qml b/basicsuite/Graphical Effects/effect_Glow.qml
new file mode 100644
index 0000000..dd7a078
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_Glow.qml
@@ -0,0 +1,39 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+
+    id: root
+
+    property real inputX: 0.5;
+    property real inputY: 0.2;
+
+    property real feedbackX: effect.radius
+    property real feedbackY: effect.spread
+
+    property string nameX: "Radius"
+    property string nameY: "Spread"
+
+    Image {
+        id: image
+        source: "images/butterfly.png"
+        anchors.centerIn: parent
+        visible: false
+    }
+
+    Glow {
+        id: effect;
+
+        source: image
+        anchors.fill: source
+
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+
+        samples: 4
+
+        radius: root.inputX * 7
+        spread: root.inputY;
+
+        color: Qt.rgba(1, 0, 1, 1);
+    }
+}
diff --git a/basicsuite/Graphical Effects/effect_HueSaturation.qml b/basicsuite/Graphical Effects/effect_HueSaturation.qml
new file mode 100644
index 0000000..4e3846a
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_HueSaturation.qml
@@ -0,0 +1,34 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    property real inputX: 0.6;
+    property real feedbackX: effect.hue
+    property string nameX: "Hue"
+
+    property real inputY: 0.2
+    property real feedbackY: effect.saturation
+    property string nameY: "Saturation"
+
+    Image {
+        id: image
+        source: "images/bug.jpg"
+        width: Math.min(root.width, root.height) * 0.8;
+        height: width
+        sourceSize: Qt.size(width, height);
+        anchors.centerIn: parent
+    }
+
+    HueSaturation {
+        id: effect;
+
+        source: image
+        anchors.fill: source
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+
+        hue: root.inputX * 2 - 1;
+        saturation: root.inputY * 2 - 1
+    }
+}
diff --git a/basicsuite/Graphical Effects/effect_OpacityMask.qml b/basicsuite/Graphical Effects/effect_OpacityMask.qml
new file mode 100644
index 0000000..e292ba4
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_OpacityMask.qml
@@ -0,0 +1,30 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+
+    id: root
+
+    Image {
+        id: image
+        source: "images/bug.jpg"
+        anchors.centerIn: parent
+        visible: false
+    }
+
+    Image {
+        id: mask
+        source: "images/butterfly.png"
+        visible: false
+    }
+
+    OpacityMask {
+        id: effect;
+
+        source: image
+        maskSource: mask
+        anchors.fill: source
+
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+    }
+}
diff --git a/basicsuite/Graphical Effects/effect_ThresholdMask.qml b/basicsuite/Graphical Effects/effect_ThresholdMask.qml
new file mode 100644
index 0000000..24b73fc
--- /dev/null
+++ b/basicsuite/Graphical Effects/effect_ThresholdMask.qml
@@ -0,0 +1,43 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+
+    id: root
+
+    property real inputX: 0.5;
+    property real inputY: 0.2;
+
+    property real feedbackX: effect.threshold
+    property real feedbackY: effect.spread
+
+    property string nameX: "Threshold"
+    property string nameY: "Spread"
+
+    Image {
+        id: image
+        source: "images/bug.jpg"
+        anchors.centerIn: parent
+        visible: false
+    }
+
+    Image {
+        id: mask
+        source: "images/fog.png"
+        visible: false
+    }
+
+    ThresholdMask {
+        id: effect;
+
+        source: image
+        maskSource: mask;
+        anchors.fill: source
+
+        scale: source.height > root.height * 0.8 ? root.height / source.height * 0.8 : 1;
+
+        threshold: root.inputX
+        spread: root.inputY
+    }
+
+}
diff --git a/basicsuite/Graphical Effects/images/bug.jpg b/basicsuite/Graphical Effects/images/bug.jpg
new file mode 100755
index 0000000..43e3676
--- /dev/null
+++ b/basicsuite/Graphical Effects/images/bug.jpg
diff --git a/basicsuite/Graphical Effects/images/butterfly.png b/basicsuite/Graphical Effects/images/butterfly.png
new file mode 100644
index 0000000..ce544f2
--- /dev/null
+++ b/basicsuite/Graphical Effects/images/butterfly.png
diff --git a/basicsuite/Graphical Effects/images/fog.png b/basicsuite/Graphical Effects/images/fog.png
new file mode 100644
index 0000000..f462222
--- /dev/null
+++ b/basicsuite/Graphical Effects/images/fog.png
diff --git a/basicsuite/Graphical Effects/images/glass_normal.png b/basicsuite/Graphical Effects/images/glass_normal.png
new file mode 100755
index 0000000..ba360ef
--- /dev/null
+++ b/basicsuite/Graphical Effects/images/glass_normal.png
diff --git a/basicsuite/Graphical Effects/main.qml b/basicsuite/Graphical Effects/main.qml
new file mode 100644
index 0000000..2d63844
--- /dev/null
+++ b/basicsuite/Graphical Effects/main.qml
@@ -0,0 +1,191 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+
+    width: 1280
+    height: 720
+
+    Checkers {
+        id: checkers;
+        anchors.fill: parent
+        anchors.leftMargin: list.width
+        tileSize: 32
+    }
+
+    Loader {
+        id: loader
+        anchors.fill: checkers;
+    }
+
+    Rectangle {
+        id: listBackground
+        anchors.left: parent.left
+        anchors.right: checkers.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        color: "black"
+    }
+
+    ListModel {
+        id: listModel
+        ListElement { name: "Brignthness / Contrast"; file: "effect_BrightnessContrast.qml" }
+        ListElement { name: "Colorize"; file: "effect_Colorize.qml" }
+        ListElement { name: "Displacement"; file: "effect_Displacement.qml" }
+        ListElement { name: "Drop Shadow"; file: "effect_DropShadow.qml" }
+        ListElement { name: "Gaussian Blur"; file: "effect_GaussianBlur.qml" }
+        ListElement { name: "Glow"; file: "effect_Glow.qml" }
+        ListElement { name: "Hue / Saturation"; file: "effect_HueSaturation.qml" }
+        ListElement { name: "Opacity Mask"; file: "effect_OpacityMask.qml" }
+        ListElement { name: "Threshold Mask"; file: "effect_ThresholdMask.qml" }
+        ListElement { name: "Custom"; file: "effect_CustomWave.qml" }
+    }
+
+    ListView
+    {
+        id: list
+        anchors.top: parent.top
+        anchors.left: parent.left
+        width: parent.width / 4
+        height: parent.height - width
+
+        clip: true
+        focus: true
+
+        highlightMoveDuration: 0
+
+        onCurrentItemChanged: {
+            var entry = listModel.get(currentIndex);
+            loader.source = entry.file;
+        }
+
+        model: listModel
+
+        highlight: Rectangle {
+            color: "steelblue"
+        }
+
+        delegate: Item {
+            id: delegateRoot
+
+            width: list.width
+            height: root.height * 0.05
+
+            Rectangle {
+                width: parent.width
+                height: 3
+                anchors.bottom: parent.bottom
+                gradient: Gradient {
+                    GradientStop { position: 0; color: "transparent" }
+                    GradientStop { position: 0.5; color: "lightgray" }
+                    GradientStop { position: 1; color: "transparent" }
+                }
+            }
+
+            Text {
+                color: "white"
+                font.pixelSize: parent.height * 0.5
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.verticalCenterOffset: -2
+                x: parent.width * 0.1
+                text: name
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: list.currentIndex = index;
+            }
+        }
+    }
+
+    Canvas {
+        id: canvas
+        anchors.fill: controller
+        anchors.margins: 10
+
+        property real padding: 20
+
+        onPaint: {
+            print("painting the canvas...");
+            var ctx = canvas.getContext("2d");
+
+            var w = canvas.width
+            var h = canvas.height;
+
+
+            ctx.fillStyle = "rgb(50, 50, 50)"
+            ctx.beginPath();
+            ctx.roundedRect(0, 0, w, h, w * 0.1, w * 0.1);
+            ctx.fill();
+
+            var margin = canvas.padding;
+            var segmentSize = 4
+            ctx.strokeStyle = "gray"
+            ctx.beginPath();
+            ctx.moveTo(margin, margin);
+            ctx.lineTo(margin, h-margin);
+            ctx.moveTo(margin, h - margin);
+            ctx.lineTo(w-margin, h - margin);
+
+            var segmentCount = 11
+            for (var i = 0; i<segmentCount; ++i) {
+                var offset = margin + i * (w - margin * 2) / (segmentCount - 1);
+                ctx.moveTo(margin - segmentSize, offset);
+                ctx.lineTo(margin + segmentSize, offset);
+                ctx.moveTo(offset, h - margin - segmentSize);
+                ctx.lineTo(offset, h - margin + segmentSize);
+            }
+
+            ctx.stroke();
+        }
+    }
+
+    Text {
+        id: labelX
+        anchors.bottom: canvas.bottom
+        x: canvas.width * 0.4
+        anchors.bottomMargin: 2
+        text: (loader.item != undefined && typeof loader.item.nameX != 'undefined' ? loader.item.nameX : "")
+              + (loader.item != undefined && typeof loader.item.feedbackX != 'undefined' ? ": " + loader.item.feedbackX.toFixed(2) : "");
+
+        color: "white"
+        font.pixelSize: canvas.padding * 0.5
+    }
+
+    Text {
+        id: labelY
+
+        anchors.verticalCenter: canvas.verticalCenter
+        anchors.verticalCenterOffset: canvas.height * 0.15
+        anchors.left: canvas.left
+        transformOrigin: Item.TopLeft
+        rotation: -90
+        text: (loader.item != undefined && typeof loader.item.nameY != 'undefined' ? loader.item.nameY : "")
+              + (loader.item != undefined && typeof loader.item.feedbackY != 'undefined' ? ": " + loader.item.feedbackY.toFixed(2) : "");
+        color: "white"
+        font.pixelSize: canvas.padding * 0.5
+    }
+
+    MouseArea {
+        id: controller
+
+        anchors.top: list.bottom;
+        anchors.left: parent.left
+        anchors.right: checkers.left
+        anchors.bottom: parent.bottom;
+
+        onPositionChanged: {
+            var effect = loader.item;
+            function bound(val) { return Math.max(0, Math.min(1, val)); }
+            if (effect != undefined) {
+                if (typeof effect.inputX != 'undefined')
+                    effect.inputX = bound(mouseX / controller.width);
+                if (typeof effect.inputY != 'undefined')
+                    effect.inputY = bound(1 - mouseY / controller.height);
+            }
+        }
+
+    }
+
+
+}
diff --git a/basicsuite/Graphical Effects/preview_l.jpg b/basicsuite/Graphical Effects/preview_l.jpg
new file mode 100644
index 0000000..80fbbd5
--- /dev/null
+++ b/basicsuite/Graphical Effects/preview_l.jpg