M5Line

M5Line is a widget that can be used to create lines in the user interface. It can be used to draw shapes and connect points.

UiFlow2 Example

points connect

Open the cores3_line_example.m5f2 project in UiFlow2.

This example creates a line that connects multiple points.

UiFlow2 Code Block:

Example output:

None

MicroPython Example

points connect

This example creates a line that connects multiple points.

MicroPython Code Block:

# SPDX-FileCopyrightText: 2025 M5Stack Technology CO LTD
#
# SPDX-License-Identifier: MIT

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


page0 = None
line0 = None


def setup():
    global page0, line0

    M5.begin()
    Widgets.setRotation(1)
    m5ui.init()
    page0 = m5ui.M5Page(bg_c=0xFFFFFF)
    line0 = m5ui.M5Line(
        points=[5, 5, 70, 70, 120, 10, 180, 60, 190, 70, 200, 80, 210, 90, 220, 100],
        width=7,
        color=0x2196F3,
        rounded=True,
        parent=page0,
    )

    page0.screen_load()


def loop():
    global page0, line0
    M5.update()
    if M5.Touch.getCount():
        line0.add_point(M5.Touch.getX(), M5.Touch.getY())


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

M5Line

class m5ui.line.M5Line(*args, **kwargs)

Bases: line

Create a line object.

Parameters:

• points (list) – A list of points where each point is a pair of x and y coordinates.

• width (int) – The width of the line.

• color (int) – The color of the line in hexadecimal format.

• rounded (bool) – If True, the line will have rounded ends; otherwise, it will have square ends.

• parent (lv.obj) – The parent object to attach the line to. If not specified, the line will be attached to the default screen.

MicroPython Code Block:

from m5ui import M5Line
import lvgl as lv

m5ui.init()
line_0 = M5Line(
    points=[5, 5, 70, 70, 120, 10, 180, 60, 240, 20],
    width=2,
    color=0x2196F3,
    rounded=True,
    parent=page0,
)

set_line_color(color, opa, part)

Set the color of the line.

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).

UiFlow2 Code Block:

MicroPython Code Block:

line_0.set_line_color(0xFF0000, 255, lv.PART.MAIN)

set_style_line_width(width, part)

Set the width of the line.

Parameters:

• width (int) – The width to set.

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

UiFlow2 Code Block:

MicroPython Code Block:

line_0.set_style_line_width(2, lv.PART.MAIN)

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:

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

set_pos(x, y)

Set the position of the line.

Parameters:

• x (int) – The x-coordinate of the line.

• y (int) – The y-coordinate of the line.

UiFlow2 Code Block:

MicroPython Code Block:

line_0.set_pos(100, 100)

set_x(x)

Set the x-coordinate of the line.

Parameters:

x (int) – The x-coordinate of the line.

UiFlow2 Code Block:

MicroPython Code Block:

line_0.set_x(100)

set_y(y)

Set the y-coordinate of the line.

Parameters:

y (int) – The y-coordinate of the line.

UiFlow2 Code Block:

MicroPython Code Block:

line_0.set_y(100)

align_to(obj, align, x, y)

Align the line to another object.

Parameters:

• obj (lv.obj) – The object to align to.

• align (int) – The alignment type.

• x (int) – The x-offset from the aligned object.

• y (int) – The y-offset from the aligned object.

UiFlow2 Code Block:

MicroPython Code Block:

line_0.align_to(page_0, lv.ALIGN.CENTER, 0, 0)

set_points(points)

Set the points of the line.

Parameters:

points (list) – A list of points where each point is a pair of x and y coordinates.

UiFlow2 Code Block:

MicroPython Code Block:

line_0.set_points([0, 0, 100, 100, 200, 50])

add_point(x, y)

Add a point to the line end.

Parameters:

• x (int) – The x position of the point.

• y (int) – The y position of the point.

UiFlow2 Code Block:

MicroPython Code Block:

line_0.add_point(100, 100)