Scrolling Menu with I8 custom image

How-to
1

Important: unclear posts may not receive useful answers.

Description

How to create scrollable menu having sub menu with custom i8 image and center image big in size and highlighted where as side 2 images are small in size and dull. Opacity can be useful but here main question is how to make i8 image big and small when scrolling as zoom in zoom out is not possible with i8 images.

Please suggest some way to achieve this…

What MCU/Processor/Board and compiler are you using?

What LVGL version are you using?

8.2

What do you want to achieve?

Scrollable menu having sub menu with custom i8 image and center image big in size and highlighted where as side 2 images are small in size and dull.

What have you tried so far?

Scrolling, Animation, Image buttons

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:

/*You code here*/

Screenshot and/or video

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

2

Hi, @kisvegabor, Do you have any idea? How to achieve this?

3

Hi,

Please send an image so that we can better imagine what the goal is.

4

image
I want to create menu something like this.

  • on scrolling, middle button size should be large.
  • Images on buttons are of i8 format.
5

Hi @kisvegabor,
Did you get a chance to look into this?
Can you please share some idea how to achieve this?

6

Sorry for the late replay. I’ve just got home from a longer business trip.

Indexed images cannot be scaled because during antialisig LVGL can’t use the indexes to get a “filtered color”. E.g. if pixel1 = 10 and pixel2=20, during scaling the pixel between them should be 15. But it can happen that 10=red, 20 = green, and 15 = blue.

However in your case it seems you can use A8 images too, which can be scaled normally.

7

Thanks for the reply.
We have changed the approach. By resizing the image we have achieved the same.

However, my query is to choose which widget to make the same like menu in lvgl?
I have tried Flex but the issue in that is ‘Shadow’ effect is not working properly in Flex widget as it appears for trailing image not for the leading/next image.

Thanks