Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

New Contributor
Posts: 3
Registered: ‎09-12-2013
My Device: Q10
My Carrier: Vodafone

Spinning wheel

Hello guys.

Long time listener, first time caller. :smileyhappy:


I would like to have a spinning wheel in my app but I'm struggling with the maths, no problems with animation side that's all fine and finished.


From an inital x,y position when the finger goes down to an x,y position on the finger coming up, how can I work out if the users intention was to spin the wheel clockwise or anti-clockwise?


Thinking about it a swipe from right to left is anti-clockwise above the wheel center but the same swipe below the center would be clockwise.  The code I have now is all if statements but I'm sure there must be a maths solution.


Thanks for any help and QML example code would be nice.

BlackBerry Development Advisor
Posts: 155
Registered: ‎09-06-2010
My Device: Classic
My Carrier: Vodafone UK

Re: Spinning wheel

Just thinking about the maths you're really looking from the cross product of the vector from the wheel centre to the initial and wheel centre to the final points. So, if the wheel centre is (Xw, Yw) and the finger down point is (Xi, Yi) and the finger up point is (Xf, Yf) then the component of the  cross product ( in to or out of the plane ) would be:


(Xi - Xw)(Yf - Yw) - (Yi - Yw)(Xf -Xw)


If this is > 0  then the motion is anti-clockwise around the wheel centre and if < 0 it's clockwise round the wheel centre. If it's 0 then the swipe is along a radius of the wheel.


I think I've got the maths right :-)

Please refrain from posting new questions in solved threads.
Feel free to press the like button on the right side if you liked my attempts to help :-)
And please mark posts as solved if you think I found the solution or set you on its path. Thanks!
Found a bug? Report it here
Follow me on Twitter @jcmrim
Posts: 824
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Telus

Re: Spinning wheel

It's a little easier to plan out if you map out your screen as a graph with the middle being 0


similar to these



so if their finger travels from -2, -2 to 2, 2 and on the way passed -2,2 this means they went clockwise(I think, bad math here :smileywink: )

but that's essentially how it works.


I'm not sure if there's a way the system refers to the center as 0, if not just replace 0 with the center pixel #, same idea is involved to find the solution

New Contributor
Posts: 3
Registered: ‎09-12-2013
My Device: Q10
My Carrier: Vodafone

Re: Spinning wheel

[ Edited ]

@sashkyle It's a simple transform to find the center just half the width and height and already in my code. The way you've suggested is my current implentation. Thanks for your response though.


@jomurray Thanks so much this is exactly what I'm looking for, I'm sure it will work or if it doesn't will just need a tweak somewhere.




New Contributor
Posts: 3
Registered: ‎09-12-2013
My Device: Q10
My Carrier: Vodafone

Re: Spinning wheel

Okay I tried it but still spinning the wrong way when a swipe is above the center or to the left of center.


This is my code:


Page {
    function spinDirection(w, h, dx, dy, ux, uy) {
        var cx = w / 2.0;
        var cy = h / 2.0;

        return ((dx - cx) * (uy - cy)) - ((dy - cy) * (ux - cx));

    Container {
    	property int down_x: 0.0
        property int down_y: 0.0

        layout: DockLayout { }

        onTouch: {
            if (event.isDown()) {
                down_x = event.localX;
                down_y = event.localY;
            if (event.isUp()) {
                if (spinDirection(400, 400, down_x, down_y, event.localX, event.localY) > 0)

        ImageView {
            id: wheel

            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            imageSource: "asset:///images/wheel.png"

			preferredHeight: 400.0
			preferredWidth: 400.0

            animations: [
                RotateTransition {
                    id: rotateLeft
                    fromAngleZ: 0.0
                    toAngleZ: 360.0
                    duration: 3000.0
                    easingCurve: StockCurve.ExponentialOut
                RotateTransition {
                    id: rotateRight
                    fromAngleZ: 360.0
                    toAngleZ: 0.0
                    duration: 3000.0
                    easingCurve: StockCurve.ExponentialOut