← Back to branch summary

~frals/ubuntu-clock-app/clockview-easteregg

« back to all changes in this revision

Viewing changes to common/AnalogClockFace.qml

  • Committer: Tarmac
  • Author(s): Nick Leppänen Larsson
  • Date: 2013-03-19 22:02:53 UTC
  • mfrom: (12.4.4 ubuntu-clock-app)
  • Revision ID: tarmac-20130319220253-ze9g2lo0iy11zl01
Analog clock face tweaked to be more modular and easier to re-use in other parts of the application.

Approved by Juha Ristolainen, Ubuntu Phone Apps Jenkins Bot.

Show diffs side-by-side

added added

removed removed

Lines of Context:
common/AnalogClockFace.qml
1
1
import QtQuick 2.0
2
2
import Ubuntu.Components 0.1
3
3
 
4
 
Item {
 
4
AnalogFaceBase {
5
5
    id: clockRoot
6
6
 
 
7
    function timeChanged(now) {
 
8
        hours = now.getHours()
 
9
        minutes = now.getMinutes()
 
10
        seconds = now.getUTCSeconds();
 
11
    }
 
12
 
7
13
    property var currDate: new Date;
8
14
    property int hours: currDate.getHours()
9
15
    property int minutes: currDate.getMinutes()
10
16
    property int seconds: currDate.getUTCSeconds();
11
17
 
12
 
    // set this to false when app goes to background
13
 
    // hides the seconds hand since it doesnt really
14
 
    // make sense to waste cycles on updating it
15
 
    property bool isForeground: true
16
 
 
17
 
    function timeChanged(now) {
18
 
        hours = now.getHours()
19
 
        minutes = now.getMinutes()
20
 
        seconds = now.getUTCSeconds();
21
 
    }
22
 
 
23
 
    AnalogGlowEffect {
24
 
        id: glowEffect
25
 
        fillRectangle: clockOuterCircle
26
 
        /* this animation might be a bit much considering
27
 
          that the seconds hand is already moving...
28
 
          but i like it :P */
29
 
        SequentialAnimation on opacity {
30
 
            running: clockRoot.isForeground
31
 
            loops: Animation.Infinite
32
 
            NumberAnimation {
33
 
                target: glowEffect
34
 
                property: "opacity"
35
 
                to: 1.0
36
 
                duration: 500
37
 
            }
38
 
            NumberAnimation {
39
 
                target: glowEffect
40
 
                property: "opacity"
41
 
                to: 0.5
42
 
                duration: 500
43
 
            }
44
 
        }
45
 
    }
46
 
 
47
 
    // TODO: this might as well be an image really
48
 
    Rectangle {
49
 
        id: clockOuterCircle
50
 
 
51
 
        anchors.centerIn: parent
52
 
        radius: width / 2
53
 
        antialiasing: true
54
 
 
55
 
        width: units.gu(34)
56
 
        height: units.gu(34)
57
 
 
58
 
        Rectangle {
59
 
            id: innerCircle
60
 
            anchors.centerIn: clockOuterCircle
61
 
            z: 1
62
 
            width: units.gu(2)
63
 
            height: units.gu(2)
64
 
            color: "black"
65
 
            radius: width / 2
66
 
            antialiasing: true
67
 
        }
68
 
 
69
 
        AnalogClockHand {
70
 
            id: hourHand
71
 
            height: units.gu(8)
72
 
            // TODO: set source according to theme?
73
 
            rotationAngle: (clockRoot.hours * 30) + (clockRoot.minutes / 2)
74
 
        }
75
 
 
76
 
        AnalogClockHand {
77
 
            id: minuteHand
78
 
            height: units.gu(12)
79
 
            // TODO: set source according to theme?
80
 
            rotationAngle: clockRoot.minutes * 6
81
 
        }
82
 
 
83
 
        AnalogClockHand {
84
 
            id: secondsHand
85
 
            // TODO: set source according to theme?
86
 
            height: units.gu(14)
87
 
            width:  units.gu(0.5)
88
 
            rotationAngle: clockRoot.seconds * 6
89
 
        }
90
 
 
91
 
        Repeater {
92
 
            model: 12
93
 
            delegate: AnalogClockMarker {
94
 
                number: index
95
 
            }
96
 
        }
97
 
 
 
18
    // "API" of the analog face
 
19
    // say you want add a mousearea to one of the hands
 
20
    // (e.g. when doing a timepicker), just do
 
21
    //
 
22
    /*
 
23
    minuteHandRect.children: MouseArea {
 
24
        anchors.fill: parent
 
25
        onClicked: // do something
 
26
    }
 
27
 
 
28
    */
 
29
    property alias hourHandRect: hourHand
 
30
    property alias minuteHandRect: minuteHand
 
31
    property alias secondsHandRect: secondsHand
 
32
 
 
33
    pulseGlow: false
 
34
 
 
35
    AnalogClockHand {
 
36
        id: hourHand
 
37
        height: units.gu(8)
 
38
        // TODO: set source according to theme?
 
39
        rotationAngle: (clockRoot.hours * 30) + (clockRoot.minutes / 2)
 
40
    }
 
41
 
 
42
    AnalogClockHand {
 
43
        id: minuteHand
 
44
        height: units.gu(12)
 
45
        // TODO: set source according to theme?
 
46
        rotationAngle: clockRoot.minutes * 6
 
47
    }
 
48
 
 
49
    AnalogClockHand {
 
50
        id: secondsHand
 
51
        // TODO: set source according to theme?
 
52
        height: units.gu(14)
 
53
        width:  units.gu(0.5)
 
54
        rotationAngle: clockRoot.seconds * 6
 
55
    }
 
56
 
 
57
    Repeater {
 
58
        model: 12
 
59
        delegate: AnalogClockMarker {
 
60
            number: index
 
61
        }
98
62
    }
99
63
}