mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
add M5STACK MPY LVGL API
This commit is contained in:
Sean
@@ -17,8 +17,7 @@
|
||||
|
||||
## Usage
|
||||
|
||||
Press the reset button to power on. The default display screen is RGB display mode. The left side is the temperature image, the upper right is the power display, and the lower right is the histogram and temperature range. The temperature range is automatically adjusted with the target temperature. The default bulls-eye automatically tracks the maximum temperature. Press the right button-A to switch the tracking mode (minimum / center / maximum value), press the button-B to switch the image display mode (GRAY / GOLDEN / RAINBOW / IRONBLACK / RGB). Dial encoder controls the display sensitivity (adjust the display temperature and color gamut), and long press the reset button for 6 seconds to turn off.
|
||||
|
||||
Press the reset button to power on. The default display screen is RGB display mode. The left side is the temperature image, the upper right is the power display, and the lower right is the histogram and temperature range. The temperature range is automatically adjusted with the target temperature. The default bulls-eye automatically tracks the maximum temperature. Press the button on the right side of the fuselage (B button) to switch the tracking mode (minimum / center / maximum value), press the button A on the front of the fuselage to switch the image display mode (GRAY / GOLDEN / RAINBOW / IRONBLACK / RGB). Dial encoder controls the display sensitivity (adjust the display temperature and color gamut), and long press the reset button for 6 seconds to turn off.
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_05.webp" width="30%" height="30%">
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_02.webp" width="30%" height="30%">
|
||||
|
||||
@@ -48,7 +48,7 @@ Communication protocol: I2C(0x38)
|
||||
</tr>
|
||||
<tr>
|
||||
<td>motor drive</td>
|
||||
<td>HR8833 H-bridge drive</td>
|
||||
<td>DRV8833</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IR</td>
|
||||
@@ -119,8 +119,9 @@ Communication protocol: I2C(0x38)
|
||||
|
||||
## Related Link
|
||||
|
||||
- Protocol Manual
|
||||
- **[GoPlus2 I2C Protocol](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/GO%20PLUS2%20Guide.docx)**
|
||||
- **[GoPlus2 I2C Protocol](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/GO%20PLUS2%20Guide.docx)**
|
||||
|
||||
- **[DRV8833 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/DRV8833_datasheet.pdf)**
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -0,0 +1,479 @@
|
||||
# M5STACK LVGL
|
||||
|
||||
>M5STACK LVGL is a set of UI component library developed based on LVGL. It has been integrated into UIFlow firmware. Users can use UIFlow graphical programming or use the following Micropython API to call.
|
||||
|
||||
## M5Screen
|
||||
|
||||
>Create screen instance
|
||||
|
||||
```clike
|
||||
|
||||
from m5stack_ui import *
|
||||
|
||||
//Create screen instance
|
||||
screen = M5Screen()
|
||||
|
||||
//Clear screen content
|
||||
screen.clean_screen()
|
||||
|
||||
//Set the background color of the screen
|
||||
screen.set_screen_bg_color(color)
|
||||
|
||||
//Set screen brightness
|
||||
screen.set_screen_brightness(brightness)
|
||||
|
||||
//Load screen example
|
||||
screen.load_screen(scr)
|
||||
|
||||
//Get a new screen instance
|
||||
screen.get_new_screen()
|
||||
|
||||
//Get the current screen instance
|
||||
screen.get_act_screen()
|
||||
|
||||
//Release the screen instance
|
||||
screen.del_screen()
|
||||
|
||||
```
|
||||
|
||||
## M5Tabview
|
||||
|
||||
>Create tab
|
||||
|
||||
```clike
|
||||
from m5stack_ui import *
|
||||
|
||||
screen = M5Screen()
|
||||
|
||||
//default M5Tabview(x=0, y=0)
|
||||
tab = M5Tabview(0,30)
|
||||
|
||||
//Create tab
|
||||
tab.add_tab("tab1")
|
||||
tab.add_tab("tab2")
|
||||
tab.add_tab("tab3")
|
||||
|
||||
//Set tab
|
||||
|
||||
tab.set_tab_name(index,"new_tab_name")
|
||||
|
||||
```
|
||||
|
||||
## M5Textarea
|
||||
|
||||
Create a text area
|
||||
|
||||
|
||||
```clike
|
||||
|
||||
from m5stack_ui import *
|
||||
|
||||
screen = M5Screen()
|
||||
|
||||
//M5Textarea(text='', x=0, y=0, w=None, h=None)
|
||||
Textarea = M5Textarea()
|
||||
|
||||
//Fill text
|
||||
Textarea.set_text("Hello World")
|
||||
|
||||
```
|
||||
|
||||
## M5Msgbox
|
||||
|
||||
>Create information box
|
||||
|
||||
```clike
|
||||
|
||||
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)
|
||||
|
||||
//Fill text
|
||||
Msgbox.set_text(text)
|
||||
|
||||
Msgbox.get_active_btn_text()
|
||||
|
||||
```
|
||||
|
||||
## M5Led
|
||||
|
||||
>Create virtual LED lights
|
||||
|
||||
```clike
|
||||
from m5stack_ui import *
|
||||
|
||||
screen = M5Screen()
|
||||
|
||||
//M5Led(x=0, y=0, w=None, h=None, color=None)
|
||||
Led = M5Led()
|
||||
|
||||
//Set the LED switch
|
||||
Led.set_on()
|
||||
Led.set_off()
|
||||
|
||||
//Set LED brightness
|
||||
Led.set_bright(100)
|
||||
|
||||
//Set the LED color
|
||||
Led.set_color(0x00ff00)
|
||||
|
||||
```
|
||||
|
||||
## M5Switch
|
||||
|
||||
>Create a sliding switch
|
||||
|
||||
|
||||
```clike
|
||||
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
|
||||
|
||||
//Register the sliding switch callback function
|
||||
Switch.on(onCallback)
|
||||
Switch.off(offCallback)
|
||||
|
||||
|
||||
```
|
||||
|
||||
## M5Slider
|
||||
|
||||
>Create a slider
|
||||
|
||||
|
||||
```clike
|
||||
|
||||
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)
|
||||
|
||||
//Register the slider change callback function
|
||||
Slider.changed(onChange)
|
||||
|
||||
```
|
||||
|
||||
## M5List
|
||||
|
||||
>Create a list
|
||||
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>Draw a straight line
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
Draw text labels
|
||||
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>Insert image (only png is supported)
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>Create drop-down menu
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>Create a color wheel selector
|
||||
|
||||
```clike
|
||||
|
||||
coming soon...
|
||||
|
||||
```
|
||||
|
||||
|
||||
## M5Checkbox
|
||||
|
||||
>Create a checkbox
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>Create button
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>Create an arc-shaped dial (parameters: start, end are clockwise angles).
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>Create a progress bar.
|
||||
|
||||
```clike
|
||||
|
||||
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)
|
||||
|
||||
//Set the value of the progress bar
|
||||
Bar.set_value(50)
|
||||
|
||||
Bar.set_bg_color(color)
|
||||
|
||||
Bar.set_color(color)
|
||||
|
||||
Bar.set_range(min, max)
|
||||
|
||||
Bar.get_value()
|
||||
|
||||
```
|
||||
|
||||
## M5Imgbtn
|
||||
|
||||
>Create picture button.
|
||||
|
||||
```clike
|
||||
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)
|
||||
|
||||
```
|
||||
|
||||
## M5Obj
|
||||
|
||||
>Element base class, all controllable elements inherit from this class, so some methods in this class can be called to perform display operations.
|
||||
|
||||
```clike
|
||||
|
||||
M5Obj.set_pos(x, y)
|
||||
|
||||
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()
|
||||
|
||||
```
|
||||
@@ -36,6 +36,32 @@ const quickstart = {
|
||||
"id":"quickstart"
|
||||
};
|
||||
|
||||
const m5stack_lvgl = {
|
||||
'title':"M5Stack LVGL",
|
||||
'item':{
|
||||
'Screen':'#/en/mpy/m5stack_lvgl?id=m5screen',
|
||||
'Tabview':'#/en/mpy/m5stack_lvgl?id=m5tabview',
|
||||
'Textarea':'#/en/mpy/m5stack_lvgl?id=m5textarea',
|
||||
'Msgbox':'#/en/mpy/m5stack_lvgl?id=m5msgbox',
|
||||
'Led':'#/en/mpy/m5stack_lvgl?id=m5led',
|
||||
'Switch':'#/en/mpy/m5stack_lvgl?id=m5switch',
|
||||
'Slider':'#/en/mpy/m5stack_lvgl?id=m5slider',
|
||||
'List':'#/en/mpy/m5stack_lvgl?id=m5list',
|
||||
'Line':'#/en/mpy/m5stack_lvgl?id=m5line',
|
||||
'Label':'#/en/mpy/m5stack_lvgl?id=m5label',
|
||||
'Img':'#/en/mpy/m5stack_lvgl?id=m5img',
|
||||
'Dropdown':'#/en/mpy/m5stack_lvgl?id=m5dropdown',
|
||||
'Cpicker':'#/en/mpy/m5stack_lvgl?id=m5cpicker',
|
||||
'Checkbox':'#/en/mpy/m5stack_lvgl?id=m5checkbox',
|
||||
'Btn':'#/en/mpy/m5stack_lvgl?id=m5btn',
|
||||
'Arc':'#/en/mpy/m5stack_lvgl?id=m5arc',
|
||||
'Bar':'#/en/mpy/m5stack_lvgl?id=m5bar',
|
||||
'Imgbtn':'#/en/mpy/m5stack_lvgl?id=m5imgbtn',
|
||||
'Obj':'#/en/mpy/m5stack_lvgl?id=m5obj'
|
||||
},
|
||||
"id":"m5stack_lvgl_api"
|
||||
};
|
||||
|
||||
const unit = {
|
||||
'title':"Unit I2C Class",
|
||||
'item':{
|
||||
@@ -79,6 +105,7 @@ var arduino_home_page = new Vue({
|
||||
return {
|
||||
list: {
|
||||
quickstart: quickstart,
|
||||
m5stack_lvgl: m5stack_lvgl,
|
||||
unit: unit,
|
||||
advanced: advanced
|
||||
}
|
||||
|
||||
+1
-1
@@ -142,7 +142,7 @@ It supports deep sleep mode, which can reduce the power consumption in the idle
|
||||
| W | R | R | R | R | MODE |
|
||||
|
||||
| -MODE: 000 Reserved
|
||||
| 001 SINUS
|
||||
| 001 SINE
|
||||
| 010 TRIANGLE
|
||||
| 011 SQUARE
|
||||
| 100 SAWTOOTH
|
||||
|
||||
+2
-2
@@ -52,8 +52,8 @@ The sensor is very suitable for acoustic electrical conversion, audio recording
|
||||
<td>Analog / digital</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Working Voltage</td>
|
||||
<td>3.3V</td>
|
||||
<td>Input Voltage</td>
|
||||
<td>5V</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Net weight</td>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
## 使用介绍
|
||||
|
||||
按压复位按键进入开机画面，开机默认进入RGB显示模式，左侧为温度图像，右侧上方为电量显示，右侧下方为直方图和温度范围，温度范围随目标温度自动调整。默认靶心自动跟踪温度最大值，按压右侧A键切换跟踪模式（最小值/中心值/最大值），按压上方B键切换图像显示模式（GRAY/GOLDEN/RAINBOW/IRONBLACK/RGB），拨轮编码器控制显示灵敏度（调整显示温度色域范围），长按复位键6秒关机。
|
||||
按压复位按键进入开机画面，开机默认进入RGB显示模式，左侧为温度图像，右侧上方为电量显示，右侧下方为直方图和温度范围，温度范围随目标温度自动调整。默认靶心自动跟踪温度最大值，按压机身右侧按键(B键)切换跟踪模式（最小值/中心值/最大值），按压机身正面按键A键切换图像显示模式（GRAY/GOLDEN/RAINBOW/IRONBLACK/RGB），拨轮编码器控制显示灵敏度（调整显示温度色域范围），长按复位键6秒关机。
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_05.webp" width="30%" height="30%">
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_02.webp" width="30%" height="30%">
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>电机驱动</td>
|
||||
<td>HR8833 H桥驱动</td>
|
||||
<td>DRV8833</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红外</td>
|
||||
@@ -122,8 +122,8 @@
|
||||
|
||||
## 参考文档
|
||||
|
||||
- 协议手册
|
||||
- **[GoPlus2 I2C协议](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/GO%20PLUS2%20%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.docx)**
|
||||
- **[GoPlus2 I2C 通信协议](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/GO%20PLUS2%20Guide.docx)**
|
||||
- **[DRV8833 数据手册](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/DRV8833_datasheet.pdf)**
|
||||
|
||||
## 案例程序
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# wifiCfg
|
||||
## wifiCfg
|
||||
|
||||
>使用wifiCfg模块中的API, 配置设备WiFi连接。
|
||||
|
||||
@@ -23,7 +23,7 @@ print(wifiCfg.wlan_sta.isconnected())
|
||||
|
||||
```
|
||||
|
||||
# M5mqtt
|
||||
## M5mqtt
|
||||
|
||||
>使用M5mqtt模块中的API, 连接mqtt服务器与订阅发布消息内容。
|
||||
|
||||
@@ -81,7 +81,7 @@ m5mqtt.deinit()
|
||||
|
||||
```
|
||||
|
||||
# ESP-NOW
|
||||
## ESP-NOW
|
||||
|
||||
>使用ESP-NOW技术，无线传输数据到其他ESP32主控设备
|
||||
|
||||
@@ -122,7 +122,7 @@ def recv_cb():
|
||||
espnow.recv_cb(recv_cb)
|
||||
|
||||
```
|
||||
# HTTP
|
||||
## HTTP
|
||||
|
||||
>使用HTTP模块中的API, 向服务器发送HTTP请求，获取数据。
|
||||
|
||||
@@ -161,7 +161,7 @@ print(req.json)
|
||||
|
||||
```
|
||||
|
||||
# NTP
|
||||
## NTP
|
||||
|
||||
>通过NTP服务器获取当前时间信息。
|
||||
|
||||
@@ -206,7 +206,7 @@ ntp.weekday()
|
||||
```
|
||||
|
||||
|
||||
# EEPROM
|
||||
## EEPROM
|
||||
|
||||
>通过EEPROM持久化保存数据。
|
||||
|
||||
@@ -222,7 +222,7 @@ nvs.read_str(KEY)
|
||||
|
||||
```
|
||||
|
||||
# UART
|
||||
## UART
|
||||
|
||||
>通过UART发送和接收数据。
|
||||
|
||||
@@ -251,7 +251,7 @@ while True:
|
||||
|
||||
```
|
||||
|
||||
# SD-Card
|
||||
## SD-Card
|
||||
|
||||
```clike
|
||||
|
||||
|
||||
@@ -0,0 +1,479 @@
|
||||
# M5STACK LVGL
|
||||
|
||||
>M5STACK LVGL是基于LVGL所开发的一套UI组件库，目前已经集成到了UIFlow固件中，用户可以通过UIFlow图形化编程或使用以下Micropython API进行调用。
|
||||
|
||||
## M5Screen
|
||||
|
||||
>创建屏幕实例
|
||||
|
||||
```clike
|
||||
|
||||
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()
|
||||
|
||||
```
|
||||
|
||||
## M5Tabview
|
||||
|
||||
>创建页签
|
||||
|
||||
```clike
|
||||
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
|
||||
|
||||
>创建文本区域
|
||||
|
||||
|
||||
```clike
|
||||
|
||||
from m5stack_ui import *
|
||||
|
||||
screen = M5Screen()
|
||||
|
||||
//M5Textarea(text='', x=0, y=0, w=None, h=None)
|
||||
Textarea = M5Textarea()
|
||||
|
||||
//填充文本
|
||||
Textarea.set_text("Hello World")
|
||||
|
||||
```
|
||||
|
||||
## M5Msgbox
|
||||
|
||||
>创建信息盒子
|
||||
|
||||
```clike
|
||||
|
||||
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灯
|
||||
|
||||
```clike
|
||||
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
|
||||
|
||||
>创建滑动开关
|
||||
|
||||
|
||||
```clike
|
||||
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
|
||||
|
||||
>创建滑动条
|
||||
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>创建列表
|
||||
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>绘制直线
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>绘制文本标签
|
||||
|
||||
|
||||
```clike
|
||||
|
||||
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)。
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>创建下拉菜单
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>创建色盘选择器
|
||||
|
||||
```clike
|
||||
|
||||
coming soon...
|
||||
|
||||
```
|
||||
|
||||
|
||||
## M5Checkbox
|
||||
|
||||
>创建勾选框
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>创建按键
|
||||
|
||||
```clike
|
||||
|
||||
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为顺时针角度)。
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>创建进度条。
|
||||
|
||||
```clike
|
||||
|
||||
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
|
||||
|
||||
>创建图片按键。
|
||||
|
||||
```clike
|
||||
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)
|
||||
|
||||
```
|
||||
|
||||
## M5Obj
|
||||
|
||||
>元素基类，所有的可控元素都继承于该类，因此可以调用该类中的一些方法，进行显示操作。
|
||||
|
||||
```clike
|
||||
|
||||
M5Obj.set_pos(x, y)
|
||||
|
||||
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()
|
||||
|
||||
```
|
||||
@@ -36,6 +36,32 @@ const quickstart = {
|
||||
"id":"quickstart"
|
||||
};
|
||||
|
||||
const m5stack_lvgl = {
|
||||
'title':"M5Stack LVGL",
|
||||
'item':{
|
||||
'Screen':'#/zh_CN/mpy/m5stack_lvgl?id=m5screen',
|
||||
'Tabview':'#/zh_CN/mpy/m5stack_lvgl?id=m5tabview',
|
||||
'Textarea':'#/zh_CN/mpy/m5stack_lvgl?id=m5textarea',
|
||||
'Msgbox':'#/zh_CN/mpy/m5stack_lvgl?id=m5msgbox',
|
||||
'Led':'#/zh_CN/mpy/m5stack_lvgl?id=m5led',
|
||||
'Switch':'#/zh_CN/mpy/m5stack_lvgl?id=m5switch',
|
||||
'Slider':'#/zh_CN/mpy/m5stack_lvgl?id=m5slider',
|
||||
'List':'#/zh_CN/mpy/m5stack_lvgl?id=m5list',
|
||||
'Line':'#/zh_CN/mpy/m5stack_lvgl?id=m5line',
|
||||
'Label':'#/zh_CN/mpy/m5stack_lvgl?id=m5label',
|
||||
'Img':'#/zh_CN/mpy/m5stack_lvgl?id=m5img',
|
||||
'Dropdown':'#/zh_CN/mpy/m5stack_lvgl?id=m5dropdown',
|
||||
'Cpicker':'#/zh_CN/mpy/m5stack_lvgl?id=m5cpicker',
|
||||
'Checkbox':'#/zh_CN/mpy/m5stack_lvgl?id=m5checkbox',
|
||||
'Btn':'#/zh_CN/mpy/m5stack_lvgl?id=m5btn',
|
||||
'Arc':'#/zh_CN/mpy/m5stack_lvgl?id=m5arc',
|
||||
'Bar':'#/zh_CN/mpy/m5stack_lvgl?id=m5bar',
|
||||
'Imgbtn':'#/zh_CN/mpy/m5stack_lvgl?id=m5imgbtn',
|
||||
'Obj':'#/zh_CN/mpy/m5stack_lvgl?id=m5obj'
|
||||
},
|
||||
"id":"m5stack_lvgl_api"
|
||||
};
|
||||
|
||||
const unit = {
|
||||
'title':"Unit I2C Class",
|
||||
'item':{
|
||||
@@ -79,6 +105,7 @@ var arduino_home_page = new Vue({
|
||||
return {
|
||||
list: {
|
||||
quickstart: quickstart,
|
||||
m5stack_lvgl: m5stack_lvgl,
|
||||
unit: unit,
|
||||
advanced: advanced
|
||||
}
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
| W | R | R | R | R | MODE |
|
||||
|
||||
| -MODE: 000 Reserved
|
||||
| 001 SINUS
|
||||
| 001 SINE
|
||||
| 010 TRIANGLE
|
||||
| 011 SQUARE
|
||||
| 100 SAWTOOTH
|
||||
|
||||
@@ -45,8 +45,8 @@
|
||||
<td>模拟/数字</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>工作电压</td>
|
||||
<td>3.3V</td>
|
||||
<td>输入电压</td>
|
||||
<td>5V</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>净重</td>
|
||||
|
||||
Reference in New Issue
Block a user