Added videos. Added group-navigation.

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

18 files changed, 246 insertions, 47 deletions

diff --git a/QtDemo/qml/QtDemo/Group.qml b/QtDemo/qml/QtDemo/Group.qml
new file mode 100644
index 0000000..a105ce7
--- /dev/null
+++ b/QtDemo/qml/QtDemo/Group.qml
@@ -0,0 +1,30 @@
+import QtQuick 2.0
+
+Item {
+    id: group
+    objectName: "group"
+
+    property int uid: 0
+    property real targetScale: 1
+    property string name: "TestText"
+    property int textX: 0
+    property int textY: 0
+    property int fontSize: (width+height) * 0.05
+
+    Text {
+        text: group.name
+        x: textX
+        y: textY
+        font.pixelSize: group.fontSize
+        color: "black"
+        font.bold: true
+        Text {
+            text: group.name
+            color: "white"
+            x:5
+            y:5
+            font.bold: true
+            font.pixelSize: group.fontSize
+        }
+    }
+}
diff --git a/QtDemo/qml/QtDemo/NavigationPanel.qml b/QtDemo/qml/QtDemo/NavigationPanel.qml
index 8bf2d9e..ce1e9cc 100644
--- a/QtDemo/qml/QtDemo/NavigationPanel.qml
+++ b/QtDemo/qml/QtDemo/NavigationPanel.qml
@@ -41,6 +41,6 @@ Grid {
     Button {
         id: homeButton
         imageSource: "images/btn_home.png"
-        onClicked: canvas.goHome()
+        onClicked: canvas.goBack()
     }
 }
diff --git a/QtDemo/qml/QtDemo/Slide.qml b/QtDemo/qml/QtDemo/Slide.qml
index 38b14d4..77e316f 100644
--- a/QtDemo/qml/QtDemo/Slide.qml
+++ b/QtDemo/qml/QtDemo/Slide.qml
@@ -5,6 +5,7 @@ Item {
     objectName: "slide"
 
     property int uid: 0
+    property int gid: 0
     property string url: ""
     property int device: 0
     property string imageSource: ""
diff --git a/QtDemo/qml/QtDemo/WorldCanvas.qml b/QtDemo/qml/QtDemo/WorldCanvas.qml
index 2fdbb08..1ce4a8d 100644
--- a/QtDemo/qml/QtDemo/WorldCanvas.qml
+++ b/QtDemo/qml/QtDemo/WorldCanvas.qml
@@ -45,7 +45,7 @@ Item{
             zoomInTarget = target.targetScale;
             if (updateScalingFactor)
                 scalingFactor = zoomInTarget
-            app.navigationState = 1 //slide
+            app.navigationState = target.navState
         }
     }
 
@@ -58,6 +58,16 @@ Item{
         navigationAnimation.restart()
     }
 
+    function goBack()
+    {
+        if (app.navigationState == 2) {
+            goTo(app.getCurrentGroup(), false)
+            zoomAnimation.restart()
+        }
+        else
+            canvas.goHome()
+    }
+
     Behavior on angle {
         RotationAnimation{
             duration: Style.APP_ANIMATION_DELAY
diff --git a/QtDemo/qml/QtDemo/WorldMouseArea.qml b/QtDemo/qml/QtDemo/WorldMouseArea.qml
index 28bc6a4..0c8138e 100644
--- a/QtDemo/qml/QtDemo/WorldMouseArea.qml
+++ b/QtDemo/qml/QtDemo/WorldMouseArea.qml
@@ -21,13 +21,16 @@ MouseArea{
             var target = null;
             var object = mapToItem(canvas, mouse.x, mouse.y)
             var item = canvas.childAt(object.x,object.y)
-            if (item && item.objectName === 'slide') {
-                target = app.selectTarget(item.uid)
+            if (item) {
+                if (item.objectName === 'slide')
+                    target = app.selectTarget(item.uid)
+                else if (item.objectName === 'group')
+                    target = app.selectGroup(item.uid)
             }
 
             // If we found target, go to the target
             if (target) {
-                canvas.goTo(target, false)
+                canvas.goTo(target, false, item.objectName === 'slide' ? 2 : 1)
                 zoomAnimation.restart()
             }
             else // If not target under mouse -> go home
@@ -55,7 +58,7 @@ MouseArea{
             panning = true;
             canvas.xOffset += dx;
             canvas.yOffset += dy;
-            app.navigationState = 2 //dirty
+            app.navigationState = 3 //dirty
         }
     }
     onWheel: {
diff --git a/QtDemo/qml/QtDemo/demos/description/ControlBar.qml b/QtDemo/qml/QtDemo/demos/description/ControlBar.qml
index 02aeaf8..7568468 100644
--- a/QtDemo/qml/QtDemo/demos/description/ControlBar.qml
+++ b/QtDemo/qml/QtDemo/demos/description/ControlBar.qml
@@ -57,8 +57,10 @@ Item {
             id: closeMouseArea
             anchors.fill: parent
             onClicked: {
-                if (mediaPlayer !== null)
+                if (mediaPlayer !== null) {
                     mediaPlayer.stop();
+                    mediaPlayer.source = "";
+                }
 
                 videoSelector.show();
             }
diff --git a/QtDemo/qml/QtDemo/demos/description/VideoDelegate.qml b/QtDemo/qml/QtDemo/demos/description/VideoDelegate.qml
index 0c0e22d..d49a30d 100644
--- a/QtDemo/qml/QtDemo/demos/description/VideoDelegate.qml
+++ b/QtDemo/qml/QtDemo/demos/description/VideoDelegate.qml
@@ -54,11 +54,11 @@ Rectangle {
         Text {
             id: titleText
             anchors.left: parent.left
-            anchors.leftMargin: tileMargin
+            anchors.leftMargin: tileMargin/3
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: tileMargin
+            anchors.bottomMargin: tileMargin/3
             anchors.right: parent.right
-            anchors.rightMargin: tileMargin
+            anchors.rightMargin: tileMargin/3
 
             color: videoSelector.textColor
             text: title
diff --git a/QtDemo/qml/QtDemo/demos/description/VideoSelector.qml b/QtDemo/qml/QtDemo/demos/description/VideoSelector.qml
index 2c9a661..0b81da7 100644
--- a/QtDemo/qml/QtDemo/demos/description/VideoSelector.qml
+++ b/QtDemo/qml/QtDemo/demos/description/VideoSelector.qml
@@ -5,7 +5,7 @@ Rectangle {
     id: videoSelector
     color: "transparent"
     property int tileHeight: parseInt(grid.height / 2)
-    property int tileMargin: tileHeight * 0.05
+    property int tileMargin: tileHeight * 0.1
     property int tileFontSize: tileHeight * 0.05
     property string tileBackground: "#262626"
     property string textColor: "white"
@@ -22,7 +22,7 @@ Rectangle {
 
     XmlListModel {
         id: videoModel
-        source: "videos.xml"
+        source: "qt5_videos.xml"
         query: "/videolist/item"
         XmlRole  { name: "thumbnail"; query: "thumbnail/string()" }
         XmlRole { name: "title"; query: "title/string()" }
diff --git a/QtDemo/qml/QtDemo/demos/description/qt5_video_jens.png b/QtDemo/qml/QtDemo/demos/description/qt5_video_jens.png
new file mode 100644
index 0000000..84f3bce
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/description/qt5_video_jens.png
diff --git a/QtDemo/qml/QtDemo/demos/description/qt5_video_kenneth.png b/QtDemo/qml/QtDemo/demos/description/qt5_video_kenneth.png
new file mode 100644
index 0000000..eecb297
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/description/qt5_video_kenneth.png
diff --git a/QtDemo/qml/QtDemo/demos/description/qt5_video_lars.png b/QtDemo/qml/QtDemo/demos/description/qt5_video_lars.png
new file mode 100644
index 0000000..51e0701
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/description/qt5_video_lars.png
diff --git a/QtDemo/qml/QtDemo/demos/description/qt5_video_samuel.png b/QtDemo/qml/QtDemo/demos/description/qt5_video_samuel.png
new file mode 100644
index 0000000..1ed97c1
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/description/qt5_video_samuel.png
diff --git a/QtDemo/qml/QtDemo/demos/description/qt5_video_simon.png b/QtDemo/qml/QtDemo/demos/description/qt5_video_simon.png
new file mode 100644
index 0000000..583c564
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/description/qt5_video_simon.png
diff --git a/QtDemo/qml/QtDemo/demos/description/qt5_video_thiago.png b/QtDemo/qml/QtDemo/demos/description/qt5_video_thiago.png
new file mode 100644
index 0000000..abf8522
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/description/qt5_video_thiago.png
diff --git a/QtDemo/qml/QtDemo/demos/description/qt5_videos.xml b/QtDemo/qml/QtDemo/demos/description/qt5_videos.xml
new file mode 100644
index 0000000..420e476
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/description/qt5_videos.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>

+<videolist>

+    <item>

+        <title>Lars Knoll: The Making of Qt 5</title>

+        <thumbnail>qt5_video_lars.png</thumbnail>

+        <link>http://download.qt-project.org/learning/videos/Lars_Knoll_The_Making_of_Qt_5.mp4</link>

+    </item>

+    <item>

+        <title>Qt 5: Jens Bache-Wiig on Qt 5 and Qt Quick</title>

+        <thumbnail>qt5_video_jens.png</thumbnail>

+        <link>http://download.qt-project.org/learning/videos/Qt5_Jens_Bache-Wiig_on_Qt5_Qt_Quick.mp4</link>

+    </item>

+    <item>

+        <title>Qt 5: Simon Hausmann on Qt WebKit</title>

+        <thumbnail>qt5_video_simon.png</thumbnail>

+        <link>http://download.qt-project.org/learning/videos/Qt_5_Simon_Hausmann_on_Qt_WebKit.mp4</link>

+    </item>

+    <item>

+        <title>Qt 5: Qt Developer Kenneth Christiansen on Qt WebKit</title>

+        <thumbnail>qt5_video_kenneth.png</thumbnail>

+        <link>http://download.qt-project.org/learning/videos/Qt5_Kenneth_Christiansen_on_Qt_WebKit.mp4</link>

+    </item>

+    <item>

+        <title>Qt 5: Thiago Macieira on Qt Core</title>

+        <thumbnail>qt5_video_thiago.png</thumbnail>

+        <link>http://download.qt-project.org/learning/videos/Qt5_Thiago_Macieira_on_Qt_Core.mp4</link>

+    </item>

+    <item>

+        <title>Qt 5: Samuel Rodal on Qt GUI, Qt Quick and Qt Open GL</title>

+        <thumbnail>qt5_video_samuel.png</thumbnail>

+        <link>http://download.qt-project.org/learning/videos/Qt5_Samuel_Rodal_on_Qt_GUI_OpenGL.mp4</link>

+    </item>

+</videolist>

diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index a1ef916..32074d2 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -1,45 +1,58 @@
 var positions = [
-            {x:-500, y:-1250, url: "demos/rssnews/rssnews.qml", device: 3, name: "Rss Reader"},
-            {x:-1550, y:-1200, url: "demos/gridrssnews/main.qml", device: 6, name: "Rss Reader"},
-            {x:-1000, y:-820, url: "demos/tweetsearch/tweetsearch.qml", device: 2, name: "TweetSearch"},
+            {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: "TweetSearch"},
 
-            {x:1450, y:-1050, url: "demos/heartmonitor/main.qml", device: 4, name: "Heart Monitor"},
-            {x:800, y:-900, url: "demos/canvasclock/canvasClock.qml", device: 4, name: "Canvas Clock"},
+            {x:1750, y:-1650, 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:0, y:0, url: "demos/description/main.qml", device: 7, name: "Qt Description"},
+            {x:900, y:-300, gid: 2, url: "demos/description/main.qml", device: 7, name: "Qt Video"},
+            {x:-100, y:-100, gid: 2, url: "demos/radio/radio.qml", device: 4, name: "Internet Radio"},
 
-            {x:1300, y:-200, url: "demos/photosurface/photosurface.qml", device: 5, name: "Photo Surface"},
-            {x:1800, y:700, url: "demos/particledemo/particledemo.qml", device: 6, name: "Particle Paint"},
-            {x:900, y:1000, url: "demos/shaders/main.qml", device: 5, name: "Shaders"},
+            {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:-1300, y:0, url: "demos/touchgallery/main.qml", device: 2, name: "Widget Gallery"},
-            {x:-1900, y:100, url: "demos/radio/radio.qml", device: 4, name: "Internet Radio"},
+            {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:-700, y:800, url: "demos/samegame/samegame.qml", device: 1, name: "SameGame"},
-            {x:-1500, y:850, url: "demos/calqlatr/Calqlatr.qml", device: 0, name: "Calqlatr"},
-            {x:-1100, y:1200, url: "demos/maroon/Maroon.qml", device: 1, name: "Maroon in\n  Trouble"}
+            {x:-400, y:1000, gid: 4, url: "demos/calqlatr/Calqlatr.qml", device: 0, name: "Calqlatr"},
+            {x:-1300, y:1200, gid: 4, url: "demos/photosurface/photosurface.qml", device: 5, name: "Photo Surface"},
+            {x:-2100, y:1450, gid: 4, url: "demos/touchgallery/main.qml", device: 2, name: "Widget Gallery"},
+
+        ]
+
+var groupPositions = [
+            {x:-2400, y:-1900, width: 2200, height: 1150, textX: 20, textY: 20, name: "Feeds"},
+            {x:600, y:-2000, width: 1700, height: 1000, textX: 20, textY: 20, name: "Canvas"},
+            {x:-600, y:-750, width: 2100, height: 1250, textX: 20, textY: 20, name: "Multimedia"},
+            {x:-2600, y:-450, width: 1600, height: 1100, textX: 20, textY: 20, name: "Games"},
+            {x:-2400, y:700, width: 2400, height: 1200, textX: 50, textY: 50, name: "Applications"},
+            {x:500, y:600, width: 2500, height: 1400, 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 = [600, 360, 366, 758, 600, 918, 923, 800]
-var heights = [1210, 706, 720, 564, 488, 600, 600, 638]
-var scales = [0.6, 0.8, 0.6, 0.9, 1.0, 0.9, 1.0, 1.0]
-var demoWidths = [538, 322, 322, 642, 482, 688, 691, 726]
-var demoHeights = [808, 482, 482, 402, 322, 431, 432, 456]
+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 = [41, 32, 15, 24, 45, 59, 57, 56]
-var colors = ["#1274cc", "#1274cc", "#1274cc", "#4353c3", "#1274cc", "#4353c3", "#4353c3", "#4353c3", "#4353c3"]
-var navigationList = [5,1,2,0,4,3,6,7,8,11,12,10,9,13]
+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,13,12,11,10,9]
+var groupNavigationList = [0,1,2,3,4,5]
 var currentDemoIndex = -1
+var currentGroupIndex = -1
 var objects = []
+var groups = []
 
 function initSlides(){
     positions.forEach(function(pos){
-        createNew(pos.x,pos.y, pos.url, pos.device, pos.name)
+        createSlide(pos.x,pos.y, pos.gid, pos.url, pos.device, pos.name)
     })
 }
 
-function createNew(x,y,url,device,name){
+function createSlide(x,y,gid,url,device,name){
     var component = Qt.createComponent("Slide.qml")
     if (component.status === Component.Ready){
         var object=component.createObject(canvas)
@@ -54,6 +67,7 @@ function createNew(x,y,url,device,name){
         object.maskVerticalOffset = maskVerticalOffsets[device]
         object.maskHorizontalOffset = maskHorizontalOffsets[device]
         object.uid = objects.length
+        object.gid = gid
         object.name = name
         object.x = x-object.width/2
         object.y = y-object.height/2
@@ -66,6 +80,29 @@ function createNew(x,y,url,device,name){
     }
 }
 
+function initGroups(){
+    groupPositions.forEach(function(pos){
+        createGroup(pos.x, pos.y, pos.width, pos.height, pos.textX, pos.textY, pos.name)
+    })
+}
+
+function createGroup(x,y,width,height,textX,textY,name){
+    var component = Qt.createComponent("Group.qml")
+    if (component.status === Component.Ready){
+        var object=component.createObject(canvas)
+        object.uid = groups.length
+        object.x = x
+        object.y = y
+        object.width = width
+        object.height = height
+        object.textX = textX
+        object.textY = textY
+        object.name = name
+
+        groups.push(object)
+    }
+}
+
 function loadCurrentDemo(){
 
     // Load current demo and release all others possible running demos
@@ -123,9 +160,59 @@ function selectTarget(uid){
     }
     if (idx !== -1){
         currentDemoIndex = navigationList.indexOf(idx)
+        currentGroupIndex = objects[idx].gid
         return {"x": positions[idx].x,
             "y":  positions[idx].y,
-            "targetScale": objects[idx].targetScale}
+            "targetScale": objects[idx].targetScale,
+            "navState": 2}
+    }
+
+    return null;
+}
+
+function getCurrentGroup()
+{
+    if (currentGroupIndex < 0 || currentGroupIndex >= groups.length)
+        return null;
+
+    return selectGroup(groupNavigationList[currentGroupIndex]);
+}
+
+function getNextGroup()
+{
+    currentGroupIndex++;
+    if (currentGroupIndex >= groups.length)
+        currentGroupIndex = 0;
+
+    return selectGroup(groupNavigationList[currentGroupIndex]);
+}
+
+function getPreviousGroup()
+{
+    currentGroupIndex--;
+    if (currentGroupIndex < 0)
+        currentGroupIndex = groups.length-1;
+
+    return selectGroup(groupNavigationList[currentGroupIndex]);
+}
+
+function selectGroup(id){
+
+    var idx = -1;
+
+    for (var i=0; i < groups.length; i++){
+        if (id >= 0 && groups[i].uid === id){
+            idx = i;
+            break;
+        }
+    }
+
+    if (idx !== -1){
+        currentGroupIndex = groupNavigationList.indexOf(idx)
+        return {"x": groupPositions[idx].x + groupPositions[idx].width/2,
+            "y":  groupPositions[idx].y + groupPositions[idx].height/2,
+            "targetScale": groups[idx].targetScale,
+            "navState": 1}
     }
 
     return null;
@@ -167,3 +254,9 @@ function updateObjectScales(destWidth, destHeight)
     for (var i=0; i<objects.length; i++)
         objects[i].targetScale = scaleToBox(destWidth, destHeight, objects[i].targetWidth(), objects[i].targetHeight());
 }
+
+function updateGroupScales(destWidth, destHeight)
+{
+    for (var i=0; i<groups.length; i++)
+        groups[i].targetScale = scaleToBox(destWidth, destHeight, groups[i].width, groups[i].height);
+}
diff --git a/QtDemo/qml/QtDemo/images/phone1.png b/QtDemo/qml/QtDemo/images/phone1.png
index 6ef93b6..dec5005 100644
--- a/QtDemo/qml/QtDemo/images/phone1.png
+++ b/QtDemo/qml/QtDemo/images/phone1.png
diff --git a/QtDemo/qml/QtDemo/main.qml b/QtDemo/qml/QtDemo/main.qml
index 27758ff..3ad0e98 100644
--- a/QtDemo/qml/QtDemo/main.qml
+++ b/QtDemo/qml/QtDemo/main.qml
@@ -14,7 +14,7 @@ Rectangle{
     property real maxScaleFactor: 1
     property real tapLimitX : 2
     property real tapLimitY : 1
-    property int navigationState: 0 //home, slide, dirty
+    property int navigationState: 0 //home, group, slide, dirty
 
     function calculateScales(){
         if (app.width > 0 && app.height > 0){
@@ -25,12 +25,24 @@ Rectangle{
             app.minScaleFactor = app.homeScaleFactor / 10;
             app.maxScaleFactor = app.homeScaleFactor * 20;
             Engine.updateObjectScales(app.width*0.9, app.height*0.9);
+            Engine.updateGroupScales(app.width, app.height);
             tapLimitX = Math.max(1,app.width * 0.02);
             tapLimitY = Math.max(1,app.height * 0.02);
 
-            var target = Engine.getCurrent();
-            if (navigationState == 1 && target !== null)
-                canvas.goTo(target, true);
+            var target = Engine.getCurrentGroup()
+            if (navigationState == 1) {
+                if (target !== null)
+                    canvas.goTo(target, true)
+                else
+                    canvas.goHome()
+            }
+            else if (navigationState == 2) {
+                target = Engine.getCurrent()
+                if (target !== null)
+                    canvas.goTo(target, true)
+                else
+                    canvas.goHome()
+            }
             else
                 canvas.goHome()
 
@@ -42,12 +54,26 @@ Rectangle{
         return Engine.selectTarget(uid)
     }
 
+    function selectGroup(uid) {
+        return Engine.selectGroup(uid)
+    }
+
+    function getCurrentGroup() {
+        return Engine.getCurrentGroup()
+    }
+
     function getNext() {
-        return Engine.getNext()
+        if (app.navigationState == 1)
+            return Engine.getNextGroup()
+        else
+            return Engine.getNext()
     }
 
     function getPrevious() {
-        return Engine.getPrevious()
+        if (app.navigationState == 1)
+            return Engine.getPreviousGroup()
+        else
+            return Engine.getPrevious()
     }
 
     onWidthChanged: calculateScales();
@@ -95,7 +121,7 @@ Rectangle{
 
         onRunningChanged: {
             if (!running) {
-                if (app.navigationState === 1)
+                if (app.navigationState === 2)
                     Engine.loadCurrentDemo();
                 else
                     Engine.releaseDemos();
@@ -111,7 +137,7 @@ Rectangle{
             target: canvas;
             property: "scalingFactor";
             duration: Style.APP_ANIMATION_DELAY/2;
-            to: app.homeScaleFactor
+            to: app.homeScaleFactor*1.3
             easing.type: Easing.OutCubic
         }
 
@@ -126,7 +152,7 @@ Rectangle{
 
         onRunningChanged: {
             if (!running) {
-                if (navigationState === 1)
+                if (navigationState === 2)
                     Engine.loadCurrentDemo();
             }
         }
@@ -137,7 +163,7 @@ Rectangle{
         if (event.key === Qt.Key_MediaPrevious) {
             if (app.navigationState !== 0) {
                 event.accepted = true;
-                canvas.goHome();
+                canvas.goBack();
             }
             else {
                 quitDialog.visible = true
@@ -146,6 +172,7 @@ Rectangle{
     }
 
     Component.onCompleted: {
+        Engine.initGroups()
         Engine.initSlides()
         cloud1.start();
         cloud2.start();