The layout is not in the correct position,and very slowly

Code

The code block(s) should be between ```c and ``` tags:

/*You code here*/
int on_create_pu_config()
{
    static struct timeval flush_start = {0}, flush_end = {0};
    gettimeofday(&flush_start, NULL);
#if DEBUG_IMAGE_PARSE
    ic_img_right_normal = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_right_normal.png");
    ic_img_right_focus = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_right_focus.png");
    ic_img_low_light = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_low_light.png");
    ic_img_high_light = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_high_light.png");
    printf("on_create_pu_config ====> lvgl load image by parse png!!\n");
#else
    LV_IMG_DECLARE(ic_right_normal);
    ic_img_right_normal = &ic_right_normal;
    LV_IMG_DECLARE(ic_right_focus);
    ic_img_right_focus = &ic_right_focus;
    LV_IMG_DECLARE(ic_low_light);
    ic_img_low_light = &ic_low_light;
    LV_IMG_DECLARE(ic_high_light);
    ic_img_high_light = &ic_high_light;
    printf("on_create_pu_config ====> lvgl load image by c file source!!\n");
#endif

    if (!pu_config_created)
    {
        memset(&_pu_config_page_params, 0, sizeof(pu_config_page_para_t));
        ui_obj_interface_t *menu_page_obj = get_page(P_PAGE_MENU);
        lv_obj_t *parent = menu_page_obj->info.user_data;

        _pu_config_page_params.ui.base_pu_config_page_obj = lv_obj_create(parent);

        apply_obj_style(_pu_config_page_params.ui.base_pu_config_page_obj);
        lv_obj_set_size(_pu_config_page_params.ui.base_pu_config_page_obj, lv_pct(100), lv_pct(80));
        lv_obj_align_to(_pu_config_page_params.ui.base_pu_config_page_obj, parent, LV_ALIGN_TOP_MID, 0, lv_pct(20));
        set_obj_bg_color_rgba(_pu_config_page_params.ui.base_pu_config_page_obj, 240, 240, 240, LV_OPA_COVER, LV_PART_MAIN);

        lv_obj_t *pu_config_main_page = lv_obj_create(_pu_config_page_params.ui.base_pu_config_page_obj);
        lv_obj_set_size(pu_config_main_page, lv_pct(70), lv_pct(100));
        apply_obj_style(pu_config_main_page);
        lv_obj_set_style_bg_color(pu_config_main_page, lv_color_hex(0xf0f0f0), LV_STATE_DEFAULT);
        lv_obj_center(pu_config_main_page);

        for (int i = 0; i < 5; i++)
        {
            lv_obj_t *pu_config_item = lv_obj_create(pu_config_main_page);
            lv_obj_set_size(pu_config_item, lv_pct(100), LV_SIZE_CONTENT);
            apply_obj_style(pu_config_item);
            set_obj_bg_color_rgba(pu_config_item, 0, 0, 0, LV_OPA_0, LV_PART_MAIN);
            lv_obj_align_to(pu_config_item, pu_config_main_page, LV_ALIGN_TOP_MID, 0, 70 * (i + 1));

            lv_label_t *pu_config_item_title = lv_label_create(pu_config_item);
            lv_label_set_text(pu_config_item_title, pu_config_config_title[i]);
            lv_obj_align_to(pu_config_item_title, pu_config_item, LV_ALIGN_LEFT_MID, 0, 0);
            lv_obj_set_style_text_color(pu_config_item_title, lv_color_hex(0x666666), LV_STATE_DEFAULT);
            lv_obj_set_style_text_color_filtered(pu_config_item_title, lv_color_hex(0x666666), LV_STATE_DEFAULT);
            lv_obj_set_style_text_color(pu_config_item_title, lv_color_hex(0xFF7F00), LV_STATE_FOCUSED);
            lv_obj_set_style_text_color_filtered(pu_config_item_title, lv_color_hex(0xFF7F00), LV_STATE_FOCUSED);

            pu_config_items[i].item_title = pu_config_item_title;

            if (i == 0)
            {
                lv_obj_t *process_obj = create_custome_process_bar(pu_config_item, 5, ic_img_low_light, ic_img_high_light);
                lv_obj_align_to(process_obj, pu_config_item, LV_ALIGN_RIGHT_MID, 0, 0);
                set_obj_bg_color_rgba(process_obj, 240, 240, 240, LV_OPA_0, LV_PART_MAIN);
                pu_config_items[i].item_ctrl = process_obj;
                set_custome_process_bar_state(pu_config_items[i].item_ctrl, 2, false);
                pu_config_items[i].item_value = 2;
                pu_config_items[i].item_type = ITEM_PROC_BAR;
            }
            else if (i == 1 || i == 2 || i == 3)
            {
                lv_obj_t *m_switch_obj = create_custom_switch_bar(pu_config_item);
                lv_obj_align_to(m_switch_obj, pu_config_item, LV_ALIGN_RIGHT_MID, 0, 0);
                lv_obj_align_to(m_switch_obj, pu_config_item, LV_ALIGN_RIGHT_MID, -250, 0);
                pu_config_items[i].item_ctrl = m_switch_obj;
                pu_config_items[i].item_type = ITEM_SWIT_BAR;
                pu_config_items[i].item_value = 0;
            }
            else if (i == 4)
            {
                lv_obj_t *pu_language_setting = lv_obj_create(pu_config_item);
                apply_obj_style(pu_language_setting);
                lv_obj_set_size(pu_language_setting, 26, 30);
                lv_obj_set_style_bg_color(pu_language_setting, lv_color_hex(0xf0f0f0), LV_STATE_DEFAULT);
                lv_obj_set_style_bg_img_src(pu_language_setting, ic_img_right_normal, LV_STATE_DEFAULT);
                lv_obj_set_style_bg_img_src(pu_language_setting, ic_img_right_focus, LV_STATE_FOCUSED);
                lv_obj_align_to(pu_language_setting, pu_config_item, LV_ALIGN_RIGHT_MID, -280, 0);
                pu_config_items[i].item_ctrl = pu_language_setting;
                pu_config_items[i].item_type = ITEM_NEW_PAGE;
            }
            pu_config_items[i].focuse = false;
        }
        gettimeofday(&flush_end, NULL);
        printf("on_create_pu_config create time : %d ms\n", (flush_end.tv_sec * 1000 + flush_end.tv_usec / 1000) - (flush_start.tv_sec * 1000 + flush_start.tv_usec / 1000));
        pu_config_created = true;
    }



## Screenshot and/or video
If possible, add screenshots and/or videos about the current state.

 printf result : on_create_pu_config create time : 1052 ms
Very slowly before flsuh display memery ! just layout on LVGL. How to make it fast?? 
Sometime,The layout is not in the correct position.
My project screen size is 720x1280 and rotated = LV_DISP_ROT_90  thanks for your help!
lv_obj_t *create_custome_process_bar(lv_obj_t *parent_obj, int level_nums, const lv_img_dsc_t *low_bar_icon, const lv_img_dsc_t *heigh_bar_icon)
{
#if DEBUG_IMAGE_PARSE
    ic_img_low_process_norm = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_low_process_norm.png");
    ic_img_low_process_focus = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_low_process_focus.png");
    ic_img_high_process_norm = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_high_process_norm.png");
    ic_img_high_process_focus = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_high_process_focus.png");
    ic_img_high_process_off = (void *)parse_image_from_file(LV_IMAGE_PATH "ic_high_process_off.png");
    printf("create_custome_process_bar ====> lvgl load image by parse png!!\n");
#else
    LV_IMG_DECLARE(ic_low_process_norm);
    ic_img_low_process_norm = &ic_low_process_norm;
    LV_IMG_DECLARE(ic_low_process_focus);
    ic_img_low_process_focus = &ic_low_process_focus;
    LV_IMG_DECLARE(ic_high_process_norm);
    ic_img_high_process_norm = &ic_high_process_norm;
    LV_IMG_DECLARE(ic_high_process_focus);
    ic_img_high_process_focus = &ic_high_process_focus;
    LV_IMG_DECLARE(ic_high_process_off);
    ic_img_high_process_off = &ic_high_process_off;
    printf("create_custome_process_bar =====> lvgl load image by c file source!!\n");
#endif
    //整个自定义进度条:包含进度,首部和尾部图标
    lv_obj_t *base_bar_obj = lv_obj_create(parent_obj);
    apply_obj_style(base_bar_obj);
    lv_obj_set_size(base_bar_obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    //进度条
    lv_obj_t *bar_content = lv_obj_create(base_bar_obj);
    apply_obj_style(bar_content);
    lv_obj_set_size(bar_content, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_set_align(bar_content, LV_ALIGN_LEFT_MID);
    lv_obj_set_pos(bar_content, (bar_icon_heigh + bar_icon_pad), 0);
    set_obj_bg_color_rgba(bar_content, 240, 240, 240, LV_OPA_COVER, LV_STATE_DEFAULT);
    //首部图标
    lv_obj_t *low_icon = lv_obj_create(base_bar_obj);
    apply_obj_style(low_icon);
    lv_obj_set_size(low_icon, bar_icon_heigh, bar_icon_heigh);
    lv_obj_set_style_bg_img_src(low_icon, low_bar_icon, LV_STATE_DEFAULT);
    lv_obj_set_align(low_icon, LV_ALIGN_LEFT_MID);
    lv_obj_set_pos(low_icon, 0, 0);
    set_obj_bg_color_rgba(low_icon, 240, 240, 240, LV_OPA_COVER, LV_STATE_DEFAULT);
    for (int i = 0; i < level_nums; i++)
    {
        lv_obj_t *bar = lv_obj_create(bar_content);
        apply_obj_style(bar);
        set_obj_bg_color_rgba(bar, 240, 240, 240, LV_OPA_COVER, LV_STATE_DEFAULT);
        lv_obj_set_size(bar, bar_width, bar_icon_heigh);
        lv_obj_set_pos(bar, i * (bar_width + bar_pad), 0);
        if (i == 0)
        {
            lv_obj_set_style_bg_img_src(bar, ic_img_low_process_norm, LV_STATE_DEFAULT);
            lv_obj_set_style_bg_img_src(bar, ic_img_low_process_focus, LV_STATE_FOCUSED);
        }
        else if (i == level_nums - 1)
        {
            lv_obj_set_style_bg_img_src(bar, ic_img_high_process_norm, LV_STATE_DEFAULT);
            lv_obj_set_style_bg_img_src(bar, ic_img_high_process_focus, LV_STATE_FOCUSED);
            lv_obj_set_style_bg_img_src(bar, ic_img_high_process_off, LV_STATE_DISABLED);
        }
        else
        {
            set_obj_bg_color_rgba(bar, 47, 157, 56, LV_OPA_COVER, LV_STATE_DEFAULT);
            set_obj_bg_color_rgba(bar, 255, 127, 0, LV_OPA_COVER, LV_STATE_FOCUSED);
            set_obj_bg_color_rgba(bar, 231, 239, 228, LV_OPA_COVER, LV_STATE_DISABLED);
        }
        lv_obj_add_state(bar, LV_STATE_DEFAULT);
    }
    //尾部图标
    lv_obj_t *high_icon = lv_obj_create(base_bar_obj);
    apply_obj_style(high_icon);
    lv_obj_set_size(high_icon, bar_icon_heigh + 13, bar_icon_heigh);
    lv_obj_set_align(high_icon, LV_ALIGN_LEFT_MID);
    lv_obj_set_pos(high_icon, (bar_icon_heigh + bar_icon_pad) + bar_width * level_nums + (level_nums + 1) * bar_pad, 0);
    lv_obj_set_style_bg_img_src(high_icon, heigh_bar_icon, LV_STATE_DEFAULT);
    set_obj_bg_color_rgba(high_icon, 240, 240, 240, LV_OPA_0, LV_STATE_DEFAULT);

    return base_bar_obj;
}

Hi @jepson ,

There is little information for us to work with here, which hardware platform are you using?

Is DEBUG_IMAGE_PARSE defined so you are loading the images from a file system?

Is the file system slow?

If DEBUG_IMAGE_PARSE is not defined is it still very slow?

Does the system have an RTOS?

If yes are there other threads of execution going on at the same time as this code is executing?

Have you tried moving your gettimeofday(&flush_start, NULL); gettimeofday(&flush_end, NULL); calls to different parts of the code to see if you can identify which part of the code is causing the bottleneck?

Just a few questions/suggestions, hope that helps

Kind Regards,

Pete

Hardware type is Lightweight Internet of Things embedded real-time operating system in the field of digital media and IoT. and the system is linux-5.4 base on OpenWRT, ARM size is 64M

Time of load images is same,when that defined DEBUG_IMAGE_PARSE or no DEBUG_IMAGE_PARSE

My system have RTOS ,and just have layout thread working when i executing those code

I will calls to different parts of the code to check that which part of the code is causing the bottleneck, and feed back the results

In addition, I hope to get your continued assistance to make the layout faster

thank you very much