Low screen rendering speed when loading via animation (using the lv_str_load_anime function)

Description

low screen rendering speed when loading via animation (using the lv_str_load_anime function), you can see how the screen is being redrawn

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

STM32F415 , SPI with DMA

What LVGL version are you using?

v. 8.1.0

What do you want to achieve?

the screen updates smoothly

What have you tried so far?

I tried to change the spi speed, buffer size

Code to reproduce

void Screen_MetricsV3_Create()
{
	     screen_metrics_V3 = lv_obj_create(NULL);
		 lv_obj_set_size(screen_metrics_V3, 240, 240);
		 lv_disp_load_scr(screen_metrics_V3);

		 //фоновая картинка
		 lv_obj_t * img1 = lv_img_create(screen_metrics_V3);
		 lv_img_set_src(img1, &bg_image);
		 lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
		 lv_obj_set_style_img_recolor_opa(img1, 170, 0);
		 lv_obj_set_size(img1, 240, 240);

		 //окружность
		 lv_obj_t * arc = lv_arc_create(screen_metrics_V3);
	     lv_obj_set_size(arc, 240, 240);
		 lv_arc_set_rotation(arc, 360);
		 lv_arc_set_bg_angles(arc, 0, 360);
		 lv_arc_set_value(arc, 100);
		 lv_obj_remove_style(arc, NULL, LV_PART_KNOB);
		 lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);
		 lv_obj_set_style_arc_width(arc,2,LV_PART_MAIN);
		 lv_obj_set_style_arc_width(arc,2,LV_PART_INDICATOR);
		 lv_obj_set_style_arc_color(arc,lv_palette_main(LV_PALETTE_GREY),LV_PART_INDICATOR);
		 lv_obj_center(arc);


		 v3_label_group = lv_label_create(screen_metrics_V3);
		 lv_obj_align(v3_label_group, LV_ALIGN_DEFAULT, 0, YG);
		 lv_obj_set_width(v3_label_group, 240);
		 lv_obj_set_style_text_align(v3_label_group, LV_TEXT_ALIGN_CENTER, 0);
		 lv_obj_set_style_text_font(v3_label_group,&FONT_GROUP_V3,0);
		 lv_obj_set_style_text_color(v3_label_group,COLOR_GROUP_METRICS_V3,0);
		 lv_label_set_text(v3_label_group,"0-0");

		 v3_label_line1 = lv_label_create(screen_metrics_V3);
		 lv_obj_align(v3_label_line1, LV_ALIGN_DEFAULT, 0, LINE1_V3);
		 lv_obj_set_width(v3_label_line1, 240);
		 lv_obj_set_style_text_align(v3_label_line1, LV_TEXT_ALIGN_CENTER, 0);
		 lv_obj_set_style_text_font(v3_label_line1,&FONT_NAME_V3,0);
		 lv_obj_set_style_text_color(v3_label_line1,COLOR_NAME_METRIC1_V3,0);
		 lv_label_set_text(v3_label_line1,"Метрика 1");

		 v3_label_line11 = lv_label_create(screen_metrics_V3);
		 lv_obj_align(v3_label_line11, LV_ALIGN_DEFAULT, 0, LINE11_V3);
		 lv_obj_set_width(v3_label_line11, 240);
		 lv_obj_set_style_text_align(v3_label_line11, LV_TEXT_ALIGN_CENTER, 0);
		 lv_obj_set_style_text_font(v3_label_line11,&FONT_VALUE_V3,0);
		 lv_obj_set_style_text_color(v3_label_line11,COLOR_VALUE_METRIC1_V3,0);
		 lv_label_set_text(v3_label_line11,"0.001 F");

		 v3_label_line2 = lv_label_create(screen_metrics_V3);
		 lv_obj_align(v3_label_line2, LV_ALIGN_DEFAULT, 0, LINE2_V3);
		 lv_obj_set_width(v3_label_line2, 240);
		 lv_obj_set_style_text_align(v3_label_line2, LV_TEXT_ALIGN_CENTER, 0);
		 lv_obj_set_style_text_font(v3_label_line2,&FONT_NAME_V3,0);
		 lv_obj_set_style_text_color(v3_label_line2,COLOR_NAME_METRIC2_V3,0);
		 lv_label_set_text(v3_label_line2,"Метрика 2");

		 v3_label_line22 = lv_label_create(screen_metrics_V3);
		 lv_obj_align(v3_label_line22, LV_ALIGN_DEFAULT, 0, LINE22_V3);
		 lv_obj_set_width(v3_label_line22, 240);
		 lv_obj_set_style_text_align(v3_label_line22, LV_TEXT_ALIGN_CENTER, 0);
		 lv_obj_set_style_text_font(v3_label_line22,&FONT_VALUE_V3,0);
		 lv_obj_set_style_text_color(v3_label_line22,COLOR_VALUE_METRIC2_V3,0);
		 lv_label_set_text(v3_label_line22,"0.002 F");

		 v3_label_line3 = lv_label_create(screen_metrics_V3);
		 lv_obj_align(v3_label_line3, LV_ALIGN_DEFAULT, 0, LINE3_V3);
		 lv_obj_set_width(v3_label_line3, 240);
		 lv_obj_set_style_text_align(v3_label_line3, LV_TEXT_ALIGN_CENTER, 0);
		 lv_obj_set_style_text_font(v3_label_line3,&FONT_NAME_V3,0);
		 lv_obj_set_style_text_color(v3_label_line3,COLOR_NAME_METRIC3_V3,0);
		 lv_label_set_text(v3_label_line3,"Метрика 3");

		 v3_label_line33 = lv_label_create(screen_metrics_V3);
		 lv_obj_align(v3_label_line33, LV_ALIGN_DEFAULT, 0, LINE33_V3);
		 lv_obj_set_width(v3_label_line33, 240);
		 lv_obj_set_style_text_align(v3_label_line33, LV_TEXT_ALIGN_CENTER, 0);
		 lv_obj_set_style_text_font(v3_label_line33,&FONT_VALUE_V3,0);
		 lv_obj_set_style_text_color(v3_label_line33,COLOR_VALUE_METRIC3_V3,0);
		 lv_label_set_text(v3_label_line33,"0.003 F");

}

void Screen_4metrics_1name_Create()
{
	         screen_4m1n = lv_obj_create(NULL);
			 lv_obj_set_size(screen_4m1n, 240, 240);
			 lv_disp_load_scr(screen_4m1n);

			 //фоновая картинка
			 lv_obj_t * img1 = lv_img_create(screen_4m1n);
			 lv_img_set_src(img1, &bg_image);
			 lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
			 lv_obj_set_style_img_recolor_opa(img1, 170, 0);
			 lv_obj_set_size(img1, 240, 240);

			 //окружность
			 lv_obj_t * arc = lv_arc_create(screen_4m1n);
		     lv_obj_set_size(arc, 240, 240);
			 lv_arc_set_rotation(arc, 360);
			 lv_arc_set_bg_angles(arc, 0, 360);
			 lv_arc_set_value(arc, 100);
			 lv_obj_remove_style(arc, NULL, LV_PART_KNOB);
			 lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);
			 lv_obj_set_style_arc_width(arc,2,LV_PART_MAIN);
			 lv_obj_set_style_arc_width(arc,2,LV_PART_INDICATOR);
			 lv_obj_set_style_arc_color(arc,lv_palette_main(LV_PALETTE_GREY),LV_PART_INDICATOR);
			 lv_obj_center(arc);


			 m41n_label_group = lv_label_create(screen_4m1n);
			 lv_obj_align(m41n_label_group, LV_ALIGN_DEFAULT, 0, YG);
			 lv_obj_set_width(m41n_label_group, 240);
			 lv_obj_set_style_text_align(m41n_label_group, LV_TEXT_ALIGN_CENTER, 0);
			 lv_obj_set_style_text_font(m41n_label_group,&FONT_GROUP_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_group,COLOR_GROUP_METRICS_4M1N,0);
			 lv_label_set_text(m41n_label_group,"7-1");

			 m41n_label_name = lv_label_create(screen_4m1n);
			 lv_obj_align(m41n_label_name, LV_ALIGN_DEFAULT, 0, LINE_NAME_GROUP_4M1N);
			 lv_obj_set_width(m41n_label_name, 240);
			 lv_obj_set_style_text_align(m41n_label_name, LV_TEXT_ALIGN_CENTER, 0);
			 lv_obj_set_style_text_font(m41n_label_name,&FONT_NAME_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_name,COLOR_NAME_GROUP_4M1N,0);
			 lv_label_set_recolor(m41n_label_name, true);
			 lv_label_set_text(m41n_label_name,"#CCCCCC Откаты # #FF6666 max#");


			 m41n_label_line1 = lv_label_create(screen_4m1n);
             lv_obj_align(m41n_label_line1, LV_ALIGN_DEFAULT, LABEL_VALUE_POS_X1, LINE1_4M1N);
			 lv_obj_set_width(m41n_label_line1, WIDTH_LABEL_VALUE);
			 lv_obj_set_style_text_align(m41n_label_line1, LV_TEXT_ALIGN_RIGHT, 0);
			 lv_obj_set_style_text_font(m41n_label_line1,&FONT_VALUE_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_line1,COLOR_VALUE_METRIC1_4M1N,0);
			 lv_label_set_text_fmt(m41n_label_line1,"%2d.%d",0,0);

			 m41n_label_line11 = lv_label_create(screen_4m1n);
             lv_obj_align(m41n_label_line11, LV_ALIGN_DEFAULT, LABEL_VALUE_POS_X2, LINE1_4M1N);
			 lv_obj_set_width(m41n_label_line11, WIDTH_LABEL_VALUE);
			 lv_obj_set_style_text_align(m41n_label_line11, LV_TEXT_ALIGN_CENTER, 0);
			 lv_obj_set_style_text_font(m41n_label_line11,&FONT_VALUEMAX_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_line11,COLOR_VALUE_METRIC1_4M1N,0);
			 lv_label_set_text_fmt(m41n_label_line11,"%2d.%d",0,0);


			 m41n_label_line2 = lv_label_create(screen_4m1n);
			 lv_obj_align(m41n_label_line2, LV_ALIGN_DEFAULT, LABEL_VALUE_POS_X1, LINE2_4M1N);
			 lv_obj_set_width(m41n_label_line2, WIDTH_LABEL_VALUE);
			 lv_obj_set_style_text_align(m41n_label_line2,LV_TEXT_ALIGN_RIGHT, 0);
			 lv_obj_set_style_text_font(m41n_label_line2,&FONT_VALUE_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_line2,COLOR_VALUE_METRIC2_4M1N,0);
			 lv_label_set_text_fmt(m41n_label_line2,"%2d.%d",-2,9);

			 m41n_label_line22 = lv_label_create(screen_4m1n);
			 lv_obj_align(m41n_label_line22, LV_ALIGN_DEFAULT, LABEL_VALUE_POS_X2, LINE2_4M1N);
			 lv_obj_set_width(m41n_label_line22, WIDTH_LABEL_VALUE);
			 lv_obj_set_style_text_align(m41n_label_line22,LV_TEXT_ALIGN_CENTER, 0);
			 lv_obj_set_style_text_font(m41n_label_line22,&FONT_VALUEMAX_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_line22,COLOR_VALUE_METRIC2_4M1N,0);
			 lv_label_set_text_fmt(m41n_label_line22,"%2d.%d", -4,1);

			 m41n_label_line3 = lv_label_create(screen_4m1n);
			 lv_obj_align(m41n_label_line3, LV_ALIGN_DEFAULT, LABEL_VALUE_POS_X1, LINE3_4M1N);
			 lv_obj_set_width(m41n_label_line3, WIDTH_LABEL_VALUE);
			 lv_obj_set_style_text_align(m41n_label_line3, LV_TEXT_ALIGN_RIGHT, 0);
			 lv_obj_set_style_text_font(m41n_label_line3,&FONT_VALUE_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_line3,COLOR_VALUE_METRIC2_4M1N,0);
			 lv_label_set_text_fmt(m41n_label_line3,"%2d.%d",-3,5);

			 m41n_label_line33 = lv_label_create(screen_4m1n);
			 lv_obj_align(m41n_label_line33, LV_ALIGN_DEFAULT, LABEL_VALUE_POS_X2, LINE3_4M1N);
			 lv_obj_set_width(m41n_label_line33, WIDTH_LABEL_VALUE);
			 lv_obj_set_style_text_align(m41n_label_line33, LV_TEXT_ALIGN_CENTER, 0);
			 lv_obj_set_style_text_font(m41n_label_line33,&FONT_VALUEMAX_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_line33,COLOR_VALUE_METRIC2_4M1N,0);
			 lv_label_set_text_fmt(m41n_label_line33,"%2d.%d",-2,7);

			 m41n_label_line4 = lv_label_create(screen_4m1n);
			 lv_obj_align(m41n_label_line4, LV_ALIGN_DEFAULT, LABEL_VALUE_POS_X1, LINE4_4M1N);
			 lv_obj_set_width(m41n_label_line4, WIDTH_LABEL_VALUE);
			 lv_obj_set_style_text_align(m41n_label_line4, LV_TEXT_ALIGN_RIGHT, 0);
			 lv_obj_set_style_text_font(m41n_label_line4,&FONT_VALUE_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_line4,COLOR_VALUE_METRIC2_4M1N,0);
			 lv_label_set_text_fmt(m41n_label_line4,"%2d.%d",-1,5);

			 m41n_label_line44 = lv_label_create(screen_4m1n);
			 lv_obj_align(m41n_label_line44, LV_ALIGN_DEFAULT, LABEL_VALUE_POS_X2, LINE4_4M1N);
			 lv_obj_set_width(m41n_label_line44, WIDTH_LABEL_VALUE);
			 lv_obj_set_style_text_align(m41n_label_line44, LV_TEXT_ALIGN_CENTER, 0);
			 lv_obj_set_style_text_font(m41n_label_line44,&FONT_VALUEMAX_4M1N,0);
			 lv_obj_set_style_text_color(m41n_label_line44,COLOR_VALUE_METRIC2_4M1N,0);
			 lv_label_set_text_fmt(m41n_label_line44,"%2d.%d",-7,5);


}

void Load_Screen_MetricsV3(void)
{
	//lv_scr_load(screen_metrics_V3);
	lv_scr_load_anim(screen_metrics_V3, LV_SCR_LOAD_ANIM_MOVE_RIGHT, 100, 0,false);
}
void Load_4metrics_1name_Screen()
{
	//lv_scr_load(screen_4m1n);
	lv_scr_load_anim(screen_4m1n, LV_SCR_LOAD_ANIM_MOVE_RIGHT, 100, 0,false);
}

in main.c:

	Screen_MetricsV3_Create();
	Screen_4metrics_1name_Create();

	while (1)
	{
		Load_Screen_MetricsV3();
		HAL_Delay(2000);
		Load_4metrics_1name_Screen();
		HAL_Delay(2000);
	}

Screenshot and/or video

https://youtube.com/shorts/0PC7lSfDPHg?feature=share

1 Like

Hi,

It simply seems like the device is not powerful enough.

  • What is speed of the SPI?
  • What is the size of the draw buffers?
  • What is the speed of the MCU?
  • Is the color depth 16 bit?

Hi.

  • What is speed of the SPI? - 42 Mbit + DMA
  • What is the speed of the MCU? - 168 MHz
  • Is the color depth 16 bit? - Yes
  • What is the size of the draw buffers?
    #define MY_DISP_HOR_RES 240
    static lv_disp_draw_buf_t draw_buf_dsc_2;
    static lv_color_t buf_2_1[MY_DISP_HOR_RES * 10]; /A buffer for 10 rows/
    static lv_color_t buf_2_2[MY_DISP_HOR_RES * 10]; /An other buffer for 10 rows/
    lv_disp_draw_buf_init(&draw_buf_dsc_2, buf_2_1, buf_2_2, MY_DISP_HOR_RES * 10); /Initialize the display buffer/

I see 2 possible issues:

  • The MY_DISP_HOR_RES * 10 buffer size results in 1/24th screen sized buffer. It’s recommended to use at least ~1/10th screen size. (I.e. at least MY_DISP_HOR_RES * 24)
  • If you haven’t done yet, enable -O3 optimization.