Upgrade Flickr demo to QtQuick 2.

And throw in particle effects. Includes a variety of fixes to modelparticle and picture affector which were arrived at during this demo.
sailfishos · May 12, 2011 · 108f7ce · 108f7ce
1 parent f7d3d68
commit 108f7ce
Show file tree

Hide file tree

Showing 33 changed files with 507 additions and 56 deletions.
diff --git a/demos/declarative/flickr/mobile/Button.qml → demos/declarative/flickr/content/Button.qml b/demos/declarative/flickr/mobile/Button.qml → demos/declarative/flickr/content/Button.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
 
 Item {
     id: container

diff --git a/...eclarative/flickr/mobile/GridDelegate.qml → ...clarative/flickr/content/GridDelegate.qml b/...eclarative/flickr/mobile/GridDelegate.qml → ...clarative/flickr/content/GridDelegate.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
 
 Item {
     id: wrapper; width: GridView.view.cellWidth; height: GridView.view.cellHeight

diff --git a/...eclarative/flickr/mobile/ImageDetails.qml → ...clarative/flickr/content/ImageDetails.qml b/...eclarative/flickr/mobile/ImageDetails.qml → ...clarative/flickr/content/ImageDetails.qml
@@ -39,8 +39,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
-import "../common" as Common
+import QtQuick 2.0
+import Qt.labs.particles 2.0
 
 Flipable {
     id: container
@@ -95,7 +95,7 @@ Flipable {
 
         Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4 }
 
-        Common.Progress {
+        Progress {
             anchors.centerIn: parent; width: 200; height: 22
             progress: bigImage.progress; visible: bigImage.status != Image.Ready
         }
@@ -126,7 +126,6 @@ Flipable {
                 id: imageContainer
                 width: Math.max(bigImage.width * bigImage.scale, flickable.width);
                 height: Math.max(bigImage.height * bigImage.scale, flickable.height);
-
                 Image {
                     id: bigImage; source: container.photoUrl; scale: slider.value
                     anchors.centerIn: parent; smooth: !flickable.movingVertically
@@ -137,7 +136,96 @@ Flipable {
                             prevScale = Math.min(slider.minimum, 1);
                             slider.value = prevScale;
                         }
+                        if (inBackState && bigImage.status == Image.Ready)
+                            particleBox.imageInAnim();
+                    }
+                    property bool inBackState: false
+                    onInBackStateChanged:{
+                        if(inBackState && bigImage.status == Image.Ready)
+                            particleBox.imageInAnim();
+                        else if (!inBackState && bigImage.status == Image.Ready)
+                            particleBox.imageOutAnim();
+                    }
+                }
+
+                Item{
+                    id: particleBox
+                    width: bigImage.width * bigImage.scale
+                    height: bigImage.height * bigImage.scale
+                    anchors.centerIn: parent
+
+                    function imageInAnim(){
+                        cp.visible = true;
+                        pixAffect.onceOff = false;
+                        bigImage.visible = false;
+                        endEffectTimer.start();
+                        pixelEmitter.pulse(1);
+                    }
+                    function imageOutAnim(){
+                        cp.visible = true;
+                        pixAffect.onceOff = true;
+                        bigImage.visible = false;
+                        turbulence.active = true;
+                        endEffectTimer.start();
+                        pixelEmitter.burst(2048);
+                    }
+                    Timer{
+                        id: endEffectTimer
+                        interval: 1000
+                        repeat: false
+                        running: false
+                        onTriggered:{
+                            bigImage.visible = true;
+                            turbulence.active = false;
+                            cp.visible = false;
+                        }
+                    }
+                    ParticleSystem{
+                        id: imageSystem
+                    }
+                    ColoredParticle{
+                        id: cp
+                        system: imageSystem
+                        color: "gray"
+                        alpha: 1
+                        image: "images/squareParticle.png"
+                        colorVariation: 0
+                    }
+                    Picture{
+                        id: pixAffect
+                        system: imageSystem
+                        anchors.fill: parent
+                        image: container.photoUrl;
+                        onceOff: true
                     }
+                    Turbulence{
+                        id: turbulence
+                        system: imageSystem
+                        anchors.fill: parent 
+                        frequency: 100
+                        strength: 250
+                        active: false
+                    }
+                    TrailEmitter{
+                        id: pixelEmitter0
+                        system: imageSystem
+                        height: parent.height
+                        particleSize: 4
+                        particleDuration: 1000
+                        particlesPerSecond: 4096
+                        speed: PointVector{x: 360; xVariation: 8; yVariation: 4}
+                        emitting: false
+                    }
+                    TrailEmitter{
+                        id: pixelEmitter
+                        system: imageSystem
+                        anchors.fill: parent
+                        particleSize: 4
+                        particleDuration: 1000
+                        particlesPerSecond: 2048
+                        emitting: false
+                    }
+
                 }
             }
         }
@@ -148,7 +236,7 @@ Flipable {
             anchors.centerIn: parent; color: "white"; font.bold: true
         }
 
-        Common.Slider {
+        Slider {
             id: slider; visible: { bigImage.status == Image.Ready && maximum > minimum }
             anchors {
                 bottom: parent.bottom; bottomMargin: 65
@@ -174,12 +262,13 @@ Flipable {
         PropertyChanges { target: itemRotation; angle: 180 }
         PropertyChanges { target: toolBar; button2Visible: false }
         PropertyChanges { target: toolBar; button1Label: "Back" }
+        PropertyChanges { target: bigImage; inBackState: true }
     }
 
     transitions: Transition {
         SequentialAnimation {
             PropertyAction { target: bigImage; property: "smooth"; value: false }
-            NumberAnimation { easing.type: Easing.InOutQuad; properties: "angle"; duration: 500 }
+            NumberAnimation { easing.type: Easing.InOutQuad; properties: "angle"; duration: 1000 }
             PropertyAction { target: bigImage; property: "smooth"; value: !flickable.movingVertically }
         }
     }

diff --git a/...eclarative/flickr/mobile/ListDelegate.qml → ...clarative/flickr/content/ListDelegate.qml b/...eclarative/flickr/mobile/ListDelegate.qml → ...clarative/flickr/content/ListDelegate.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
 
 Component {
     Item {

diff --git a/demos/declarative/flickr/common/Progress.qml → ...s/declarative/flickr/content/Progress.qml b/demos/declarative/flickr/common/Progress.qml → ...s/declarative/flickr/content/Progress.qml
@@ -39,9 +39,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
+import Qt.labs.particles 2.0
 
-Item {
+Item{
+    id: container
     property variant progress: 0
 
     Rectangle {
@@ -53,21 +55,34 @@ Item {
         }
     }
 
-    Rectangle {
+    ParticleSystem{
+        running: container.visible
+        id: barSys
+    }
+    ColoredParticle{
+        color: "lightsteelblue"
+        alpha: 0.1
+        colorVariation: 0.05
+        image: "images/particle.png"
+        system: barSys
+    }
+    TrailEmitter{
         y: 2; height: parent.height-4;
         x: 2; width: Math.max(parent.width * progress - 4, 0);
-        opacity: width < 1 ? 0 : 1; smooth: true
-        gradient: Gradient {
-            GradientStop { position: 0; color: "lightsteelblue" }
-            GradientStop { position: 1.0; color: "steelblue" }
-        }
-        radius: height/2 - 2
+        speed: AngleVector{ angleVariation: 180; magnitudeVariation: 12 }
+        system: barSys
+        particlesPerSecond: width;
+        particleDuration: 1000
+        particleSize: 20
+        particleSizeVariation: 4
+        particleEndSize: 12
+        maxParticles: parent.width;
     }
 
     Text {
         text: Math.round(progress * 100) + "%"
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
-        color: "white"; font.bold: true; font.pixelSize: 15
+        color: Qt.rgba(1.0, 1.0 - progress, 1.0 - progress,0.9); font.bold: true; font.pixelSize: 15
     }
 }
diff --git a/demos/declarative/flickr/common/RssModel.qml → ...s/declarative/flickr/content/RssModel.qml b/demos/declarative/flickr/common/RssModel.qml → ...s/declarative/flickr/content/RssModel.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
 
 XmlListModel {
     property string tags : ""

diff --git a/...s/declarative/flickr/common/ScrollBar.qml → .../declarative/flickr/content/ScrollBar.qml b/...s/declarative/flickr/common/ScrollBar.qml → .../declarative/flickr/content/ScrollBar.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
 
 Item {
     id: container

diff --git a/demos/declarative/flickr/common/Slider.qml → demos/declarative/flickr/content/Slider.qml b/demos/declarative/flickr/common/Slider.qml → demos/declarative/flickr/content/Slider.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
 
 Item {
     id: slider; width: 400; height: 16

diff --git a/demos/declarative/flickr/content/StreamView.qml b/demos/declarative/flickr/content/StreamView.qml
@@ -0,0 +1,108 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt.labs.particles 2.0
+
+Item{
+    id: container
+    property alias model: mp.model
+    property alias delegate: mp.delegate
+    property bool jumpStarted: false
+    ParticleSystem{ 
+        id: sys 
+        anchors.fill:parent
+        overwrite: false
+    }
+    ModelParticle{
+        id: mp
+        fade: false
+        system: sys
+        anchors.fill: parent
+        onModelCountChanged: {
+            if(!jumpStarted && modelCount > 0){
+                console.log("Jumping");
+                jumpStarted = true;
+                sys.fastForward(8000);
+            }
+        }
+    }
+    property real emitterSpacing: parent.width/3
+    TrailEmitter{
+        system: sys
+        width: emitterSpacing - 64
+        x: emitterSpacing*0 + 32
+        y: -128
+        height: 32
+        speed: PointVector{ y: (container.height + 128)/12 }
+        particlesPerSecond: 0.4
+        particleDuration: 1000000//eventually -1 should mean a million seconds for neatness
+        maxParticles: 15
+    }
+    TrailEmitter{
+        system: sys
+        width: emitterSpacing - 64
+        x: emitterSpacing*1 + 32
+        y: -128
+        height: 32
+        speed: PointVector{ y: (container.height + 128)/12 }
+        particlesPerSecond: 0.4
+        particleDuration: 1000000//eventually -1 should mean a million seconds for neatness
+        maxParticles: 15
+    }
+    TrailEmitter{
+        system: sys
+        width: emitterSpacing - 64
+        x: emitterSpacing*2 + 32
+        y: -128
+        height: 32
+        speed: PointVector{ y: (container.height + 128)/12 }
+        particlesPerSecond: 0.4
+        particleDuration: 1000000//eventually -1 should mean a million seconds for neatness
+        maxParticles: 15
+    }
+    Kill{
+        system: sys
+        y: container.height + 64
+        width: container.width
+        height: 6400
+    }
+}
diff --git a/demos/declarative/flickr/mobile/TitleBar.qml → ...s/declarative/flickr/content/TitleBar.qml b/demos/declarative/flickr/mobile/TitleBar.qml → ...s/declarative/flickr/content/TitleBar.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
 
 Item {
     id: titleBar

diff --git a/demos/declarative/flickr/mobile/ToolBar.qml → demos/declarative/flickr/content/ToolBar.qml b/demos/declarative/flickr/mobile/ToolBar.qml → demos/declarative/flickr/content/ToolBar.qml
@@ -39,7 +39,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 2.0
 
 Item {
     id: toolbar