MicroPython[ESP32]:ESP32-S3使用lvgl设置中文手写字体,MQTT网站在线人数,温度计

NO.1
内容汇总

ESP32-S3当前进度

  1. 已设置中文手写字体(沐瑶手写体)

  2. 已设置网站实时在线人数(MQTT)

  3. 已设置温湿度计小部件(竖状渐变色)

NO.2
问题梳理

一.无法使用LVGL的文件系统

之前在文章有提到

以下代码没有生效,无法加载字体文件,同时也只能使用MicroPython自带的文件读写来展示JPG或者GIF

import fs_driver
fs_drv = lv.fs_drv_t()
fs_driver.fs_register(fs_drv, 'S')

今天找到问题了

解决方法

把上面的代码放在lvgl屏幕和触摸实例化之后

如果放在顶部,那么lvgl还没有实例化,文件系统就会初始化失败

此图片的alt属性为空;文件名为image-796.png

调整代码顺序后,可以正常使用lvgl的文件系统读取字体文件了

读取字体文件

font_cn=lv.font_load("S:./muyaofont20.bin")

使用字体文件

label_online.set_style_text_font(font_cn, 0)  # set the font

二.mqtt连接一段时间后爆粗

先看错误信息

OSError(-1,)

此图片的alt属性为空;文件名为image-797-1024x165.png

说明,MQTT可以正常连接,但是大概几分钟后,就开始报错

网上网友的讨论,同样的问题,猜测是SSL,或者收到遗嘱消息后报错,但是问题没解决

https://github.com/micropython/micropython/issues/5451

https://github.com/micropython/micropython-lib/issues/210

解决方式

从旧的umqtt.simple换新的MicroPython的MQTT库(micropython-mqtt

“弹性”异步 MQTT 驱动程

https://github.com/peterhinch/micropython-mqtt

文档

https://github.com/peterhinch/micropython-mqtt/blob/master/mqtt_as/README.md

使用新的MQTT后,经测试,几个小时MQTT都是正常连接并及时收取订阅消息和执行回调

此图片的alt属性为空;文件名为image-798.png

可以看到,在编辑文章时,网站显示在线人数2

此图片的alt属性为空;文件名为image-799-1024x759.png

三.中文字体部分乱码

上图可以看到沐瑶手写体,使用没有问题,但是空格和℃无法转码字体库

使用时会变成空白带黑边方框(无法正常显示)

暂无解决方式,后续跟进

NO.3
笔记梳理

一.字体文件制作

NodeJS安装lv_font_conv

npm i lv_font_conv -g

下载字体

https://www.fonts.net.cn/font-35068393713.html

此图片的alt属性为空;文件名为image-800.png

转码字体文件

lv_font_conv --size 20 --format bin --bpp 1 --font muyao.ttf --symbols 哔哩哔哩 --no-compress -o muyaofont20.bin

可以看到生成的文件

此图片的alt属性为空;文件名为image-801-1024x536.png

然后传输到ESP32-S3中

参考文章

MicroPython 工具 Ampy:给ESP32传送JPG,GIF等文件

二.MicroPython-MQTT的使用

官方文档

https://github.com/peterhinch/micropython-mqtt/blob/master/mqtt_as/README.md

复制官方文档图中代码即可

需要修改对应的wifi名称,wifi密码,MQTT服务器域名或者IP

此图片的alt属性为空;文件名为image-802-1024x745.png

缺点

不太喜欢MQTT和WIFI密码强绑定

三.温湿度计

官方文档

https://docs.lvgl.io/master/examples.html#widgets

此图片的alt属性为空;文件名为image-803.png

想要实时的动画效果

参考文章

MicroPython[ESP32]:使用lvgl设置温度仪表盘动画

NO.4
Tips

实时在线人数4

看起来很不错,不用每次事后看管理后台来分析,只要数据改变就有实时展示

后期可以加载聚焦动画和音效播放

此图片的alt属性为空;文件名为image-804-1024x768.png

具体上次的初步手稿

还差

  1. 实时天气预报(今日晴)

  2. 一周天气预报(明日小雨,后天大风)

  3. 电池电量(可以改为当前是否wifi在线,正常联网,wifi信息强度等)

  4. 番茄钟倒计时(发现通过手表设置的倒计时有用,但是忙起来很难养成习惯)

此图片的alt属性为空;文件名为image-805.png

其他待定

本质上ESP32-S3就是一个副屏,用来可视化数据

  1. 显示电脑温度,cpu,gpu等数据

  2. 显示关注的价格波动,走势图等

  3. 电子相册,备忘录,日历,待办事项等

END