LVGL基础开发教程

一个朴实无华的牛马

已于 2024-07-25 21:53:42 修改

阅读量462

点赞数 24

文章标签： linux

于 2024-07-25 21:04:52 首次发布

本文链接：https://blog.csdn.net/m0_61986579/article/details/140699692

版权

LVGL基础开发教程

一、进行LVGL开发前的准备内容

1、下载LVGL官方UI编辑软件SquareLine Studio 1.4.1

SquareLine Studio做为LVGL官方推出的PC端开发工具，采用所见即所得的开发方式，大大减少了敲代码方式开发UI的时间。NXP官方也有相应的有关LVGL的开发工具，名为GUI-Guider，但是这个工具笔者实测与LVGL官方移植的代码在并发执行上存在冲突（猜测），所以建议使用SquareLine Studio进行开发。

官网下载地址：https://squareline.io/downloads

进入LVGL官网后首先注册一个属于自己的账号，按照提示的流程填好相关信息即可（没有的就随便填），然后我们下载个人免费版本，下载好之后安装即可，注意不要有中文路径。

2、在Ubuntu上移植LVGL

1、首先下载LVGL核心代码

git clone -b release/v8.3 https://github.com/lvgl/lvgl.git

2、下载LVGL中间驱动

git clone -b release/v8.3 https://github.com/lvgl/lv_drivers.git

3、下载已改好FrameBuffer的文件

git clone -b release/v8.2 https://github.com/lvgl/lv_port_linux_frame_buffer.git

注：下载失败就多试几次，实在不行就跳转到GitHub上手动下载压缩包

上面所需的都下载好之后，新创建一个lvgl_demo文件夹，将上面的文件夹移到lvgl_demo文件夹下。

3、配置和安装

将lv_port_linux_frame_buffer文件夹内的main.c和Makefile移到上级目录，也就是lvgl_demo文件夹下，再把lvgl目录下的lv_conf_template.h文件移到lvgl_demo目录下，改名为lvgl_conf.h，最后把lv_driver目录下的lv_drv_conf_template.h文件移到lvgl_demo目录下，改名为lv_drv_conf.h，然后就可以修改这两个头文件了。

首先进入lv_conf.h，将该头文件打头第一个#if 0设置为#if 1，然后再找到下图位置配置内存
在这里插入图片描述

随后设置触摸采样频率以及显示刷新频率（根据自己开发板的性能而定），这里有一个系统嘀嗒时间获取函数，全部修改成下图所示
在这里插入图片描述

最后，在lv_conf.h进行最后一处修改，使能官方demo（设计自己的界面关闭这个）
在这里插入图片描述

打开lv_drv_conf.h文件，将文件打头第一个#if 0设置为#if 1，然后找到本文件第一个修改点，配置framebuffer设备，我们的igkboard是/dev/fb0

在这里插入图片描述

继续修改，找到触摸屏输入设备，我们的igkboard是/dev/input/event1

在这里插入图片描述

注：上面的设置都别忘记使能

到这里，我们的配置文件就修改完成了，接下来继续修改main.c文件。打开main.c文件，取消demos的头文件引用以及注释掉有关鼠标的代码，将显示尺寸设置为跟我们的屏幕一致

在这里插入图片描述

关闭main.c文件，打开Makefile文件，将CC指定为自己的arm-linux编译器，注释掉有关鼠标（mouse）的编译路径，然后尝试make，最后能生成demo程序说明移植成功。将该可执行程序移到板子上，直接执行，即可在屏幕上观察到LVGL官方demo界面。

在这里插入图片描述

二、LVGL快速UI界面画制

1、如何使用SquareLine Studio

打开SquareLine Studio，按照如下步骤选择，然后点击create，注意工程保存路径
在这里插入图片描述

进入之后可以看到左边是小部件，中间是屏幕，中间靠上的小框有仿真开关，右边是配置选项

在这里插入图片描述
在进行简单的UI界面画制我们只需要关注Label、Slider、Switch等部件即可。在UI设计中最重要的是事件，通过对各部件的事件进行处理，我们可以完成十分美观、好用的UI界面。

首先添加一个Label，再添加一个Slider，然后选中Label，可以在右边界面对Label进行样式修改

在这里插入图片描述

然后，选中这个滑块，也就是Slider，在右边界面的EVENTS中，点击添加事件

在这里插入图片描述

注：这里有好几个框框，第一个Name是事件的名字，第二个Trigger是事件的触发条件，第三个Action是事件触发时部件的动作，Type是SET PROPERTY选项的类型

按照下图配置好事件内容，点击右下角这个小的ADD
在这里插入图片描述

在Target选择Label1，也就是我们在屏幕上创建的标签，CTRL+S保存下，点击仿真运行

在这里插入图片描述

即可看到标签的值随着滑块进行着变换了

在这里插入图片描述

下面介绍如何通过switch开关对Label进行修改

首先在屏幕添加一个switch和一个label，然后按照下图对switch的事件进行配置

在这里插入图片描述

开始仿真之后即可看到Label的值跟随着switch开关进行变化

在这里插入图片描述

注：事件有很多触发条件以及动作选择，通过不同的搭配可以完成滑动屏幕进行页面切换等功能

在SquareLine Studio添加图片需要选择PNG格式的图片，只需要将图片保存在工程目录下的assets文件夹即可

在这里插入图片描述

最后导出工程，点击下图的选项

在这里插入图片描述

选择文件保存路径

在这里插入图片描述

点击下图的选项，即可将工程导出

在这里插入图片描述

打开刚刚配置好的文件保存路径，即可看到下面的文件内容

在这里插入图片描述
除了CMakeLists.txt以及filelist.txt，其他文件我们都要

将上面我们需要的文件夹以及文件放到我们前面配置好的lvgl_demo下，保存到一个新的目录ui下。

在这里插入图片描述

注意，我们需要将lvgl_demo下一些无关的内容去掉，最后的目录结构是这样

请忽略掉工程文件名字与前面不相同

修改makefile，添加ui文件路径

在这里插入图片描述
注：按照自己文件结构添加

修改main.c文件，在头文件添加ui.h，注释掉lv_demo_widgets()，改成ui_init()

在这里插入图片描述

修改lv_conf.h，将官方demo取消

在这里插入图片描述

最后make，将生成的demo移到开发板下执行，即可操作自己设计的UI了。

观察ui文件夹下的ui.c 文件，可以观察到我们在GUI设计软件里面添加的事件代码，我们可以直接对该事件代码进行操作，通过调用各部件的API，即可完成复杂的消息传递。
有关各部件的API可以参考：Base object (lv_obj) — LVGL documentation (100ask.net)

在这里插入图片描述

同时，我们也可以直接在工程的main函数里面添加自己的代码，完成一个完整的、实用的UI界面

注：自己编写的代码尽量不要带有过高的延时，会影响屏幕观感，甚至无法触发事件！！

例：将温湿度数据进行实时显示。

在这里插入图片描述

参考博客：

移植lvgl 8.3.11到野火i.mx6ull开发板_imx6ull移植lvgl 8-CSDN博客

SquareLine Studio开发经验（一）基本功能介绍-CSDN博客

使用SquareLine Studio创建LVGL项目到IMX6uLL平台-CSDN博客

一个朴实无华的牛马

关注

24
点赞
踩
19

收藏

觉得还不错? 一键收藏
7
评论
LVGL基础开发教程

SquareLine Studio做为官方推出的PC端开发工具，采用所见即所得的开发方式，大大减少了敲代码方式开发UI的时间。NXP官方也有相应的有关LVGL的开发工具，名为GUI-Guider，但是这个工具笔者实测与LVGL官方移植的代码在并发执行上存在冲突（猜测），所以建议使用SquareLine Studio进行开发。进入LVGL官网后首先注册一个属于自己的账号，按照提示的流程填好相关信息即可（没有的就随便填），然后我们下载个人免费版本，下载好之后安装即可，注意不要有中文路径。
复制链接

扫一扫