如何优雅的在OpenMV上使用LVGL

2024-07-31

板级适配

得益于官方团队对 RA8D1-Vision Board 的 SDK 贴心地维护,对于板级配置文件 configuration.xml 板载的摄像头、SDRAM、LCD、TOUCH 等众多外设都已经配置好了

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第1张

LVGL 适配到 OpenMV 工程

menuconfig 配置

LVGL 配置

在 SDK 中的 openmv 工程的基础上进行修改,添加 LVGL V8 的 packages 包,使用

scons --menuconfig

命令进入配置窗口,直接键入 / 来查找

PKG_USING_LVGL

这个宏

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第2张

然后按 1 跳转到 LVGL 的设置界面,修改版本为 V8.3.5 版本,因为之后使用 GUI Guider 设计界面,我用的 GUI Guider 的 LVGL 版本是 V8.3.5,当然也可以用别的版本,porting 的代码可能有些许不一样

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第3张

还需要在 > Hardware Drivers Config > On-chip Peripheral Drivers 中使能 LVGL for LCD

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第4张

触摸配置

在官方 SDK 的 openmv 例程中触摸是没有被使能的,这里需要使能一下,在 > RT-Thread online packages > peripheral libraries and drivers > touch drivers 中使能 cst812t 的驱动

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第5张

然后在 > RT-Thread Components > Device Drivers 中使能触摸中断管脚的驱动

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第6张

最后把 packages 包下载下来

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第7张

porting 配置

这时 lvgl 的完整代码已经自动添加到编译环境中,下一步就是在 board 文件夹中适配 porting,和之前的文章类似,依然是 lv_conf.h、lv_port_disp.c、lv_port_indev.c 这些文件,这里就不再赘述,直接上代码


lv_port_disp.c 和之前文章的代码不太一样,修改成了全屏刷新的方式

lv_port_disp.c

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第8张
如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第9张

lv_port_indev.c

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第10张
如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第11张
如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第12张

lv_conf.h

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第13张
如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第14张

demo 测试

适配好了 LVGL,下面运行个 demo 试一下,在 LVGL 的设置中,将

Enable built-in demos

使能

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第3张

board/Kconfig 中关于 LVGL 的配置是 V9 版本的,所以需要改一下

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第16张

修改为

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第17张

然后使能 widgets 的 demo

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第18张

在 hal_entry.c 中添加代码,lv_user_gui_init 会自动被调用

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第19张

Overflow修改

Surprise,此时,最关键的一步来了,这个时候直接编译的话,会 overflow,region `FLASH\’ overflowed by 165240 bytes,足足超了100多KB的Flash,这就需要缩减一些配置了

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第20张

因为开发板上的摄像头是 OV5640,所以把其他的摄像头驱动都删掉

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第5张

将 openmv 的 buffer 从默认的 512000 改成 384000,或者改到 256000

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第22张

编译烧录到开发板,可以看到 openmv 运行 hello world 例程的时候同时运行着 LVGL V8 的 widgets 的 demo

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第23张

触摸也可以正常使用

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第24张

至此,实现了 openmv 和 LVGL 的共存,实现了同时运行,当然这还不够,下面开始介绍 GUI guider 设计界面和如何在 openmv IDE 上使用 micropython 调用 LVGL

界面设计

GUI Guider

使用 GUI Guider 来进行 LVGL 的拖拽式设计一个简单界面,左边用来显示摄像头内容,右边用来显示识别结果和 logo

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第25张

生成代码后添加到工程当中,然后在 custom 和 generated 文件夹中添加两个 SConscript 文件,内容如下

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第26张
如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第27张

目录树如下

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第28张

然后把刚刚的 demo 代码修改为如下内容,载入 GUI Guider 生成的界面

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第29张

编译烧录到开发板,可以看到刚刚设计的这个界面,左边的因为是 canvas 控件,为了节省 RAM 空间,把生成的代码删除了一部分,所以是透明的

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第30张

效果如下

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第31张

LVGL 和 GUI Guider 界面完成,下面就开始接入到 mpy 了

添加 mpy 自定义库

解释型语言本质上都是词法解析、解释执行,或者直接点讲就是脚本,mpy 就属于解释型语言,添加一个自定义的库和方法也是十分容易的,在 mpy 的模块和方法的定义中,大量使用了宏的方式来对 C API 进行添加,当然这些宏的种类也有很多

添加模块与方法

模块的添加

模块的定义程序范式如下,需要定义一个表放入模块的名字,然后使用 MP_DEFINE_CONST_DICT 宏来定义一个字典,然后定义一个 mp_obj_module_t 变量

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第32张

此时仅仅是定义了一个模块,并没有加入到 mpy 中,下一步 打开 packages/micropython-v1.13.0/port/mpconfigport.h 这个文件添加三行代码

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第33张

然后添加到 MICROPY_PORT_BUILTIN_MODULES 这个宏中,就会参与到编译当中了

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第34张

一般型方法

RT-Thread 也提供了一个生成器,仓库地址:

https://github.com/SummerGift/RT-MicroPython-Generator

,或者点开即用可以访问我的网站上面放的

https://docs.pomin.top/codetools/RT-MicroPython-Generator

使用这个生成器,传入参数设置为 1 的时候,生成代码如下,使用的宏是 MP_DEFINE_CONST_FUN_OBJ_1,传入一个泛型指针 arg_1_obj,使用 mp_obj_is_true 来获取布尔类型的传入参数

mpy 对于参数使用泛型指针的 typedef 类型

mp_obj_t

来传参,然后使用一些 C 函数来获取对应的类型以及值,例如

mp_obj_get_int



py_image_cobj

等 C 函数来获取整数值、图像指针等

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第35张

main 型方法

以此类推也有 MP_DEFINE_CONST_FUN_OBJ_0、MP_DEFINE_CONST_FUN_OBJ_2、MP_DEFINE_CONST_FUN_OBJ_3,但是参数过多的时候就不适合这样定义了,因为在 ARM 中需要控制参数的数量,这时就引出了 main 形式的定义宏,类似与 main 函数的 argc 和 argv,输入参数有 n_args 和泛型指针的指针 args

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第36张

添加一个 log 方法

QSTR的生成


QSTR 宏定义也可以用前文的生成器来生成

QSTR 的内容存放在 packages/micropython-v1.13.0/port/genhdr/qstrdefs.generated.h 中,可以使用 packages/micropython-v1.13.0/port/genhdr/gen_qstr.py 来生成,这里生成了三个后面需要用到的字符串,其中 guider 是模块名字,下面两个是模块的方法

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第37张

添加方法

这里定义一个名字为 guider 的模块,带有一个名为 lv_print 的方法

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第38张

按照前文的方法加入到 built module 宏中然后编译烧录到开发板中

mpy 代码如下。import guider 模块然后调用 lv_print 方法

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第39张
如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第40张

连接到开发板然后运行这个代码,可以看到 RTT 的终端打印出了代码中写的 log

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第41张

添加LVGL的自定义方法

定义一个 main 型的方法,代码如下,实现传参一个图像类型的参数,获取了参数后拷贝到缓冲区,交由 canvas 控件来显示,并且根据图像大小自适应调节控件大小

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第42张

添加到 guider 模块中

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第43张

此时就可以实现传入摄像头的图像到 canvas 控件来显示了,编译烧录到开发板,然后连接到 openmv IDE 运行如下 mpy 代码

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第44张

摄像头,启动!

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第45张

再添加一个显示识别结果的方法,实现对传入的字符串显示到 LVGL 界面的 label 控件上

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第46张

编译烧录到开发板中,在 openmv IDE 中运行如下代码

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第47张

将 $ 显示到了界面的 label 控件上

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第48张

运行tflite

对于怎么完成对于 tflite 模型的训练这里就不再重复介绍,可以参考这位大佬的文章

https://club.rt-thread.org/ask/article/69ef73018d63deef.html

,跟着一步步操作即可

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第49张

下载生成的可以部署到 openmv 的代模型和代码

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第50张

得到一个如下文件

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第51张

将 edge impulse 中生成的代码稍作修改,加入 guider 模块

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第52张

在 openmv IDE 上运行识别

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第53张
如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第54张

在开发板屏幕上显示 LVGL 界面、识别结果与摄像头画面

如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第55张
如何优雅的在OpenMV上使用LVGL (https://ic.work/) 技术资料 第56张

文章推荐

相关推荐