pdf-icon

M5STACK LVGL

M5STACK LVGLはLVGLをベースに開発されたUIコンポーネントライブラリで、CORE2-UIFlowファームウェアのみをサポートしており、ユーザーはUIFlowグラフィカルプログラミングまたは以下のMicropython APIを使って呼び出すことができます。

M5Screen

スクリーンインスタンスを作成します


from m5stack_ui import *

# 创建屏幕实例
screen = M5Screen()

# 清除屏幕内容
screen.clean_screen()

# 设置屏幕背景色
screen.set_screen_bg_color(color)

# 设置屏幕亮度
screen.set_screen_brightness(brightness)

# 载入屏幕实例
screen.load_screen(scr)

# 获取新的屏幕实例
screen.get_new_screen()

# 获取当前的屏幕实例
screen.get_act_screen()

# 释放屏幕实例
screen.del_screen()

M5Obj

基本要素クラスは、すべての制御可能な要素がこのクラスに継承されるので、このクラスのいくつかのメソッドを呼び出して、表示操作を行うことができます。 查看公式ドキュメントを多く基類のapi内容とパラメータ


# 设置组件位置
M5Obj.set_pos(x, y)

# 设置组件对齐方式
# mode:
# LV_ALIGN_CENTER
# LV_ALIGN_OUT_TOP_MID
# .......
M5Obj.set_align(mode, x=0, y=0, ref=None)

# 设置组件尺寸
M5Obj.set_size(w=None, h=None)

M5Obj.set_hidden(state)

M5Obj.set_cb(cb)

M5Obj.get_state()

M5Obj.delete()

M5Tabview

ページくじを作成します。

from m5stack_ui import *

screen = M5Screen()

# default M5Tabview(x=0, y=0)
tab = M5Tabview(0,30)

# 创建页签
tab.add_tab("tab1")
tab.add_tab("tab2")
tab.add_tab("tab3")

# 设置页签

tab.set_tab_name(index,"new_tab_name")

M5Textarea

テキスト領域を作成します


from m5stack_ui import *

screen = M5Screen()

# M5Textarea(text='', x=0, y=0, w=None, h=None)
Textarea = M5Textarea()

# 填充文本
Textarea.set_text("Hello World")

M5Msgbox

情報ボックスを作ります


from m5stack_ui import *

screen = M5Screen()

# M5Msgbox(btns_list=None, x=0, y=0, w=None, h=None)
Msgbox = M5Msgbox()

Msgbox.add_btns(btns_list)

# 填充文本
Msgbox.set_text(text)

Msgbox.get_active_btn_text()

M5Led

仮想LEDライトを作ります

from m5stack_ui import *

screen = M5Screen()

# M5Led(x=0, y=0, w=None, h=None, color=None)
Led = M5Led()

# 设置LED开关
Led.set_on()
Led.set_off()

# 设置LED亮度
Led.set_bright(100)

# 设置LED颜色
Led.set_color(0x00ff00)

M5Switch

スライドスイッチを作成します。

from m5stack_ui import *

screen = M5Screen()

# M5Switch(x=0, y=0, w=None, h=None, bg_c=None, color=None)
Switch = M5Switch()

Switch.set_bg_color(0x888888)
Switch.set_color(0x000fff)
Switch.set_on()
Switch.set_off()
Switch.set_toggle()

def onCallback():
    pass

def offCallback():
    pass

# 注册滑动开关回调函数
Switch.on(onCallback)
Switch.off(offCallback)

M5Slider

スライドバーを作成します。


from m5stack_ui import *

screen = M5Screen()

# M5Slider(x=0, y=0, w=None, h=None, min=None, max=None, bg_c=None, color=None, parent=None):
Slider = M5Slider(50,50,100,30,0,100,0x888888,0x000fff)

Slider.set_bg_color(0x888888)

Slider.set_color(0x000fff)

Slider.set_range(0,100)

Slider.set_value(10)

Slider.get_value()

def onChange(value):
    print(value)

# 注册滑动条变化回调函数
Slider.changed(onChange)

M5List

リストを作成します。


from m5stack_ui import *

screen = M5Screen()

# M5List(x=0, y=0)
List = M5List(50,50)

List.add_label("Hello")

List.add_label("M5Stack")

handle = List.add_label("Hi")

List.get_sel_label_index()

List.get_sel_label_text()

List.get_label_indx(handle)

List.get_label_text(handle)

M5Line

直線を描きます。


from m5stack_ui import *

screen = M5Screen()

# M5Line(x1=0, y1=0, x2=0, y2=0, color=None, width=None)
Line = M5Line(20,50,140,50,0xfff,10)

Line.set_points(x1, y1, x2, y2)

Line.set_line_width(width)

Line.set_line_rounded(state)

Line.set_color(color)

# opa 0-100
Line.set_opacity(100)

M5Label

テキストラベルを描きます。


from m5stack_ui import *

screen = M5Screen()

/*M5Label(text, x=0, y=0, color=None, font=None) */
| ---------------------------------------------------------------------
| font:
| FONT_MONT_12/14/16/18/20/22/24/26/28/30/32/34/36/38/40/42/44/46/48
| FONT_UNICODE_24 = lv.font_PHT_unicode_24
/*---------------------------------------------------------------------*/

Label = M5Label("Hello!",20,50,0xff,FONT_MONT_48)

Label.set_text(text)

Label.set_text_color(color)

Label.set_text_font(font)

Label.get_width()

M5Img

挿入画像(pngのみ対応)です。


from m5stack_ui import *

screen = M5Screen()

# M5Img(filename, x=0, y=0, w=None, h=None)
Img = M5Img("res/default.png", x=0, y=0, parent=None)

Img.set_img_src(filename)

M5Dropdown

プルダウンメニューを作成します


from m5stack_ui import *

screen = M5Screen()

# M5Dropdown(x=0, y=0, w=None, h=None)
Dropdown = M5Dropdown(30,30,240,40)

Dropdown.set_options(['option0','option1'])

Dropdown.add_option('option2',2)
Dropdown.add_option('option3',3)
Dropdown.add_option('option4',4)

Dropdown.set_sel_index(1)

Dropdown.get_sel_index()

M5Cpicker

色盤セレクタを作成します。


coming soon...

M5Checkbox

创建勾选框


from m5stack_ui import *

screen = M5Screen()

# M5Checkbox(text, x=0, y=0, w=None, h=None, text_c=None, check_c=None, font=None):
Checkbox = M5Checkbox("check",50,50,50,50,0xff,0xff,FONT_MONT_12)
Checkbox.set_text(text)

# state: True | False
Checkbox.set_checked(state)

Checkbox.set_text_color(color)

Checkbox.set_checked_color(color)
Checkbox.set_text_font(font)
Checkbox.get_width()

def Checkbox_checked():
  pass

def Checkbox_unchecked():
  pass

Checkbox.checked(checked_cb)

Checkbox.unchecked(unchecked_cb)

M5Btn

チェックボックスの作成


from m5stack_ui import *

screen = M5Screen()

# M5Btn(text='', x=0, y=0, w=70, h=30, bg_c=None, text_c=None, font=None)
Btn = M5Btn("button",50,50,80,50,0xff,0xffffff,FONT_MONT_12)

Btn.set_bg_color(color)

Btn.set_btn_text(text)

Btn.set_btn_text_color(color)

Btn.set_btn_text_font(font)

def pressed_cb():
    pass

def released_cb():
    pass

Btn.pressed(pressed_cb)

Btn.released(released_cb)

M5Arc

弧形の計測器の作成(パラメータ:start, endは時計回りの角度)


from m5stack_ui import *

screen = M5Screen()

# M5Arc(x=0, y=0, w=None, h=None)
Arc = M5Arc(0,0,150,150)

Arc.set_angles(0,90)

M5Bar

プログレスバーの作成


from m5stack_ui import *

screen = M5Screen()

# M5Bar(x=0, y=0, w=None, h=None, min=None, max=None, bg_c=None, color=None)
Bar = M5Bar(50,50,150,30,0,100,0xdddddd,0xff)

# 设置进度条数值
Bar.set_value(50)

Bar.set_bg_color(color)

Bar.set_color(color)

Bar.set_range(min, max)

Bar.get_value()

M5Imgbtn

画像ボタンの作成

from m5stack_ui import *

screen = M5Screen()

# M5Imgbtn(filename, x=0, y=0, w=None, h=None)
Imgbtn = M5Imgbtn("res/default.png",0,0,50,50)

Imgbtn.set_pressed_img(filename, w, h)

Imgbtn.set_released_img(filename, w, h)
On This Page