Added texts to be displayed on demo startups

Change-Id: I67010f5645f563e64075936caf9ac7d471139778
Reviewed-by: Lasse Räihä <lasse.raiha@digia.com>

4 files changed, 91 insertions, 27 deletions

diff --git a/QtDemo/qml/QtDemo/Slide.qml b/QtDemo/qml/QtDemo/Slide.qml
index b7d8b52..51eb058 100644
--- a/QtDemo/qml/QtDemo/Slide.qml
+++ b/QtDemo/qml/QtDemo/Slide.qml
@@ -27,6 +27,8 @@ Rectangle {
     property int maskVerticalOffset: 51
     property int maskHorizontalOffset: 1
 
+    property string name: ""
+
     function targetWidth()
     {
         return device <= 2 ? demoHeight*scale: demoWidth*scale;
@@ -45,6 +47,16 @@ Rectangle {
         color: "#111111"
         clip: true
         z: (slide.loading || slide.loaded) ? 1:-1
+
+        Text {
+            id: splashScreenText
+            color: 'white'
+            font.pixelSize: parent.height *.1
+            text: slide.name
+            anchors.centerIn: parent
+            smooth: true
+            visible: false
+        }
     }
 
     ShaderEffectSource{
@@ -69,7 +81,7 @@ Rectangle {
         source: slide.imageSource
         width: slide.width
         height: slide.height
-        z: -1
+        z: 2
 
         IslandElementContainer { id: leftElementcontainer; place: 0; islandHeight: islandImage.height; islandWidth: islandImage.width }
         IslandElementContainer { id: rightElementcontainer;place: 1; islandHeight: islandImage.height; islandWidth: islandImage.width }
@@ -93,13 +105,17 @@ Rectangle {
         interval: 5
         running: false
         repeat: false
-        onTriggered: load()
+        onTriggered: {
+            loadSplashScreen();
+            load()
+        }
     }
 
     function loadDemo(){
         if (!slide.loaded)
         {
-            loadSplashScreen();
+            splashScreenText.visible = true
+            demo.scheduleUpdate()
             loadTimer.start();
         }
     }
@@ -133,15 +149,16 @@ Rectangle {
         slide.loading = true
         var splash = Qt.createComponent("SplashScreen.qml");
         if (splash.status === Component.Ready)
-            splash.createObject(demoContainer, {objectName: "splashScreen"});
+            splash.createObject(demoContainer, {objectName: "splashScreen", text: slide.name});
     }
 
     function releaseSplashScreen()
     {
+        splashScreenText.visible = false
         slide.loading = false
         for (var i =0; i<demoContainer.children.length; i++){
             if (demoContainer.children[i].objectName === "splashScreen"){
-                demoContainer.children[i].destroy();
+                demoContainer.children[i].explode();
             }
         }
     }
diff --git a/QtDemo/qml/QtDemo/SplashScreen.qml b/QtDemo/qml/QtDemo/SplashScreen.qml
index deab65d..7f70d70 100644
--- a/QtDemo/qml/QtDemo/SplashScreen.qml
+++ b/QtDemo/qml/QtDemo/SplashScreen.qml
@@ -1,17 +1,63 @@
 import QtQuick 2.0
-import "engine.js" as Engine
+import QtQuick.Particles 2.0
+//based on the SmokeText component from SameGame
 
-Rectangle {
-    id: splashScreen
+Item {
+    id: root
     anchors.fill: parent
-    color: "transparent"
-
-    property int splashWidth : 100
-    Image {
-        id: splashImage
-        anchors.centerIn: parent
-        source: "QtLogo_splash.png"
-        width: splashWidth
-        height: splashWidth * 1.19
+    z:1
+
+    property alias text: txt.text
+
+    Rectangle{
+        id: background
+        anchors.fill:parent
+        color: "#111111"
+    }
+
+    ParticleSystem{
+        id: particleSystem;
+        anchors.fill: parent
+
+        Text {
+            id: txt
+            color: 'white'
+            font.pixelSize: parent.height *.1
+            anchors.centerIn: parent
+            smooth: true
+        }
+
+        Emitter {
+            id: emitter
+            anchors.fill: txt
+            enabled: false
+            emitRate: 1000
+            lifeSpan: 1500
+            size: parent.height * .2
+            endSize: parent.height * .1
+            velocity: AngleDirection { angleVariation: 360; magnitudeVariation: 160 }
+        }
+
+        ImageParticle {
+            id: smokeParticle
+            source: "images/particle-smoke.png"
+            alpha: 0.1
+            alphaVariation: 0.1
+            color: 'white'
+        }
+    }
+
+    SequentialAnimation {
+        id: anim
+        running: false
+        ScriptAction { script: emitter.pulse(100); }
+        NumberAnimation { target: txt; property: "opacity"; from: 1.0; to: 0.0; duration: 400}
+        NumberAnimation { target: background; property: "opacity"; from: 1.0; to: 0.0; duration: 1000}
+        PauseAnimation { duration: 200 }
+        onRunningChanged: if (!running) root.destroy();
+    }
+
+    function explode(){
+        anim.restart()
     }
 }
diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index 321f04c..38234b6 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -1,11 +1,11 @@
-var positions = [{x:-800, y:-800, angle: 0, borderColor: "green", url: "demos/calqlatr/Calqlatr.qml", device: 0},
-                 {x:700, y:-900, angle: 0, borderColor: "blue", url: "demos/samegame/samegame.qml", device: 1},
-                 {x:1400, y:-500, angle:5, borderColor: "grey", url: "demos/tweetsearch/tweetsearch.qml", device: 2},
-                 {x:-1800, y:-100, angle: -4, borderColor: "orange", url: "demos/rssnews/rssnews.qml", device: 3},
-                 {x:1700, y:200, angle: -3, borderColor: "orange", url: "demos/boot/BootScreen.qml", device: 4},
-                 {x:-1700, y: 800, angle: 5, borderColor: "red", url: "demos/photosurface/photosurface.qml", device: 5},
-                 {x:1600, y:1100, angle: -4, borderColor: "red", url: "demos/particledemo/particledemo.qml", device: 6},
-                 {x:-200, y:1600, angle: 3, borderColor: "orange", url: "demos/slidepuzzle/slidepuzzle.qml", device: 7}]
+var positions = [{x:-800, y:-800, angle: 0, borderColor: "green", url: "demos/calqlatr/Calqlatr.qml", device: 0, name: "Calqlatr"},
+                 {x:700, y:-900, angle: 0, borderColor: "blue", url: "demos/samegame/samegame.qml", device: 1, name: "SameGame"},
+                 {x:1400, y:-500, angle:5, borderColor: "grey", url: "demos/tweetsearch/tweetsearch.qml", device: 2, name: "TweetSearch"},
+                 {x:-1800, y:-100, angle: -4, borderColor: "orange", url: "demos/rssnews/rssnews.qml", device: 3, name: "Rss Reader"},
+                 {x:1700, y:200, angle: -3, borderColor: "orange", url: "demos/boot/BootScreen.qml", device: 4, name: "Particles"},
+                 {x:-1700, y: 800, angle: 5, borderColor: "red", url: "demos/photosurface/photosurface.qml", device: 5, name: "Photo surface"},
+                 {x:1600, y:1100, angle: -4, borderColor: "red", url: "demos/particledemo/particledemo.qml", device: 6, name: "Multitouch"},
+                 {x:-200, y:1600, angle: 3, borderColor: "orange", url: "demos/slidepuzzle/slidepuzzle.qml", device: 7, name: "Slide puzzle"}]
 
 var imageSources = ["phone1","phone2", "phone3","tablet1", "medical_device", "laptop1", "laptop2", "tv"]
 var widths = [358, 361, 366, 758, 600, 888, 888, 708]
@@ -22,11 +22,11 @@ var objects = []
 
 function initSlides(){
     positions.forEach(function(pos){
-        createNew(pos.x,pos.y,pos.angle, pos.borderColor, pos.url, pos.device)
+        createNew(pos.x,pos.y,pos.angle, pos.borderColor, pos.url, pos.device, pos.name)
     })
 }
 
-function createNew(x,y,angle,borderColor,url,device){
+function createNew(x,y,angle,borderColor,url,device,name){
     var component = Qt.createComponent("Slide.qml")
     if (component.status === Component.Ready){
         var object=component.createObject(canvas)
@@ -42,6 +42,7 @@ function createNew(x,y,angle,borderColor,url,device){
         object.rotation = angle
         object.uid = objects.length
         object.borderColor = borderColor
+        object.name = name
         object.x = x-object.width/2
         object.y = y-object.height/2
         object.createElements();
diff --git a/QtDemo/qml/QtDemo/images/particle-smoke.png b/QtDemo/qml/QtDemo/images/particle-smoke.png
new file mode 100644
index 0000000..b27f954
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/particle-smoke.png