Fixed group/island placements. Fixed images.

Change-Id: I5ff0b85c8771557c12238e4dd54f3fa07e45eebd
Reviewed-by: Kimmo Ollila <kimmo.ollila@digia.com>

19 files changed, 141 insertions, 64 deletions

diff --git a/QtDemo/qml/QtDemo/Button.qml b/QtDemo/qml/QtDemo/Button.qml
index 813303d..f39ad86 100644
--- a/QtDemo/qml/QtDemo/Button.qml
+++ b/QtDemo/qml/QtDemo/Button.qml
@@ -14,7 +14,7 @@ Item {
         anchors.fill: root
         anchors.margins: 0
         source: root.imageSource
-        opacity: 0.7
+        opacity: 1.0
         rotation: root.rotation
     }
 
@@ -26,7 +26,7 @@ Item {
         onClicked: root.clicked()
         onEntered: buttonImage.anchors.margins = -(root.width * 0.1)
         onExited: buttonImage.anchors.margins = 0
-        onPressed: {buttonImage.opacity = 1.0; buttonImage.anchors.margins = -(root.width * 0.1)}
-        onReleased: { buttonImage.opacity = 0.7; buttonImage.anchors.margins = 0}
+        onPressed: {buttonImage.opacity = 0.7; buttonImage.anchors.margins = -(root.width * 0.1)}
+        onReleased: { buttonImage.opacity = 1.0; buttonImage.anchors.margins = 0}
     }
 }
diff --git a/QtDemo/qml/QtDemo/Element.qml b/QtDemo/qml/QtDemo/Element.qml
index 5c4426d..9936fb2 100644
--- a/QtDemo/qml/QtDemo/Element.qml
+++ b/QtDemo/qml/QtDemo/Element.qml
@@ -2,26 +2,25 @@ import QtQuick 2.0
 
 Item {
     id: root
+    width: 1
+    height: 1
 
     property int itemId : 1
-    property int posX: 0
-    property int posY: 0
-    property int itemWidth: 50
 
     Image {
         id: elementImage
-        anchors.fill: root
+        anchors.centerIn: root
         z: 5
     }
 
     Component.onCompleted: {
-        root.width = root.itemWidth
-        root.height = root.itemId == 2 ? root.itemWidth*0.8 : root.itemWidth*1.3
-        root.x = root.posX - root.width/2
-        root.y = root.posY - root.height/2
-        elementImage.source = root.itemId === 0 ? "images/tree1.png" :
-                              root.itemId === 1 ? "images/tree2.png" :
-                              root.itemId === 2 ? "images/stones.png" :
+        elementImage.source = root.itemId === 0 ? "images/man1.png" :
+                              root.itemId === 1 ? "images/tree1.png" :
+                              root.itemId === 2 ? "images/tree2.png" :
+                              root.itemId === 3 ? "images/mountain.png" :
+                              root.itemId === 4 ? "images/stones.png" :
+                              root.itemId === 5 ? "images/box_open.png" :
+                              root.itemId === 6 ? "images/box.png" :
                               ""
     }
 }
diff --git a/QtDemo/qml/QtDemo/IslandElementContainer.qml b/QtDemo/qml/QtDemo/IslandElementContainer.qml
index 25ecd29..304278c 100644
--- a/QtDemo/qml/QtDemo/IslandElementContainer.qml
+++ b/QtDemo/qml/QtDemo/IslandElementContainer.qml
@@ -2,30 +2,110 @@ import QtQuick 2.0
 
 Item {
     id: elementContainer
-    width: place == 2 ? 0.8*parent.width : 0.1*islandWidth
-    height: place == 2 ? 0.1*islandHeight : 0.15*islandHeight
-    x: place == 0 ? (-width-0.02*islandWidth) : place == 1 ? (parent.width+0.02*islandWidth) : 0.1*parent.width
-    y: place == 2 ? parent.height : (parent.height - height)
+
+    width: place == 2 ? parent.width : (islandWidth-parent.width)/2
+    height: place == 2 ? 0.1*islandHeight : 0.4*islandHeight
+    x: place == 0 ? -width : place == 1 ? parent.width : 0
+    y: place == 2 ? parent.height : (parent.height - height*0.6)
 
     property int place : 0
-    property int itemWidth : islandWidth * 0.07
+    property int itemWidth : islandWidth * 0.1
     property int islandWidth: 100
     property int islandHeight: 100
 
+    function createElement(xx, yy, itemId) {
+        var component = Qt.createComponent("Element.qml")
+        if (component.status === Component.Ready)
+            component.createObject(elementContainer, {"x": xx, "y": yy, "itemId": itemId});
+    }
+
     function createElements()
     {
-        var count = Math.floor(Math.random()*4.9)
-        var step = place == 2 ? elementContainer.width / Math.max(count,1) : elementContainer.height / Math.max(count,1);
-
-        for (var i=0; i<count; i++) {
-            var itemId = place == 2 ? Math.floor(Math.random()*2.9) : Math.floor(Math.random()*1.9);
-            var component = Qt.createComponent("Element.qml")
-            if (component.status === Component.Ready)
-                component.createObject(elementContainer,
-                                       {"posY": place == 2 ? Math.random()*elementContainer.height : (step/2 + step*i),
-                                        "posX": place == 2 ? (step/2 + step*i) : Math.random()*elementContainer.width,
-                                        "itemWidth": elementContainer.itemWidth,
-                                        "itemId":itemId});
+        // Left side
+        if (place === 0) {
+            var temp0 = Math.floor(Math.random()*5.9);
+            switch(temp0) {
+            case 0:
+                createElement(elementContainer.width*0.4, elementContainer.height*0.2, 1);
+                createElement(elementContainer.width*0.25, elementContainer.height*0.3, 1);
+                createElement(elementContainer.width*0.15, elementContainer.height*0.5, 1);
+                createElement(elementContainer.width*0.55, elementContainer.height*0.4, 1);
+                break;
+            case 1:
+                createElement(elementContainer.width*0.6, elementContainer.height*0.1, 1);
+                createElement(elementContainer.width*0.4, elementContainer.height*0.2, 1);
+                createElement(elementContainer.width*0.7, elementContainer.height*0.3, 1);
+                createElement(elementContainer.width*0.3, elementContainer.height*0.5, 1);
+                break;
+            case 2:
+                createElement(elementContainer.width*0.6, elementContainer.height*0.1, 3);
+                createElement(elementContainer.width*0.4, elementContainer.height*0.6, 4);
+                createElement(elementContainer.width*0.8, elementContainer.height*0.8, 4);
+                break;
+            case 3:
+                createElement(elementContainer.width*0.6, elementContainer.height*0.1, 3);
+                createElement(elementContainer.width*0.4, elementContainer.height*0.4, 1);
+                createElement(elementContainer.width*0.5, elementContainer.height*0.5, 2);
+                createElement(elementContainer.width*0.7, elementContainer.height*0.6, 2);
+                break;
+            case 4:
+                createElement(elementContainer.width*0.7, elementContainer.height*0.3, 0);
+                break;
+            default: break;
+            }
+        }
+        else if (place === 1) {
+            var temp1 = Math.floor(Math.random()*4.9);
+            switch(temp1) {
+            case 0:
+                createElement(elementContainer.width*0.6, elementContainer.height*0.2, 1);
+                createElement(elementContainer.width*0.75, elementContainer.height*0.3, 1);
+                createElement(elementContainer.width*0.85, elementContainer.height*0.5, 1);
+                createElement(elementContainer.width*0.45, elementContainer.height*0.4, 1);
+                break;
+            case 1:
+                createElement(elementContainer.width*0.4, elementContainer.height*0.1, 1);
+                createElement(elementContainer.width*0.6, elementContainer.height*0.2, 1);
+                createElement(elementContainer.width*0.3, elementContainer.height*0.3, 1);
+                createElement(elementContainer.width*0.7, elementContainer.height*0.5, 1);
+                break;
+            case 2:
+                createElement(elementContainer.width*0.4, elementContainer.height*0.1, 3);
+                createElement(elementContainer.width*0.6, elementContainer.height*0.6, 4);
+                createElement(elementContainer.width*0.2, elementContainer.height*0.8, 4);
+                break;
+            case 3:
+                createElement(elementContainer.width*0.4, elementContainer.height*0.1, 3);
+                createElement(elementContainer.width*0.6, elementContainer.height*0.4, 2);
+                createElement(elementContainer.width*0.5, elementContainer.height*0.5, 1);
+                createElement(elementContainer.width*0.3, elementContainer.height*0.6, 2);
+                break;
+            default: break;
+            }
+        }
+        else {
+            var temp2 = Math.floor(Math.random()*4.9);
+            switch(temp2) {
+            case 0:
+                createElement(elementContainer.width*0.8, elementContainer.height*0.8, 5);
+                createElement(elementContainer.width*0.4, elementContainer.height*0.5, 5);
+                break;
+            case 1:
+                createElement(elementContainer.width*0.1, elementContainer.height*0.5, 1);
+                createElement(elementContainer.width*0.2, elementContainer.height*0.9, 2);
+                createElement(elementContainer.width*0.6, elementContainer.height*0.8, 4);
+                break;
+            case 2:
+                createElement(elementContainer.width*0.2, elementContainer.height*0.5, 6);
+                createElement(elementContainer.width*0.7, elementContainer.height*0.6, 2);
+                createElement(elementContainer.width*0.6, elementContainer.height*0.7, 1);
+                break;
+            case 3:
+                createElement(elementContainer.width*0.2, elementContainer.height*0.8, 6);
+                createElement(elementContainer.width*0.7, elementContainer.height*0.6, 6);
+                break;
+            default: break;
+            }
         }
     }
 }
diff --git a/QtDemo/qml/QtDemo/NavigationPanel.qml b/QtDemo/qml/QtDemo/NavigationPanel.qml
index a885846..056dbbf 100644
--- a/QtDemo/qml/QtDemo/NavigationPanel.qml
+++ b/QtDemo/qml/QtDemo/NavigationPanel.qml
@@ -40,7 +40,7 @@ Grid {
 
     Button {
         id: homeButton
-        imageSource: "images/btn_home.png"
+        imageSource: app.navigationState === 0 ? "images/btn_help.png" : "images/btn_home.png"
         onClicked: {
             if (app.navigationState===0){
                 helpscreen.show()
diff --git a/QtDemo/qml/QtDemo/Slide.qml b/QtDemo/qml/QtDemo/Slide.qml
index a65c928..dda4025 100644
--- a/QtDemo/qml/QtDemo/Slide.qml
+++ b/QtDemo/qml/QtDemo/Slide.qml
@@ -17,7 +17,7 @@ Item {
     property int demoHeight: 378
     property int maskVerticalOffset: 51
     property int maskHorizontalOffset: 1
-    property string demoColor: "#883322"
+    property string demoColor: "#4353c3"
     property string name: ""
 
     function targetWidth()
diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index b7a8f25..b0b4ace 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -1,44 +1,43 @@
 var positions = [
-            {x:-800,  y:-1500, gid: 0, url: "demos/rssnews/rssnews.qml", device: 3, name: "Rss Reader"},
-            {x:-1800, y:-1400, gid: 0, url: "demos/gridrssnews/main.qml", device: 6, name: "Rss Reader"},
-            {x:-1200, y:-1050, gid: 0, url: "demos/tweetsearch/tweetsearch.qml", device: 2, name: "Tweet Search"},
+            {x:-1100,  y:-1650, gid: 0, url: "demos/rssnews/rssnews.qml", device: 3, name: "Rss Reader"},
+            {x:-2100, y:-1550, gid: 0, url: "demos/gridrssnews/main.qml", device: 7, name: "Rss Reader"},
+            {x:-1500, y:-1200, gid: 0, url: "demos/tweetsearch/tweetsearch.qml", device: 2, name: "Tweet Search"},
 
-            {x:1800,  y:-1700, gid: 1, url: "demos/heartmonitor/main.qml", device: 4, name: "Heart Monitor"},
-            {x:1100,  y:-1500, gid: 1, url: "demos/canvasclock/canvasClock.qml", device: 4, name: "Canvas Clock"},
+            {x:1300,  y:-1600, gid: 1, url: "demos/canvasclock/canvasClock.qml", device: 4, name: "Canvas Clock"},
+            {x:2020,  y:-1520, gid: 1, url: "demos/heartmonitor/main.qml", device: 5, name: "Heart Monitor"},
 
-            {x:1600,  y:-500, gid: 2, url: "demos/calqlatr/Calqlatr.qml", device: 0, name: "Calqlatr"},
-            {x:700,   y:-300, gid: 2, url: "demos/photosurface/photosurface.qml", device: 5, name: "Photo Surface"},
-            {x:-100,  y:-50,  gid: 2, url: "demos/touchgallery/main.qml", device: 2, name: "Widget Gallery"},
+            {x:1000,  y:-300, gid: 2, url: "demos/calqlatr/Calqlatr.qml", device: 0, name: "Calqlatr"},
+            {x:-500,  y:-250,  gid: 2, url: "demos/touchgallery/main.qml", device: 2, name: "Widget Gallery"},
+            {x:200,   y:-200, gid: 2, url: "demos/photosurface/photosurface.qml", device: 6, name: "Photo Surface"},
 
-            {x:-1500, y:0,   gid: 3, url: "demos/maroon/Maroon.qml", device: 1, name: "Maroon in\n  Trouble"},
-            {x:-2200, y:100, gid: 3, url: "demos/samegame/samegame.qml", device: 1, name: "SameGame"},
+            {x:-1800, y:0,   gid: 3, url: "demos/maroon/Maroon.qml", device: 1, name: "Maroon in\n  Trouble"},
+            {x:-2500, y:100, gid: 3, url: "demos/samegame/samegame.qml", device: 1, name: "SameGame"},
 
-            {x:2200,  y:1100, gid: 5, url: "demos/particledemo/particledemo.qml", device: 6, name: "Particle Paint"},
-            {x:1000,  y:1280, gid: 5, url: "demos/shaders/main.qml", device: 5, name: "Shaders"},
+            {x:1200,  y:1200, gid: 5, url: "demos/shaders/main.qml", device: 6, name: "Shaders"},
+            {x:2200,  y:1400, gid: 5, url: "demos/particledemo/particledemo.qml", device: 7, name: "Particle Paint"},
 
-            {x:-800,  y:1200, gid: 4, url: "demos/video/main.qml", device: 7, name: "Qt Video"},
-            {x:-1800, y:1400, gid: 4, url: "demos/radio/radio.qml", device: 4, name: "Internet Radio"}
+            {x:-800,  y:1200, gid: 4, url: "demos/video/main.qml", device: 8, name: "Qt Video"},
+            {x:-1600, y:1500, gid: 4, url: "demos/radio/radio.qml", device: 5, name: "Internet Radio"}
         ]
 
 var groupPositions = [
-            {x:-2320, y:-1950, width: 2150, height: 1200, textX: 150, textY: 50, name: "Feeds"},
-            {x:650, y:-2000, width: 1600, height: 1000, textX: 150, textY: 50, name: "Canvas"},
-            {x:-350, y:-800, width: 2350, height: 1200, textX: 150, textY: 50, name: "Applications"},
-            {x:-2500, y:-500, width: 1500, height: 1150, textX: 150, textY: 50, name: "Games"},
-            {x:-2250, y:850, width: 2050, height: 1150, textX: 150, textY: 50, name: "Multimedia"},
-            {x:510, y:700, width: 2400, height: 1300, textX: 150, textY: 50, name: "Particles & Shaders"}
+            {x:-2880, y:-2100, width: 2400, height: 1200, textX: 50, textY: 50, name: "Feeds"},
+            {x:700, y:-2100, width: 1700, height: 1200, textX: 50, textY: 50, name: "Canvas"},
+            {x:-900, y:-800, width: 2650, height: 1300, textX: 50, textY: 50, name: "Applications"},
+            {x:-3000, y:-500, width: 1750, height: 1150, textX: 50, textY: 50, name: "Games"},
+            {x:-2100, y:850, width: 1950, height: 1150, textX: 50, textY: 150, name: "Multimedia"},
+            {x:510, y:600, width: 2450, height: 1500, textX: 50, textY: 50, name: "Particles & Shaders"}
         ]
 
-var imageSources = ["phone1.png","phone2.png", "phone3.png","tablet1.png", "medical_device.png", "laptop1.png", "laptop2.png", "tv.png"]
-var widths = [300, 360, 366, 758, 600, 918, 923, 800]
-var heights = [605, 706, 720, 564, 488, 600, 600, 638]
-var scales = [1.0, 0.8, 0.6, 0.9, 1.0, 0.9, 1.0, 1.0]
-var demoWidths = [269, 322, 322, 642, 482, 688, 691, 726]
-var demoHeights = [404, 482, 482, 402, 322, 431, 432, 456]
-var maskHorizontalOffsets = [1, 1, 1, 1, 1, 1, 1, 1]
-var maskVerticalOffsets = [20, 32, 15, 24, 45, 59, 57, 56]
-var colors = ["#4353c3", "#4353c3", "#4353c3", "#4353c3", "#4353c3", "#4353c3", "#4353c3", "#4353c3", "#4353c3"]
-var navigationList = [1,2,0,4,3,5,6,7,8,9,13,12,11,10]
+var imageSources = ["phone1.png","phone2.png", "phone3.png","tablet1.png", "car_device.png", "medical_device.png", "laptop1.png", "laptop2.png", "tv.png"]
+var widths = [300, 360, 366, 758, 625, 600, 918, 923, 800]
+var heights = [605, 706, 720, 564, 386, 488, 600, 600, 638]
+var scales = [0.8, 0.8, 0.6, 0.9, 1.0, 1.0, 0.9, 1.0, 1.0]
+var demoWidths = [269, 322, 322, 642, 480, 482, 688, 691, 726]
+var demoHeights = [404, 482, 482, 402, 320, 322, 431, 432, 456]
+var maskHorizontalOffsets = [1, 1, 1, 1, -52, 1, 1, 1, 1]
+var maskVerticalOffsets = [20, 32, 15, 24, 15, 45, 59, 57, 56]
+var navigationList = [1,2,0,3,4,5,7,6,8,9,13,12,10,11]
 var groupNavigationList = [0,1,2,3,4,5]
 var currentDemoIndex = -1
 var currentGroupIndex = -1
@@ -62,7 +61,6 @@ function createSlide(x,y,gid,url,device,name){
         object.scale = scales[device]
         object.demoWidth = demoWidths[device]
         object.demoHeight = demoHeights[device]
-        object.demoColor = colors[device]
         object.maskVerticalOffset = maskVerticalOffsets[device]
         object.maskHorizontalOffset = maskHorizontalOffsets[device]
         object.uid = objects.length
diff --git a/QtDemo/qml/QtDemo/images/bird.png b/QtDemo/qml/QtDemo/images/bird.png
deleted file mode 100644
index 57b0b30..0000000
--- a/QtDemo/qml/QtDemo/images/bird.png
+++ /dev/null
diff --git a/QtDemo/qml/QtDemo/images/box.png b/QtDemo/qml/QtDemo/images/box.png
new file mode 100644
index 0000000..b702861
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/box.png
diff --git a/QtDemo/qml/QtDemo/images/box_open.png b/QtDemo/qml/QtDemo/images/box_open.png
new file mode 100644
index 0000000..910f2ac
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/box_open.png
diff --git a/QtDemo/qml/QtDemo/images/btn_help.png b/QtDemo/qml/QtDemo/images/btn_help.png
new file mode 100644
index 0000000..6888b1a
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/btn_help.png
diff --git a/QtDemo/qml/QtDemo/images/btn_home.png b/QtDemo/qml/QtDemo/images/btn_home.png
index ac16129..e66d531 100644
--- a/QtDemo/qml/QtDemo/images/btn_home.png
+++ b/QtDemo/qml/QtDemo/images/btn_home.png
diff --git a/QtDemo/qml/QtDemo/images/btn_next.png b/QtDemo/qml/QtDemo/images/btn_next.png
index d38690a..c6f897e 100644
--- a/QtDemo/qml/QtDemo/images/btn_next.png
+++ b/QtDemo/qml/QtDemo/images/btn_next.png
diff --git a/QtDemo/qml/QtDemo/images/btn_previous.png b/QtDemo/qml/QtDemo/images/btn_previous.png
index 265bc50..efae81b 100644
--- a/QtDemo/qml/QtDemo/images/btn_previous.png
+++ b/QtDemo/qml/QtDemo/images/btn_previous.png
diff --git a/QtDemo/qml/QtDemo/images/car_device.png b/QtDemo/qml/QtDemo/images/car_device.png
new file mode 100644
index 0000000..7f6fa07
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/car_device.png
diff --git a/QtDemo/qml/QtDemo/images/cloud1.png b/QtDemo/qml/QtDemo/images/cloud1.png
index 83adad6..474feea 100644
--- a/QtDemo/qml/QtDemo/images/cloud1.png
+++ b/QtDemo/qml/QtDemo/images/cloud1.png
diff --git a/QtDemo/qml/QtDemo/images/cloud2.png b/QtDemo/qml/QtDemo/images/cloud2.png
index e3d0d8b..ccd811d 100644
--- a/QtDemo/qml/QtDemo/images/cloud2.png
+++ b/QtDemo/qml/QtDemo/images/cloud2.png
diff --git a/QtDemo/qml/QtDemo/images/hand.png b/QtDemo/qml/QtDemo/images/hand.png
index fa80356..a4edc2f 100644
--- a/QtDemo/qml/QtDemo/images/hand.png
+++ b/QtDemo/qml/QtDemo/images/hand.png
diff --git a/QtDemo/qml/QtDemo/images/man1.png b/QtDemo/qml/QtDemo/images/man1.png
new file mode 100644
index 0000000..71b651e
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/man1.png
diff --git a/QtDemo/qml/QtDemo/images/mountain.png b/QtDemo/qml/QtDemo/images/mountain.png
new file mode 100644
index 0000000..210aa5f
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/mountain.png