git.iko.soy/unity8
on 2139c25 help sign in
unity8/Greeter/Infographics.qml
454 lines 15 kB history raw
1/*
2 * Copyright (C) 2013 Canonical, Ltd.
3 *
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
6 * the Free Software Foundation; version 3.
7 *
8 * This program is distributed in the hope that it will be useful,
9 * but WITHOUT ANY WARRANTY; without even the implied warranty of
10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11 * GNU General Public License for more details.
12 *
13 * You should have received a copy of the GNU General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */
17import "../Components"
18import "Gradient.js" as Gradient
19import QtQuick 2.0
20import Ubuntu.Components 0.1
22Item {
23 id: infographic
25 property var model
27 property int animDuration: 10
29 Connections {
30 target: model
32 onDataAppeared: startShowAnimation()
34 onDataAboutToChange: startHideAnimation()
36 onDataChanged: startShowAnimation()
38 onDataAboutToDisappear: startHideAnimation()
39 }
41 function startShowAnimation() {
42 dotShowAnimTimer.startFromBeginning()
43 notification.showAnim.start()
44 }
46 function startHideAnimation() {
47 dotHideAnimTimer.startFromBeginning()
48 notification.hideAnim.start()
49 }
51 visible: model.label !== ""
53 Component.onCompleted: startShowAnimation()
55 Item {
56 id: dataCircle
57 objectName: "dataCircle"
59 property real divisor: 1.5
61 width: Math.min(parent.height, parent.width) / divisor
62 height: width
64 anchors.centerIn: parent
66 Timer {
67 id: circleGrowAnimTimer
69 property int pastCircleCounter
70 property int presentCircleCounter
72 interval: animDuration
73 running: false
74 repeat: true
75 onTriggered: {
76 if (pastCircleCounter < pastCircles.count) {
77 var nextCircle = pastCircles.itemAt(pastCircleCounter++)
78 if (nextCircle !== null) nextCircle.pastCircleGrowAnim.start()
79 }
80 if (pastCircleCounter > pastCircles.count / 2) {
81 var nextCircle = presentCircles.itemAt(presentCircleCounter++)
82 if (nextCircle !== null) nextCircle.presentCircleGrowAnim.start()
83 }
84 if (presentCircleCounter > infographic.model.currentDay && pastCircleCounter >= pastCircles.count) {
85 stop()
86 }
87 }
89 function startFromBeginning() {
90 circleGrowAnimTimer.pastCircleCounter = 0
91 circleGrowAnimTimer.presentCircleCounter = 0
92 start()
93 }
94 }
96 Timer {
97 id: circleShrinkAnimTimer
99 property int pastCircleCounter
100 property int presentCircleCounter
102 interval: animDuration
103 running: false
104 repeat: true
105 onTriggered: {
106 if (pastCircleCounter >= 0) {
107 var nextCircle = pastCircles.itemAt(pastCircleCounter--)
108 if (nextCircle !== null) nextCircle.pastCircleShrinkAnim.start()
109 }
110 if (pastCircleCounter < pastCircles.count / 2) {
111 var nextCircle = presentCircles.itemAt(presentCircleCounter--)
112 if (nextCircle !== null) nextCircle.presentCircleShrinkAnim.start()
113 }
114 if (presentCircleCounter < 0) {
115 stop()
116 infographic.model.readyForDataChange()
117 }
118 }
120 function startFromBeginning() {
121 pastCircleCounter = pastCircles.count - 1
122 presentCircleCounter = model.currentDay
123 start()
124 }
125 }
127 Repeater {
128 id: pastCircles
129 objectName: "pastCircles"
130 model: infographic.model.secondMonth
132 delegate: ObjectPositioner {
133 property alias pastCircleGrowAnim: pastCircleGrowAnim
134 property alias pastCircleShrinkAnim: pastCircleShrinkAnim
136 index: model.index
137 count: pastCircles.count
138 radius: parent.width / 2
139 halfSize: pastCircle.width / 2
140 posOffset: 0.0
142 Circle {
143 id: pastCircle
144 objectName: "pastCircle" + index
146 property real divisor: 1.8
147 property real circleOpacity: 0.1
149 width: dataCircle.width / divisor
150 height: dataCircle.height / divisor
151 opacity: 0.0
152 scale: 0.0
153 visible: modelData !== undefined
154 color: Gradient.threeColorByIndex(index, count, infographic.model.secondColor)
156 SequentialAnimation {
157 id: pastCircleGrowAnim
159 loops: 1
160 ParallelAnimation {
161 PropertyAnimation {
162 target: pastCircle
163 property: "opacity"
164 from: 0.0
165 to: pastCircle.circleOpacity
166 easing.type: Easing.OutCurve
167 duration: circleGrowAnimTimer.interval * 4
168 }
169 PropertyAnimation {
170 target: pastCircle
171 property: "scale"
172 from: 0.0
173 to: modelData
174 easing.type: Easing.OutCurve
175 duration: circleGrowAnimTimer.interval * 4
176 }
177 }
178 }
180 SequentialAnimation {
181 id: pastCircleShrinkAnim
183 loops: 1
184 ParallelAnimation {
185 PropertyAnimation {
186 target: pastCircle
187 property: "opacity"
188 from: pastCircle.circleOpacity
189 to: 0.0
190 easing.type: Easing.OutCurve
191 duration: circleShrinkAnimTimer.interval * 4
192 }
193 PropertyAnimation {
194 target: pastCircle
195 property: "scale"
196 from: modelData
197 to: 0.0
198 easing.type: Easing.OutCurve
199 duration: circleShrinkAnimTimer.interval * 4
200 }
201 }
202 }
203 }
204 }
205 }
207 Repeater {
208 id: presentCircles
209 objectName: "presentCircles"
210 model: infographic.model.firstMonth
212 delegate: ObjectPositioner {
213 property alias presentCircleGrowAnim: presentCircleGrowAnim
214 property alias presentCircleShrinkAnim: presentCircleShrinkAnim
216 index: model.index
217 count: presentCircles.count
218 radius: parent.width / 2
219 halfSize: presentCircle.width / 2
220 posOffset: 0.0
222 Circle {
223 id: presentCircle
224 objectName: "presentCircle" + index
226 property real divisor: 1.8
227 property real circleOpacity: 0.3
229 width: dataCircle.width / divisor
230 height: dataCircle.height / divisor
231 opacity: 0.0
232 scale: 0.0
233 visible: modelData !== undefined
234 color: Gradient.threeColorByIndex(index, infographic.model.currentDay, infographic.model.firstColor)
236 SequentialAnimation {
237 id: presentCircleGrowAnim
239 loops: 1
241 ParallelAnimation {
242 PropertyAnimation {
243 target: presentCircle
244 property: "opacity"
245 to: presentCircle.circleOpacity
246 easing.type: Easing.OutCurve
247 duration: circleGrowAnimTimer.interval * 4
248 }
249 PropertyAnimation {
250 target: presentCircle
251 property: "scale"
252 to: modelData
253 easing.type: Easing.OutCurve
254 duration: circleGrowAnimTimer.interval * 4
255 }
256 }
257 }
259 SequentialAnimation {
260 id: presentCircleShrinkAnim
262 loops: 1
263 ParallelAnimation {
264 PropertyAnimation {
265 target: presentCircle
266 property: "opacity"
267 to: 0.0
268 easing.type: Easing.OutCurve
269 duration: circleShrinkAnimTimer.interval * 4
270 }
271 PropertyAnimation {
272 target: presentCircle
273 property: "scale"
274 to: 0.0
275 easing.type: Easing.OutCurve
276 duration: circleShrinkAnimTimer.interval * 4
277 }
278 }
279 }
280 }
281 }
282 }
284 Image {
285 id: backgroundCircle
286 objectName: "backgroundCircle"
288 anchors.fill: parent
290 source: "graphics/infographic_circle_back.png"
291 }
293 Timer {
294 id: dotShowAnimTimer
296 property int dotCounter: 0
298 interval: animDuration * 0.5; running: false; repeat: true
299 onTriggered: {
300 if (dotCounter < dots.count) {
301 var nextDot = dots.itemAt(dotCounter++)
302 nextDot.unlockAnimation.start()
303 } else {
304 stop()
305 }
306 if (dotCounter == Math.round(dots.count / 2)) {
307 circleGrowAnimTimer.startFromBeginning()
308 }
309 }
311 function startFromBeginning() {
312 if (!dotShowAnimTimer.running)
313 dotCounter = 0
315 start()
316 }
317 }
319 Timer {
320 id: dotHideAnimTimer
322 property int dotCounter
324 interval: animDuration * 0.5
325 running: false
326 repeat: true
327 onTriggered: {
328 if (dotCounter >= 0) {
329 var nextDot = dots.itemAt(dotCounter--)
330 nextDot.changeAnimation.start()
331 } else {
332 stop()
333 }
334 if (dotCounter == Math.round(dots.count / 2)) {
335 circleShrinkAnimTimer.startFromBeginning()
336 }
337 }
339 function startFromBeginning() {
340 if (!dotHideAnimTimer.running)
341 dotCounter = dots.count - 1
343 start()
344 }
345 }
347 Repeater {
348 id: dots
349 objectName: "dots"
351 model: infographic.model.firstMonth
353 delegate: ObjectPositioner {
354 property alias unlockAnimation: dotUnlockAnim
355 property alias changeAnimation: dotChangeAnim
357 property int currentDay: infographic.model.currentDay
359 index: model.index
360 count: dots.count
361 radius: backgroundCircle.width / 2
362 halfSize: dot.width / 2
363 posOffset: radius / dot.width / 3
364 state: dot.state
366 Dot {
367 id: dot
368 objectName: "dot" + index
370 property real baseOpacity: 0.4
372 width: units.dp(5) * parent.radius / 200
373 height: units.dp(5) * parent.radius / 200
374 opacity: 0.0
375 smooth: true
376 state: index < currentDay ? "filled" : index == currentDay ? "pointer" : "unfilled"
378 PropertyAnimation {
379 id: dotUnlockAnim
381 target: dot
382 property: "opacity"
383 to: dot.baseOpacity
384 duration: dotShowAnimTimer.interval
385 }
387 PropertyAnimation {
388 id: dotChangeAnim
390 target: dot
391 property: "opacity"
392 to: 0.0
393 duration: dotHideAnimTimer.interval
394 }
395 }
396 }
397 }
399 Text {
400 id: notification
401 objectName: "label"
403 property alias hideAnim: decreaseOpacity
404 property alias showAnim: increaseOpacity
406 property real baseOpacity: 0.6
408 height: 0.7 * backgroundCircle.width
409 width: notification.height
410 anchors.centerIn: parent
412 text: infographic.model.label
413 font.pixelSize: notification.height / 12
415 wrapMode: Text.WordWrap
416 horizontalAlignment: Text.AlignHCenter
417 verticalAlignment: Text.AlignVCenter
418 color: "white"
419 font.weight: Font.Light
421 PropertyAnimation {
422 id: increaseOpacity
424 target: notification
425 property: "opacity"
426 from: 0.0
427 to: notification.baseOpacity
428 duration: dotShowAnimTimer.interval * dots.count * 5
429 }
431 PropertyAnimation {
432 id: decreaseOpacity
434 target: notification
435 property: "opacity"
436 from: notification.baseOpacity
437 to: 0.0
438 duration: dotShowAnimTimer.interval * dots.count * 5
439 }
440 }
441 }
443 MouseArea {
444 anchors.fill: dataCircle
446 onDoubleClicked: {
447 if (!dotHideAnimTimer.running &&
448 !dotShowAnimTimer.running &&
449 !circleShrinkAnimTimer.running &&
450 !circleGrowAnimTimer.running)
451 infographic.model.nextDataSource()
452 }
453 }