Correct rotation for a clock needle

555 views
asked Mar 23, 2016 in GUI Development by BaumannPat

I have a WarpImage as neddle with the Bounds<0,0,110,110>.
The WarpImage have to rotate by its center. So I set the SourceAnchor to <55,55>.

The command for the rotation is:
this.HourNeedle.RotateAndScale( <55,55>,(-1) * hour * 30, 1.0, 1.0);

The execution of the code rotate the clock-needle, but not at his center. Have I to set another property of the WarpImage?

2 Answers

0 votes
answered Mar 23, 2016 by Manfred Schweyer

Let me refer to the sample application 'Lightweight3D' which you will find in the directory {UserDocumentFolder}\EmbeddedWizard\Examples_Mosaic20' - there you will find the class Watch::Watch, which implements an analog clock with rotating needles.

The source anchor of a needle is the position where the needle is mounted on the clock - not the center of the needle. For example, the property SourceAnchor of the MinutesImage is set to <21,122>.

The center of the clock is <150,150>, thus the rotation is done by using the following command:

MinutesImage.RotateAndScale(<150,150>, -min, 1.0, 1.0 );

The first parameter of the method RotateAndScale defines the destination position of the warp operation.
I hope this answers your question.

 

commented Mar 23, 2016 by BaumannPat
The needle AND the clock has both the Bounds <0,0,110,110>.
I really need to rotate the needle at the point<55,55>.
commented Mar 23, 2016 by Manfred Schweyer
Then you can use SourceAnchor and aDstPos with <55,55>, that's fine.
If there is still some problem, please post the images you want to rotate and a screenshot of the result - otherwise it's difficult to give a better advice...
commented Mar 23, 2016 by BaumannPat
I found the problem. After the RotateAndScale - method the Bounds of the needle become <0,0,126,126>.
So the solution is to set the SourceAnchor to <63,63>.  But why does the Bounds change from <0,0,150,,150> to <0,0,126,126>?
commented Mar 23, 2016 by Manfred Schweyer
I assume the needle is a Views::WarpImage - which does not have a Bounds property... What is the size of the origin Image (the bitmap resource)? Take the center of this image as source anchor.
commented Mar 24, 2016 by BaumannPat
The size of the origin Image has 126x126. So after the RotateAndScale - method the WarpImage takes the Bounds from the origin Image.

Thanks that solves my problem.
0 votes
answered Mar 24, 2016 by Paul Banach

For the 3D transformation you have to specify two positions:

1. The position within your component to rotate the bitmap around it.

This is determined by the first parameter of the method RotateAndScale().

For example, your component has the width=200 pixel and height=100 pixel and you wish to rotate a bitmap around the center of the component, than you will need to call the method RotateAndScale() with this calculated center position 200/2 and 100/2:

warpImage.RotateAndScale(<100,50>, ... );

2. The position within the bitmap itself to rotate the bitmap around. Also known as pivot point.

This is determined by the property SourceAnchor of the warp view.

For example, you have a bitmap with the width=21 pixel and height=125 pixel and you wish to rotate the bitmap around its center, then the SourceAnchor property should be initialized with 21/2 and 125/2:

warpImage.SourceAnchor = <10,62>;

Another example, you want the bitmap to rotate around its bottom/right corner, then set the property SourceAnchor to the value <21,125>.

Summarized: Because of two 'entities' (the component and the bitmap) you need two coordinates to complete the transformation: the source bitmap position and the the component position. That's all.

Please note, the above information is also valid for the method Warp3D(), for example:

warpImage.Warp3D( <100,50>, ... )

Additionally please note the property SourceArea. With it you can select a smaller section of the original bitmap to perform the desired rotate/scale/warp3D transformations. In such case the value of SourceAnchor is calculated relative to the origin of this source-area.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...