overlay performance test app

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

2 files changed, 76 insertions, 7 deletions

diff --git a/experimental/Overlay Tester/image.jpg b/experimental/Overlay Tester/image.jpg
new file mode 100644
index 0000000..803273e
--- /dev/null
+++ b/experimental/Overlay Tester/image.jpg
diff --git a/experimental/Overlay Tester/main.qml b/experimental/Overlay Tester/main.qml
index ee0c54e..a764917 100644
--- a/experimental/Overlay Tester/main.qml
+++ b/experimental/Overlay Tester/main.qml
@@ -3,6 +3,9 @@ import QtQuick 2.0
 Item {
     id: root
 
+    property bool showImage: false;
+    property bool showOpacity: false;
+
     width: 100
     height: 62
 
@@ -11,14 +14,26 @@ Item {
 
         model: 4
 
-        Rectangle {
-            width: root.width
-            height: root.height
-            color: "white"
-        }
+        Item {
+            anchors.fill: parent
 
-    }
+            Rectangle {
+                width: root.width
+                height: root.height
+                color: "green"
+                visible: root.showImage == false;
+                opacity: root.showOpacity ? 0.1 : 1;
+            }
 
+            Image {
+                width: root.width
+                height: root.height
+                source: "image.jpg"
+                visible: root.showImage == true;
+                opacity: root.showOpacity ? 0.1 : 1;
+            }
+        }
+    }
 
     Rectangle {
         anchors.centerIn: parent
@@ -35,7 +50,12 @@ Item {
     MouseArea {
         anchors.fill: parent
         onClicked: {
-            if (mouseY > root.height / 2)
+
+            if (mouseX < 100)
+                root.showImage = !root.showImage
+            else if (mouseX > root.width - 100)
+                root.showOpacity = !root.showOpacity
+            else if (mouseY > root.height / 2)
                 repeater.model++
             else
                 repeater.model--;
@@ -48,4 +68,53 @@ Item {
         color: "white"
     }
 
+    Text {
+        color: "steelblue"
+        style: Text.Outline
+        styleColor: "lightsteelblue"
+        text: "Add Layer"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 40
+        font.pixelSize: 24
+    }
+
+    Text {
+        color: "steelblue"
+        style: Text.Outline
+        styleColor: "lightsteelblue"
+
+        text: "Remove Layer"
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        font.pixelSize: 24
+    }
+
+
+    Text {
+        color: "steelblue"
+        style: Text.Outline
+        styleColor: "lightsteelblue"
+        text: root.showOpacity ? "Translucent" : "Opaque"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        font.pixelSize: 24
+    }
+
+
+    Text {
+        color: "steelblue"
+        style: Text.Outline
+        styleColor: "lightsteelblue"
+        text: root.showImage ? "Images" : "Rectangles"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 20
+        font.pixelSize: 24
+    }
+
+
 }