How to create a horizontal roller

How-to
1

Description

Hi LVGL,I would like to know how to create a horizontal roller,and the direction of the text and the roller are not the same.If it can be achieved, please let me know.Thanks!

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

PC simulator

What LVGL version are you using?

v7.0.1

What do you want to achieve?

create a horizontal roller.

What have you tried so far?

N/A

Code to reproduce

N/A

Screenshot and/or video

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

image
image887×247 9.41 KB

3

Why no one reply to me :frowning_face:

4

LVGL itself does not have a horizontal roller implementation, however, all the building blocks are there for you to create it.

Another workaround might be to use a tileview and create horizontal tiles for each value.

5

Many thanks, I see how to do it.

1 Like
6

I still have some questions.
If I want to implement the horizontal roller and roller selected font(set the selected font and background font to be different)，how long does it take.
If you think it will take a long time，I’ll notify the designer to modify the UI.Because the project is in a hurry.
Hope to receive your suggestions. Thanks. :smiley:

7

Unfortunately, I don’t know if I can give you an accurate time estimate. If you’re looking to do this quickly, I’d suggest modifying the UI to use an existing widget instead.

8

Ok i see, thank you very much for your help.

9

I need to make something like this. I also have a question,if I implement this thing with a TileView, can I set it to scroll in a loop.

10

Unfortunately, no. The roller is the only object which can do infinite scrolling right now.

1 Like
11

All right.Another question is LittleVGL whether to support font gradient, like this:

微信截图_20210310091007
微信截图_20210310091007853×76 3.47 KB

12

Yes; take a look at this example.

13

Ok, thanks a lot.

14

@kisvegabor Can this horizontal roller be implemented in LVGL9?

15

Could you send an image about how it should look like? A few questions that I have in mind:

  1. How would it be different from a scrollbale list with snapping to the center?
  2. How should we handle options with differenet width?
16

Just like the picture below
image

  1. How would it be different from a scrollbale list with snapping to the center?
    If there are many options, it may save more memory.

2.How should we handle options with differenet width?
You are correct. Dealing with the width of options is indeed a challenge. Generally speaking, this horizontal scroll wheel is used for relatively short numbers or text. How to calculate its length to provide a display area for it.

This horizontal scroll wheel is just my idea, I don’t know if anyone else needs it

17

It already cam up a few times so it seems like something that people might need.

Unfortunately, I’m little bit overwhelmed with some tasks, so I won’t have time to work on it any time soon.

However, if anyone is interested in sending PR, I’d be happy to review it.