examples/particles/itemparticle/particleview.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the examples of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:BSD$
   9 ** You may use this file under the terms of the BSD license as follows:
  10 **
  11 ** "Redistribution and use in source and binary forms, with or without
  12 ** modification, are permitted provided that the following conditions are
  13 ** met:
  14 **   * Redistributions of source code must retain the above copyright
  15 **     notice, this list of conditions and the following disclaimer.
  16 **   * Redistributions in binary form must reproduce the above copyright
  17 **     notice, this list of conditions and the following disclaimer in
  18 **     the documentation and/or other materials provided with the
  19 **     distribution.
  20 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  21 **     the names of its contributors may be used to endorse or promote
  22 **     products derived from this software without specific prior written
  23 **     permission.
  24 **
  25 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  26 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  27 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  28 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  29 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  30 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  31 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  32 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  33 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  34 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  35 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  36 **
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 2.0
  42 import QtQuick.Particles 2.0
  43 import "content/script.js" as Script
  44 import "content"
  45
  46 Item {
  47     id: root
  48     width: 640
  49     height: 480
  50     Rectangle {
  51         anchors.fill: parent
  52         color: "black"
  53         z: -1
  54     }
  55     Item {
  56         id: loading
  57         Behavior on opacity {NumberAnimation {}}
  58         anchors.fill: parent
  59         Text {
  60             anchors.centerIn: parent
  61             text: "Loading"
  62             color: "white"
  63         }
  64     }
  65     ParticleSystem {
  66         id: sys;
  67         running: true
  68     }
  69     Emitter {
  70         id: emitter
  71         system: sys
  72         height: parent.height - 132/2
  73         x: -132/2
  74         y: 132/2
  75         velocity: PointDirection { x: 32; xVariation: 8 }
  76         emitRate: 0.5
  77         lifeSpan: Emitter.InfiniteLife
  78         group: "photos"
  79     }
  80     Age {
  81         system: sys
  82         x: parent.width + 132/2
  83         height: parent.height
  84         width: 1000
  85     }
  86     ImageParticle {
  87         system: sys
  88         groups: ["fireworks"]
  89         source: "../trails/../images/star.png"
  90         color: "lightsteelblue"
  91         alpha: 0
  92         colorVariation: 0
  93         z: 1000
  94     }
  95     ItemParticle {
  96         id: mp
  97         z: 0
  98         system: sys
  99         fade: false
 100         groups: ["photos"]
 101     }
 102     Component {
 103         id: alertDelegate
 104         Rectangle {
 105             width: 132
 106             height: 132
 107             NumberAnimation on scale {
 108                 running: true
 109                 loops: 1
 110                 from: 0.2
 111                 to: 1
 112             }
 113             Image {
 114                 source: "../asteroid/../images/rocket.png"
 115                 anchors.centerIn: parent
 116             }
 117             Text {
 118                 anchors.bottom: parent.bottom
 119                 anchors.horizontalCenter: parent.horizontalCenter
 120                 text: "A new ship has arrived!"
 121             }
 122         }
 123     }
 124     property Item alertItem;
 125     function alert() {
 126         //resetter.active = false
 127         force.active = true;
 128         alertItem = alertDelegate.createObject(root);
 129         alertItem.x = root.width/2 - alertItem.width/2
 130         alertItem.y = root.height/2 - alertItem.height/2
 131         spawnFireworks.pulse(200);
 132         stopAlert.start();
 133     }
 134     focus: true
 135     Keys.onSpacePressed: alert();
 136     Timer {
 137         id: stopAlert
 138         running: false
 139         repeat: false
 140         interval: 800
 141         onTriggered: {
 142             force.active = false
 143             //resetter.active = true;
 144             mp.take(alertItem, true);
 145             centerEmitter.burst(1);
 146         }
 147     }
 148     Attractor {
 149         id: force
 150         system: sys
 151         pointX: root.width/2
 152         pointY: root.height/2
 153         strength: -10000
 154         enabled: false
 155         anchors.centerIn: parent
 156         width: parent.width/2
 157         height: parent.height/2
 158         groups:["photos"]
 159         affectedParameter: Attractor.Position
 160     }
 161     Emitter {
 162         id: centerEmitter
 163         velocity: PointDirection { x: 32; xVariation: 8;}
 164         emitRate: 0.5
 165         lifeSpan: 12000 //TODO: A -1 or something which does 'infinite'? (but need disable fade first)
 166         maximumEmitted: 20
 167         group: "photos"
 168         system: sys
 169         anchors.centerIn: parent
 170         enabled: false
 171
 172         //TODO: Zoom in effect
 173     }
 174     Emitter {
 175         id: spawnFireworks
 176         group: "fireworks"
 177         system: sys
 178         maximumEmitted: 400
 179         emitRate: 400
 180         lifeSpan: 2800
 181         x: parent.width/2
 182         y: parent.height/2 - 64
 183         width: 8
 184         height: 8
 185         enabled: false
 186         size: 32
 187         endSize: 8
 188         velocity: AngleDirection { magnitude: 160; magnitudeVariation: 120; angleVariation: 90; angle: 270 }
 189         acceleration: PointDirection { y: 160 }
 190     }
 191     Item { x: -1000; y: -1000 //offscreen
 192         Repeater {//Load them here, add to system on completed
 193             model: theModel
 194             delegate: theDelegate
 195         }
 196     }
 197     RssModel {id: theModel; tags:"particle,particles"}
 198     Component {
 199         id: theDelegate
 200         Rectangle {
 201             id: container
 202             border.width: 2
 203             antialiasing: true
 204             property real myRand: Math.random();//'depth'
 205             z: Math.floor(myRand * 100)
 206             scale: (myRand + 1.0)/2;
 207             //TODO: Darken based on 'depth'
 208             width: 132
 209             height: 132
 210             //ItemParticle.onAttached: console.log("I'm in"  + x + "," + y + ":" + opacity);
 211             ItemParticle.onDetached: mp.take(container);//respawns
 212             function manage()
 213             {
 214                 if (state == "selected") {
 215                     console.log("Taking " + index);
 216                     mp.freeze(container);
 217                 } else {
 218                     console.log("Returning " +index);
 219                     mp.unfreeze(container);
 220                 }
 221             }
 222             Image {
 223                 id: img
 224                 anchors.centerIn: parent
 225                 antialiasing: true;
 226                 source: "http://" + Script.getImagePath(content); cache: true
 227                 fillMode: Image.PreserveAspectFit;
 228                 width: parent.width-4; height: parent.height-4
 229                 onStatusChanged: if (img.status == Image.Ready) {
 230                     loading.opacity = 0;
 231                     mp.take(container);
 232                 }
 233             }
 234             Text {
 235                 anchors.bottom: parent.bottom
 236                 width: parent.width
 237                 horizontalAlignment: Text.AlignHCenter
 238                 elide: Text.ElideRight
 239                 text: title
 240                 color: "black"
 241             }
 242             MouseArea {
 243                 anchors.fill: parent
 244                 onClicked: container.state == "selected" ? container.state = "" : container.state = "selected"
 245             }
 246             states: State {
 247                 name: "selected"
 248                 ParentChange {
 249                     target: container
 250                     parent: root
 251                     x: 0
 252                     y: 0
 253                 }
 254                 PropertyChanges {
 255                     target: container
 256                     width: root.width
 257                     height: root.height
 258                     z: 101
 259                     opacity: 1
 260                     rotation: 0
 261                 }
 262             }
 263             transitions: Transition {
 264                 to: "selected"
 265                 reversible: true
 266                 SequentialAnimation {
 267                     ScriptAction {script: container.manage();}
 268                     ParallelAnimation {
 269                         ParentAnimation {NumberAnimation { properties: "x,y" }}//Doesn't work, particles takes control of x,y instantly
 270                         NumberAnimation { properties: "width, height, z, rotation" }
 271                     }
 272                 }
 273             }
 274         }
 275     }
 276 }