显示

掌控板2.0 板载1.47英寸lcd显示屏,分辨率320x172。内置 LVGLlv_micropython 库,因此可以使用lvgl的相关API来进行屏幕绘制。

备注

LVGL(轻量级和通用图形库) 是一个免费和开源的图形库,它提供了创建嵌入式GUI所需的一切,具有易于使用的图形元素,美丽的视觉效果和低内存占用。

  • 内置字体:

    • font_siyuan_heiti_medium_24:思源黑体24号,支持中文(内置20000基本常用汉字)

    • font_montserrat_16:支持数字、拉丁字母及常用英文符号

    • font_montserrat_20:支持数字、拉丁字母及常用英文符号

    • font_montserrat_24:支持数字、拉丁字母及常用英文符号

备注

Montserrat:是一款支持正体和斜体两种风格的无衬线字体

提示

软件中使用的 GUI 库为根据 lvgl 自主封装的库。以下所讲解的都是通过GUI库来绘制屏幕,若想使用原生 lv_micropython 进行编程可自行前往 LVGL官网lv_micropython github仓库 进行学习。

文本显示

显示内置思源黑体中文字库文字

from mpython import *

display.clear(lcd.GREEN) # 清屏,把背景设置为绿色
# 英文、葡萄牙语、日文、中文显示”你好,世界!“
display.DispChar("hello,world!", 0, 0, lcd.WHITE, False)
display.DispChar("Olá, mundo!!", 0, 35, lcd.WHITE, False)
display.DispChar("こんにちは、世界!", 0, 70, lcd.WHITE, False)
display.DispChar("你好,世界!", 0, 105, lcd.WHITE, False)
display.show()
../../_images/helloworld.png

显示效果

屏幕的坐标点

掌控板屏幕分辨率为 320 x 172,左上角坐标为 (0, 0),右下角坐标为 (320, 172)。横向向右x坐标增大,纵坐标向下y坐标增大。

../../_images/lcd_size.png

设置颜色

from mpython import *

display.clear(lcd.BLACK)
# 文字显示测试(思源黑体24号)
display.DispChar("你好,世界!", 0, 0, lcd.RED, False)
display.DispChar("你好,世界!", 0, 35, lcd.GREEN, False)
display.DispChar("你好,世界!", 0, 70, lcd.BLUE, False)
display.DispChar("你好,世界!", 0, 105, lcd.WHITE, False)
display.show()
../../_images/color_font.png

效果图

备注

参数 color 颜色的色值为16进制数值,即 0x0000 ~ 0xFFFF,也可以写成 0 ~ 65535 。0x0000为黑色,0xFFFF为白色。格式为RGB565.

lcd模块定义了一些常见的颜色,可直接引用:

lcd.HOT_PINK 0xfb56 //热情的粉红

lcd.DEEP_PINK 0xF8B2 //深粉色

lcd.PURPLE 0x8010 //紫色

lcd.BLUE 0x001F //纯蓝

lcd.MEDIUM_BLUE 0x0019 //适中的蓝色

lcd.DARK_BLUE 0x0011 //深蓝色

lcd.LIGHT_SKY_BLUE 0x867e //淡蓝色

lcd.SKY_BLUE 0x867d //天蓝色

lcd.DEEP_SKY_BLUE 0x05ff //深天蓝

lcd.LIGHT_BLUE 0xaebc //淡蓝

lcd.LIGHT_CYAN 0xdfff //淡青色

lcd.CYAN 0x07ff //青色

lcd.DARK_CYAN 0x0451 //深青色

lcd.SPRING_GREEN 0x07ef //春天的绿色

lcd.LIGHT_GREEN 0x9772 //淡绿色

lcd.GREEN 0x0400 //纯绿

lcd.DARK_GREEN 0x0320 //深绿色

lcd.GREEN_YELLOW 0xafe6 //绿黄色

lcd.LIGHT_YELLOW 0xfffb //浅黄色

lcd.YELLO 0xffe0 //纯黄

lcd.GOLD 0xfea0 //金

lcd.ORANGE 0xfd20 //橙色

lcd.DARK_ORANGE 0xfc60 //深橙色

lcd.RED 0xf800 //纯红

lcd.DARK_RED 0x8800 //深红色

lcd.GUI_PINK 0xfdf9 //粉红

lcd.BROWN 0xa145 //棕色

lcd.WHITE 0xFFFF //纯白

lcd.LIGHT_GRAY 0xd69a //浅灰色

lcd.DARK_GRAY 0xad55 //深灰色

lcd.GRAY 0x8410 //灰色

lcd.BLACK 0x0000 //纯黑

内置数码管字体

内部内置了其它几种字体,用于显示数字及拉丁字母:

digiface_16 digiface_21 digiface_30 digiface_44 digiface_it_30 digiface_it_42

dvsm_16 dvsm_21 dvsmb_16 dvsmb_21

from mpython import *
import font.dvsm_21 as dvsm_21
import font.digiface_44 as digiface_44

display.clear(lcd.BLACK)
# font文件夹下内置的数码管及dvssm字体显示测试,字体由font-to-py工具生成
display.DispChar_font(dvsm_21, "hello,world", 50, 40, lcd.RED)
display.DispChar_font(digiface_44, "12:34", 50, 70, lcd.BLUE)
display.show()
../../_images/font_digital.png

效果图

基本形状绘制

display继承framebuf,framebuf实现以下功能 1. 创建图形缓存区 2. 图形绘制:点、线、圆… 3. png图片解码 4. 清屏(背景填充) 5. 内置文本显示

以下为基本绘图示例。

from mpython import *

display.clear()
# frame_colorbuf 绘图API测试
# 水平线和垂直线
display.vline(10, 10, 152, lcd.BLUE)
display.hline(10, 10, 300, lcd.BLUE)
display.vline(310, 10, 152, lcd.BLUE)
display.hline(10, 162, 300, lcd.BLUE)
# 任意两点线段
display.line(0, 0, 320, 172, lcd.WHITE)
display.line(320, 0, 0, 172, lcd.WHITE)
# 矩形和填充矩形
display.rect(35, 35, 90, 100, lcd.WHITE)
display.fill_rect(45, 50, 70, 70, lcd.RED)
# 圆和填充圆
display.circle(160, 86, 35, lcd.WHITE)
display.fill_circle(160, 86, 25, lcd.RED)
# 三角形和填充三角形
display.triangle(200, 50, 280, 50, 240, 130, lcd.WHITE)
display.fill_triangle(210, 60, 270, 60, 240, 110, lcd.RED)
# 圆角矩形
display.RoundRect(30, 21, 260, 140, 11, lcd.BLUE)

display.show()
../../_images/draw.png

效果图

显示图片

掌控板支持png图片解码并显示,内置了一些常用png格式图标,以索引的方式调用。同时也支持解码用户放在文件系统中的png图片。

【1】显示内置图标

from mpython import *

display.clear(lcd.WHITE)
w, h, buff = display.decode_png_internal(70) # 解码索引号为70的内置图片
fb = framebuf.FrameBuffer(buff, w, h, framebuf.RGB565) # 用解码出的图片创建一个framebuf缓存对象
display.blit(fb, 0, 0) # 把fb缓存图片数据写入显示(0,0)位置,支持裁剪,超出显示区会截掉

display.show()
../../_images/draw_internal_icon.png

效果图

【2】显示文件系统中图片文件

from mpython import *

display.clear(lcd.GREEN)
img = Image()
# 测试文件(大小320*172像素),放入文件系统,加载png文件,生成图片framebuffer对象
fb = img.load('1.png')
display.blit(fb, 0, 0) # framebuffer图片刷入显示frambuffer,超出范围会被裁剪。
display.show()
../../_images/draw_png.png

效果图

进度条

from mpython import *

gui = UI()

display.clear(lcd.BLACK)
# 位置(10,30),长180,宽20,进度条位置20%,颜色红色
gui.ProgressBar(10, 30, 180, 20, 20, lcd.RED)
# 位置(200,0),长160,宽20,进度条位置50%,颜色蓝色
gui.stripBar(200, 0, 20, 160, 50, dir=0, color=lcd.BLUE)
display.show()
../../_images/progress_bar.png

效果图

二维码

from mpython import *

gui = UI()

display.clear(lcd.BLACK)
# 位置(100, 10)显示字字符串的二维码,显示比例设为4
gui.qr_code("Hello, mPython!", 100, 10, scale=4)
display.show()
../../_images/qr_code.png

效果图

图表-柱状图

from mpython import *

# 创建图表,位置(80, 50),值范围(0-10),数据颜色表(红,绿,蓝,白)
chart = MicroChart(x0 = 80, y0 = 50, val_max = 10, data_colors=[lcd.RED, lcd.GREEN, lcd.BLUE, lcd.WHITE])
display.clear()
# 给出样本数据
bar_data = [[3, 8, 5, 10], [6, 4, 9, 7], [2, 7, 4, 9]]
chart.draw_bar_chart(bar_data)
display.show()
../../_images/chart_bar.png

效果图

图表-折线图

from mpython import *
import audio

# 构建一个图表,位置(40,40)
chart = MicroChart(x0 = 40, y0 = 40)
# 显示数据100个,图纸是二维数组,可以显示多组折线图,这里只显示了一组数据。
line_data = [[0]*100]

display.clear(lcd.BLACK) # 清屏
display.show()
i = 0
chart.draw_axis() # 绘制轴
while True:
        display.clear()
        value = audio.loudness()  # 获取声音响度值
        # 数扰移位,以实现数据动态变化
        for j in range(99):
                line_data[0][j] = line_data[0][j+1]
        line_data[0][99] = value
        # 绘制图表
        chart.draw_line_chart(line_data, show_grid=False)
        i = (i + 1) % len(line_data[0])
        display.show()
        time.sleep_ms(50)
../../_images/chart_line.png

效果图

表格

from mpython import *

# 1. 创建表格对象
table = MicroExcelTable()
# table = MicroExcelTable(y0=10, cols=2, rows=3, cell_width=100,)

display.clear()
# 2. 绘制表头(仅调用一次)
col_headers = ["温度", "湿度", "光线值"]   # 列表头
row_headers = ["位置1", "位置2", "位置3", "位置4"] # 列表头
# col_headers = ["温度", "湿度"]   # 列表头
# row_headers = ["位置1", "位置2", "位置3"] # 列表头
table.draw_headers(col_headers, row_headers)

# 3. 初始化数据(整区更新)
table.update_data([
        ["25℃", "60%", "200"],
        ["26℃", "59%", "700"],
        ["24℃", "61%", "1210"],
        ["25℃", "61%", "120"],
])

# table.update_data([
#     ["25℃", "60%"],
#     ["26℃", "59%"],
#     ["24℃", "61%"],
# ])

display.show()

# 4. 模拟实时更新单个单元格(核心演示)
count = 0
while True:
        # 仅更新第0行第0列的温度值
        table.update_cell(row=0, col=0, text=f"{(25+count) % 99}℃")
        # 仅更新第2行第3列的电量值
        table.update_cell(row=2, col=2, text=f"{count % 1024}")
        display.show()
        count += 1
        time.sleep(1)
../../_images/excel_table.png

使用lvgl图形库