How to set center of rotation for hands in AnalogClock widget?

[Iswarya]

Hi Martin,

I'm trying to implement an analog clock in TouchGFX. I've referred the example project. I couldn't understand how to setup rotationCentreX, rotationCentreY value. I couldn't see the clock handle in screen.

void setupSecondHand (const BitmapId secondHandBitmapId,

int16_t  rotationCenterX,

int16_t  rotationCenterY 

[Martin KJELDSEN]

Hi @Iswarya​,

Analogue Clock will be a widget in the upcoming TouchGF 4.11.0 designer. For now, we just added an example that uses the widget as it is defined in code in the framework which is why you can't see the clock and hands on the Designer canvas.

Your questions: rotationCentreX and rotationCentreY are parameters to the method:

    /**
     * @fn virtual void AnalogClock::setBackground(const BitmapId backgroundBitmapId, int16_t rotationCenterX, int16_t rotationCenterY);
     *
     * @brief Sets the background image of the clock and the rotation center of the clock.
     *
     *        Sets the background image of the clock and the rotation center of the clock. The
     *        clock rotation center is the point that the clock hands rotates around.
     *
     * @param backgroundBitmapId Identifier for the background bitmap.
     * @param rotationCenterX    The rotation center x coordinate.
     * @param rotationCenterY    The rotation center y coordinate.
     */
virtual void setBackground(const BitmapId, int16_t rotationCenterX, int16_t rotationCenterY);

So, if we were to change the center of rotation to 0,0 then it would be relative to the background image (top left). The example says to define a rotation point at 116,116 which is the center of the background image.

[Iswarya]

Hi Martin,

Thanks for your answer.

Now, I understood the clock widget and clock needle is defined in the mainview.cpp file in the framework.

The example says to define a rotation point at 116,116 which is the center of the background image.

I understood 116,116 is the centre of the background image. Can you please explain me what is this analogClock.setXY(200,16)

 analogClock.setupSecondHand(BITMAP_CLOCK_00_SECOND_HAND_INT_ID, 4, 79);

When I flash the example code, the code works perfectly and the clock needle moves. When I tried to changing the value from 4,79 to 0,0. The clock needle didn't move to top left. Did I miss something??

      analogClock.setXY(200, 16);
 
      analogClock.setBackground(BITMAP_CLOCK_00_BACKGROUND_INT_ID, 116,116); // (116, 116) will be the center of rotation the clock
 
   analogClock.setupHourHand(BITMAP_CLOCK_00_HOUR_HAND_INT_ID, 2, 44);     // (2, 44) is the center of rotation of the hour hand image. This point will be placed at the clock center of rotation
 
   analogClock.setupMinuteHand(BITMAP_CLOCK_00_MINUTE_HAND_INT_ID, 2, 64); // (2, 64) is the center of rotation of the minute hand image. This point will be placed at the clock center of rotation
 
   analogClock.setupSecondHand(BITMAP_CLOCK_00_SECOND_HAND_INT_ID, 4, 79);

[Martin KJELDSEN · Accepted solution]

Hi,

When you call the setupHourHand() and setupMinuteHand() methods you also specify which part of the hour and minute hand images that must make up the center of rotation (Along with WHERE that rotation should take place). Imagine that you want to start at the top of the hand and then have a large y coordinate because the center of rotation is always somewhere at the bottom of the hand image which is narrow and long.

Hope that helps!

Best regards,

Martin