Added background gradient. Added islands. Fixed home position

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

4 files changed, 79 insertions, 25 deletions

diff --git a/QtDemo/qml/QtDemo/Slide.qml b/QtDemo/qml/QtDemo/Slide.qml
index 153629b..d4b6e1f 100644
--- a/QtDemo/qml/QtDemo/Slide.qml
+++ b/QtDemo/qml/QtDemo/Slide.qml
@@ -74,6 +74,17 @@ Rectangle {
         z: 2
     }
 
+    Image {
+        id: islandImage
+        anchors.top: deviceMaskImage.bottom
+        anchors.topMargin: -deviceMaskImage.height*0.4
+        anchors.horizontalCenter: deviceMaskImage.horizontalCenter
+        source: "images/LaunchDemoVectors-02.svg"
+        width: deviceMaskImage.width*1.5
+        height: deviceMaskImage.height
+        z: -2
+    }
+
     function loadDemo(){
         if (!slide.url || slide.loaded) return;
 
diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index 0a936f0..8d8f1a9 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -1,20 +1,12 @@
-var positions = [{x:700, y:-400, angle: 0, borderColor: "blue", url: "demos/samegame/samegame.qml", device: 0},
-                 {x:1200, y:-200, angle:5, borderColor: "grey", url: "demos/tweetsearch/tweetsearch.qml", device: 0},
-                 {x:-700, y:-300, angle: 2, borderColor: "green", url: "demos/calqlatr/Calqlatr.qml", device: 0},
-                 {x:-1300, y:400, angle: -2, borderColor: "red", url: "demos/particledemo/particledemo.qml", device: 1},
-                 {x: 900, y: 200, angle: 0, borderColor: "lime", url: "demos/tweetsearch/tweetsearch.qml", device: 0},
-                 {x:-300, y:-900, angle: 8, borderColor: "black", url: "demos/calqlatr/Calqlatr.qml", device: 0},
-                 {x: 300, y:-1000, angle: 0, borderColor: "orange", url: "demos/particledemo/particledemo.qml", device: 2},
-                 {x: 200, y:1100, angle: -8, borderColor: "orange", url: "demos/slidepuzzle/slidepuzzle.qml", device: 3},
-
-                 {x: -1300, y:1100, angle: 3, borderColor: "orange", url: "demos/rssnews/rssnews.qml", device: 2},
+var positions = [{x:-900, y:-700, angle: 2, borderColor: "green", url: "demos/calqlatr/Calqlatr.qml", device: 0},
+                 {x:200, y:-900, angle: 0, borderColor: "blue", url: "demos/samegame/samegame.qml", device: 0},
+                 {x:1000, y:-400, angle:5, borderColor: "grey", url: "demos/tweetsearch/tweetsearch.qml", device: 0},
+                 {x: 1900, y: -200, angle: 5, borderColor: "red", url: "demos/photosurface/photosurface.qml", device: 1},
+                 {x:-1700, y:100, angle: -4, borderColor: "red", url: "demos/particledemo/particledemo.qml", device: 1},
+                 {x: -1400, y:1100, angle: 3, borderColor: "orange", url: "demos/rssnews/rssnews.qml", device: 2},
                  {x: 1500, y:800, angle: -3, borderColor: "orange", url: "demos/boot/BootScreen.qml", device: 2},
-                 {x: 1500, y:-1100, angle: -3, borderColor: "red", url: "demos/particledemo/particledemo.qml", device: 1},
-                 {x: 2000, y: 0, angle: 5, borderColor: "red", url: "demos/photosurface/photosurface.qml", device: 1},
-                 {x: -1700, y: -900, angle: 3, borderColor: "orange", url: "demos/particledemo/particledemo.qml", device: 3},
+                 {x: 200, y:1300, angle: -8, borderColor: "orange", url: "demos/slidepuzzle/slidepuzzle.qml", device: 3}]
 
-                 {x:-2200, y:200, angle: -5, borderColor: "blue", url: "demos/samegame/samegame.qml", device: 0}
-        ]
 var widths = [375, 838, 840, 867]
 var heights = [835, 589, 763, 520]
 var scales = [0.6, 1.4, 0.8, 2]
@@ -146,12 +138,12 @@ function boundingBox(){
 
     for (var i=0; i<objects.length; i++){
         var scale = objects[i].scale;
-        var w2 = objects[i].width/2*scale;
-        var h2 = objects[i].height/2*scale;
-        var left = objects[i].x - w2;
-        var right = objects[i].x - w2;
-        var top = objects[i].y - h2;
-        var bottom = objects[i].y + h2;
+        var w2 = objects[i].width/2;
+        var h2 = objects[i].height/2;
+        var left = (objects[i].x - w2)*scale;
+        var right = (objects[i].x + w2)*scale;
+        var top = (objects[i].y - h2)*scale;
+        var bottom = (objects[i].y + h2)*scale;
 
         if (left < minX)
             minX = left;
@@ -164,7 +156,7 @@ function boundingBox(){
             maxY = bottom;
     }
 
-    return {"x": minX, "y": minY, "width": maxX-minX, "height": maxY-minY};
+    return {"x": minX, "y": minY, "width": maxX-minX, "height": maxY-minY, "centerX": (minX+maxX)/2, "centerY": (minY+maxY)/2};
 }
 
 function scaleToBox(destWidth, destHeight, sourceWidth, sourceHeight)
diff --git a/QtDemo/qml/QtDemo/images/LaunchDemoVectors-02.svg b/QtDemo/qml/QtDemo/images/LaunchDemoVectors-02.svg
new file mode 100644
index 0000000..00c2826
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/LaunchDemoVectors-02.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1280px"

+	 height="950px" viewBox="0 0 1280 950" enable-background="new 0 0 1280 950" xml:space="preserve">

+<g id="Layer_2" display="none">

+</g>

+<g id="Layer_1">

+	<g>

+		<g>

+			<polygon fill="#603813" points="362.381,512.414 489.322,647.6 860.806,447.615 1042.922,596.954 913.87,700.684 

+				366.305,801.987 211.995,710.802 			"/>

+			<polygon fill="#754C24" points="511.035,483.58 569.804,383.146 853.564,375.032 880.094,440.163 532.741,659.664 			"/>

+			<polygon fill="#42210B" points="1232.277,225.474 1240,359.406 1128.56,565.594 1143.03,609.02 1138.209,662.086 

+				843.942,849.361 508.706,932.247 529.779,884.672 895.437,696.578 1022.42,604.191 860.806,447.615 853.564,375.032 			"/>

+			<polygon fill="#8C6239" points="513.442,326.787 41.165,285.854 115.851,544.506 211.995,710.802 363.884,526.998 

+				395.245,621.067 532.741,659.664 573.75,387.095 			"/>

+			<polygon fill="#754C24" points="508.946,932.069 535.154,886.415 881.522,703.736 366.305,751.328 361.477,817.152 			"/>

+		</g>

+		<g>

+			<polygon fill="#754C24" points="84.429,199.55 40,224.71 40,272.679 84.429,272.679 			"/>

+			<polygon fill="#754C24" points="1190.62,199.55 1235.05,224.71 1235.05,272.679 1190.62,272.679 			"/>

+			<path fill="#754C24" d="M1235.05,272.864c0,115.698-267.524,209.474-597.525,209.474C307.522,482.338,40,388.562,40,272.864

+				c0-115.69,267.522-209.475,597.524-209.475C967.525,63.389,1235.05,157.174,1235.05,272.864z"/>

+		</g>

+		<path fill="#779E3F" d="M1235.05,225.474c0,115.697-267.524,209.473-597.525,209.473C307.522,434.947,40,341.171,40,225.474

+			C40,109.784,307.522,16,637.524,16C967.525,16,1235.05,109.784,1235.05,225.474z"/>

+	</g>

+	<rect fill="none" width="1280" height="950"/>

+</g>

+</svg>

diff --git a/QtDemo/qml/QtDemo/main.qml b/QtDemo/qml/QtDemo/main.qml
index d9febcc..30c37bf 100644
--- a/QtDemo/qml/QtDemo/main.qml
+++ b/QtDemo/qml/QtDemo/main.qml
@@ -7,6 +7,8 @@ Rectangle{
     clip: true
     color: "white"
     property real homeScaleFactor: .2
+    property int homeCenterX: 0
+    property int homeCenterY: 0
     property real minScaleFactor: .04
     property real maxScaleFactor: 1
     property real tapLimitX : 2
@@ -19,9 +21,10 @@ Rectangle{
 
             var bbox = Engine.boundingBox();
             app.homeScaleFactor = Engine.scaleToBox(appWidth, appHeight, bbox.width, bbox.height);
+            app.homeCenterX = bbox.centerX;
+            app.homeCenterY = bbox.centerY;
             app.minScaleFactor = app.homeScaleFactor / 10;
             app.maxScaleFactor = app.homeScaleFactor * 10;
-
             Engine.updateObjectScales(app.width, app.height);
             tapLimitX = Math.max(1,app.width * 0.02);
             tapLimitY = Math.max(1,app.height * 0.02);
@@ -34,6 +37,11 @@ Rectangle{
     onWidthChanged: calculateScales();
     onHeightChanged: calculateScales();
 
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: "#2efffd" }
+        GradientStop { position: 1.0; color: "#effffd" }
+    }
+
     MouseArea{
         id: worldMouseArea
         anchors.fill: parent
@@ -151,8 +159,8 @@ Rectangle{
 
         function goHome()
         {
-            xOffset = 0;
-            yOffset = 0;
+            xOffset = 0; //(app.homeCenterX * app.homeScaleFactor);
+            yOffset = (-app.homeCenterY * app.homeScaleFactor);
             rotationOriginX = 0;
             rotationOriginY = 0;
             angle = 0;
@@ -214,6 +222,18 @@ Rectangle{
             sourceSize: Qt.size(Style.LOGO_WIDTH, Style.LOGO_HEIGHT)
             smooth: !zoomAnimation.running
             opacity: 1.0
+            z: 2
+        }
+
+        Image {
+            id: logoIsland
+            anchors.top: logo.bottom
+            anchors.topMargin: -logo.height*0.4
+            anchors.horizontalCenter: logo.horizontalCenter
+            source: "images/LaunchDemoVectors-02.svg"
+            width: logo.width*1.5
+            height: logo.height
+            z: -2
         }
 
         transform: [