Merge lp:~nik90/ubuntu-clock-app/replace-clock-hand-animation into lp:ubuntu-clock-app/saucy

[Nekhelesh Ramananthan]

Removes clock hand spring animation since it was causing delays which caused the second hand to sometimes skip seconds in order to catch up with the current time. It also refactors analog touch hand based on the new clock hand implementation.

Removes clock hand spring animation since it was causing delays which caused the second hand to sometimes skip seconds in order to catch up with the current time. It also refactors analog touch hand based on the new clock hand implementation.

Still requires device testing! Do not merge!

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

PASSED: Continuous integration, rev:128
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/11/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-quantal-amd64-ci/11
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/11

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

review: Approve (continuous-integration)

[Michael Hall (mhall119)]

Second hand ticks are consistent on the Nexus 7 with this change

review: Approve

=== modified file 'clock/AnalogClockFace.qml'
--- clock/AnalogClockFace.qml	2013-06-09 10:36:55 +0000
+++ clock/AnalogClockFace.qml	2013-07-07 09:56:23 +0000
@@ -37,7 +37,7 @@
     function timeChanged(now) {
         hours = now.getHours()
         minutes = now.getMinutes()
-        seconds = now.getUTCSeconds();
+        seconds = now.getUTCSeconds();        
     }        
 
     // FIXME 1: Replace this with UbuntuShape when the widget has landed in the SDK.
@@ -50,34 +50,31 @@
         radius: width / 2;
         anchors.centerIn: parent;
         color: Constants.coolGrey;
-        antialiasing: true;        
+        antialiasing: true;
     }
 
     AnalogClockHand {
         id: hourHand
 
         z: parent.z
-        height: units.gu(12.5); width: units.gu(1);
-        rotationAngle: (clockRoot.hours * 30) + (clockRoot.minutes / 2);
-        antialiasing: true;
+        handHeight: units.gu(12.5); handWidth: units.gu(1);
+        rotation: (clockRoot.hours * 30) + (clockRoot.minutes / 2);
     }
 
     AnalogClockHand {
         id: minuteHand
 
-        z: parent.z
-        height: units.gu(14.5); width: units.gu(0.5);
-        rotationAngle: clockRoot.minutes * 6;
-        antialiasing: true;
+        z: parent.z + 1
+        handHeight: units.gu(14.5); handWidth: units.gu(0.5);
+        rotation: clockRoot.minutes * 6;
     }
 
     AnalogClockHand {
         id: secondsHand
 
-        z: parent.z - 1;
-        height: units.gu(17); width:  units.gu(0.5)
-        rotationAngle: clockRoot.seconds * 6;
-        antialiasing: true;
+        z: clockRoot.z - 1;
+        handHeight: units.gu(17); handWidth:  units.gu(0.5)
+        rotation: clockRoot.seconds * 6;
     }    
 
     MouseArea {

=== modified file 'common/AnalogClockHand.qml'
--- common/AnalogClockHand.qml	2013-06-21 22:06:05 +0000
+++ common/AnalogClockHand.qml	2013-07-07 09:56:23 +0000
@@ -13,33 +13,39 @@
  * 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]>
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
  */
 
 import QtQuick 2.0
 import "../common/Constants.js" as Constants
 
-Rectangle {
-    id: hand
-
-    property alias rotationAngle: handRotation.angle
-
-    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: Constants.coolGrey
-    antialiasing: true
-
-    transform: Rotation {
-        id: handRotation
-
-        origin { x: hand.width / 2; y: hand.height }
-
-        Behavior on angle {
-            SpringAnimation { spring: 2; damping: 0.3; modulus: 360 }
-        }
-    }
-
+// 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: Constants.coolGrey
+        antialiasing: true
+    }
+
+    Behavior on rotation {
+        id: analogClockHandRotation
+        enabled: true;
+        RotationAnimation { direction: RotationAnimation.Shortest }
+    }
 }
+

=== modified file 'stopwatch/AnalogStopwatch.qml'
--- stopwatch/AnalogStopwatch.qml	2013-06-25 21:51:35 +0000
+++ stopwatch/AnalogStopwatch.qml	2013-07-07 09:56:23 +0000
@@ -130,26 +130,23 @@
         id: hourHand
 
         z: parent.z
-        height: units.gu(12.5); width: units.gu(1);
-        rotationAngle: hours * 15;
-        antialiasing: true;
+        handHeight: units.gu(12.5); handWidth: units.gu(1);
+        rotation: hours * 15;
     }
 
     AnalogClockHand {
         id: minuteHand
 
         z: parent.z
-        height: units.gu(14.5); width: units.gu(0.5);
-        rotationAngle: minutes * 6;
-        antialiasing: true;
+        handHeight: units.gu(14.5); handWidth: units.gu(0.5);
+        rotation: minutes * 6;
     }
 
     AnalogClockHand {
         id: secondHand
 
         z: parent.z - 1;
-        height: units.gu(17); width:  units.gu(0.5)
-        rotationAngle: seconds * 6;
-        antialiasing: true;
+        handHeight: units.gu(17); handWidth:  units.gu(0.5)
+        rotation: seconds * 6;
     }
 }

=== modified file 'timer/AnalogTimer.qml'
--- timer/AnalogTimer.qml	2013-06-25 21:43:57 +0000
+++ timer/AnalogTimer.qml	2013-07-07 09:56:23 +0000
@@ -110,9 +110,10 @@
         onTimerValueChanged: hours = timerValue;
 
         handHeight: units.gu(12.5); handWidth: units.gu(1);
-        zOrder: minuteHand.z + 1;
+        z: minuteHand.z + 1;
         animateFlag: inProgressFlag;
         enabled: !inProgressFlag;
+        grabMargin: units.gu(3);
     }
 
     // Minute hand with touch/mouse drag support
@@ -124,7 +125,7 @@
         handHeight: units.gu(14.5); handWidth: units.gu(0.5);
         animateFlag: inProgressFlag;
         enabled: !inProgressFlag;
-        grabMargin: -units.gu(1)
+        grabMargin: units.gu(0)
         grabHeight: units.gu(7)
     }
 
@@ -135,7 +136,7 @@
         onTimerValueChanged: seconds = timerValue;
 
         handHeight: units.gu(17); handWidth: units.gu(0.5);
-        zOrder: parent.z - 1;
+        z: parent.z - 1;
         animateFlag: inProgressFlag;
         enabled: !inProgressFlag;
         grabMargin: -units.gu(2)

=== modified file 'timer/AnalogTouchHand.qml'
--- timer/AnalogTouchHand.qml	2013-06-25 21:43:57 +0000
+++ timer/AnalogTouchHand.qml	2013-07-07 09:56:23 +0000
@@ -32,97 +32,74 @@
       Enable/Disable rotation animation. Disable it while dragging the clock hand to avoid
       receiving inaccurate input values.
       */
-    property alias animateFlag: rotation.enabled;
+    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: rotatingDial.rotation;
-
+    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.height;
-    property alias handWidth: hand.width;
-
-    // z order of the clock hand
-    property alias zOrder: touchHand.z;
+    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);
-
-    // Dial which covers the clock hand and does the actual rotatio
-    Rectangle{
-        id: rotatingDial;
-
-        color: "transparent";
-        transformOrigin: Item.Center;
-        radius: (width / 2);
-        antialiasing: true;
-        anchors.fill: parent;
-        
-        // Clock hand which lies above the rotating dial. This is stationary w.r.t to the rotating dial.
-        AnalogClockHand {
-            id: hand
-            
-            height: units.gu(0); width: units.gu(0);
-            antialiasing: true;
-
-            /*!
+    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) {
-                        rotatingDial.rotation = 90 - Math.abs (deg);
-                    }
-                    else if (diffX > 0 && diffY < 0) {
-                        rotatingDial.rotation = 90 + Math.abs (deg);
-                    }
-                    else if (diffX < 0 && diffY > 0) {
-                        rotatingDial.rotation = 270 + Math.abs (deg);
-                    }
-                    else if (diffX < 0 && diffY < 0) {
-                        rotatingDial.rotation = 270 - Math.abs (deg);
-                    }
-
-                    if (Math.round(rotatingDial.rotation/6) == 60) {
-                        touchHand.timerValue == 0
-                    } else {
-                        touchHand.timerValue = Math.round(rotatingDial.rotation/6);
-                    }
-
-                }
-            }
+        Rectangle {
+            id: grabArea
+            color: "transparent"
+            width: units.gu(5); height: width;
+            anchors { top: hand.top; topMargin: touchHand.grabMargin; horizontalCenter: hand.horizontalCenter }
         }
 
-        Behavior on rotation {
-            id: rotation;
-            enabled: false;
-            RotationAnimation { direction: RotationAnimation.Shortest }
+        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/6) === 60) {
+                    touchHand.timerValue = 0
+                } else {
+                    touchHand.timerValue = Math.round(hand.rotation/6);
+                }
+            }
         }
     }
 }