Documentation / Widgets / Controller / Roller

Roller

A drum of options; drag to spin. Good for numbers and short lists on a touch panel.

A roller’s height is its rows. LVGL sets it from Visible rows: that many lines of the font, each with the line spacing after it, and the border twice - 100 pixels for three rows of the default 14 pixel font. Whatever height a design gives it is overwritten on the board, so the designer keeps it at that figure: pull the roller taller and it gains a row, change its font or line spacing and its height follows. The chosen option is always in the middle, with the others a row apart above and below; on its first option a Normal roller has nothing above it.

Group: Controller · Default size: 120 × 100 · Style parts: Main, Selected

A dropped Roller: a box of three rows with Option 1 lit blue in the middle row and Option 2 under it.
A Roller as it is dropped: the chosen option is always in the middle.
The Roller settings section with Options 00 to 23, Mode Infinite, Selected 7, Visible rows 3.
Its settings, as the example’s hours roller has them.
SettingDefaultWhat it does
OptionsOption 1 … 4One per line.
ModeNormalNormal stops at the ends; Infinite wraps around.
Selected0Initial index.
Visible rows3How many rows show at once - an odd number keeps the selection centred.

Example: a time picker

  1. Drag a Roller onto the screen and name it Hours. Set Options to the 24 hours, 00 to 23, one a line; Mode to Infinite, so it goes round; and Selected to 7. Give it X 60, Y 70 and Width 90. Its height is its rows, and is kept so.
  2. Drag a second roller, Minutes, with Options 00, 15, 30 and 45 and Selected 2, at X 170.
  3. Put a Label saying : in a large font between them, and one saying Wake me at above.
  4. To use the choice, bind each roller’s Selected to a variable with Direction Widget -> variable: it is the line’s number, from 0.
Two rollers side by side under the words Wake me at: hours with 07 lit, minutes with 30 lit, and a colon between them.
Two rollers make a time.