M5Roller

M5Roller is a widget that can be used to create a roller (spinner/wheel picker) in the user interface. It provides a scrollable list of options that users can select from by scrolling up or down, similar to iOS-style picker wheels.

UiFlow2 Example

basic roller

Open the cores3_roller_basic_example.m5f2 project in UiFlow2.

This example demonstrates how to create a roller with multiple options and handle selection events.

UiFlow2 Code Block:

Example output:

None

MicroPython Example

basic roller

This example demonstrates how to create a roller with multiple options and handle selection events.

MicroPython Code Block:

import os, sys, io
import M5
from M5 import *
import m5ui
import lvgl as lv


page0 = None
roller0 = None


def setup():
    global page0, roller0

    M5.begin()
    Widgets.setRotation(1)
    m5ui.init()
    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
    roller0 = m5ui.M5Roller(
        x=110,
        y=71,
        w=100,
        h=0,
        options=[
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December",
        ],
        mode=lv.roller.MODE.INFINITE,
        selected=0,
        visible_row_count=3,
        font=lv.font_montserrat_14,
        parent=page0,
    )

    page0.screen_load()
    print(roller0.get_options())


def loop():
    global page0, roller0
    M5.update()


if __name__ == "__main__":
    try:
        setup()
        while True:
            loop()
    except (Exception, KeyboardInterrupt) as e:
        try:
            m5ui.deinit()
            from utility import print_error_msg

            print_error_msg(e)
        except ImportError:
            print("please update to latest firmware")

Example output:

None

API

M5Roller

class m5ui.roller.M5Roller(*args, **kwargs)

Bases: roller

Create a roller widget.

Parameters:

x (int) – X position of the widget.
y (int) – Y position of the widget.
w (int) – Width of the widget.
h (int) – Height of the widget.
options (list) – List of options to display in the roller.
mode (lv.roller.MODE) – Roller mode (default is NORMAL).
selected (int) – Index of the initially selected option.
visible_row_count (int) – Number of visible rows in the roller.
font (lv.font_t) – Font to use for the text in the roller.
parent (lv.obj or None) – Parent widget to attach this roller to (default is the active screen).

UiFlow2 Code Block:

None

MicroPython Code Block:

from m5ui import M5Roller
import lvgl as lv
m5ui.init()
roller_0 = M5Roller(x=10, y=10, w=100, h=100, options=["Option 1", "Option 2"], mode=lv.roller.MODE.NORMAL, selected=0, visible_row_count=2, font=lv.font_montserrat_14, parent=page0)

set_flag(flag, value)

Set a flag on the object. If value is True, the flag is added; if False, the flag is removed.

Parameters:

flag (int) – The flag to set.
value (bool) – If True, the flag is added; if False, the flag is removed.

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_flag(lv.obj.FLAG.HIDDEN, True)

toggle_flag(flag)

Toggle a flag on the object. If the flag is set, it is removed; if not set, it is added.

Parameters:: flag (int) – The flag to toggle.
Returns:: None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.toggle_flag(lv.obj.FLAG.HIDDEN)

set_state(state, value)

Set the state of the roller. If value is True, the state is set; if False, the state is unset.

Parameters:

state (int) – The state to set.
value (bool) – If True, the state is set; if False, the state is unset.

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_state(lv.STATE.CHECKED, True)

toggle_state(state)

Toggle the state of the roller. If the state is set, it is unset; if not set, it is set.

Parameters:: state (int) – The state to toggle.
Returns:: None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.toggle_state(lv.STATE.CHECKED)

event(callback, event, user_data=None)

Add an event callback to the roller. The callback will be called when the specified event occurs.

Parameters:

callback – The callback function to call.
event (int) – The event to listen for.
user_data – Optional user data to pass to the callback.

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

def roller_callback(event_obj):
    print("Roller value changed")

roller_0.event(roller_callback, lv.EVENT.VALUE_CHANGED)

set_bg_color(color, opa, part)

Set the background color of the roller.

Parameters:

color (int) – The color to set.
opa (int) – The opacity of the color.
part (int) – The part of the object to apply the style to (e.g., lv.PART.MAIN).

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_bg_color(lv.color_hex(0x000000), 255, lv.PART.MAIN | lv.STATE.DEFAULT)

roller_0.set_bg_color(lv.color_hex(0x000000), 255, lv.PART.SELECTED | lv.STATE.DEFAULT)

set_border_color(color, opa, part)

Set the border color of the roller.

Parameters:

color (int) – The color to set.
opa (int) – The opacity of the color. The value should be between 0 (transparent) and 255 (opaque).
part (int) – The part of the object to apply the style to (e.g., lv.PART.MAIN).

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_border_color(lv.color_hex(0x2196F3), 255, lv.PART.MAIN | lv.STATE.DEFAULT)
roller_0.set_border_color(lv.color_hex(0x2196F3), 255, lv.PART.SELECTED | lv.STATE.DEFAULT)

set_style_border_width(width, part)

Set the border width of the roller.

Parameters:

width (int) – The width to set.
part (int) – The part of the object to apply the style to (e.g., lv.PART.MAIN).

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_style_border_width(2, lv.PART.MAIN | lv.STATE.DEFAULT)
roller_0.set_style_border_width(2, lv.PART.SELECTED | lv.STATE.DEFAULT)

get_selected()

Get the index of the currently selected option.

Returns:: The index of the selected option.
Return type:: int

UiFlow2 Code Block:

MicroPython Code Block:

selected_index = roller_0.get_selected()

set_visible_row_count(count)

Set the number of visible rows in the roller.

Parameters:: count (int) – The number of visible rows.
Returns:: None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_visible_row_count(3)

set_pos(x, y)

Set the position of the roller.

Parameters:

x (int) – The x-coordinate of the roller.
y (int) – The y-coordinate of the roller.

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_pos(100, 50)

set_x(x)

Set the x-coordinate of the roller.

Parameters:: x (int) – The x-coordinate of the roller.
Returns:: None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_x(100)

set_y(y)

Set the y-coordinate of the roller.

Parameters:: y (int) – The y-coordinate of the roller.
Returns:: None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_y(50)

align_to(obj, align, x_ofs=0, y_ofs=0)

Align the roller to another object.

Parameters:

obj (lv.obj) – The object to align to.
align (int) – The alignment type.
x_ofs (int) – The x-offset from the aligned object.
y_ofs (int) – The y-offset from the aligned object.

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.align_to(other_obj, lv.ALIGN.CENTER, 0, 0)

set_size(w, h)

Set the size of the roller.

Parameters:

w (int) – The width of the roller.
h (int) – The height of the roller.

Returns:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_size(150, 120)

set_width(w)

Set the width of the roller.

Parameters:: w (int) – The width of the roller.
Returns:: None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_width(150)

get_width()

Get the width of the roller.

Returns:: The width of the roller.
Return type:: int

UiFlow2 Code Block:

MicroPython Code Block:

width = roller_0.get_width()

set_height(h)

Set the height of the roller.

Parameters:: h (int) – The height of the roller.
Returns:: None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_height(120)

get_height()

Get the height of the roller.

Returns:: The height of the roller.
Return type:: int

UiFlow2 Code Block:

MicroPython Code Block:

height = roller_0.get_height()

set_options(options, mode=lvgl.roller.MODE.NORMAL)

Set the options for the roller.

Parameters:

options (list) – List of options to display in the roller.
mode (lv.roller.MODE) – Roller mode (default is NORMAL).

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_options(["Option 1", "Option 2"], mode=lv.roller.MODE.NORMAL)

get_options()

Get the list of options in the dropdown.

Returns:: The list of options.
Return type:: list

UiFlow2 Code Block:

MicroPython Code Block:

options = roller_0.get_options()

get_option_count()

Get the number of options in the roller.

Returns:: The number of options.
Return type:: int

UiFlow2 Code Block:

MicroPython Code Block:

option_count = roller_0.get_option_count()

get_selected_str()

Get the currently selected option as a string.

Returns:: The selected option as a string.
Return type:: str

UiFlow2 Code Block:

MicroPython Code Block:

selected_option = roller_0.get_selected_str()

set_style_radius(radius, part)

Set the corner radius of the slider components.

Parameters:

radius (int) – The radius to set.
part (int) – The part of the object to apply the style to (e.g., lv.PART.MAIN, lv.PART.SELECTED).

Returns:

None

Return type:

None

UiFlow2 Code Block:

MicroPython Code Block:

roller_0.set_style_radius(10, lv.PART.MAIN | lv.STATE.DEFAULT)
roller_0.set_style_radius(10, lv.PART.SELECTED | lv.STATE.DEFAULT)