lvgl: Image zoom causes the widget size to be incorrect

Perform all steps below and tick them with [x]

Check the related part of the Documentation
Update lvgl to the latest version
Reproduce the issue in a Simulator

Describe the bug

When the zoom is adjusted, the size of the widget set does not match the actual size.

To Reproduce

LV_IMG_DECLARE(img_clothes);

void img_test()
{
    lv_obj_t* obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj, 300, 300);

    lv_obj_t* img = lv_img_create(lv_scr_act());
    lv_img_set_src(img, &img_clothes);

    lv_obj_set_style_bg_color(img, lv_color_black(), 0);
    lv_obj_set_style_bg_opa(img, LV_OPA_COVER, 0);
    lv_img_set_pivot(img, 0, 0);
    lv_img_set_zoom(img, 128);
    lv_obj_set_size(img, 300, 300);
}

Expected behavior

When the zoom is adjusted, the size of the image widget set should be the same as the actual size.

Screenshots or video

40KJLWQY)3U90UWLT$D2G70

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (9 by maintainers)

Most upvoted comments

So the questions are what to do when the size of the object is different from the size of the image, and what should be a relation between the object size and zoom.

I’ve checked the related properties in CSS:

I think it’s a little bit incontinent mainly because the <img> element can not be tiled.

So here is my proposal based on CSS and the ideas in the issue.

Add an image_size_mode attribute (need a better name) that describes how the image should behave if the image size and object size is different:

none just draw the image as it is in the top left corner
center same as none just center the image
repeat tile the image on the set size
zoom zoom the image to the set object size

This way you can zoom as described in the issue by setting the object size instead of lv_img_set_zoom and selecting image_size_mode = zoom.

lv_img_set_zoom would still change the size only “virtually” (backward compatible with LVGL and compatible with CSS)

It also maintains backward compatibility if image_size_mode = repeat by default.

kisvegabor on Jun 22, 2021

Sorry for the late reply.

I agree that this part can be reconsidered. However, the current mechanism is quite similar to HTML/CSS in which scale doesn’t affect the document flow.

Let’s say there are 3 images in a row and when you press one of them it gets 10% larger, If the elements were positioned by flex layout the other 2 images would “move” which is probably not desirable.

kisvegabor on Jun 7, 2021

Hi @embeddedt,

I’m not sure if I understand correctly, but this intended behavior leads to some trouble. For us, the situation is that three icons in a row, contained in a parent object to allow automatical layout. The zoom scale will change with its y coordinates to make a fancy look on round screen.

The default behavior returns wrong object size, thus makes auto layout failed. If we are going to set the object size manually without auto layout, then the image scale factor will affect the final object size --> not the size manually set.

The proposed solution is fully commited with meaning of LV_SIZE_CONTENT that if the image scale changes, the object size changes with its content. And if object size is set manually, then size stays. Although there are some changes i’m not fully sure if it’s correct, thus needs a carefull review.

The tile behaviour is also changed that the image is tiled one after another using zoomed picture size, not the oject size as show in above picture.

Regards, Neo

XuNeo on Jun 3, 2021