Steering Wheel Rotation 180° CW to 180° CCW


I am attempting create a BC (Bluetooth Controlled) 1/32 scale SEMI Track Transport, for my 1/32 scale slot cars and ETRC slot trucks.

I am trying to animate a steering wheel .png but I haven't found the correct coding structure to achieve that functionality.

My goal is to drag two full rotations in both the clockwise and the counterclockwise directions.

I have been able to instruct the wheel to return to the "home" position upon ".Touchup", but the various degrees of controllable rotation I have achieved, while dragging, have been quite ugly...

Has anyone had experience with this type of animation?



If you keep the rotation angle in a variable, you can change the color of thedrawn circles to reflect positive or negative rotation range.

Here is a sample I had in stock ...
2016-10-11 11_15_03-5554__build_

circular_slider.aia (24.4 KB)
circular_slider_V2.aia (25.1 KB)

v2 blocks:

1 Like

I want to drag this steering wheel two complete revolutions in both directions.

Is there a portion of this code that accomplishes that function?

circular_slider_V3.aia (514.5 KB)


My art skills are low.

I lost transparency of the steering wheel background when I shrank it to 200 by 200.

I also failed to limit the rotation to a total number of turns.

Is any of this worth pursuing?

P.S. The mathematical term for total turns of the wheel is winding number.

1 Like

This is awesome!

I'll see have far I can go from here.

Thanks so much!


1 Like

You must be using a different version than I.

I don't have the option of some blocks like the "global center X"
and the two-row "initialize local dX and dY"

Here is a fresh export:
circular_slider_V3.aia (514.5 KB)

1 Like

I have tried to convert the Heading to a real world angle but failed worst than a failed thing from failed land. (Life would be easier with some rotate Blocks).

Here is my effort to rotate smoothly using the Sprite Block rather than the Canvas Block. If you are left-handed (left fingered) like me, that requires consideration to prevent the image from flipping over the X axis.

SteeringWheel.aia (54.1 KB)

1 Like

Hi Don

The license for that image is actually personal use only (pngfind), so you cannot distribute it in anyway. also have corporate logos/images also shown for personal use when in fact their licence is unlikely to allow any form of use.

1 Like

They are defined by ABG via the variables Blocks:


For example, "global center X" is a global variable, the center of the Canvas along X, measured in pixels.

Ensure the Project's Blocks Tool Kit is set to 'All':


Thanks again!

Yes, I’m working on a MERCEDES ACTROS wheel.png for the final version of the BTC truck.

... another reason the calculations can confuse is the Canvas origin and axis direction, here is a diagram:


Here is a simple App that demonstrates Canvas coordinates. The code shows a method of setting the Canvas size (which for most purposes should be defined in pixels) to fit Screen size.

CenterCanvasAndSprite.aia (6.9 KB)

1 Like

I hope they are not going to replace their steering wheel with an App :flushed:


Here's an alternative control mechanism to consider:

  • Keep the steering wheel display
  • Use a slider to control its angle, setting the slider from -720 degrees to +720 degrees.

You may need to add or subtract 90 degrees to the slider thumb value to get the steering wheel pointing forward at 0 degrees.

1 Like


I’ll attempt to integrate a slider.

Perhaps the slider and wheel could both be drag able?

The slider could serve to stabilize the wheel?

Worth investigating.


On further thought, you could use the Canvas itself as a slider, if you transform the dragged x value from the range (0-Canvas.Width) to the range (-720 to 720) with a little arithmetic.

1 Like

Dear Chris (@ChrisWard),
for sure autonomous driving level 5 is absolutely without any steering wheel,
Just cross your fngers and hope that the sw does not fail.... :innocent:
Cheers, Ugo.


Try this, the vagaries of rounding, floors and ceiling aren't perfect. Just drag the canvas left and right.
(I used a public domain compass image to keep Chris happy :wink: )
rotateSW.aia (24.4 KB)


Canvas is 300x300 pixels (300 x 2.4 = 720)

1 Like

We are already a bit further along (try my post #8, SteeringWheel.aia), being able to rotate +720 and -720 smoothly.

The difficulty is in translating the Heading Angle into rotated Angle, because (a) the steering wheel center is at the center of the Canvas and (b) App Inventor is reporting point locations in Canvas ordinates. It's relatively easy using vector maths, but App Inventor doesn't support structures.

1 Like

Why is that difficult, my label shows the angle of rotation? When at 45 the angle from 0 (straight up/down) is 45 degrees. Simply a case of some mathematics once you go past 360 ?

1 Like