市面上有许多嵌入式GUI库可供选择,包括开源GUI库和闭源GUI库,开源GUI库:LVGL,EmWin等;闭源GUI库:TouchGFX,柿饼GUI等。
本篇文章主要描述如何将LVGL8.1移植到创龙科技的T113-i的开发板上。
LVGL
- LVGL,全名“Littlev Graphics Library”,是一个开源的图形库,主要用于在嵌入式系统上创建图形用户界面(GUI)。它是用C语言编写的,旨在高效和可定制,因此在各种微控制器平台和显示硬件上开发用户界面时备受欢迎。
- LVGL的特性
- 轻量级:LVGL旨在轻量且高效,适用于资源受限的嵌入式系统,这些系统具有有限的内存和处理能力。
- 高度可定制:LVGL允许开发人员根据项目要求定制GUI元素的外观和行为。
- 小部件库:它提供了各种预设计的图形小部件,如按钮、标签、滑块、列表等,以简化交互式用户界面的创建。
- 事件驱动:LVGL是事件驱动的,这意味着它会响应用户输入和其他事件以触发操作或状态更改。
- 硬件支持:LVGL支持各种显示和输入硬件,包括不同类型的显示器(TFT、OLED等)和输入设备(触摸屏、按钮等)。
- 积极的社区:LVGL有一个积极而支持性的社区,为其开发提供了资源并提供开发人员帮助。
- 跨平台:LVGL可以在各种微控制器平台上使用,适用于各种嵌入式系统。
- LVGL的开源链接:https://github.com/lvgl

LVGL移植
下载源码仓库
- lvgl代码下载链接:https://github.com/lvgl/lvgl/archive/refs/tags/v8.1.0.tar.gz
- lv_demos代码下载链接:https://github.com/lvgl/lv_demos/archive/refs/tags/v8.1.0.tar.gz
- lv_drivers代码卸载链接:https://github.com/lvgl/lv_drivers/archive/refs/tags/v8.1.0.tar.gz
- lv_port_linux_frame_buffer代码卸载链接:https://github.com/lvgl/lv_port_linux_frame_buffer.git,通过git clone下载,然后切换到v8.2分支
将所有代码写在下来之后,代码目录如下:

源码文件移植
- 创建目录:lvgl,用于存放我们工程源码
- 将lvgl源码复制进lvgl目录下
- 将lv_drivers源码复制进lvgl目录下
- 将lv_demos源码复制进lvgl目录下
- 从lvgl中复制lv_conf_template.h到lvgl,并重命名为lv_conf.h
- 从lv_drivers中复制lv_drv_conf_template.h到lvgl,并重命名为lv_drv_conf.h
- 从lv_demo中复制lv_demo_conf_template.h到lvgl,并重命名为lv_demo_conf.h
- 从lv_port_linux_frame_buffer中复制main.c和Makefile到lvgl下
将文件移植完之后,代码目录如下:

修改配置文件
- 修改lv_conf.h,此文件为lvgl的配置文件
- 使能lv_conf.h头文件,将#if 0修改为#if 1

- 根据驱动(可在设备树中查看)选择像素点对应像素格式的大小,否则显示可能乱码

- 修改显存大小

- 设置Tick定时器配置函数

- 查看log,使能LV_USE_LOG,设置打印的log等级并选择打印Log的接口

- 测试的样例中用到不同字号的字体,需要使能用到的字体

- 修改lv_drv_conf.h,此文件为驱动配置文件
- 使能修改lv_drv_conf.h头文件,将#if 0修改为#if 1

- 使能LCD显示:使能USE_FBDEV,路径设置成/dev/fb0,根据板子LCD的实际情况设置

- 使能鼠标或者触摸屏

- 修改lv_demo_conf.h,此文件为测试用例配置文件
- 使能修改lv_demo_conf.h头文件,将#if 0修改为#if 1

- 使能LV_USE_DEMO_WIDGETS测试用例

- 修改main.c文件,此文件为lvgl程序的主程序
- 修改lvgl的demos头文件

- 修改lvgl显示的分比率,我是采用HDMI屏幕,分辨率为:1920 * 1080

- 修改鼠标的配置,我的鼠标的设备节点为:/dev/input/event5

- 修改构建工具链路径,需要选择T113-i的交叉工具链,工具链路径为:xxx/T113-i_v1.0/out/gcc-linaro-5.3.1-2016.05-x86_64_arm-linux-gnueabi/bin/arm-linux-gnueabi-gcc

- 由于工具链不支持编译选项-Wshift-negative-value,直接伤处对应编译选项。

- 因为没有鼠标的图标文件,所以把鼠标图标的配置注释掉

- 增加测试样例的编译,包含其构建脚本

LVGL编译验证
- 编译,在lvgl工程目录下进行构建,执行make命令


- 编译完之后,会在当前目录下生成demo可执行文件

- 验证,我们将可执行文件demo拷贝到板子上

- 在板子运行LVGL实例

- 运行结果:



总结
- lvgl在Linux上的移植是比较简单快捷的;只需要修改几个配置文件,即可在目标上运行,对我们部署UI非常方便。
- lvgl在T113-i上运行整体效果还可以,流畅度整体满意,适合做一些项目的落地。
- lvgl的是跨平台的,所以写一个应用可以多端部署,避免了重复开发的过程。
|