M5Page

M5Page is a widget that can be used to create pages in the user interface. It can be used to organize other widgets and provide navigation between different pages.

UiFlow2 Example

page event

Open the cores3_page_event_example.m5f2 project in UiFlow2.

When you press and hold the screen, the screen background color turns black. When you release the screen, the background color returns to white.

UiFlow2 Code Block:

cores3_page_event_example.png

Example output:

None

MicroPython Example

page event

When you press and hold the screen, the screen background color turns black. When you release the screen, the background color returns to white.

MicroPython Code Block:

 1# SPDX-FileCopyrightText: 2025 M5Stack Technology CO LTD
 2#
 3# SPDX-License-Identifier: MIT
 4
 5import os, sys, io
 6import M5
 7from M5 import *
 8import m5ui
 9import lvgl as lv
10
11
12page0 = None
13
14
15def page0_pressed_event(event_struct):
16    global page0
17
18    page0.set_bg_color(0x000000, 255, 0)
19
20
21def page0_released_event(event_struct):
22    global page0
23
24    page0.set_bg_color(0xFFFFFF, 255, 0)
25
26
27def page0_clicked_event(event_struct):
28    global page0
29
30    page0.set_bg_color(0x000000, 255, 0)
31
32
33def page0_long_pressed_event(event_struct):
34    global page0
35
36    page0.set_bg_color(0x000000, 255, 0)
37
38
39def page0_event_handler(event_struct):
40    global page0
41    event = event_struct.code
42    if event == lv.EVENT.PRESSED and True:
43        page0_pressed_event(event_struct)
44    if event == lv.EVENT.RELEASED and True:
45        page0_released_event(event_struct)
46    if event == lv.EVENT.CLICKED and True:
47        page0_clicked_event(event_struct)
48    if event == lv.EVENT.LONG_PRESSED and True:
49        page0_long_pressed_event(event_struct)
50    return
51
52
53def setup():
54    global page0
55
56    M5.begin()
57    m5ui.init()
58    page0 = m5ui.M5Screen(bg_c=0xFFFFFF)
59
60    page0.add_event_cb(page0_event_handler, lv.EVENT.ALL, None)
61
62    page0.screen_load()
63
64
65def loop():
66    global page0
67    M5.update()
68
69
70if __name__ == "__main__":
71    try:
72        setup()
73        while True:
74            loop()
75    except (Exception, KeyboardInterrupt) as e:
76        try:
77            m5ui.deinit()
78            from utility import print_error_msg
79
80            print_error_msg(e)
81        except ImportError:
82            print("please update to latest firmware")

Example output:

None

API

M5Button

class m5ui.page.M5Page(*args, **kwargs)

Bases: obj

Create a page object.

Parameters:

bg_c (int) – The background color of the page in hexadecimal format. Default is 0xFFFFFF (white).

UiFlow2 Code Block:

None

MicroPython Code Block:

from m5ui import M5Page
import lvgl as lv

m5ui.init()
page_0 = M5Page(bg_c=0xFFFFFF)
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:

set_flag.png

MicroPython Code Block:

page_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:

toggle_flag.png

MicroPython Code Block:

page_0.toggle_flag(lv.obj.FLAG.HIDDEN)
set_state(state, value)

Set the state of the page. 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:

set_state.png

MicroPython Code Block:

page_0.set_state(lv.STATE.PRESSED, True)
toggle_state(state)

Toggle the state of the page. 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:

toggle_state.png

MicroPython Code Block:

page_0.toggle_state(lv.STATE.PRESSED)
set_bg_color(color, opa, part)

Set the background color of the page.

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:

set_bg_color.png

MicroPython Code Block:

page_0.set_bg_color(lv.color_hex(0x000000), 255, lv.PART.MAIN | lv.STATE.DEFAULT)
add_event_cb(handler, event, user_data)

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

Parameters:

  • handler (function) – The callback function to call.

  • event (int) – The event to listen for.

  • user_data (Any) – Optional user data to pass to the callback.

Returns:

None

UiFlow2 Code Block:

event.png

MicroPython Code Block:

def page0_pressed_event(event_struct):
    global page0
    page0.set_bg_color(0x000000, 255, 0)

def page0_released_event(event_struct):
    global page0
    page0.set_bg_color(0xffffff, 255, 0)

def page0_clicked_event(event_struct):
    global page0
    page0.set_bg_color(0x000000, 255, 0)

def page0_event_handler(event_struct):
    global page0
    event = event_struct.code
    if event == lv.EVENT.PRESSED and True:
        page0_pressed_event(event_struct)
    if event == lv.EVENT.RELEASED and True:
        page0_released_event(event_struct)
    if event == lv.EVENT.CLICKED and True:
        page0_clicked_event(event_struct)
    if event == lv.EVENT.LONG_PRESSED and True:
        page0_long_pressed_event(event_struct)
    return

page_0.add_event_cb(page0_event_handler, lv.EVENT.ALL, None)
screen_load()

Load the page as the active screen.

UiFlow2 Code Block:

screen_load.png

MicroPython Code Block:

page_0.screen_load()