How to rotate a text label

How-to
1

Rotating a text label

When a label is constructed, it’s text follows a standard direction. It is possible to rotate the label, but how?

MCU and board

STM32F205RET (128K SRAM, 512K Flash) in a custom board, with gcc-arm(1) , GNU make(1) , and STM32 HAL .

LVGL version

7.11.0

What do you want to achieve?

I want to display a text label in the usual way, but add one or two source code lines to rotate it ninety degrees.

What have you tried so far?

Canvas

I tried using a canvas transform, but because my display is monochrome (OLED SSD1306) and buffer LV_IMG_CF_INDEXED_1BIT the canvas draw functions such as lv_canvas_draw_text(3) appear to fail.

Style

I tried adding a style to my text label, but it did not work. Maybe styles in 1-bit displays are defective just like the canvas draw functions?

Code to reproduce

I’m using the following source code block as a starting point. Please tell me how to modify this to rotate the text by ninety degrees?

// Create a label to rotate
lv_obj_t *pLabel = lv_label_create(lv_scr_act(), NULL);
lv_label_set_long_mode(pLabel, LV_LABEL_LONG_EXPAND);
lv_obj_set_width(pLabel, lv_obj_get_height(lv_scr_act()));
lv_label_set_text(pLabel, "Bodacious");

// Add a rotated style to the label
static lv_style_t style_label;
lv_style_init(&style_label);
lv_style_set_transform_angle(&style_label, LV_STATE_DEFAULT, 900);
lv_obj_add_style(pLabel, LV_LABEL_PART_MAIN, &style_label);
2

Currently, the only two ways to rotate text are:

  • Use a premade image for the text, and rotate the image using lv_img_set_angle (simpler).
  • Use a canvas and draw the text on it (example, more complex).

It is not possible to rotate most widgets directly, including the label.

3

Thanks for suggesting to render an image from a font (I guess in some external image editor) and rotate the image. This will not work whenever the text is dynamically created (for example a hours and minutes clock.)

I wrote that I’m using LVGL on a monochrome OLED with LV_IMG_CF_INDEXED_1BIT. Or do you still think I can draw text in a canvas?

I thought the canvas draw methods were defective with 1-bit palettes?

Or can I draw to 1-bit canvases in version 8?

By the way, I added trying with styles to my howto request above. This method seems to be equally broken as with the canvas.

4

Impossible lv_img_set_angle

Just when I thought it couldn’t get worse, it seems that even rotating indexed images is not possible in release/v7.

LV_IMG_DECLARE(mytext);
lv_obj_t *pImage = NULL;
pImage = lv_img_create(lv_scr_act(), NULL);
lv_obj_align(pImage, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
lv_img_set_src(pImage, &mytext);
lv_img_set_angle(pImage, 900);
5

transform_angle only works on image-like objects as per its description in the style documentation, so unfortunately it won’t work on a label.

That is correct. The image will need to be true color, not indexed.

Sorry; I missed that. Drawing text on a canvas does not work if the canvas is indexed; the canvas needs to be true color. You should be able to use a true color canvas on a 1-bit display, but this only works if you have the RAM to spare.

6

is there a function to trasform a label into an image ?
in this way you could have the rotations

7

This link has become broken. :disappointed_relieved:

8

Here is a new link for v8.3.

https://docs.lvgl.io/8.3/widgets/core/canvas.html#drawing-on-the-canvas-and-rotate