Images and grids are not compatible

[JHarding86]

Perform all steps below and tick them with [x]

• [x] Read the FAQ
• [x] Check the related part of the Documentation
• [x] Update lvgl to the latest version
• [x] Reproduce the issue in a Simulator

Describe the bug

Adding images to a grid system yields unexpected results. More than one of the image is added to the grid.

To Reproduce

Buttons work great in the grid system. passing a 0 to the gridTest function will test images, passing a 1 will test buttons. images fail.

void gridTest(int btn)
{
    lv_obj_t* mContainer = lv_obj_create(lv_scr_act());

    static lv_coord_t col_dsc[] = {30, 30, 30, 30, LV_GRID_TEMPLATE_LAST};
    static lv_coord_t row_dsc[] = {50, LV_GRID_TEMPLATE_LAST};

    lv_obj_set_style_grid_column_dsc_array(mContainer, col_dsc, 0);
    lv_obj_set_style_grid_row_dsc_array(mContainer, row_dsc, 0);
    lv_obj_set_layout(mContainer, LV_LAYOUT_GRID);

    lv_obj_set_pos(mContainer, 0, 0);
    lv_obj_set_size(mContainer, 300, 200);

    lv_obj_t* temp;

    if(btn)
    {
        temp = lv_btn_create(mContainer);
        lv_obj_set_grid_cell(temp, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_STRETCH, 0, 1);

        temp = lv_btn_create(mContainer);
        lv_obj_set_grid_cell(temp, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 0, 1);

        temp = lv_btn_create(mContainer);
        lv_obj_set_grid_cell(temp, LV_GRID_ALIGN_STRETCH, 2, 1, LV_GRID_ALIGN_STRETCH, 0, 1);
    }
    else
    {
        temp = lv_img_create(mContainer);
        LV_IMG_DECLARE(imgbtn_left);
        lv_img_set_src(temp, &imgbtn_left);
        lv_obj_set_grid_cell(temp, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_STRETCH, 0, 1);

        temp = lv_img_create(mContainer);
        LV_IMG_DECLARE(imgbtn_mid);
        lv_img_set_src(temp, &imgbtn_mid);
        lv_obj_set_grid_cell(temp, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 0, 1);

        temp = lv_img_create(mContainer);
        LV_IMG_DECLARE(imgbtn_right);
        lv_img_set_src(temp, &imgbtn_right);
        lv_obj_set_grid_cell(temp, LV_GRID_ALIGN_STRETCH, 2, 1, LV_GRID_ALIGN_STRETCH, 0, 1);
    }
}

Expected behavior

Only one image should be added to the grid system

Screenshots or video

[kisvegabor]

In LVGL v8 if the coordinates of an image widget are set to larger values manually, the image source will be tiled. Using LV_GRID_ALIGN_STRETCH can solve the problem.

[JHarding86]

In LVGL v8 if the coordinates of an image widget are set to larger values manually, the image source will be tiled. Using LV_GRID_ALIGN_STRETCH can solve the problem.

I don't set the coordinates of the image widget in my example code. Isn't the point of the grid layout to not need to use coordingates? If I use a grid and alignment options then I shouldn't need to nit pick coordinates?

Also in my example code above that is broken, I use LV_GRID_ALIGN_STRETCH.

[kisvegabor]

I don't set the coordinates of the image widget in my example code.

I'm sorry, my description was really obscure. So what happens is that under the hood LV_GRID_ALIGN_STRETCH sets the coordinates of the widgets to actually stretch them.

[lvgl-bot]

We need some feedback on this issue.

Now we mark this as "stale" because there was no activity here for 14 days.

Remove the "stale" label or comment else this will be closed in 7 days.

[lvgl-bot]

As there was no activity here for a while we close this issue. But don't worry, the conversation is still here and you can get back to it at any time.

So feel free to comment if you have remarks or ideas on this topic.