Roller

Report on GitHub

Scrollable cylindrical selector for picking one option from a fixed list, configured via lv_roller_set_options.

Infinite month roller

Pick a month from a wrap-around roller and log the selection.

A centered lv_roller is populated with the twelve English month names in LV_ROLLER_MODE_INFINITE, so scrolling past December wraps back to January. Four rows are visible at once via lv_roller_set_visible_row_count. An LV_EVENT_ALL handler prints the current selection string on LV_EVENT_VALUE_CHANGED.

Rollers sharing a selected-row style

One LV_PART_SELECTED style is reused across three number rollers of different widths.

A shared style for LV_PART_SELECTED swaps in lv_font_montserrat_22 with a pink fill and red border. Three LV_ROLLER_MODE_NORMAL rollers list numbers 1..10: a 100 px left-aligned roller with a green vertical gradient background and two visible rows, a default-width center roller with three visible rows, and an 80 px right-aligned roller with four visible rows. Each roller starts on a different selection (2, 5, 8) with LV_ANIM_OFF and logs on LV_EVENT_VALUE_CHANGED.

Roller with top and bottom fade

Fade the roller edges to black using a generated bitmap mask.

The active screen is tinted LV_PALETTE_BLUE_GREY and a month roller in LV_ROLLER_MODE_NORMAL takes a style that paints it black with white text and no border. A 130x150 LV_COLOR_FORMAT_L8 draw buffer is filled on a canvas with two LV_GRAD_DIR_VER rectangles (black-to-white on top, white-to-black on bottom), leaving the middle opaque. The resulting buffer is attached through lv_obj_set_style_bitmap_mask_src so the first and last rows fade out.

How is this guide?

Last updated on

On this page