Label rotation pivot?

How-to
1

What do you want to achieve?

Rotate the label correctly or centered after rotation.

What have you tried so far?

using lv_obj_set_style_transform_angle() and lv_obj_set_style_transform_rotation()
using lv_obj_align() and lv_obj_center()

Code to reproduce

lv_obj_t *title1 = lv_label_create(lv_screen_active());
lv_obj_set_style_text_font(title1, &lv_font_montserrat_22, 0);
lv_obj_set_style_text_color(title1, lv_color_hex(0xffffffff), LV_PART_MAIN);
lv_obj_set_style_text_align(title1, LV_TEXT_ALIGN_CENTER, 0);
lv_obj_align(title1, LV_ALIGN_CENTER, 0, 0);
lv_label_set_text(title1, "Centered text ** Centered Text");
// horizontal

// vertical
lv_obj_set_style_transform_angle(title1, 900, LV_PART_MAIN);
lv_obj_set_style_transform_rotation(title1, -900, 0);

lv_obj_center(title1);

Screenshot and/or video

Center
Center523×863 52.1 KB

Environment

  • LVGL version: 9.3

The label appears centered on the screen, until I don’t rotate it (first photo)
If I apply -90 or +90 degrees, the label won’t be centered anymore (2nd and 3rd photo).
I used two methods to rotate and center, but no success.
How can I center the label after rotation?
Thanks

2

You need to use lv_obj_set_style_transform_pivot_x and lv_obj_set_style_transform_pivot_y to change the point where the rotation is made.

Requires a call to lv_obj_update_layout ( Positions, Sizes and Layouts - LVGL 9.4 documentation) in order for LVGL to calculate the area the label is going to use…

  lv_obj_t *title1 = lv_label_create(objects.main);
  lv_obj_set_style_text_font(title1, &lv_font_montserrat_22, 0);
  lv_obj_set_style_text_color(title1, lv_color_hex(0xffffffff), LV_PART_MAIN);
  lv_obj_set_style_text_align(title1, LV_TEXT_ALIGN_CENTER, 0);
  lv_obj_align(title1, LV_ALIGN_CENTER, 0, 0);
  lv_label_set_text(title1, "Centered text ** Centered Text");

  lv_obj_update_layout(title1);

  uint32_t lbl_h = lv_obj_get_height(title1);
  uint32_t lbl_w = lv_obj_get_width(title1);

  lv_obj_set_style_transform_pivot_x(title1, lbl_w / 2, 0);
  lv_obj_set_style_transform_pivot_y(title1, lbl_h / 2, 0);
  lv_obj_set_style_transform_rotation(title1, -900, 0);

There may be better ways to handle this, but this is what i have used…

3

Working perfectly, thanks a lot. :smiley: