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

Dreamer · December 9, 2021, 11:13am

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

kisvegabor · January 15, 2022, 1:10pm

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?

Dreamer · January 15, 2022, 7:39pm

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/

kisvegabor · January 15, 2022, 7:52pm

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.