Fixes to demo handling, added initial boot-up animation

Change-Id: I1779480fb4cdbecf91ea06f8fd6c424e6ace74b2
Reviewed-by: Lasse Räihä <lasse.raiha@digia.com>
Reviewed-by: Kimmo Ollila <kimmo.ollila@digia.com>
Reviewed-by: Marko Kangas <marko.kangas@digia.com>

13 files changed, 414 insertions, 131 deletions

diff --git a/QtDemo/qml/QtDemo/QtLogo.png b/QtDemo/qml/QtDemo/QtLogo.png
new file mode 100644
index 0000000..7b5c533
--- /dev/null
+++ b/QtDemo/qml/QtDemo/QtLogo.png
diff --git a/QtDemo/qml/QtDemo/QtLogo.svg b/QtDemo/qml/QtDemo/QtLogo.svg
deleted file mode 100644
index d0f7957..0000000
--- a/QtDemo/qml/QtDemo/QtLogo.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<!-- Created with Inkscape (http://www.inkscape.org/) by Marsupilami -->
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.0"
-   width="644"
-   height="768"
-   viewBox="-1.94121003 -1.94121003 68.58942106 81.73774406"
-   id="svg4095">
-  <defs
-     id="defs4097" />
-  <g
-     transform="translate(-173.36079,-579.1488)"
-     id="layer1">
-    <path
-       d="M 189.35054,579.28163 C 188.55516,579.15038 187.77492,579.11913 187.02091,579.17663 L 187.01954,579.17663 C 187.01954,579.17663 181.86766,579.52663 181.63329,579.54538 C 176.93066,579.92163 173.36079,583.78788 173.36079,589.12788 L 173.36079,652.09413 L 178.62691,657.00413 L 231.54979,648.10913 C 235.19191,647.47663 238.06779,643.18163 238.06779,638.54288 L 238.06779,587.26788 L 189.35054,579.28163"
-       id="path2464"
-       style="fill:#006325;fill-opacity:1;fill-rule:nonzero;stroke:none" />
-    <path
-       d="M 238.06779,638.54413 C 238.06779,643.18163 235.19191,647.47663 231.54979,648.10913 L 178.62691,657.00413 L 178.62691,588.79413 C 178.62691,582.59038 183.57817,578.33038 189.35054,579.28163 L 238.06779,587.26788 L 238.06779,638.54413"
-       id="path2466"
-       style="fill:#80c341;fill-opacity:1;fill-rule:nonzero;stroke:none" />
-    <path
-       d="M 201.42966,593.55413 C 197.65866,593.55413 194.67179,594.99788 192.52341,597.99163 C 189.97841,601.54038 188.67966,607.16038 188.67966,614.74163 C 188.67966,621.77413 189.60342,627.12788 191.46091,630.80413 C 193.29091,634.42163 195.94529,636.58163 199.33591,637.30413 C 200.07367,640.88163 201.21291,643.30038 202.77341,644.55413 C 203.95267,645.50413 205.52341,645.99163 207.46091,645.99163 C 208.04642,645.99163 208.68354,645.95163 209.33591,645.86663 L 211.55466,645.55413 L 211.55466,640.71038 C 211.21329,640.74913 210.88529,640.74163 210.58591,640.74163 C 209.55079,640.74163 208.77529,640.53538 208.27341,640.08538 C 207.62642,639.49913 207.12591,638.39288 206.80466,636.74163 C 209.99316,635.65038 212.34029,633.28163 213.86716,629.67913 C 215.36766,626.12663 216.11717,621.32788 216.11716,615.21038 C 216.11716,608.53163 215.10979,603.44538 213.05466,599.89788 C 210.96191,596.27038 207.74066,594.15913 203.30466,593.64788 C 202.66154,593.57163 202.03316,593.55413 201.42966,593.55413 z M 221.77341,596.17913 L 219.99216,603.71038 L 217.17966,603.52288 L 217.17966,608.55413 L 219.49216,608.67913 L 219.49216,627.74163 C 219.49216,630.23663 219.97992,632.04663 220.99216,633.17913 C 221.86079,634.15663 223.14166,634.64788 224.80466,634.64788 C 225.05329,634.64788 225.31979,634.63663 225.58591,634.61663 C 227.42241,634.45913 229.27341,633.95288 231.17966,633.11663 L 231.17966,628.77288 C 230.05804,629.28413 229.03267,629.59288 228.08591,629.64788 C 228.02441,629.65163 227.95803,629.64788 227.89841,629.64788 C 227.28028,629.64788 226.8218,629.45038 226.52341,629.05413 C 226.19241,628.62163 226.02341,627.67538 226.02341,626.17913 L 226.02341,608.96038 L 230.83591,609.17913 L 230.83591,604.49163 L 226.02341,604.14788 L 226.02341,596.64788 L 221.77341,596.17913 z M 202.89841,599.27288 C 203.02591,599.27288 203.17129,599.29288 203.30466,599.30413 C 205.04392,599.45663 206.34379,600.66163 207.21091,602.89788 C 208.07767,605.12288 208.49217,609.15788 208.49216,615.05413 C 208.49216,621.62413 208.05266,626.02913 207.17966,628.27288 C 206.30079,630.53913 205.02441,631.72663 203.30466,631.83538 C 203.22704,631.84038 203.13079,631.86663 203.05466,631.86663 C 201.33741,631.86663 200.05329,630.62413 199.17966,628.14788 C 198.25342,625.54788 197.77341,621.13913 197.77341,614.89788 C 197.77341,608.44038 198.24467,604.17538 199.17966,602.11663 C 200.04291,600.22788 201.28666,599.27288 202.89841,599.27288 z"
-       id="path2468"
-       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
-    <path
-       d="M 199.04829,593.55505 C 195.28166,593.55755 192.28854,595.0013 190.14204,597.99255 C 187.59653,601.5413 186.32954,607.1613 186.32954,614.74255 C 186.32955,621.77505 187.25329,627.1288 189.11079,630.80505 C 190.9413,634.42255 193.59567,636.58255 196.98579,637.30505 C 197.72354,640.88255 198.8628,643.3013 200.42329,644.55505 C 201.60253,645.50505 203.17329,645.99255 205.11079,645.99255 C 205.14741,645.99255 205.19967,645.9938 205.23579,645.99255 L 207.29829,645.99255 C 206.03316,645.97255 204.92242,645.7388 203.98579,645.30505 C 203.94328,645.2863 203.90229,645.26255 203.86079,645.24255 C 203.85691,645.24005 203.83405,645.24505 203.82954,645.24255 C 203.79153,645.2238 203.77342,645.20005 203.73579,645.18005 C 203.72854,645.1763 203.71229,645.1838 203.70454,645.18005 C 203.67028,645.1613 203.64454,645.1363 203.61079,645.11755 C 203.60003,645.1113 203.59029,645.09255 203.57954,645.0863 C 203.54928,645.07005 203.51554,645.07255 203.48579,645.05505 C 203.47116,645.04755 203.43742,645.03255 203.42329,645.0238 C 203.39691,645.0088 203.38717,644.97755 203.36079,644.9613 C 203.34316,644.9513 203.31542,644.9413 203.29829,644.93005 C 203.27528,644.91505 203.25779,644.91255 203.23579,644.8988 C 203.21429,644.88505 203.1943,644.8813 203.17329,644.86755 C 203.15516,644.85505 203.12942,644.81755 203.11079,644.80505 C 203.08641,644.7888 203.07279,644.79005 203.04829,644.7738 C 203.03416,644.76255 203.03129,644.7538 203.01704,644.74255 C 202.98879,644.72255 202.95155,644.7013 202.92329,644.68005 C 202.91391,644.67255 202.90179,644.6563 202.89204,644.6488 C 202.85491,644.62005 202.80367,644.58505 202.76704,644.55505 C 201.20653,643.3013 200.0673,640.88255 199.32954,637.30505 C 195.93891,636.58255 193.28454,634.42255 191.45454,630.80505 C 189.59704,627.1288 188.67329,621.77505 188.67329,614.74255 C 188.67329,607.1613 189.97204,601.5413 192.51704,597.99255 C 194.66541,594.9988 197.65229,593.55505 201.42329,593.55505 C 201.43553,593.55505 199.04829,593.55505 199.04829,593.55505 z M 219.51704,596.18005 L 217.79829,603.55505 L 219.98579,603.7113 L 221.76704,596.18005 L 219.51704,596.18005 z M 202.89204,599.2738 C 202.48678,599.2738 202.12542,599.3413 201.76704,599.4613 C 203.10341,599.8763 204.10342,601.02505 204.82954,602.8988 C 205.69679,605.1238 206.14204,609.1588 206.14204,615.05505 C 206.14204,621.62505 205.70254,626.03005 204.82954,628.2738 C 204.12691,630.08505 203.16154,631.21505 201.92329,631.6488 C 202.28116,631.7838 202.64542,631.86755 203.04829,631.86755 C 203.12441,631.86755 203.22067,631.8413 203.29829,631.8363 C 205.01803,631.72755 206.29442,630.54005 207.17329,628.2738 C 208.04628,626.03005 208.48579,621.62505 208.48579,615.05505 C 208.48579,609.1588 208.0713,605.1238 207.20454,602.8988 C 206.33741,600.66255 205.03755,599.45755 203.29829,599.30505 C 203.16491,599.2938 203.01954,599.2738 202.89204,599.2738 z M 214.92329,603.5238 L 214.92329,604.6488 C 215.24554,605.86255 215.51704,607.1663 215.70454,608.5863 L 217.23579,608.68005 L 217.23579,627.74255 C 217.23579,630.23755 217.75529,632.04755 218.76704,633.18005 C 219.63566,634.15755 220.91692,634.6488 222.57954,634.6488 L 224.79829,634.6488 C 223.13528,634.6488 221.85442,634.15755 220.98579,633.18005 C 219.97354,632.04755 219.48579,630.23755 219.48579,627.74255 L 219.48579,608.68005 L 217.17329,608.55505 L 217.17329,603.5238 L 214.92329,603.5238 z M 226.04829,608.9613 L 226.04829,609.0863 L 228.61079,609.18005 L 230.86079,609.18005 L 226.04829,608.9613 z M 228.95454,628.7738 C 228.27878,629.0813 227.65866,629.31755 227.04829,629.4613 C 227.29341,629.58255 227.58054,629.6488 227.92329,629.6488 C 227.98291,629.6488 228.04928,629.65255 228.11079,629.6488 C 229.05754,629.5938 230.08292,629.28505 231.20454,628.7738 L 228.95454,628.7738 z M 209.73579,640.68005 C 209.98579,640.7188 210.28453,640.74255 210.57954,640.74255 C 210.87877,640.74255 211.20704,640.7188 211.54829,640.68005 L 209.73579,640.68005 z"
-       id="path2470"
-       style="fill:#006325;fill-opacity:1;fill-rule:nonzero;stroke:none" />
-  </g>
-</svg>
-<!-- version: 20080810, original size: 64.707001 77.855324, border: 3% -->
diff --git a/QtDemo/qml/QtDemo/Slide.qml b/QtDemo/qml/QtDemo/Slide.qml
index 5aca1e8..989b3c5 100644
--- a/QtDemo/qml/QtDemo/Slide.qml
+++ b/QtDemo/qml/QtDemo/Slide.qml
@@ -3,8 +3,10 @@ import QtQuick 2.0
 Rectangle {
     id: slide
     objectName: "slide"
-    width: 1280
-    height: 800
+
+    width: device === 0 ? 375 : device === 1 ? 838 : device === 2 ? 840 : 867
+    height: device === 0 ? 835 : device === 1 ? 589 : device === 2 ? 763 : 520
+
     color: "transparent"
     border {color: app.showDebugRects ? borderColor : "transparent"; width:3}
 
@@ -14,42 +16,75 @@ Rectangle {
     property int device: 0
     property bool loaded: false
 
+
+    property int maskWidth: device === 0 ? 375 : device === 1 ? 900 : device === 2 ? 840 : 867
+    property int maskHeight: device === 0 ? 835 : device === 1 ? 661 : device === 2 ? 763 : 520
+
+    property int demoWidth: device === 0 ? 321 : device === 1 ? 735 : device === 2 ? 688 : 603
+    property int demoHeight: device === 0 ? 481 : device === 1 ? 460 : device === 2 ? 462 : 378
+
+    property int maskVerticalOffset: device === 0 ? 44 : device === 1 ? 37 : device === 2 ? 91 :  51
+    property int maskHorizontalOffset: device === 0 ? -2 : device === 1 ? -5 : device === 2 ? 0 : 1
+
+
     Rectangle{
         id: demoContainer
         anchors.centerIn: parent
-        width: device === 0 ? 320 : device !== 3 ? 700 : 620
-        height: device === 0 ? 480 : device !== 3 ? 480 : 400
+        width: demoWidth
+        height: demoHeight
         color: "black"
         clip: true
+        z: slide.loaded ? 1:-1
     }
 
-    ShaderEffectSource {
-        id: disabledImage
-        anchors.fill: demoContainer
+    ShaderEffectSource{
+        id: demo
+        anchors.centerIn: parent
+        width: demoWidth
+        height: demoHeight
         sourceItem: demoContainer
-        live: false
-        visible: !slide.loaded
+        live: slide.loaded
+        visible: true
+        smooth: false
+        hideSource: true
+        clip: true
+        z: slide.loaded ? 1:-1
     }
 
+//    ShaderEffectSource {
+//        id: disabledImage
+//        anchors.centerIn: demoContainer
+//        width: demoContainer.width
+//        height: demoContainer.height
+//        sourceItem: demoContainer
+//        live: false
+//        visible: true
+//        smooth: false
+//        z: slide.loaded ? -1:1
+//    }
+
+
     Image {
         id: deviceMaskImage
         anchors.centerIn: parent
-        anchors.verticalCenterOffset: device < 2 ? 45 : device === 2 ? 90 : device !== 3 ? 0: 50
-        anchors.horizontalCenterOffset: -2
+        anchors.verticalCenterOffset: maskVerticalOffset
+        anchors.horizontalCenterOffset: maskHorizontalOffset
         source: device === 0 ? "images/iPhone_mask.png" :
                                device === 1 ? "images/Tablet_mask.png" :
                                               device === 2 ? "images/MedicalDevice_mask.png" :
                                                              device === 3 ? "images/Laptop_mask.png" :
                                                                             ""
-        width: device === 0 ? 375 : device === 1 ? 838 : device === 2 ? 838 : 867
-        height: device === 0 ? 835 : device === 1 ? 589 : device === 2 ? 762 : 520
-        sourceSize: device === 0 ? Qt.size(375, 835) : device === 1 ? Qt.size(839, 589) : device === 2 ? Qt.size(838, 762) : Qt.size(867, 520)
+        width: maskWidth
+        height: maskHeight
+        sourceSize: Qt.size(maskWidth, maskHeight)
+        z: 2
     }
 
     function loadDemo(){
         if (!slide.url || slide.loaded) return;
 
         var component = Qt.createComponent(slide.url);
+        print ("CREATED COMPONENT FROM: "+slide.url)
         var incubator = component.incubateObject(demoContainer, {
                                                      x: 0,
                                                      y: 0,
@@ -59,13 +94,13 @@ Rectangle {
             incubator.onStatusChanged = function(status) {
                 if (status === Component.Ready) {
                     print ("Object", incubator.object, "is now ready!");
-                    disabledImage.scheduleUpdate()
+                    //disabledImage.scheduleUpdate()
                     slide.loaded = true
                 }
             }
         } else {
             print ("Object", incubator.object, "is ready immediately!");
-            disabledImage.scheduleUpdate()
+            //disabledImage.scheduleUpdate()
             slide.loaded = true
         }
     }
@@ -84,4 +119,13 @@ Rectangle {
     Component.onCompleted: {
         print ("new slide created!")
     }
+
+//    Rectangle{
+//        id: debug
+//        anchors.fill: demoContainer
+//        color: "transparent"
+//        z: 100
+//        border {color: "red"; width:3}
+//    }
+
 }
diff --git a/QtDemo/qml/QtDemo/demos/boot/BootScreen.qml b/QtDemo/qml/QtDemo/demos/boot/BootScreen.qml
new file mode 100644
index 0000000..7e665c2
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/boot/BootScreen.qml
@@ -0,0 +1,42 @@
+import QtQuick 2.0
+
+Rectangle {
+    id: root
+    color: "transparent"
+    clip: true
+    anchors.fill: parent
+
+//    NumberAnimation{
+//        id: fadeOutAnimation
+//        target: root
+//        property: "opacity"
+//        from: 1.0
+//        to: .0
+//        duration: 500
+//        onRunningChanged: if (!running) root.destroy()
+//    }
+
+    Behavior on opacity {NumberAnimation{duration: 300}}
+
+    BootScreenDemo{
+        width: 500
+        height: 500
+        anchors.centerIn: parent
+        onFinished: {
+            root.opacity=0.0
+            root.destroy() //fadeOutAnimation.restart()
+        }
+  }
+
+    MouseArea{
+        id: eventEater
+        anchors.fill: parent
+        onClicked: {
+//            root.opacity=0.0
+//            root.destroy()
+        }
+        //fadeOutAnimation.restart()
+    }
+
+    Component.onDestruction: print ("BootScreen released!")
+}
diff --git a/QtDemo/qml/QtDemo/demos/boot/BootScreenDemo.qml b/QtDemo/qml/QtDemo/demos/boot/BootScreenDemo.qml
new file mode 100644
index 0000000..28f2358
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/boot/BootScreenDemo.qml
@@ -0,0 +1,152 @@
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Item {
+    id: root
+
+    property real size: Math.min(root.width, root.height);
+    signal finished()
+
+    SequentialAnimation {
+        id: entryAnimation
+        ParallelAnimation {
+            SequentialAnimation {
+                PropertyAction { target: sphereSystem; property: "running"; value: true }
+                PropertyAction { target: starSystem; property: "running"; value: true }
+                PauseAnimation { duration: 300 }
+                PropertyAction { target: sphereEmitter; property: "emitRate"; value: 2000 }
+                PropertyAction { target: starEmitter; property: "emitRate"; value: 2000 }
+                PauseAnimation { duration: 500 }
+                ScriptAction { script: {
+                        starAccel.x = 50
+                        starAccel.xVariation = 200;
+                        starAccel.yVariation = 200;
+                        sphereAccel.x = -50
+                        sphereAccel.xVariation = 200
+                        sphereAccel.yVariation = 200
+                        sphereParticle.alpha = 0;
+                    }
+                }
+                PauseAnimation { duration: 300 }
+                PropertyAction { target: starEmitter; property: "enabled"; value: false }
+                PropertyAction { target: sphereEmitter; property: "enabled"; value: false }
+                PauseAnimation { duration: 5000 }
+            }
+            SequentialAnimation {
+                PauseAnimation { duration: 5000 }
+                NumberAnimation { target: label; property: "opacity"; to: 1; duration: 500 }
+                NumberAnimation { target: label; property: "opacity"; to: 0; duration: 100 }
+            }
+        }
+        ScriptAction { script: {
+                engine.markIntroAnimationDone();
+            }
+        }
+    }
+
+    Item {
+        id: engine
+        property bool bootAnimationEnabled: true
+        function markIntroAnimationDone() {
+            root.finished()
+        }
+    }
+
+    Component.onCompleted: {
+        if (engine.bootAnimationEnabled) {
+            entryAnimation.running = true
+        } else {
+            engine.markIntroAnimationDone()
+        }
+    }
+
+    Item {
+        id: logo;
+        width: root.size  / 2;
+        height: root.size  / 2;
+        anchors.centerIn: parent
+        //anchors.verticalCenterOffset: -root.size * 0.1
+    }
+
+    Text {
+        id: label
+
+        anchors.horizontalCenter: logo.horizontalCenter
+        anchors.top: logo.bottom
+
+        font.pixelSize: size * 0.1
+        color: "black"
+        text: ""  //"Qt 5.1"
+        opacity: 0
+    }
+
+    ParticleSystem {
+        id: sphereSystem;
+        anchors.fill: logo
+
+        running: false
+
+        ImageParticle {
+            id: sphereParticle
+            source: "images/particle.png"
+            color: "#80c342"
+            alpha: 1
+            colorVariation: 0.0
+        }
+
+        Emitter {
+            id: sphereEmitter
+            anchors.fill: parent
+            emitRate: 50
+            lifeSpan: 4000
+            size: 24
+            sizeVariation: 8
+            velocity: PointDirection { xVariation: 2; yVariation: 2; }
+
+            acceleration: PointDirection {
+                id: sphereAccel
+                xVariation: 1;
+                yVariation: 1;
+            }
+
+            shape: MaskShape {
+                source: "images/qt-logo-green-mask.png"
+            }
+        }
+    }
+
+    ParticleSystem {
+        id: starSystem;
+        anchors.fill: logo
+
+        running: false
+
+        ImageParticle {
+            id: starParticle
+            source: "images/particle_star.png"
+            color: "#ffffff"
+            alpha: 0
+            colorVariation: 0
+        }
+
+        Emitter {
+            id: starEmitter
+            anchors.fill: parent
+            emitRate: 50
+            lifeSpan: 5000
+            size: 32
+            sizeVariation: 8
+
+            velocity: PointDirection { xVariation: 1; yVariation: 1; }
+            acceleration: PointDirection {
+                id: starAccel
+                xVariation: 0;
+                yVariation: 0;
+            }
+
+            shape: MaskShape {
+                source: "images/qt-logo-white-mask.png"
+            }
+        }
+    }
+}
diff --git a/QtDemo/qml/QtDemo/demos/boot/images/particle.png b/QtDemo/qml/QtDemo/demos/boot/images/particle.png
new file mode 100644
index 0000000..7520c9b
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/boot/images/particle.png
diff --git a/QtDemo/qml/QtDemo/demos/boot/images/particle_star.png b/QtDemo/qml/QtDemo/demos/boot/images/particle_star.png
new file mode 100644
index 0000000..5660d27
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/boot/images/particle_star.png
diff --git a/QtDemo/qml/QtDemo/demos/boot/images/qt-logo-green-mask.png b/QtDemo/qml/QtDemo/demos/boot/images/qt-logo-green-mask.png
new file mode 100644
index 0000000..84be10d
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/boot/images/qt-logo-green-mask.png
diff --git a/QtDemo/qml/QtDemo/demos/boot/images/qt-logo-white-mask.png b/QtDemo/qml/QtDemo/demos/boot/images/qt-logo-white-mask.png
new file mode 100644
index 0000000..920eeee
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/boot/images/qt-logo-white-mask.png
diff --git a/QtDemo/qml/QtDemo/demos/particledemo/particledemo.qml b/QtDemo/qml/QtDemo/demos/particledemo/particledemo.qml
index 3ee4b0f..c397f5b 100644
--- a/QtDemo/qml/QtDemo/demos/particledemo/particledemo.qml
+++ b/QtDemo/qml/QtDemo/demos/particledemo/particledemo.qml
@@ -2,14 +2,11 @@ import QtQuick 2.0
 import QtQuick.Particles 2.0
 
 Rectangle {
-    width: 800
-    height: 480
-    color: "blue"
-
+    color: "#000022"
+    anchors.fill: parent
     ParticleSystem {
         id: system
-        width: 640
-        height: 480
+        anchors.fill: parent
         running: true
 
         Emitter {
diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index b944f75..e0e629a 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -1,13 +1,25 @@
-var positions = [{x:1300, y:-500, angle: 0, borderColor: "blue", scale: .6, url: "demos/calqlatr/Calqlatr.qml", device: 0},
-        {x:-1200, y:200, angle:0, borderColor: "grey", scale: .6, url: "demos/tweetsearch/tweetsearch.qml", device: 0},
-        {x:-1600, y:-1300, angle: 0, borderColor: "green", scale: .6, url: "demos/samegame/samegame.qml", device: 0},
-        {x:-1300, y:1500, angle: 0, borderColor: "red", scale: 1.4, url: "demos/particledemo/particledemo.qml", device: 1},
-        {x: 1700, y: 1100, angle:0, borderColor: "lime", scale: .6, url: "demos/calqlatr/Calqlatr.qml", device: 0},
-        {x:50, y:-1500, angle: 0, borderColor: "black", scale: .6, url: "demos/tweetsearch/tweetsearch.qml", device: 0},
-        {x: 1200, y:-1600, angle: 0, borderColor: "orange", scale: .8, url: "demos/particledemo/particledemo.qml", device: 2},
-        {x: 500, y:1400, angle: 0, borderColor: "orange", scale: 2, url: "demos/particledemo/particledemo.qml", device: 3}
+var positions = [{x:700, y:-400, angle: 0, borderColor: "blue", scale: .6, url: "demos/samegame/samegame.qml", device: 0},
+        {x:1200, y:-200, angle:5, borderColor: "grey", scale: .6, url: "demos/tweetsearch/tweetsearch.qml", device: 0},
+        {x:-700, y:-300, angle: 2, borderColor: "green", scale: .6, url: "demos/calqlatr/Calqlatr.qml", device: 0},
+        {x:-1300, y:400, angle: -2, borderColor: "red", scale: 1.4, url: "demos/particledemo/particledemo.qml", device: 1},
+        {x: 900, y: 200, angle: 0, borderColor: "lime", scale: .6, url: "demos/tweetsearch/tweetsearch.qml", device: 0},
+        {x:-300, y:-900, angle: 8, borderColor: "black", scale: .6, url: "demos/calqlatr/Calqlatr.qml", device: 0},
+        {x: 300, y:-1000, angle: 0, borderColor: "orange", scale: .8, url: "demos/particledemo/particledemo.qml", device: 2},
+        {x: 200, y:1100, angle: -8, borderColor: "orange", scale: 2, url: "demos/particledemo/particledemo.qml", device: 3},
+
+        {x: -1300, y:1100, angle: 3, borderColor: "orange", scale: .8, url: "demos/boot/BootScreen.qml", device: 2},
+        {x: 1500, y:800, angle: -3, borderColor: "orange", scale: .8, url: "demos/boot/BootScreen.qml", device: 2},
+        {x: 1500, y:-1100, angle: -3, borderColor: "red", scale: 1.4, url: "demos/particledemo/particledemo.qml", device: 1},
+        {x: 2000, y: 0, angle: 5, borderColor: "red", scale: 1.4, url: "demos/photosurface/photosurface.qml", device: 1},
+        {x: -1700, y: -900, angle: 3, borderColor: "orange", scale: 2, url: "demos/particledemo/particledemo.qml", device: 3},
+
+        {x:-2200, y:200, angle: -5, borderColor: "blue", scale: .6, url: "demos/samegame/samegame.qml", device: 0}
         ]
 
+var order = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
+var currentOrderIndex = 0
+
+var currentDemoId = -1
 var objects = []
 
 function initSlides(){
@@ -16,26 +28,39 @@ function initSlides(){
     })
 }
 
+function showBootScreen(){
+    print ("Show BootScreen")
+    var component = Qt.createComponent("demos/boot/BootScreen.qml")
+    print ("component on: "+component)
+
+    if (component.status === Component.Ready){
+        print ("ready!!!")
+        component.createObject(app)
+    }
+}
+
 function createNew(x,y,angle,borderColor,scale,url,device){
     var component = Qt.createComponent("Slide.qml")
-    if (component.status === Component.Ready)
+    if (component.status === Component.Ready){
     var object=component.createObject(canvas)
-    object.x = x-object.width/2
-    object.y = y-object.height/2
+    object.device = device
     object.rotation = angle
     object.scale = scale
     object.uid = objects.length+1 //TODO make unique
                                   //in future objects will also
                                   //get destroyed and re-created
     object.borderColor = borderColor
-    object.device = device
+    object.x = x-object.width/2
+    object.y = y-object.height/2
 
 
     if (url){
         object.url = url;
         //object.loadDemo() //loads demo app to slide
     }
+    print ("object.url: "+object.url)
     objects.push(object)
+    }
 }
 
 function lookForSlides(x,y,angle){
@@ -60,6 +85,12 @@ function lookForSlides(x,y,angle){
     return selectTarget(null) //random
 }
 
+function loadCurrentDemo(){
+    if (currentDemoId != -1){
+        objects[currentDemoId].loadDemo();
+    }
+}
+
 function selectTarget(uid){
 
     var idx = -1;
@@ -72,12 +103,12 @@ function selectTarget(uid){
             }
         }
         if (idx !== -1){
-            objects[idx].loadDemo();
+            currentDemoId = idx
             return {"x": positions[idx].x, "y":  positions[idx].y, "angle": positions[idx].angle, "scale": positions[idx].scale}
         }
 
     //randomly select new target for now
     idx = Math.floor(Math.random()*positions.length)
-    objects[idx].loadDemo();
+    currentDemoId = idx //objects[idx].loadDemo();
     return {"x": positions[idx].x, "y":  positions[idx].y, "angle": positions[idx].angle, "scale": positions[idx].scale}
 }
diff --git a/QtDemo/qml/QtDemo/main.qml b/QtDemo/qml/QtDemo/main.qml
index 5159d20..12296ff 100644
--- a/QtDemo/qml/QtDemo/main.qml
+++ b/QtDemo/qml/QtDemo/main.qml
@@ -1,13 +1,14 @@
 import QtQuick 2.0
 import "engine.js" as Engine
+import "style.js" as Style
 
-Item{
+Rectangle{
     id: app
-    width: 1280
-    height: 800
+    width: Style.APP_WIDTH
+    height: Style.APP_HEIGHT
     clip: true
-
-    property bool showDebugRects: false
+    color: "white"
+    property bool showDebugRects: false //true
 
     Rectangle{
         anchors.centerIn: parent
@@ -27,6 +28,7 @@ Item{
 
     MouseArea{
         id: worldMouseArea
+        enabled: !zoomAnimation.running && !zoomFlyByAnimation.running
 
         property int startX: 0
         property int startY: 0
@@ -35,7 +37,7 @@ Item{
         property int oldY: 0
 
         property bool panning: false
-        property bool flicking: false
+        //property bool flicking: false
 
         anchors.fill: parent
 
@@ -46,53 +48,32 @@ Item{
             canvas.rotationOriginX = 0
             canvas.rotationOriginY = 0
             canvas.angle = 0
+            canvas.zoomInTarget = 0.2
 
-            //canvas.zoomOutTarget = .4
-            //canvas.scalingFactor = 5
-            canvas.zoomInTarget = 0.2 //1.0/canvas.scalingFactor
-
-            zoomOutAnimation.restart()
+            zoomAnimation.restart()
         }
 
         onClicked: {
+            print ("MOUSEAREA CLICKED!: "+mouse.x +", "+mouse.y)
             var target = null;
             var velocity = 0;
 
-            if (flicking){
-                var a=mouse.x-startX;
-                var b=mouse.y-startY;
-
-                velocity = Math.sqrt(a*a+b*b)
-
-                if (velocity < 10) flicking = false
-            }
-
-            if (flicking) {
-                print ("flick gesture recognized")
-
-                var angle = Math.atan2(-(mouse.y-startY),-(mouse.x-startX))*57.2957795
-                target = Engine.lookForSlides(mouse.x, mouse.y, angle)
-
-            } else if (panning) {
-                panning = false
-                return
-            }
+            panning = false;
 
             if (!target){
 
                 var object = mapToItem(canvas, mouse.x, mouse.y)
                 var item = canvas.childAt(object.x,object.y)
 
-
                 if (item && item.objectName === 'slide') {
                     target = Engine.selectTarget(item.uid)
                 } else {
                     //select random target for now...
-                    target = Engine.selectTarget(null)
+                    //target = Engine.selectTarget(null)
                 }
             }
-            panning = false;
 
+            if (!target) return
             canvas.xOffset = -target.x
             canvas.yOffset = -target.y
             canvas.rotationOriginX = target.x
@@ -100,9 +81,11 @@ Item{
             canvas.angle = -target.angle
 
             canvas.zoomOutTarget = .4
-            canvas.zoomInTarget = 1.0/target.scale
 
-            zoomFlyByAnimation.restart()
+            canvas.zoomInTarget = 1.0/(target.scale)
+
+                //zoomFlyByAnimation.restart()
+                zoomAnimation.restart()
         }
 
         onPressed: {
@@ -110,12 +93,14 @@ Item{
             startY = mouse.y
             oldX = mouse.x
             oldY = mouse.y
-            flicking = true
-            flickTimer.restart()
+            //flicking = true
+            //flickTimer.restart()
         }
 
         onPositionChanged: {
-            panning= true
+            //if (!panning && (Math.abs(mouse.x-startX) >20 || Math.abs(mouse.x-startX) >20)){
+                panning= true
+            //}
 
             canvas.xOffset+=(mouse.x - oldX)
             canvas.yOffset+=(mouse.y - oldY)
@@ -126,14 +111,39 @@ Item{
 
         //onFlickingChanged: print ("Flicking changed to: "+flicking)
 
-        Timer {
-            id: flickTimer
-            interval: 200  //Adjust suitable interval for flicking gesture
-            repeat: false
-            onTriggered: {
-                worldMouseArea.flicking = false
+    }
+    Item{
+        id: pinchProxy
+        scale:.2
+        onRotationChanged: canvas.angle=rotation
+        onScaleChanged: canvas.scalingFactor=scale
+    }
+
+    PinchArea{
+        id: worldPinchArea
+        anchors.fill: parent
+        pinch.target: pinchProxy
+        pinch.minimumScale: .2
+        pinch.maximumScale: 5
+        pinch.maximumRotation: 360
+        pinch.minimumRotation: -360
+        enabled: !zoomAnimation.running && !zoomFlyByAnimation.running
+
+        property bool pinching: false
+
+        onPinchStarted: {
+            pinching = true
+            pinchProxy.rotation = canvas.angle
+            pinchProxy.scale = canvas.scalingFactor
+
+            if (canvas.scalingFactor>1){
+            var object = mapToItem(canvas, pinch.center.x, pinch.center.y)
+
+            canvas.rotationOriginX = object.x
+            canvas.rotationOriginY = object.y
             }
         }
+        onPinchFinished: pinching = false;
     }
 
     Item{
@@ -147,7 +157,7 @@ Item{
         property real xOffset: 0
         property real yOffset: 0
         property real angle: 0
-        property real scalingFactor: .1
+        property real scalingFactor: .2
 
         property real zoomInTarget: 1
         property real zoomOutTarget: .4
@@ -155,22 +165,38 @@ Item{
         property real rotationOriginX
         property real rotationOriginY
 
-        Behavior on angle {RotationAnimation{duration: 1000; direction: RotationAnimation.Shortest}}
+        Behavior on angle {
+            RotationAnimation{
+                duration: Style.APP_ANIMATION_DELAY
+                direction: RotationAnimation.Shortest
+            }
+            enabled: !worldPinchArea.pinching
+        }
 
         Behavior on xOffset {
             id: xOffsetBehaviour
             enabled: !worldMouseArea.panning
-            NumberAnimation{duration: 1000}
+            NumberAnimation{duration: Style.APP_ANIMATION_DELAY}
         }
 
         Behavior on yOffset {
             id: yOffsetBehaviour
             enabled: !worldMouseArea.panning
-            NumberAnimation{duration: 1000}
+            NumberAnimation{duration: Style.APP_ANIMATION_DELAY}
         }
 
-        Behavior on rotationOriginX {NumberAnimation{duration: 1000}}
-        Behavior on rotationOriginY {NumberAnimation{duration: 1000}}
+        Behavior on rotationOriginX {
+            NumberAnimation{
+                duration: Style.APP_ANIMATION_DELAY
+            }
+            enabled: !worldPinchArea.pinching
+        }
+        Behavior on rotationOriginY {
+            NumberAnimation{
+                duration: Style.APP_ANIMATION_DELAY
+            }
+            enabled: !worldPinchArea.pinching
+        }
 
         //        Rectangle{
         //            anchors.centerIn: parent
@@ -183,13 +209,19 @@ Item{
 
         Image{
             id: logo
-            //Qt logo image taken 28.3.2013 from: http://upload.wikimedia.org/wikipedia/de/0/08/Qt_(Bibliothek)_logo.svg
-            source: "QtLogo.svg"
+            source: "QtLogo.png"
             anchors.centerIn: parent
-            width: 503*2
-            height: 600*2
-            sourceSize: Qt.size(503*2,600*2)
+            width: Style.LOGO_WIDTH
+            height: Style.LOGO_HEIGHT
+            sourceSize: Qt.size(Style.LOGO_WIDTH, Style.LOGO_HEIGHT)
             smooth: !zoomFlyByAnimation.running
+            opacity: .0
+            Behavior on opacity {
+                SequentialAnimation{
+                    PauseAnimation {duration: 800}
+                    NumberAnimation {duration: 300}
+                }
+            }
         }
 
         transform: [
@@ -213,21 +245,34 @@ Item{
 
     SequentialAnimation{
         id: zoomFlyByAnimation
-        NumberAnimation { target: canvas; property: "scalingFactor"; duration: 500; to:canvas.zoomOutTarget; easing.type: Easing.OutCubic }
-        NumberAnimation { target: canvas; property: "scalingFactor"; duration: 500; to:canvas.zoomInTarget; easing.type: Easing.InCubic }
+        NumberAnimation { target: canvas; property: "scalingFactor"; duration: Style.APP_ANIMATION_DELAY/2; to:canvas.zoomOutTarget; easing.type: Easing.OutCubic }
+        NumberAnimation { target: canvas; property: "scalingFactor"; duration: Style.APP_ANIMATION_DELAY/2; to:canvas.zoomInTarget; easing.type: Easing.InCubic }
         //NumberAnimation { target: canvas; property: "scalingFactor"; duration: 600; to:canvas.zoomInTarget; easing.type: Easing.OutBounce }
     }
 
     SequentialAnimation{
-        id: zoomOutAnimation
+        id: zoomAnimation
         alwaysRunToEnd: true
-        NumberAnimation { target: canvas; property: "scalingFactor"; duration: 1500; to:canvas.zoomInTarget; easing.type: Easing.OutCubic }
+        NumberAnimation { target: canvas; property: "scalingFactor"; duration: Style.APP_ANIMATION_DELAY; to:canvas.zoomInTarget }
         onStarted: zoomFlyByAnimation.stop()
+        onRunningChanged: {
+            if (!running && canvas.zoomInTarget !== .2){
+                print ("zoomanimation calls loaddemo")
+                Engine.loadCurrentDemo();
+            }
+        }
     }
 
     NavigationPanel{
         anchors{top:parent.top; right:parent.right}
     }
 
-    Component.onCompleted: Engine.initSlides()
+
+    Component.onCompleted: {
+
+        logo.opacity=1.0
+        Engine.showBootScreen()
+
+        Engine.initSlides()
+    }
 }
diff --git a/QtDemo/qml/QtDemo/style.js b/QtDemo/qml/QtDemo/style.js
new file mode 100644
index 0000000..e7cb85e
--- /dev/null
+++ b/QtDemo/qml/QtDemo/style.js
@@ -0,0 +1,7 @@
+var APP_WIDTH = 1280
+var APP_HEIGHT = 800
+
+var APP_ANIMATION_DELAY = 1000
+
+var LOGO_WIDTH = 1006
+var LOGO_HEIGHT = 1200