How to change the orientation of the image on the RT examples

How-to
1

Description

Hello guys!

NXP recently added some LittlevGL examples into their SDKs for the RT family. I’m using one example named littlevgl_terminal from the newest SDK (2.7.0). By default, the orientation of the image for this example is landscape, I want to change the orientation to portrait, however, I haven’t found a way to do it.

In the past, I have work with other Embedded GUI libraries and they normally have a macro that controls the orientation of the image, if you change this macro you can easily rotate the image. I went through all the example code and I couldn’t find anything similar, so it seems that this is not supported by LittlevGL. Does someone know how to achieve this? Probably it will be necessary to modify the littlevgl_support.c file, but it’s not clear what modifications I will need to do. Could someone point me in the right direction?

What MCU/Processor/Board and compiler are you using?

I’m using the RT1060-EVK (https://www.nxp.com/design/development-boards/i.mx-evaluation-and-development-boards/mimxrt1060-evk-i.mx-rt1060-evaluation-kit:MIMXRT1060-EVK).

What do you want to achieve?

Change the orientation of the image

What have you tried so far?

I think that it will be necessary to modify the function DEMO_FlushDisplay inside the file littlevgl_support.c. However, I don’t know which things I should modify.

Code to reproduce

The SDK can be downloaded from the following link: mcuxpresso.nxp.com/

Any help will be appreciated!

2

This comment is often referenced as an example for rotating the display. You also need to set the rotated flag in the driver structure where it gets registered (search for lv_disp_drv_register).

3

Has anyone been able to get portrait mode working on the RT1060-EVK board? We have looked at the example for the stm32f746_discovery_no_os board but the code differences are making it difficult for us to implement correctly. Thanks!!

4

I think we have portrait mode working on the RT1060-EVK board.
Below are changes in case it helps anybody:

  1. Change littlevgl’s width and height (in “Graphical settings” section of file)

File: source/lv_conf.h

from:

#define LV_HOR_RES (LCD_WIDTH)

#define LV_VER_RES (LCD_HEIGHT)

to:

#define LV_HOR_RES (LCD_HEIGHT)

#define LV_VER_RES (LCD_WIDTH)

  1. Add new output frame buffers (in “Variables” section of file)

File: board/littlevgl_support.c

from:

AT_NONCACHEABLE_SECTION_ALIGN(static uint8_t s_frameBuffer[2][LCD_WIDTH * LCD_HEIGHT * LCD_FB_BYTE_PER_PIXEL], 64);

to:

static uint8_t s_frameBuffer[2][LCD_WIDTH * LCD_HEIGHT * LCD_FB_BYTE_PER_PIXEL];
static int active_temp_vdb = 0;
AT_NONCACHEABLE_SECTION_ALIGN(static lv_color_t temp_vdb[2][LCD_WIDTH * LCD_HEIGHT], 64);

  1. Write to the new frame buffers (in DEMO_FlushDisplay function)

from:

ELCDIF_SetNextBufferAddr(LCDIF, (uint32_t)color_p);

to:
for (int i = y1; i <= y2; i++) {
for (int j = x1; j <= x2; j++) {
temp_vdb[active_temp_vdb][LCD_WIDTH * (LCD_HEIGHT - j - 1) + i] = color_p[LCD_HEIGHT * i + j];
}
}

ELCDIF_SetNextBufferAddr(LCDIF, (uint32_t)temp_vdb[active_temp_vdb]);
active_temp_vdb = (active_temp_vdb + 1) & 1;

  1. Update touch to be the correct orientation (in DEMO_ReadTouch function)

from:

data->point.x = touch_y;
data->point.y = touch_x;

to:

data->point.x = LCD_HEIGHT - touch_x - 1;
data->point.y = touch_y;

1 Like
5

Thank you for sharing it!