17 import "../Components"
18 import "Gradient.js" as Gradient
20 import Ubuntu.Components 0.1
27 property int animDuration: 10
32 onDataAboutToAppear: startHideAnimation()
33 onDataAppeared: startShowAnimation()
35 onDataAboutToChange: startHideAnimation()
36 onDataChanged: startShowAnimation()
38 onDataAboutToDisappear: startHideAnimation()
39 onDataDisappeared: startShowAnimation()
42 function startShowAnimation() {
43 dotHideAnimTimer.stop()
44 circleShrinkAnimTimer.stop()
45 notification.hideAnim.stop()
47 dotShowAnimTimer.startFromBeginning()
48 notification.showAnim.start()
51 function startHideAnimation() {
52 dotShowAnimTimer.stop()
53 circleGrowAnimTimer.stop()
54 notification.showAnim.stop()
56 dotHideAnimTimer.startFromBeginning()
57 notification.hideAnim.start()
60 visible: model.label !==
""
62 Component.onCompleted: startShowAnimation()
66 objectName:
"dataCircle"
68 property real divisor: 1.5
70 width: Math.min(parent.height, parent.width) / divisor
73 anchors.centerIn: parent
76 id: circleGrowAnimTimer
78 property int pastCircleCounter
79 property int presentCircleCounter
81 interval: animDuration
85 if (pastCircleCounter < pastCircles.count) {
86 var nextCircle = pastCircles.itemAt(pastCircleCounter++)
87 if (nextCircle !== null) nextCircle.pastCircleGrowAnim.start()
89 if (pastCircleCounter > pastCircles.count / 2) {
90 var nextCircle = presentCircles.itemAt(presentCircleCounter++)
91 if (nextCircle !== null) nextCircle.presentCircleGrowAnim.start()
93 if (presentCircleCounter > infographic.model.currentDay && pastCircleCounter >= pastCircles.count) {
98 function startFromBeginning() {
99 circleGrowAnimTimer.pastCircleCounter = 0
100 circleGrowAnimTimer.presentCircleCounter = 0
106 id: circleShrinkAnimTimer
108 property int pastCircleCounter
109 property int presentCircleCounter
111 interval: animDuration
115 if (pastCircleCounter >= 0) {
116 var nextCircle = pastCircles.itemAt(pastCircleCounter--)
117 if (nextCircle !== null) nextCircle.pastCircleShrinkAnim.start()
119 if (pastCircleCounter < pastCircles.count / 2) {
120 var nextCircle = presentCircles.itemAt(presentCircleCounter--)
121 if (nextCircle !== null) nextCircle.presentCircleShrinkAnim.start()
123 if (presentCircleCounter < 0) {
125 infographic.model.readyForDataChange()
129 function startFromBeginning() {
130 pastCircleCounter = pastCircles.count - 1
131 presentCircleCounter = model.currentDay
138 objectName:
"pastCircles"
139 model: infographic.model.secondMonth
141 delegate: ObjectPositioner {
142 property alias pastCircleGrowAnim: pastCircleGrowAnim
143 property alias pastCircleShrinkAnim: pastCircleShrinkAnim
146 count: pastCircles.count
147 radius: parent.width / 2
148 halfSize: pastCircle.width / 2
153 objectName:
"pastCircle" + index
155 property real divisor: 1.8
156 property real circleOpacity: 0.1
158 width: dataCircle.width / divisor
159 height: dataCircle.height / divisor
162 visible: modelData !== undefined
163 color: Gradient.threeColorByIndex(index, count, infographic.model.secondColor)
165 SequentialAnimation {
166 id: pastCircleGrowAnim
174 to: pastCircle.circleOpacity
175 easing.type: Easing.OutCurve
176 duration: circleGrowAnimTimer.interval * 4
183 easing.type: Easing.OutCurve
184 duration: circleGrowAnimTimer.interval * 4
189 SequentialAnimation {
190 id: pastCircleShrinkAnim
197 from: pastCircle.circleOpacity
199 easing.type: Easing.OutCurve
200 duration: circleShrinkAnimTimer.interval * 4
207 easing.type: Easing.OutCurve
208 duration: circleShrinkAnimTimer.interval * 4
218 objectName:
"presentCircles"
219 model: infographic.model.firstMonth
221 delegate: ObjectPositioner {
222 property alias presentCircleGrowAnim: presentCircleGrowAnim
223 property alias presentCircleShrinkAnim: presentCircleShrinkAnim
226 count: presentCircles.count
227 radius: parent.width / 2
228 halfSize: presentCircle.width / 2
233 objectName:
"presentCircle" + index
235 property real divisor: 1.8
236 property real circleOpacity: 0.3
238 width: dataCircle.width / divisor
239 height: dataCircle.height / divisor
242 visible: modelData !== undefined
243 color: Gradient.threeColorByIndex(index, infographic.model.currentDay, infographic.model.firstColor)
245 SequentialAnimation {
246 id: presentCircleGrowAnim
252 target: presentCircle
254 to: presentCircle.circleOpacity
255 easing.type: Easing.OutCurve
256 duration: circleGrowAnimTimer.interval * 4
259 target: presentCircle
262 easing.type: Easing.OutCurve
263 duration: circleGrowAnimTimer.interval * 4
268 SequentialAnimation {
269 id: presentCircleShrinkAnim
274 target: presentCircle
277 easing.type: Easing.OutCurve
278 duration: circleShrinkAnimTimer.interval * 4
281 target: presentCircle
284 easing.type: Easing.OutCurve
285 duration: circleShrinkAnimTimer.interval * 4
295 objectName:
"backgroundCircle"
299 source:
"graphics/infographic_circle_back.png"
305 property int dotCounter: 0
307 interval: animDuration * 0.5; running:
false; repeat:
true
309 if (dotCounter < dots.count) {
310 var nextDot = dots.itemAt(dotCounter++)
311 nextDot.unlockAnimation.start()
315 if (dotCounter == Math.round(dots.count / 2)) {
316 circleGrowAnimTimer.startFromBeginning()
320 function startFromBeginning() {
321 if (!dotShowAnimTimer.running)
331 property int dotCounter
333 interval: animDuration * 0.5
337 if (dotCounter >= 0) {
338 var nextDot = dots.itemAt(dotCounter--)
339 nextDot.changeAnimation.start()
343 if (dotCounter == Math.round(dots.count / 2)) {
344 circleShrinkAnimTimer.startFromBeginning()
348 function startFromBeginning() {
349 if (!dotHideAnimTimer.running)
350 dotCounter = dots.count - 1
360 model: infographic.model.firstMonth
362 delegate: ObjectPositioner {
363 property alias unlockAnimation: dotUnlockAnim
364 property alias changeAnimation: dotChangeAnim
366 property int currentDay: infographic.model.currentDay
370 radius: backgroundCircle.width / 2
371 halfSize: dot.width / 2
372 posOffset: radius / dot.width / 3
377 objectName:
"dot" + index
379 property real baseOpacity: 0.4
381 width: units.dp(5) * parent.radius / 200
382 height: units.dp(5) * parent.radius / 200
385 state: index < currentDay ?
"filled" : index == currentDay ?
"pointer" :
"unfilled"
393 duration: dotShowAnimTimer.interval
402 duration: dotHideAnimTimer.interval
412 property alias hideAnim: decreaseOpacity
413 property alias showAnim: increaseOpacity
415 property real baseOpacity: 0.6
417 height: 0.7 * backgroundCircle.width
418 width: notification.height
419 anchors.centerIn: parent
421 text: infographic.model.label
423 wrapMode: Text.WordWrap
424 horizontalAlignment: Text.AlignHCenter
425 verticalAlignment: Text.AlignVCenter
434 to: notification.baseOpacity
435 duration: dotShowAnimTimer.interval * dots.count * 5
443 from: notification.baseOpacity
445 duration: dotShowAnimTimer.interval * dots.count * 5
451 anchors.fill: dataCircle
454 if (!dotHideAnimTimer.running &&
455 !dotShowAnimTimer.running &&
456 !circleShrinkAnimTimer.running &&
457 !circleGrowAnimTimer.running)
458 infographic.model.nextDataSource()
461 onClicked: mouse.accepted =
false
462 onPressed: mouse.accepted =
false