Merge lp:~nik90/ubuntu-clock-app/dialer-transition into lp:ubuntu-clock-app/saucy

[Nekhelesh Ramananthan]

Transitions the clock app to use the SDK Dialer widget

Transitions the clock app to use the SDK Dialer widget

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:289
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/134/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/599
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/134
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/134
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-trusty-amd64-ci/52

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/134/rebuild

review: Approve (continuous-integration)

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:291
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/135/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/600
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/135
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/135
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-trusty-amd64-ci/53

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/135/rebuild

review: Approve (continuous-integration)

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:294
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/136/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/601
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/136
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/136
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-trusty-amd64-ci/54

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/136/rebuild

review: Approve (continuous-integration)

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:295
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/137/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/602
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/137
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/137
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-trusty-amd64-ci/55

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/137/rebuild

review: Approve (continuous-integration)

[Alan Pope 🍺🐧🐱 🦄 (popey)]

Ran 12 tests in 257.827s
OK

Passed autopilot tests on nexus 4.

[Nekhelesh Ramananthan (nik90)]

Noticed a small issue with the timer hand animation. I have a fix in mind. Will comment again when that is ready.

[Michael Zanetti (mzanetti)]

18 + // The range of the analogue clock is 0-60 while the alarm hours should be between 00-23. Hence the factor 23/60
19 + alarmTime.setHours(Math.round(addAlarmFace.hours*23/60), Math.round(addAlarmFace.minutes), 0)

Could it make sense to create a function hoursToCirclePosition() instead of copy pasting this all over the place?

===

1079 + model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]

model: 23
should be enough

===

803 + // Property to help with the naming of the clock hands for autopilot purposes
804 + property string objectBase: "Default"

I think it would be cleaner to drop this and change the autopilot tests to do a 2 step search. eg.

select_single(objectName="clockPage").select_single(objectName="hourHandAlarm")

[Nekhelesh Ramananthan (nik90)]

Timer animation glitch fixed. Ready for review!

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:296
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/138/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/620
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/138
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/138
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-trusty-amd64-ci/56

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/138/rebuild

review: Approve (continuous-integration)

[lp:~nik90/ubuntu-clock-app/dialer-transition]

297. By Nekhelesh Ramananthan on 2014-01-09

Simplified repeater stopwatch face model

298. By Nekhelesh Ramananthan on 2014-01-09

Removed objectBase and adjusted autopilot tests for it

299. By Nekhelesh Ramananthan on 2014-01-09

Tweaked timer text update duration to 250ms to match timerhand animation duration

300. By Nekhelesh Ramananthan on 2014-01-09

Added functions hourstoCirclePosition() and circlePositiontoHours() in add alarm page

[Nekhelesh Ramananthan (nik90)]

>
> 1079 + model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
> "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
>
> model: 23
> should be enough
>

Fixed in rev 297

[Nekhelesh Ramananthan (nik90)]

> 18 + // The range of the analogue clock is 0-60 while the alarm hours
> should be between 00-23. Hence the factor 23/60
> 19 + alarmTime.setHours(Math.round(addAlarmFace.hours*23/60),
> Math.round(addAlarmFace.minutes), 0)
>
> Could it make sense to create a function hoursToCirclePosition() instead of
> copy pasting this all over the place?
>

Fixed in rev 300

[Nekhelesh Ramananthan (nik90)]

>
> 803 + // Property to help with the naming of the clock hands for autopilot
> purposes
> 804 + property string objectBase: "Default"
>
> I think it would be cleaner to drop this and change the autopilot tests to do
> a 2 step search. eg.
>
> select_single(objectName="clockPage").select_single(objectName="hourHandAlarm"
> )

Fixed in rev 298

[Nekhelesh Ramananthan (nik90)]

Also reduced timer text update duration from 500 to 250ms in rev 299

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:300
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/139/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/622
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/139
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/139
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-trusty-amd64-ci/57

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/139/rebuild

review: Approve (continuous-integration)

[Michael Zanetti (mzanetti)]

88 + // The range of the analogue clock is 0-60 while the alarm hours should be between 00-23. Hence the factor 23/60

This comment can now go, no?

===

175 + onMinutesChanged: innerLabel.text = Utils.zeroleft(hours*23/60, 2) + ":" + Utils.zeroleft(minutes, 2)

Seems its also used in the Alarms stuff. Maybe it belongs into Utils?

[lp:~nik90/ubuntu-clock-app/dialer-transition]

301. By Nekhelesh Ramananthan on 2014-01-09

moved functions hourstocircleposition() and circlepositiontohours() to ClockUtils.js

302. By Nekhelesh Ramananthan on 2014-01-09

Fixed clock hand position

[Nekhelesh Ramananthan (nik90)]

> 88 + // The range of the analogue clock is 0-60 while the alarm hours
> should be between 00-23. Hence the factor 23/60
>
> This comment can now go, no?
>

Absolutely. I missed it before. Fixed in rev 301

>
> 175 + onMinutesChanged: innerLabel.text = Utils.zeroleft(hours*23/60, 2) +
> ":" + Utils.zeroleft(minutes, 2)
>
> Seems its also used in the Alarms stuff. Maybe it belongs into Utils?

I think for this commit, moving to Utils makes sense. However this might change in the near future since the alarms page should technically follow a similar behaviour to the clock page where the hours range is between 0-12 instead of 0-24. However that will come only after design approval.

Fixed in rev 301.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:302
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/140/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/623
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/140
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/140
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-trusty-amd64-ci/58

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/140/rebuild

review: Approve (continuous-integration)

[lp:~nik90/ubuntu-clock-app/dialer-transition]

303. By Nekhelesh Ramananthan on 2014-01-10

Missed one alarm statement

[Michael Zanetti (mzanetti)]

lgtm

review: Approve

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:303
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/142/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/641
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/142
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/142
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-trusty-amd64-ci/60

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/142/rebuild

review: Approve (continuous-integration)

=== modified file 'alarm/AddAlarmPage.qml'
--- alarm/AddAlarmPage.qml	2013-12-29 20:53:56 +0000
+++ alarm/AddAlarmPage.qml	2014-01-10 14:02:26 +0000
@@ -62,8 +62,6 @@
             if (status != Alarm.Ready)
                 return;
             if ((operation > Alarm.NoOperation) && (operation < Alarm.Reseting)) {
-                reset();
-                resetPage()
                 pagestack.pop();
             }
         }
@@ -72,7 +70,8 @@
     // Function to save a new alarm
     function saveNewAlarm() {
         var alarmTime = new Date();
-        alarmTime.setHours(addAlarmFace.hours, addAlarmFace.minutes, 0)
+
+        alarmTime.setHours(Utils.hourstoCirclePosition(addAlarmFace.hours), Math.round(addAlarmFace.minutes), 0)
 
         alarm.message = nameAlarm.text
         alarm.date = alarmTime
@@ -101,32 +100,25 @@
         alarm.enabled = temp_alarm.enabled
         alarm.date = temp_alarm.date
 
-        addAlarmFace.hours = Qt.formatTime(alarm.date, "hh")
-        addAlarmFace.hourHandRotation = addAlarmFace.hours * 15
+        addAlarmFace.hours = Utils.circlePositiontoHours(Qt.formatTime(alarm.date, "hh"))
         addAlarmFace.minutes = Qt.formatTime(alarm.date, "mm")
-        addAlarmFace.minuteHandRotation = addAlarmFace.minutes * 6
     }
 
     function updateAlarm() {
         var temp_alarm = alarmModel.get(alarmIndex)
 
         var alarmTime = new Date()
-        alarmTime.setHours(addAlarmFace.hours, addAlarmFace.minutes, 0)
+
+        alarmTime.setHours(Utils.hourstoCirclePosition(addAlarmFace.hours), Math.round(addAlarmFace.minutes), 0)
 
         temp_alarm.message = nameAlarm.text
         temp_alarm.type = alarm.type
         temp_alarm.daysOfWeek = alarm.daysOfWeek
         temp_alarm.date = alarmTime
         temp_alarm.save()
-        resetPage()
         pagestack.pop()
     }
 
-    function resetPage() {
-        addAlarmFace.hours = addAlarmFace.minutes = 0;
-        addAlarmFace.hourHandRotation = addAlarmFace.minuteHandRotation = 0
-    }
-
     Timer {
         id: errorTimer
         interval: 1000
@@ -149,58 +141,27 @@
             spacing: units.gu(1)
             anchors { left: parent.left; right: parent.right; top: parent.top; topMargin: units.gu(5)}
 
-            AnalogFaceBase {
+            ClockBase {
                 id: addAlarmFace
 
-                property int hours: 0
-                property int minutes: 0
-                property alias hourHandRotation: hourHand.rotationValue
-                property alias minuteHandRotation: minuteHand.rotationValue
+                draggable: true
+                showSecondHand: false
 
-                onMinutesChanged: innerLabel.text = Utils.zeroleft(addAlarmFace.hours, 2) + ":" + Utils.zeroleft(addAlarmFace.minutes, 2);
-                onHoursChanged: innerLabel.text = Utils.zeroleft(addAlarmFace.hours, 2) + ":" + Utils.zeroleft(addAlarmFace.minutes, 2);
+                onMinutesChanged: innerLabel.text = Utils.zeroleft(Utils.hourstoCirclePosition(hours), 2) + ":" + Utils.zeroleft(minutes, 2);
+                onHoursChanged: innerLabel.text = Utils.zeroleft(Utils.hourstoCirclePosition(hours), 2) + ":" + Utils.zeroleft(minutes, 2);
 
                 innerLabel.objectName: "labelAlarm"
-                innerLabel.text: Utils.zeroleft(addAlarmFace.hours, 2) + ":" + Utils.zeroleft(addAlarmFace.minutes, 2)
+                innerLabel.text: Utils.zeroleft(Utils.hourstoCirclePosition(hours), 2) + ":" + Utils.zeroleft(minutes, 2)
 
                 anchors.horizontalCenter: parent.horizontalCenter
 
-                // Hour hand with touch/mouse drag support
-                AnalogTouchHand {
-                    id: hourHand
-                    objectName: "hourHand"
-
-                    onTimerValueChanged: addAlarmFace.hours = timerValue;
-
-                    perAngle: 15;
-                    totalValue: 24;
-                    handHeight: units.gu(12.5); handWidth: units.gu(1);
-                    z: minuteHand.z + 1;
-                    animateFlag: false;
-                    enabled: true;
-                    grabMargin: units.gu(3);
-                }
-
-                // Minute hand with touch/mouse drag support
-                AnalogTouchHand {
-                    id: minuteHand
-
-                    onTimerValueChanged: addAlarmFace.minutes = timerValue;
-
-                    handHeight: units.gu(14.5); handWidth: units.gu(0.5);
-                    animateFlag: false;
-                    enabled: true;
-                    grabMargin: units.gu(0)
-                    grabHeight: units.gu(7)
-                }
-
                 Label {
                     id: errorLabel
                     visible: false
-                    z: addAlarmFace.innerCircle.z + 1
+                    parent: addAlarmFace.centerItem
                     anchors {
-                      centerIn: addAlarmFace.innerCircle
-                      fill: addAlarmFace.innerCircle
+                      centerIn: parent
+                      fill: parent
                       margins: units.gu(2)
                     }
                     horizontalAlignment: Text.AlignHCenter
 
=== added file 'alarm/AlarmFace.qml'
--- alarm/AlarmFace.qml	1970-01-01 00:00:00 +0000
+++ alarm/AlarmFace.qml	2014-01-10 14:02:26 +0000
@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import "../common"
+import "../common/ClockUtils.js" as Utils
+
+ClockBase {
+    id: alarmFace
+
+    property alias showSetupMessage: setupMessage.visible
+
+    showSecondHand: false
+
+    onMinutesChanged: innerLabel.text = Utils.zeroleft(Utils.hourstoCirclePosition(hours), 2) + ":" + Utils.zeroleft(minutes, 2)
+    onHoursChanged: innerLabel.text = Utils.zeroleft(Utils.hourstoCirclePosition(hours), 2) + ":" + Utils.zeroleft(minutes, 2)
+
+    innerLabel.visible: !setupMessage.visible
+    innerLabel.text: Utils.zeroleft(Utils.hourstoCirclePosition(hours), 2) + ":" + Utils.zeroleft(minutes, 2)
+
+    Label {
+        id: setupMessage
+        objectName: "labelAlarmSetup"
+
+        parent: alarmFace.centerItem
+        width: parent.width; height: width;
+        anchors.centerIn: parent
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        color: Theme.palette.normal.baseText
+
+        fontSize: "large"
+        text: i18n.tr("Long press to setup an alarm")
+        wrapMode: Text.WordWrap
+    }
+}
 
=== modified file 'alarm/AlarmPage.qml'
--- alarm/AlarmPage.qml	2013-10-26 19:26:49 +0000
+++ alarm/AlarmPage.qml	2014-01-10 14:02:26 +0000
@@ -69,7 +69,7 @@
                         nextAlarm = alarmModel.get(i)
             }
             nameAlarm.text = nextAlarm.message
-            alarmFace.hours = Qt.formatTime(nextAlarm.date, "hh")
+            alarmFace.hours = Utils.circlePositiontoHours(Qt.formatTime(nextAlarm.date, "hh"))
             alarmFace.minutes = Qt.formatTime(nextAlarm.date, "mm")
         }
         else {
@@ -118,18 +118,13 @@
             UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
         }
 
-        AnalogAlarm {
+        AlarmFace {
             id: alarmFace
 
             anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
             showSetupMessage: modelCount == 0 ? true : false
-
-            MouseArea {
-                id: alarmMouseArea
-                anchors.fill: alarmFace.innerCircle
-                enabled: alarmFace.showSetupMessage
-                onPressAndHold: pagestack.push(Qt.resolvedUrl("AddAlarmPage.qml"), {"isNewAlarm": true})
-            }
+            enableMouseArea: showSetupMessage
+            onPressAndHold: pagestack.push(Qt.resolvedUrl("AddAlarmPage.qml"), {"isNewAlarm": true})
         }
 
         // Element to set the name of a saved preset.
 
=== removed file 'alarm/AnalogAlarm.qml'
--- alarm/AnalogAlarm.qml	2013-10-26 12:20:55 +0000
+++ alarm/AnalogAlarm.qml	1970-01-01 00:00:00 +0000
@@ -1,72 +0,0 @@
-/*
- * Copyright (C) 2013 Canonical Ltd
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authored by: Nekhelesh Ramananthan <[e-mail]>
- */
-
-import QtQuick 2.0
-import Ubuntu.Components 0.1
-import "../common"
-import "../common/ClockUtils.js" as Utils
-
-// Component which draws the analog alarm face.
-AnalogFaceBase {
-    id: alarmRoot
-
-    property int hours: 0
-    property int minutes: 0
-    property alias showSetupMessage: setupMessage.visible;
-
-    onMinutesChanged: innerLabel.text = Utils.zeroleft(hours, 2) + ":" + Utils.zeroleft(minutes, 2);
-    onHoursChanged: innerLabel.text = Utils.zeroleft(hours, 2) + ":" + Utils.zeroleft(minutes, 2)
-
-    innerLabel.visible: !setupMessage.visible
-    innerLabel.text: Utils.zeroleft(alarmRoot.hours, 2) + ":" + Utils.zeroleft(alarmRoot.minutes, 2)
-
-    Label {
-        id: setupMessage
-        objectName: "labelAlarmSetup"
-
-        z: innerCircle.z + 1
-        width: innerCircle.width; height: width;
-        anchors.centerIn: alarmRoot
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        color: Theme.palette.normal.baseText
-
-        fontSize: "large"
-        text: i18n.tr("Long press \nto setup \nan alarm")
-        wrapMode: Text.WordWrap
-    }
-
-    AnalogClockHand {
-        id: hourHand
-        objectName: "alarmHourHand"
-
-        z: parent.z
-        handHeight: units.gu(12.5); handWidth: units.gu(1);
-        rotation: (alarmRoot.hours * 15) + (alarmRoot.minutes / 2);
-    }
-
-    AnalogClockHand {
-        id: minuteHand
-        objectName: "alarmMinuteHand"
-
-        z: parent.z + 1
-        handHeight: units.gu(14.5); handWidth: units.gu(0.5);
-        rotation: alarmRoot.minutes * 6;
-    }
-
-}
 
=== removed file 'clock/AnalogClockFace.qml'
--- clock/AnalogClockFace.qml	2013-10-26 12:20:55 +0000
+++ clock/AnalogClockFace.qml	1970-01-01 00:00:00 +0000
@@ -1,72 +0,0 @@
-/*
- * Copyright (C) 2013 Canonical Ltd
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authored by: Juha Ristolainen <[e-mail]>
- *              Nekhelesh Ramananthan <[e-mail]>
- *              Nick Leppänen Larsson <[e-mail]>
- */
-
-import QtQuick 2.0
-import Ubuntu.Components 0.1
-import "../common"
-
-// Element which draws the clock face along with the hour, minute, second hand and the clock label
-AnalogFaceBase {
-    id: clockRoot
-
-    property var currDate: new Date;
-    property int hours: currDate.getHours()
-    property int minutes: currDate.getMinutes()
-    property int seconds: currDate.getUTCSeconds();
-
-    signal clicked(var mouse)
-
-    function timeChanged(now) {
-        hours = now.getHours()
-        minutes = now.getMinutes()
-        seconds = now.getUTCSeconds();        
-    }        
-
-    AnalogClockHand {
-        id: hourHand
-
-        z: parent.z
-        handHeight: units.gu(12.5); handWidth: units.gu(1);
-        rotation: (hours * 30) + (minutes / 2);
-    }
-
-    AnalogClockHand {
-        id: minuteHand
-
-        z: parent.z + 1
-        handHeight: units.gu(14.5); handWidth: units.gu(0.5);
-        rotation: minutes * 6;
-    }
-
-    AnalogClockHand {
-        id: secondsHand
-
-        z: parent.z - 1;
-        handHeight: units.gu(17); handWidth:  units.gu(0.5)
-        rotation: seconds * 6;
-    }
-
-    // Mouse area to reveal the clock sunrise/sunset on clicking the clock face
-    MouseArea {
-        anchors.fill: parent
-        z: parent.z + 1;
-        onClicked: clockRoot.clicked(mouse);
-    }
-}
 
=== modified file 'clock/ClockPage.qml'
--- clock/ClockPage.qml	2013-11-07 16:35:51 +0000
+++ clock/ClockPage.qml	2014-01-10 14:02:26 +0000
@@ -26,7 +26,7 @@
 import "../common"
 
 Page {
-    id: clockPage;
+    id: clockPage
 
     // Property to hold the formatted time string to show on the screen
     property string currentTimeFormatted
@@ -113,13 +113,27 @@
         contentWidth: parent.width
         contentHeight: clockFace.height + clockFace.anchors.topMargin + savedWorldClock.height + savedWorldClock.anchors.topMargin + units.gu(3)
 
-        // Qml Element to draw the analogue clock face along with its hour, minute and second hands.
-        AnalogClockFace {
+        // QML Element to draw the analogue clock face along with its hour, minute and second hands.
+        ClockBase {
             id: clockFace
 
-            anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
+            anchors {
+                top: parent.top
+                topMargin: units.gu(10)
+                horizontalCenter: parent.horizontalCenter
+            }
+
             innerLabel.text: currentTimeFormatted
-            innerLabel.objectName: "currentTimeLabel"
+
+            hours: new Date().getHours() * 5
+            minutes: new Date().getMinutes()
+            seconds: new Date().getUTCSeconds()
+
+            function timeChanged(now) {
+                hours = now.getHours() * 5
+                minutes = now.getMinutes()
+                seconds = now.getUTCSeconds();
+            }
 
             onClicked: {
                 if (easterEggCircle.isReady == XmlListModel.Ready && worldModel.city !== "undefined")
@@ -131,8 +145,9 @@
 
             EasterEgg {
                 id: easterEggCircle
+                parent: clockFace.centerItem
                 anchors.centerIn: parent
-                width: clockFace.innerCircle.width; height: width;
+                width: clockFace.centerItem.width; height: width;
                 radius: width / 2;
             }
 
 
=== removed file 'common/AnalogClockHand.qml'
--- common/AnalogClockHand.qml	2013-07-14 11:36:59 +0000
+++ common/AnalogClockHand.qml	1970-01-01 00:00:00 +0000
@@ -1,50 +0,0 @@
-/*
- * Copyright (C) 2013 Canonical Ltd
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authored by: Nekhelesh Ramananthan <[e-mail]>
- */
-
-import QtQuick 2.0
-
-// Qml component to draw the analog clock hand
-Rectangle{
-    id: analogClockHandContainer
-
-    property alias handHeight: analogClockHand.height
-    property alias handWidth: analogClockHand.width
-    property alias handRotationAnimation: analogClockHandRotation.enabled
-
-    radius: width / 2
-    anchors.fill: parent
-    transformOrigin: Item.Center
-    color: "transparent";
-
-    Rectangle {
-        id: analogClockHand
-
-        x: (parent.width / 2) - (width / 2); y: (parent.height / 2) - height; z: 2;
-        width: units.gu(1); height: units.gu(14);
-        radius: units.gu(1)
-        color: Theme.palette.normal.baseText
-        antialiasing: true
-    }
-
-    Behavior on rotation {
-        id: analogClockHandRotation
-        enabled: true;
-        RotationAnimation { direction: RotationAnimation.Shortest }
-    }
-}
-
 
=== removed file 'common/AnalogFaceBase.qml'
--- common/AnalogFaceBase.qml	2013-10-26 13:20:54 +0000
+++ common/AnalogFaceBase.qml	1970-01-01 00:00:00 +0000
@@ -1,149 +0,0 @@
-/*
- * Copyright (C) 2013 Canonical Ltd
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authored by: Juha Ristolainen <[e-mail]>
- *              Nick Leppänen Larsson <[e-mail]>
- */
-
-import QtQuick 2.0
-import Ubuntu.Components 0.1
-import QtGraphicalEffects 1.0
-
-// FIXME: Replace Rectangle with UbuntuShape when the new widget lands in the Ubuntu SDK.
-Rectangle {
-    id: clockRoot
-
-    property alias innerCircle: innerCircle
-    property alias innerLabel: currentTimeLabel
-    property real offset : units.gu(0.2)
-
-    width: units.gu(32); height: units.gu(32)
-    radius: width / 2
-    antialiasing: true
-
-    // Current time label
-    Label {
-        id: currentTimeLabel
-
-        z: innerCircle.z + 1
-        width: innerCircle.width; height: width;
-        anchors.centerIn: parent
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        color: Theme.palette.normal.baseText
-        font.pixelSize: units.dp(41)
-    }
-
-    gradient: Gradient {
-        GradientStop { position: 0.0;  color: "#512F48" }
-        GradientStop { position: 0.25; color: "#583048" }
-        GradientStop { position: 0.5;  color: "#653449" }
-        GradientStop { position: 0.75; color: "#6D384A" }
-        GradientStop { position: 1.0;  color: "#753B4A" }
-    }
-
-    // Draws the outter shadow/highlight
-    Rectangle {
-        id: sourceOutter
-        anchors { fill: parent; margins: -offset }
-        radius: (width / 2)
-        antialiasing: true
-        gradient: Gradient {
-            GradientStop { position: 0.0; color: "black" }
-            GradientStop { position: 0.5; color: "transparent" }
-            GradientStop { position: 1.0; color: "white" }
-        }
-    }
-
-    // Mask for outer 3D effect
-    Rectangle {
-        id: maskOutter
-        anchors.fill: sourceOutter
-        color: "transparent"
-        radius: (width / 2)
-        antialiasing: true
-        border { width: offset; color: "black" }
-    }
-
-    // Outter effect
-    OpacityMask {
-        anchors.fill: sourceOutter
-        opacity: 0.65
-        source: ShaderEffectSource {
-            sourceItem: sourceOutter
-            hideSource: true
-        }
-        maskSource: ShaderEffectSource {
-            sourceItem: maskOutter
-            hideSource: true
-        }
-    }
-
-    // FIXME: Replace this with UbuntuShape when the widget has landed in the SDK.
-    Rectangle {
-        id: innerCircle
-
-        z: parent.z + 2
-        height: units.gu(19); width: units.gu(19)
-        radius: width / 2
-        anchors.centerIn: parent
-        antialiasing: true
-
-        gradient: Gradient {
-            GradientStop { position: 0.0;  color: "#7A4C68" }
-            GradientStop { position: 0.25; color: "#804563" }
-            GradientStop { position: 0.5;  color: "#864660" }
-            GradientStop { position: 0.75; color: "#86465E" }
-            GradientStop { position: 1.0;  color: "#964E66" }
-        }
-
-        // Draws the inner highlight / shadow
-        Rectangle {
-            id: sourceInner;
-            anchors { fill: parent; margins: -offset }
-            radius: (width / 2)
-            antialiasing: true
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "white" }
-                GradientStop { position: 0.5; color: "transparent" }
-                GradientStop { position: 1.0; color: "black" }
-            }
-        }
-
-        // Mask for inner 3D effect
-        Rectangle {
-            id: maskInner
-            color: "transparent"
-            anchors.fill: sourceInner
-            radius: (width / 2)
-            antialiasing: true
-            border { width: offset; color: "black" }
-        }
-
-        // Inner effect
-        OpacityMask {
-            opacity: 0.65
-            anchors.fill: sourceInner
-            source: ShaderEffectSource {
-                sourceItem: sourceInner
-                hideSource: true
-            }
-            maskSource: ShaderEffectSource {
-                sourceItem: maskInner
-                hideSource: true
-            }
-        }
-    }
-}
 
=== modified file 'common/AnalogGlowEffect.qml'
--- common/AnalogGlowEffect.qml	2013-08-09 22:11:05 +0000
+++ common/AnalogGlowEffect.qml	2014-01-10 14:02:26 +0000
@@ -29,6 +29,6 @@
     glowRadius: 10
     spread: 0.8
     color: "orange"
-    cornerRadius: fillRectangle.radius
+    cornerRadius: fillRectangle.size
     z: fillRectangle - 1
 }
 
=== removed file 'common/AnalogTouchHand.qml'
--- common/AnalogTouchHand.qml	2013-09-04 10:35:41 +0000
+++ common/AnalogTouchHand.qml	1970-01-01 00:00:00 +0000
@@ -1,108 +0,0 @@
-/*
- * Copyright (C) 2013 Canonical Ltd
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authored by: Nekhelesh Ramananthan <[e-mail]>
- */
-
-import QtQuick 2.0
-import Ubuntu.Components 0.1
-import "../common"
-
-// Qml item to enable touch input to the AnalogClockHand component
-Item {
-    id: touchHand;
-
-    z: parent.z;
-    width: parent.width; height: width;
-    anchors.centerIn: parent;
-
-    property int totalValue: 60;
-    property int perAngle: 6;
-
-    /*!
-      Enable/Disable rotation animation. Disable it while dragging the clock hand to avoid
-      receiving inaccurate input values.
-      */
-    property alias animateFlag: hand.handRotationAnimation
-
-    /*!
-      Set if the dial should be rotated by the seconds, minutes or hours. This generally needs to be
-      multiplied by 6 to convert it into degrees per second/hour/minute.
-      */
-    property alias rotationValue: hand.rotation;
-
-    // Set the touch/mouse grab area height and top margin
-    property alias grabHeight: grabArea.height;
-    property int grabMargin: units.gu(0);
-
-    // Height and width of the clock hand
-    property alias handHeight: hand.handHeight;
-    property alias handWidth: hand.handWidth;
-
-    // internal properties required for the functioning of the AnalogTouchHand
-    property int timerValue: 0
-    property real centerX : width / 2
-    property real centerY : height / 2
-
-    // Clock hand which lies above the rotating dial. This is stationary w.r.t to the rotating dial.
-    AnalogClockHand {
-        id: hand
-
-        handHeight: units.gu(0); handWidth: units.gu(0);
-
-        /*!
-              Element to define the grab area of the clock hand. This allows us to define small clock hand
-              which are still easier to grab.
-              */
-        Rectangle {
-            id: grabArea
-            color: "transparent"
-            width: units.gu(5); height: width;
-            anchors { top: hand.top; topMargin: touchHand.grabMargin; horizontalCenter: hand.horizontalCenter }
-        }
-
-        MouseArea{
-            anchors.fill: grabArea;
-            preventStealing: true;
-            enabled: true;
-            onPositionChanged:  {
-                var point =  mapToItem (touchHand, mouse.x, mouse.y);
-                var diffX = (point.x - touchHand.centerX);
-                var diffY = -1 * (point.y - touchHand.centerY);
-                var rad = Math.atan (diffY / diffX);
-                var deg = (rad * 180 / Math.PI);
-
-                if (diffX > 0 && diffY > 0) {
-                    hand.rotation = 90 - Math.abs (deg);
-                }
-                else if (diffX > 0 && diffY < 0) {
-                    hand.rotation = 90 + Math.abs (deg);
-                }
-                else if (diffX < 0 && diffY > 0) {
-                    hand.rotation = 270 + Math.abs (deg);
-                }
-                else if (diffX < 0 && diffY < 0) {
-                    hand.rotation = 270 - Math.abs (deg);
-                }
-
-                if (Math.round(hand.rotation/perAngle) === totalValue) {
-                    touchHand.timerValue = 0
-                } else {
-                    touchHand.timerValue = Math.round(hand.rotation/perAngle);
-                }
-            }
-        }
-    }
-}
 
=== added file 'common/ClockBase.qml'
--- common/ClockBase.qml	1970-01-01 00:00:00 +0000
+++ common/ClockBase.qml	2014-01-10 14:02:26 +0000
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Ubuntu.Components.Pickers 0.1
+
+/*
+  Basic component to draw the analogue clock with hour, minute and second hands.
+ */
+Dialer {
+    id: clockRoot
+
+    // Properties to set the clock hands position
+    property alias hours: _hourHand.value
+    property alias minutes: _minuteHand.value
+    property alias seconds: _secondHand.value
+
+    // Property to set the label shown in the inner circle
+    property alias innerLabel: _currentTimeLabel
+
+    // Property to individually hide the hour and minute hand in timer and alarm
+    property bool showHourHand: true
+    property bool showSecondHand: true
+
+    // Property to enable/disable the mouse area of the inner circle.
+    property bool enableMouseArea: true
+
+    // Property to set if the clock hands are adjustable by the user
+    property bool draggable: false
+
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+    minimumValue: 0
+    maximumValue: 60
+    size: units.gu(32)
+
+    DialerHand {
+        id: _hourHand
+        objectName: "hourHand"
+        hand.draggable: draggable
+        hand.visible: showHourHand
+    }
+
+    DialerHand {
+        id: _minuteHand
+        objectName: "minuteHand"
+        hand.draggable: draggable
+    }
+
+    DialerHand {
+        id: _secondHand
+        objectName: "secondHand"
+        hand.draggable: draggable
+        hand.visible: showSecondHand
+    }
+
+    centerContent: [
+        Label {
+            id: _currentTimeLabel
+            objectName: "label"
+            anchors.centerIn: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: units.dp(41)
+        }
+    ]
+
+    // Mouse area to reveal the clock sunrise/sunset on clicking the clock face
+    MouseArea {
+        parent: clockRoot.centerItem
+        anchors.fill: parent
+        enabled: enableMouseArea
+        z: parent.z + 1;
+        onClicked: clockRoot.clicked(mouse);
+        onPressAndHold: clockRoot.pressAndHold(mouse);
+    }
+}
 
=== modified file 'common/ClockUtils.js'
--- common/ClockUtils.js	2013-09-12 17:22:30 +0000
+++ common/ClockUtils.js	2014-01-10 14:02:26 +0000
@@ -43,3 +43,14 @@
 function numberToLocaleString( num ) {
     return Number(num).toLocaleString(Qt.locale(), "f", 0)
 }
+
+// Function to convert hours to clock hand positions.
+// The range of the analogue clock is 0-60 while the hours should be between 00-23. Hence the factor 23/60
+function hourstoCirclePosition(hours) {
+    return Math.round(hours * 23/60)
+}
+
+// Function to convert clock hand positions to hours (24-hours)
+function circlePositiontoHours(position) {
+    return Math.round(position * 60/23)
+}
 
=== removed file 'stopwatch/AnalogStopwatch.qml'
--- stopwatch/AnalogStopwatch.qml	2013-09-14 06:20:48 +0000
+++ stopwatch/AnalogStopwatch.qml	1970-01-01 00:00:00 +0000
@@ -1,128 +0,0 @@
-/*
- * Copyright (C) 2013 Canonical Ltd
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authored by: Alessandro Pozzi <[e-mail]>
- *              Nekhelesh Ramananthan <[e-mail]>
- */
-
-import QtQuick 2.0
-import Ubuntu.Components 0.1
-import "StopwatchSupport.js" as SScript
-import "../common"
-
-// This component draws the stopwatch analog UI and defines different UI modes like normal and easteregg.
-AnalogFaceBase {
-    id: analogStopwatch
-
-    property var startTime: 0;
-    property var stopTime: 0;
-    property int delay : 0;
-    property bool flag: true;
-    property int totalTime: 0;
-
-    property int hours: 0;
-    property int minutes: 0;
-    property int seconds: 0;
-    property int milliseconds: 0;
-    property int decimalgradient: 0;  
-
-    // Sets the location and visible (bool) values of the blip (small circle visible when the lap button is pressed)
-    property alias blipLocation: blipFist.location;
-    property alias blipVisible: blipFist.visible;
-
-    // Retrieves the status of the stopwatch timer
-    property bool timerStatus: stopwatchUIUpdate.running    
-
-    function reset() {
-        decimalgradient = totalTime = milliseconds = seconds = minutes = hours = 0
-        SScript.deltaTime[0] = SScript.deltaTime[1] = SScript.deltaTime[2] = SScript.deltaTime[3] = 0
-        startTime = stopTime = delay = 0;
-        flag = true;
-    }
-
-    function start() {
-        stopwatchUIUpdate.start()
-    }
-
-    function stop() {
-        stopwatchUIUpdate.stop()
-    }        
-
-    // Timer which runs every 100 microseconds to update the time and also the trailing hand gradient.
-    Timer {
-        id: stopwatchUIUpdate
-
-        interval: 100
-        repeat: true
-        onTriggered: {            
-            totalTime = SScript.delta();
-            SScript.deltaTime = SScript.msToTime(totalTime)
-            hours = SScript.deltaTime[0];
-            minutes = SScript.deltaTime[1];
-            seconds = SScript.deltaTime[2];
-            milliseconds = SScript.deltaTime[3];
-            decimalgradient = minutes * 10;
-        }
-    }
-
-    // This component draws the small orange circle that is visible everytime the lap button is pressed.
-    Blip {
-        id: blipFist
-    }
-    
-    // This component draws the trailing shadow of the second hand.
-    HandGradient {
-        id: gradientSecond
-        rotationAngle: minutes * 6
-        decimalGradient: decimalgradient
-    }
-
-    Repeater {
-        id:stopwatchMarkers
-        
-        model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
-        
-        delegate: AnalogClockMarker {
-            number: modelData            
-            total: 24;
-            size: 0.2
-            distance: 0.32            
-        }
-    }
-
-    AnalogClockHand {
-        id: hourHand
-
-        z: parent.z
-        handHeight: units.gu(12.5); handWidth: units.gu(1);
-        rotation: hours * 15;
-    }
-
-    AnalogClockHand {
-        id: minuteHand
-
-        z: parent.z
-        handHeight: units.gu(14.5); handWidth: units.gu(0.5);
-        rotation: minutes * 6;
-    }
-
-    AnalogClockHand {
-        id: secondHand
-
-        z: parent.z - 1;
-        handHeight: units.gu(17); handWidth:  units.gu(0.5)
-        rotation: seconds * 6;
-    }
-}
 
=== added file 'stopwatch/StopwatchFace.qml'
--- stopwatch/StopwatchFace.qml	1970-01-01 00:00:00 +0000
+++ stopwatch/StopwatchFace.qml	2014-01-10 14:02:26 +0000
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Alessandro Pozzi <[e-mail]>
+ *              Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import "StopwatchSupport.js" as SScript
+import "../common"
+
+ClockBase {
+    id: stopwatchFace
+
+    // Properties to store/set the time variables
+    property var startTime: 0
+    property var stopTime: 0
+    property int delay : 0
+    property bool flag: true
+    property int totalTime: 0
+    property int milliseconds: 0
+
+    // Sets the location and visible (bool) values of the blip (small circle visible when the lap button is pressed)
+    property alias blipLocation: blipFist.location
+    property alias blipVisible: blipFist.visible
+
+    // Retrieves the status of the stopwatch timer
+    property bool timerStatus: stopwatchUIUpdate.running
+
+    function reset() {
+        totalTime = milliseconds = seconds = minutes = hours = 0
+        SScript.deltaTime[0] = SScript.deltaTime[1] = SScript.deltaTime[2] = SScript.deltaTime[3] = 0
+        startTime = stopTime = delay = 0;
+        flag = true;
+    }
+
+    function start() {
+        stopwatchUIUpdate.start()
+    }
+
+    function stop() {
+        stopwatchUIUpdate.stop()
+    }
+
+    // Timer which runs every 100 microseconds to update the time and also the trailing hand gradient.
+    Timer {
+        id: stopwatchUIUpdate
+
+        interval: 100
+        repeat: true
+        onTriggered: {
+            totalTime = SScript.delta();
+            SScript.deltaTime = SScript.msToTime(totalTime)
+            hours = SScript.deltaTime[0];
+            minutes = SScript.deltaTime[1];
+            seconds = SScript.deltaTime[2];
+            milliseconds = SScript.deltaTime[3];
+        }
+    }
+
+    // This component draws the small white circle that is visible everytime the lap button is pressed.
+    Blip {
+        id: blipFist
+    }
+
+    Repeater {
+        id:stopwatchMarkers
+
+        model: 24
+
+        delegate: AnalogClockMarker {
+            number: modelData
+            total: 24;
+            size: 0.2
+            distance: 0.32
+        }
+    }
+}
 
=== modified file 'stopwatch/StopwatchPage.qml'
--- stopwatch/StopwatchPage.qml	2013-11-05 13:12:48 +0000
+++ stopwatch/StopwatchPage.qml	2014-01-10 14:02:26 +0000
@@ -63,34 +63,34 @@
         contentHeight: analogStopwatch.height + analogStopwatch.anchors.topMargin + listLap.height + listLap.anchors.topMargin + units.gu(3)
 
         // Component which draws the analog stopwatch face, controls the timer and calculates the time.
-        AnalogStopwatch {
+        StopwatchFace {
             id: analogStopwatch
-            objectName: "buttonStopwatch"
-
-            anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
-
-            innerLabel.objectName: "labelStopwatch"
+            objectName: "stopwatchFace"
+
+            anchors {
+                top: parent.top
+                topMargin: units.gu(10)
+                horizontalCenter: parent.horizontalCenter
+            }
+
             innerLabel.text: SScript.timeToString(analogStopwatch.hours, analogStopwatch.minutes, analogStopwatch.seconds, analogStopwatch.milliseconds)
 
-            MouseArea {
-                anchors.fill: analogStopwatch.innerCircle;
-                onClicked: {
-                    if(analogStopwatch.timerStatus == false) {
-                        analogStopwatch.start()
-                        stopWatchLabelUpdate.start()
-                        if (analogStopwatch.flag) {
-                            analogStopwatch.startTime = new Date().getTime();
-                            analogStopwatch.flag = false;
-                        }
-                        else {
-                            analogStopwatch.delay = Math.abs(new Date().getTime() - analogStopwatch.stopTime);
-                            analogStopwatch.startTime = analogStopwatch.startTime + analogStopwatch.delay;
-                        }
-                    } else {
-                        analogStopwatch.stop()
-                        stopWatchLabelUpdate.stop()
-                        analogStopwatch.stopTime = new Date().getTime();
-                    }
+            onClicked: {
+                if(analogStopwatch.timerStatus == false) {
+                    analogStopwatch.start()
+                    stopWatchLabelUpdate.start()
+                    if (analogStopwatch.flag) {
+                        analogStopwatch.startTime = new Date().getTime();
+                        analogStopwatch.flag = false;
+                    }
+                    else {
+                        analogStopwatch.delay = Math.abs(new Date().getTime() - analogStopwatch.stopTime);
+                        analogStopwatch.startTime = analogStopwatch.startTime + analogStopwatch.delay;
+                    }
+                } else {
+                    analogStopwatch.stop()
+                    stopWatchLabelUpdate.stop()
+                    analogStopwatch.stopTime = new Date().getTime();
                 }
             }
         }
 
=== modified file 'tests/autopilot/ubuntu_clock_app/emulators.py'
--- tests/autopilot/ubuntu_clock_app/emulators.py	2013-11-07 16:35:51 +0000
+++ tests/autopilot/ubuntu_clock_app/emulators.py	2014-01-10 14:02:26 +0000
@@ -66,7 +66,7 @@
 
     def get_time_label(self):
         """Return the label with the timer countdown"""
-        return self.wait_select_single("Label", objectName="currentTimeLabel")
+        return self.select_single("ClockPage").wait_select_single("Label", objectName="label")
 
     # WORLD CLOCK Page Emulator Functions
     def get_world_cities_page(self):
@@ -108,7 +108,7 @@
 
     def get_timer_minute_hand(self):
         """Returns the hour hand of clock in timer tab"""
-        return self.wait_select_single("AnalogTouchHand", objectName="minuteHand")
+        return self.select_single("TimerPage").wait_select_single("DialerHand", objectName="minuteHand")
 
     def get_preset_label_text(self):
         """Returns the label with the preset text"""
@@ -122,7 +122,7 @@
 
     def get_label_timer(self):
         """Return the label with the timer countdown"""
-        return self.wait_select_single("Label", objectName="labelTimer")
+        return self.select_single("TimerPage").wait_select_single("Label", objectName="label")
 
     def get_first_preset_list_item(self):
         """Returns the first preset list item in the timer page."""
@@ -136,12 +136,12 @@
     # STOPWATCH Page Emulator Functions
     def get_stopwatch_label(self):
         """Returns the select for the stopwatch label"""
-        return self.wait_select_single("Label", objectName="labelStopwatch")
+        return self.select_single("StopwatchPage").wait_select_single("Label", objectName="label")
 
     def get_stopwatch_button(self):
         """Returns the select for the stopwatch button"""
-        return self.wait_select_single("AnalogStopwatch",
-                                  objectName="buttonStopwatch")
+        return self.wait_select_single("StopwatchFace",
+                                  objectName="stopwatchFace")
 
     def get_lap_button(self):
         """Returns the select for the lap button"""
@@ -233,13 +233,13 @@
 
     def get_alarm_minute_hand(self):
         """Returns the hour hand of clock in alarm tab"""
-        return self.select_single("AnalogClockHand",
-                                  objectName="alarmMinuteHand")
+        return self.select_single("AlarmPage").select_single("DialerHand",
+                                  objectName="minuteHand")
 
     def get_alarm_hour_hand(self):
         """Returns the hour hand of clock in alarm tab"""
-        return self.select_single("AnalogClockHand",
-                                  objectName="alarmHourHand")
+        return self.select_single("AlarmPage").select_single("DialerHand",
+                                  objectName="hourHand")
 
     def set_alarm_week(self, day, test_case):
         #TODO: add support for setting days of week
 
=== removed file 'timer/AnalogTimer.qml'
--- timer/AnalogTimer.qml	2013-10-26 12:20:55 +0000
+++ timer/AnalogTimer.qml	1970-01-01 00:00:00 +0000
@@ -1,121 +0,0 @@
-/*
- * Copyright (C) 2013 Canonical Ltd
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authored by: Nekhelesh Ramananthan <[e-mail]>
- */
-
-import QtQuick 2.0
-import Ubuntu.Components 0.1
-import "../common"
-
-// Component which draws the analog timer face.
-AnalogFaceBase {
-    id: clockOuterCircle
-
-    property var startTime: 0;
-    property var remTime: 0;
-
-    // Properties to store/set the time variables
-    property int seconds: 0;
-    property int minutes: 0;    
-    property int totalTime: 0;
-    property int pauseTime: 0;
-
-    // Property to activate/deactivate the timer
-    property bool timerOn: false;
-    property bool inProgressFlag
-
-    // Timer function called by the main clock loop
-    function onTimerUpdate () {
-        if( timerOn ) {
-            inProgressFlag = true;
-            remTime = totalTime - Math.floor((new Date() - startTime)/ 1000) - pauseTime;
-
-            if (remTime < 0) {
-                timerOn = false
-                totalTime = -1;
-            } else {
-                ssToTime(remTime);
-            }
-        }
-    }
-
-    // Function to convert time (in seconds) to hh:mm:ss format
-    function ssToTime(time) {
-        seconds = time % 60
-        time = Math.floor(time / 60)
-        minutes = time % 60        
-        secondHand.rotationValue = seconds * 6;
-        minuteHand.rotationValue = minutes * 6;        
-    }
-
-    // Function to disable timer and reset time
-    Timer {
-        id: reset_timer
-
-        interval: 200
-        repeat: false
-        onTriggered: {
-            inProgressFlag = true;
-            minuteHand.rotationValue = secondHand.rotationValue = 0;
-            inProgressFlag = false;
-        }
-    }
-
-    function reset() {
-        reset_timer.start();
-        timerOn = false;
-        state = "";
-        startTime = remTime = pauseTime = 0;
-        minutes = seconds = totalTime = 0;
-        minuteHand.timerValue = secondHand.timerValue = 0;
-    }
-
-    Repeater {
-        model: 12
-        delegate: AnalogClockMarker {
-            number: index
-            size: 0.5
-            distance: 0.48            
-        }
-    }
-
-    // Minute hand with touch/mouse drag support
-    AnalogTouchHand {
-        id: minuteHand
-        objectName: "minuteHand"
-
-        onTimerValueChanged: minutes = timerValue;
-
-        handHeight: units.gu(14.5); handWidth: units.gu(0.5);
-        animateFlag: inProgressFlag;
-        enabled: !inProgressFlag;
-        grabMargin: units.gu(0)
-        grabHeight: units.gu(7)
-    }
-
-    // Second hand with touch/mouse drag support
-    AnalogTouchHand {
-        id: secondHand
-
-        onTimerValueChanged: seconds = timerValue;
-
-        handHeight: units.gu(17); handWidth: units.gu(0.5);
-        z: parent.z - 1;
-        animateFlag: inProgressFlag;
-        enabled: !inProgressFlag;
-        grabMargin: -units.gu(2)
-    }
-}
 
=== added file 'timer/TimerFace.qml'
--- timer/TimerFace.qml	1970-01-01 00:00:00 +0000
+++ timer/TimerFace.qml	2014-01-10 14:02:26 +0000
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import "../common"
+
+ClockBase {
+    id: timerFace
+
+    // Properties to store/set the time variables
+    property var startTime: 0;
+    property var remTime: 0;
+    property int totalTime: 0;
+    property int pauseTime: 0;
+
+    // Property to activate/deactivate the timer
+    property bool timerOn: false;
+    property bool inProgressFlag
+
+    // Property to expose the timer outer glow effect to outside objects
+    property alias glowEffect: _glowEffect
+
+    showHourHand: false
+    draggable: !inProgressFlag
+
+    // Timer function called by the main clock loop
+    function onTimerUpdate () {
+        if( timerOn ) {
+            inProgressFlag = true;
+            remTime = totalTime - Math.floor((new Date() - startTime)/ 1000) - pauseTime;
+
+            if (remTime < 0) {
+                timerOn = false
+                totalTime = -1;
+            } else {
+                ssToTime(remTime);
+            }
+        }
+    }
+
+    // Function to convert time (in seconds) to hh:mm:ss format
+    function ssToTime(time) {
+        seconds = time % 60
+        time = Math.floor(time / 60)
+        minutes = time % 60
+    }
+
+    // This timer to required to avoid rare occurences of the timer hand being stuck at the place where it was stopped
+    // when the reset button is pressed while the timer is running.
+    Timer {
+        id: reset_timer
+        interval: 200
+        repeat: false
+        onTriggered: {
+            inProgressFlag = true;
+            inProgressFlag = false;
+        }
+    }
+
+    function reset() {
+        reset_timer.start()
+        timerOn = false;
+        state = "";
+        startTime = remTime = pauseTime = 0;
+        minutes = seconds = totalTime = 0;
+    }
+
+    AnalogGlowEffect {
+        id: _glowEffect
+        z: parent.z - 1
+        visible: false;
+        fillRectangle: parent
+    }
+
+    Repeater {
+        model: 12
+        delegate: AnalogClockMarker {
+            number: index
+            size: 0.5
+            distance: 0.48
+        }
+    }
+}
 
=== modified file 'timer/TimerPage.qml'
--- timer/TimerPage.qml	2013-11-26 15:36:37 +0000
+++ timer/TimerPage.qml	2014-01-10 14:02:26 +0000
@@ -58,7 +58,7 @@
         },
         State {
             name: "addPreset"
-            PropertyChanges { target: timerMouseArea; enabled: false }
+            PropertyChanges { target: analogTimer; enableMouseArea: false }
             PropertyChanges { target: listPreset; visible: false }
             PropertyChanges { target: namePreset; visible: true }
             PropertyChanges { target: addPresetToolbarButton; visible: false }
@@ -84,7 +84,7 @@
         listPreset.listIndex = -1;
         namePreset.text = "";
         tempNamePreset = "";
-    } 
+    }
 
     Component.onCompleted: {
         Utils.log("TimerPage loaded");
@@ -112,81 +112,70 @@
 
         Behavior on contentY {
             UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
-        }        
+        }
 
         // Main element which draws the timer face and manages time.
-        AnalogTimer {
+        TimerFace {
             id: analogTimer
 
-            innerLabel.objectName: "labelTimer"
+            anchors {
+                top: parent.top
+                topMargin: units.gu(10)
+                horizontalCenter: parent.horizontalCenter
+            }
+
             innerLabel.text: intervalToString(minutes, seconds);
+
             Timer {
                 id: seconds_timer
-
-                interval: 500
+                interval: 250
                 repeat: true
                 onTriggered: analogTimer.innerLabel.text = intervalToString(minutes, seconds);
             }
 
-            AnalogGlowEffect {
-                id: glowEffect
-
-                z: parent.z - 1
-                visible: false;
-                fillRectangle: parent
-            }
-
-            anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
-            inProgressFlag: (timerOn == true || analogTimer.state == "DONE") ? true : false;
+            inProgressFlag: (timerOn === true || analogTimer.state === "DONE") ? true : false;
+            onMinutesChanged: innerLabel.text = intervalToString(minutes, seconds);
             onSecondsChanged: if (timerOn == true) seconds_timer.restart()
                               else innerLabel.text = intervalToString(minutes, seconds);
-
-            onMinutesChanged: innerLabel.text = intervalToString(minutes, seconds);
-
             states:[
                 State { name: "STOP" },
                 State { name: "PAUSE"},
                 State {
                     name: "DONE"
                     when: (totalTime == -1 && timerOn == false)
-                    PropertyChanges { target: glowEffect; visible: true }
-                    PropertyChanges { target: glowEffect; color: "#03CB4A" }
+                    PropertyChanges { target: analogTimer.glowEffect; visible: true }
+                    PropertyChanges { target: analogTimer.glowEffect; color: "#03CB4A" }
                 }
             ]
 
-            MouseArea {
-                id: timerMouseArea
-                anchors.fill: analogTimer.innerCircle
-                enabled: true
-                onClicked: {
-                    switch (analogTimer.state) {
-
-                    case "":
-                        if ((seconds != 0 || minutes != 0) || timerOn) {
-                            totalTime = (minutes * 60) + seconds;
-                            analogTimer.startTime = new Date();
-                            timerOn = true;
-                            analogTimer.state = "STOP";
-                        }
-                        break;
-
-                    case "STOP":
-                        timerOn = false;
-                        analogTimer.pauseTime = analogTimer.totalTime - analogTimer.remTime + 1; // +1 is necessary to start immediately the timer when finish a pause
-                        analogTimer.state = "PAUSE";
-                        break;
-
-                    case "DONE":
-                        reset();
-                        analogTimer.state = "";
-                        break;
-
-                    case "PAUSE":
+            onClicked: {
+                switch (analogTimer.state) {
+
+                case "":
+                    if ((seconds != 0 || minutes != 0) || timerOn) {                        
+                        totalTime = (Math.round(minutes) * 60) + seconds;
                         analogTimer.startTime = new Date();
                         timerOn = true;
                         analogTimer.state = "STOP";
-                        break;
                     }
+                    break;
+
+                case "STOP":
+                    timerOn = false;
+                    analogTimer.pauseTime = analogTimer.totalTime - analogTimer.remTime + 1; // +1 is necessary to start immediately the timer when finish a pause
+                    analogTimer.state = "PAUSE";
+                    break;
+
+                case "DONE":
+                    reset();
+                    analogTimer.state = "";
+                    break;
+
+                case "PAUSE":
+                    analogTimer.startTime = new Date();
+                    timerOn = true;
+                    analogTimer.state = "STOP";
+                    break;
                 }
             }
         }