[STM32F411Nucleo Review] Porting LVGL interface library

pomin

[STM32F411Nucleo Review] Porting LVGL interface library [Copy link]

> STM32F411RE has 512KB Flash and 128KB RAM, rich resources. This article introduces how to port the LVGL interface library to the Nucleo-F411 development board.## Data acquisition LVGL is a well-known embedded GUI library. The code is available on GitHub at https://github.com/lvgl/lvgl. Here we port the V8.2 version. Use the following command when pulling. Do not directly pull the latest version because the latest version is version 9.0.```bash git clone -b release/v8.2 https://github.com/lvgl/lvgl.git ``` Then add all the LVGL codes except those of other platforms to the keil project.## Display interface adaptation The display interface of LVGL is mainly a screen refresh function disp_flush. Based on the LCD screen refresh in the previous article, the modification ideas are as follows: Delete the full-screen buffer because it occupies too much RAM. Instead, use DMA to transfer the color parameters of LVGL after selecting the display space LVGL's disp_flush The interface code is as follows ```c static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p) { /*The most simple case (but also the slowest) to put all pixels to the screen one-by-one*/ LCD_FillWindow(area->x1,area->y1,area->x2,area->y2, (uint16 _t*)color_p); /*IMPORTANT!!! *Inform the graphics library that you are ready with the flushing*/ lv_disp_flush_ready(disp_drv); } void LCD_FillWindow(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t *pixels) { u16 i, j, width, height; x1 - x0 + 1; height = y1 - y0 + 1; uint32_t size = width * height; LCD_SetFrame(x0, y0, x1, y1); hspi1.Init.DataSize = SPI_DATASIZE_16BIT; hspi1.Instance->CR1|=SPI_CR1_DFF; HAL_GPIO_WritePin(LCD_DC_GPIO_Port, LCD_DC_ Pin, 1); HAL_GPIO_WritePin(LCD_CS_GPIO_Port, LCD_CS_Pin, 0); HAL_SPI_Transmit_DMA(&hspi1,(uint8_t*)pixels, size); while(__HAL_DMA_GET_COUNTER(&hdma_spi1_tx)!=0); HAL_GPIO_WritePin(LCD_CS_GPIO_Port, LCD_CS _Pin, 1); hspi1.Init.DataSize = SPI_DATASIZE_8BIT; hspi1.Instance->CR1&=~SPI_CR1_DFF; } ``` At this point, the screen refresh interface of LVGL has been adapted. In order to speed up the execution, some codes directly operate registers to complete the adaptation. ## Clock interface adaptation Initialize TIM10 in CubeMX and configure it as a 1ms periodic interrupt 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_792127_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20240301004357.png</strong> <em class="xg1">(61.04 KB, downloads: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >download attach</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_792127" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=792127&handlekey=savephoto_792127">save to album</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>
 Call the lv_tick_inc function in the interrupt function to provide clock for LVGL```c void TIM1_UP_TIM10_IRQHandler(void) { /* USER CODE BEGIN TIM1_UP_TIM10_IRQn 0 */ /* USER CODE END TIM1_UP_TIM10_IRQn 0 */ HAL_TIM_IRQHandler(&htim10); /* USER CODE BEGIN TIM1_UP_TIM10_IRQn 1 */ lv_tick_inc(1); /* USER CODE END TIM1_UP_TIM10_IRQn 1 */ } s ``` ## Main function code Finally, call lv_init, lv_port_disp_init and lv_task_handler in the main function to complete the LVGL porting. ```c lv_init(); lv_port_disp_init(); /* USER CODE END 2 */ /* Infinite loop */ /* USER CODE BEGIN WHILE */ while (1) { /* USER CODE END WHILE */ /* USER CODE BEGIN 3 */ lv_task_handler(); } /* USER CODE END 3 */ ``` LVGL initialization alone is not enough. We also need an interface for it to draw. Let’s write a verification code## The verification code is as follows. It creates a slider control with a custom style, a percentage of 70%, a length of 200, and is displayed in the center. ```c void foo(void) { static lv_style_t style_indic; lv_style_init(&style_indic); lv_style_set_bg_color(&style_indic, lv_palette_lighten(LV_PALETTE_RED, 3)); lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED)); lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR); static lv_style_t style_indic_pr; lv_style_init(&style_indic_pr); lv_style_set_shadow_color(&style_indic_pr, lv_palette_main(LV_PALETTE_RED)); lv_style_set_shadow_width(&style_indic_pr,10); lv_style_set_shadow_spread(&style_indic_pr, 3); /*Create an object with the new style_pr*/ lv_obj_t * obj = lv_slider_create(lv_scr_act()); lv_obj_add_style(obj, &style_indic, LV_PART_INDICATOR); lv_obj_add_style(obj, &style_indic _pr, LV_PART_INDICATOR | LV_STATE_PRESSED ); lv_slider_set_value(obj, 70, LV_ANIM_OFF); lv_obj_center(obj); } ``` Add to the main function. ```c lv_init(); lv_port_disp_init(); foo(); /* USER CODE END 2 */ /* Infinite loop */ /* USER CODE BEGIN WHILE */ while (1) { /* USER CODE END WHILE * / /* USER CODE BEGIN 3 */ lv_task_handler(); } /* USER CODE END 3 */ ``` Compile and burn into the development board, you can see that the slider drawn by LVGL is displayed [attach]792129[ /attach]

Jacktang

The result shows that the transplantation of LVGL interface library is very successful.

LitchiCheng

How is the refresh rate? How many fps can spi communication plus DMA achieve?

pomin

LitchiCheng posted on 2024-3-5 09:04 What is the refresh rate? How many fps can spi communication plus DMA achieve?

When there is animation, the FPS can also be stable at 60, very smooth

LitchiCheng

pomin posted on 2024-3-5 12:38 When there are animations, the FPS can also be stable at 60, very smooth

666, that is really smooth.

chejm

The technical content provided by the host is very detailed, with pictures and texts, which is worth learning and reference, and has high practical value.

[STM32F411Nucleo Review] Porting LVGL interface library [Copy link]

Latest reply

Comments

Comments