【得捷电子Follow me第3期】任务2：驱动扩展板上的OLED屏幕(字符、中文、仪表、诗词)

HonestQiao

【得捷电子Follow me第3期】任务2：驱动扩展板上的OLED屏幕(字符、中文、仪表、诗词) [复制链接]

 

这次的Seeed Studio XIAO ESP32C3扩展板上的OLED屏幕，是一个128*64的小屏幕，SSD1306的。

要驱动这个小屏幕，有很多方法，例如用官方提供的ssd1306驱动库。

不过我这边，这次使用的是 micropython-nano-gui，这个是一个非常适合驱动小屏幕的显示库。当然，除了OLED，还能驱动一些TFT显示屏，以及石墨屏。

 

一、了解硬件

扩展板上的OLED，连接到了I2C0上。

 

 

从Pinout图，可以找到IIC的引脚：

从上图可以看到：SDA对应D4-GPIO6，SCL对应D5-GPIO7。

这个在后面的配置中，需要使用到。

 

二、安装micropython-nano-gui

首先，从 

链接已隐藏，如需查看请登录或者注册

 下载micropython-nano-gui库，然后一股脑儿，通过Thonny，上传到开发板的MicroPython设备根目录下的/lib/目录中。也可以根据实际需要，仅上传使用的库文件。具体结构如下：

 

 

三、屏幕适配配置

上传库文件后，修改 color_setup.py，对应好当前的OLED设备，具体如下：

# color_setup.py Customise for your hardware config

from machine import Pin, I2C
import gc

from drivers.ssd1306.ssd1306 import SSD1306_I2C as SSD

# seeed studio ESP32-C3，OLED连接到 I2C0
i2c = I2C(0, scl=Pin(7), sda=Pin(6), freq=400000)

# 屏幕大小定义
oled_width = 128
oled_height = 64

# 内存回收清理
gc.collect()

# 实例SSD对象
ssd = SSD(oled_width, oled_height, i2c)

 

从上图中可以看到，主要设置IIC的引脚，以及屏幕的大小。

 

四、显示英文字符

要显示英文字符内容，需要使用到两个屏幕操作对象，Wirte和Label组件，前者为渲染对象，用于渲染内容到屏幕上，后者为文本标签对象，用于显示文字内容。

具体的用法如下：

# 1. 屏幕调用基础配置
from color_setup import ssd

from gui.core.nanogui import refresh
from gui.core.writer import Writer
from gui.widgets.label import Label

# Fonts
import gui.fonts.arial10 as arial10
import gui.fonts.font10 as font10
import gui.fonts.font6 as small

# 按键
from machine import Pin #导入引脚模块
import time             #导入时间模块

key = Pin(3, Pin.IN, Pin.PULL_UP)    #把1号引脚初始化为输入模式, 并取名为key

def pause():
    while True:
        if not key.value():
            is_pressed = True
            time.sleep(0.2)
            break
        
        time.sleep(0.01)


# 清屏
ssd.fill(0)
refresh(ssd)

pause()

# 2. 在屏幕上显示英文字符
Writer.set_textpos(ssd, 0, 0)
wri1 = Writer(ssd, arial10, verbose=False)
wri1.set_clip(False, False, False)
txt1 = Label(wri1, 0, 2, "")

wri2 = Writer(ssd, small, verbose=False)
wri2.set_clip(False, False, False)
txt2 = Label(wri2, 0, 32, "")

wri3 = Writer(ssd, font10, verbose=False)
wri3.set_clip(False, False, False)
txt3 = Label(wri3, 12, 2, "")

txt1.value("Hello")
txt2.value("World")
txt3.value("MicroPython")

# 输出显示
refresh(ssd)

在上述代码中：

1. refresh类用于刷新屏幕

2. pause()用于暂停，等待按键

3. gui.fonts下为字体文件，python文件格式，可以直接import使用

4. 每一个渲染对象Writer，可以定义一个调用的字体，那么通过其渲染，都会使用对应的字体

5. 使用Label对应本身或者使用Label.value()来输出文字

6. 最后，使用refresh(ssd)输出显示内容

 

具体的显示效果如下：

 

从上图可以看到，Hello、World、MicroPython三个字符串，使用了不同的字体。

 

 

五、显示中文字符

在 micropython-nano-gui 中要显示中文字符，配合 micropython-font-to-py ，会非常的简单。

micropython-font-to-py不需要安装到开发板上的MicroPython设备中，是在电脑上跑的程序，专门用于从ttf字体文件中，提取需要显示的字形数据，并生成对应的python调用文件。因为其是一个python工具，所以需要实现安装Python3。

 

1. 下载 micropython-font-to-py：

从 

链接已隐藏，如需查看请登录或者注册

 直接下载即可。

 

2. 生成中文字体调用文件：

使用下面的命令，即可使用该工具生成字体对应的Python文件：

# 命令行输入要显示的字符
python micropython-font-to-py/font_to_py.py -x -f -c "要显示的中文字符" "字体文件" 字号大小 font_cn_字号大小.py


# 从文件读取要显示的字符
python micropython-font-to-py/font_to_py.py -x -f -k 要显示的中文字符.txt "字体文件" 字号大小 font_cn_字号大小.py

 

具体调用如下：

# 12号
python micropython-font-to-py/font_to_py.py -x -f -c "得捷电子Follow me第3期" OPPOSans-M.ttf 12 test_font_cn_12.py

# 16号
python micropython-font-to-py/font_to_py.py -x -f -c "得捷电子Follow me第3期" OPPOSans-M.ttf 16 test_font_cn_16.py

 

生成调用文件后，需要上传到MicroPython设备的根目录下的/lib/gui/fonts/目录中，具体如下：

 

 

3. 调用中文字体文件：

import gui.fonts.test_font_cn_12 as font_cn_12
import gui.fonts.test_font_cn_16 as font_cn_16

 

4. 显示中文：

# 4. 在屏幕上显示中文字符
wri4 = Writer(ssd, font_cn_12, verbose=False)
wri4.set_clip(False, False, False)
txt4 = Label(wri4, 32, 0, "")

wri5 = Writer(ssd, font_cn_16, verbose=False)
wri5.set_clip(False, False, False)
txt5 = Label(wri5, 48, 38, "")

txt4.value("得捷电子Follow")
txt5.value("me第3期")

refresh(ssd)

pause()

 

运行后，实际输出的效果如下：

 

六、显示图形：计量图表

使用 micropython-nano-gui 可以很方便的在小屏幕，显示仪表图形。具体能够显示哪些内容，可以查看：

链接已隐藏，如需查看请登录或者注册

 

下面的代码，使用了Meter和LED组件，分别为计量图表和屏幕模拟LED：

在屏幕上绘制图形
import utime
import uos
from gui.core.writer import CWriter
from gui.widgets.led import LED
from gui.widgets.meter import Meter
from gui.core.colors import *

def meter_demo():
    # 颜色调用
    color = lambda v : RED if v > 0.7 else YELLOW if v > 0.5 else GREEN
    
    # 文本调用
    txt = lambda v : 'ovr' if v > 0.7 else 'high' if v > 0.5 else 'ok'
    
    # 计量1
    m0 = Meter(wri, 5, 2, divisions = 4, ptcolor=YELLOW,
              label='left', style=Meter.BAR, legends=('0.0', '0.5', '1.0'))
    # LED1
    l0 = LED(wri, ssd.height - 16 - wri.height, 2, bdcolor=YELLOW, label ='over')
    
    # 计量2
    m1 = Meter(wri, 5, 50, divisions = 4, ptcolor=YELLOW,
              label='right', style=Meter.BAR, legends=('0.0', '0.5', '1.0'))
    # LED2
    l1 = LED(wri, ssd.height - 16 - wri.height, 50, bdcolor=YELLOW, label ='over')
    
    # 计量3
    m2 = Meter(wri, 5, 98, divisions = 4, ptcolor=YELLOW,
              label='bass', style=Meter.BAR, legends=('0.0', '0.5', '1.0'))
    # LED3
    l2 = LED(wri, ssd.height - 16 - wri.height, 98, bdcolor=YELLOW, label ='over')
    
    # 展示次数
    times = 1
    while times:
        times = times - 1
        
        # 变化次数
        steps = 10
        for n in range(steps):
            # 随机获取颜色
            v = int.from_bytes(uos.urandom(3),'little')/16777216
            
            # 计量1设置
            m0.value(v, color(v))
            l0.color(color(v))
            l0.text(txt(v), fgcolor=color(v))
            
            # 计量2设置
            v = n/steps
            m1.value(v, color(v))
            l1.color(color(v))
            l1.text(txt(v), fgcolor=color(v))
            
            # 计量3设置
            v = 1 - n/steps
            m2.value(v, color(v))
            l2.color(color(v))
            l2.text(txt(v), fgcolor=color(v))
            
            # 刷新屏幕
            refresh(ssd)
            utime.sleep(0.2)

# 刷新屏幕并清屏
refresh(ssd, True)

# 设置写入对象
CWriter.set_textpos(ssd, 0, 0)  # In case previous tests have altered it
wri = CWriter(ssd, arial10, GREEN, BLACK, verbose=False)
wri.set_clip(True, True, False)

# 调用计量演示
meter_demo()

pause()

 

在上述代码中，使用的是CWriter，可以用于TFT显示屏。当使用OLED单色屏时，会自动把颜色给转换到对应的黑白显示。

代码中，meter_demo()内，定义了三个Meter，以及三个对应的LED，并利用随机生成数据，来让Meter动态显示。

运行上述代码后，实际的效果如下：

4419_1699708372

 

使用其他的库，要想显示这样的效果，要费不少工具。但使用 micropython-nano-gui ，则非常的简单。

 

七、诗词滚动播放

在前面显示中文字符的基础上，做了一个简单的诗词股东播放的效果。

具体代码如下：

# 6. 在屏幕上显示古诗，并向上卷动
import gui.fonts.test_font_cn_qinyuanchun_xue_12 as font_cn_qycx_12
import gui.fonts.test_font_cn_qinyuanchun_xue_16 as font_cn_qycx_16
import ure
import gc

refresh(ssd, True)
gc.collect()

txt = '''
沁园春·雪
【作者】毛泽东
********
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
俱往矣，数风流人物，还看今朝。
'''

matcher = "([^ \r\n]*?(?:\r|\n|，|。|；))"  # 使用方括号表示多个字符中的任意一个
regex = ure.compile(matcher)

# 匹配每段文字
start=0
results = []
while True:
    # 查找匹配串
    result = regex.search(txt[start:-1])
    if result:
        tmp = result.group(1)
        start = start + len(tmp)
        if tmp == "\n":
            results.append("********")
        else:
            results.append(tmp)
    else:
        break

wri6 = Writer(ssd, font_cn_qycx_12, verbose=False)
wri6.set_clip(False, False, False)
txt6 = Label(wri6, 5, 0, "")
txt7 = Label(wri6, 45, 0, "")

wri8 = Writer(ssd, font_cn_qycx_16, verbose=False)
wri8.set_clip(False, False, False)
txt8 = Label(wri8, 25, 0, "")

# 输出诗词
for i in range(0, len(results)):
    ssd.fill(0)
    if i>0:
        txt6.value(results[i-1])
        txt8.value(results[i])
    else:
        txt6.value(results[i])

    if i<len(results)-1:
        txt7.value(results[i+1])

    refresh(ssd)
    time.sleep(1)

 

在上述代码中，首先调用了《沁园春·雪》这首词需要的字体文件。

然后，使用正则，将词的内容，按行和标点符号，进行切分，存放到results数组中，用于后续的播放。

再定义了三个Label，分别为txt6、txt7、txt8，其中，txt6、txt7使用12号字体，txt8用于16号字体。

最后，遍历results数组，将对应的词的内容，显示到屏幕上。

并且，当前要显示的内容，会使用大号字体，前一行和后一行，则使用小号字体，以便突出显示。

 

运行上述代码后，最终效果如下：

4420_1699708821-270

 

八、总结

通过上面的实例，可以看到，micropython-nano-gui 在小屏幕上的应用，非常的方便简单。

如果感兴趣，可以好好看一看 micropython-nano-gui 的文档，能够支持很多类型的图表显示，能够使用在多种场合。

 

另外，Seeed Studio XIAO ESP32C3扩展板集成的OLED屏幕，也能够非常简单方便的使用起来，如果屏幕能够再打一下，那就更好了。

 

Jacktang

 micropython-nano-gui 支持很多类型的图表显示，可以好好学习哈

chejm

感谢楼主提供的技术分享，先收藏学习再发表个人意见，顶起来

HonestQiao

Jacktang 发表于 2023-11-12 08:30  micropython-nano-gui 支持很多类型的图表显示，可以好好学习哈

是的，是一个非常完善的图形驱动库。