Description
Hi,I encountered a problem.LVGL has controls that contain multiple images. Can the images on both sides be compressed and stretched when sliding? If not, can you give me some advice
What MCU/Processor/Board and compiler are you using?
Xilinx mpsoc
What LVGL version are you using?
9.3.0
What do you want to achieve?
What have you tried so far?
At the moment, I only thought of using elastic layout and animation to achieve it. Container with elastic layout generates multiple images inside, and when sliding, the animation scales the images on both sides. However, this is a bit inflexible and complex. I would like to know if there is a better method
Code to reproduce
Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.
The code block(s) should be formatted like:
Screenshot and/or video
If possible, add screenshots and/or videos about the current state.
Normal
@embeddedt @kisvegabor
Can give me some advice? Thank in advance
Hi,
Can you send a video too about the desired effect? I’m curious about how the images the are out of the view will appear.
I believe that “stretching” the OP is referring to is doing a perspective change where the distance from the center dictates how tall the image is for the given X location. Horizontal Keystone adjustment.
This would give the control a 3D like appearance as the images get slid from left to right.
The invisible images on both sides can be horizontally compressed or uncompressed. The desired effect is that when sliding left and right, the two images on both sides of the container can be horizontally compressed and stretched accordingly
Swipe left：
Swipe right：
I didn’t think there was a way to do it.
Simply compress or stretch horizontally on both sides of the container to achieve the desired effect
The image transformation part is doable but there is no built-in layout feature supporting it out of the box. You should be able to achieve this effect by
- Create this widget tree
- main scrollable container
- an other container in it with the same size
- images on the second container
- Adding an
LV_EVENT_SCROLL to the main container
- In the event use
lv_obj_get_scroll_left(main_container) to see the scroll position
- Based on the scroll position and and the position of the image adjust the scale and position of the images.
To adjust the scale:
LV_IMAGE_DECLARE(img_cogwheel_argb);
lv_obj_t * img1 = lv_image_create(lv_screen_active());
lv_image_set_src(img1, &img_cogwheel_argb);
lv_image_set_inner_align(img1, LV_IMAGE_ALIGN_STRETCH);
lv_obj_set_width(img1, 30);
So it’s a little bit of coding, but doable.