文章目录

  • 一、前言
  • 二、资料收集
  • 三、Windows下WSL2上编译运行lvgl的demo程序
  • 1、lvgl简介
  • 2、lvgl特性
  • 3、配置要求
  • 4、Windows下vscode+wsl2模拟环境搭建
  • 4.1、安装vscode+wsl2
  • 4.2、下载获取项目：
  • 4.3、安装显卡驱动
  • 4.4、下载lvgl并编译运行示例demo
  • 四、最后


一、前言

UI界面开发我除了开发Qt比较多之外，就只针对Android的界面开发做过简单了解做了一些demo app，鉴于本人嵌入式Linux和mcu目前使用较多，所以目前来接触一些更加适合mcu、嵌入式Linux等使用的嵌入式ui框架，比如这里的lvgl，以此契机，总结部分lvgl的使用经验，便于以后回顾，也希望达到一个和大家分享交流的目的，只有这样我觉得才能进步的更快。

二、资料收集

官网：https://lvgl.io/GitHub：https://github.com/lvgl/lvgllvgl官方文档：https://docs.lvgl.io/master/https://lvgl.io/get-started基本上主要的内容就来自官网，涉及到一些实际场景的复杂控件可能会在网上尝试搜索或者看GitHub的issue。
我这里的总结将根据官方文档在模拟环境先跑一跑熟悉总结一下相关控件的开发使用，后续再移植到ssd202显示屏上进行使用，实际使用时移植到不同芯片点亮显示屏显示是一个比较繁琐和重要的步骤，这里的总结只在最后以ssd202的显示屏开发板为示例，其它显示屏建议结合对应开发板和移植lvgl的官方提示进行处理，你也可以将你的移植过程分享出来，大家共同分享、讨论、进步。

三、Windows下WSL2上编译运行lvgl的demo程序

1、lvgl简介

LVGL(轻量级和通用图形库)是一个免费和开源的图形库，它提供了创建嵌入式GUI所需的一切，具有易于使用的图形元素，美丽的视觉效果和低内存占用。

2、lvgl特性

  • 丰富且强大的模块化图形组件：按钮 (buttons)、图表 (charts)、列表 (lists)、滑动条 (sliders)、图片 (images) 等
  • 高级的图形引擎：动画、抗锯齿、透明度、平滑滚动、图层混合等效果
  • 支持多种输入设备：触摸屏、 键盘、编码器、按键等
  • 支持多显示设备
  • 不依赖特定的硬件平台，可以在任何显示屏上运行
  • 配置可裁剪（最低资源占用：64 kB Flash，16 kB RAM）
  • 基于UTF-8的多语种支持，例如中文、日文、韩文、阿拉伯文等
  • 可以通过类CSS的方式来设计、布局图形界面（例如：Flexbox、Grid）
  • 支持操作系统、外置内存、以及硬件加速（LVGL已内建支持STM32 DMA2D、NXP PXP和VGLite）
  • 即便仅有单缓冲区(frame buffer)的情况下，也可保证渲染如丝般顺滑
  • 全部由C编写完成，并支持C++调用
  • 支持Micropython编程，参见：LVGL API in Micropython
  • 支持模拟器仿真，可以无硬件依托进行开发
  • 丰富详实的例程
  • 详尽的文档以及API参考手册，可线上查阅或可下载为PDF格式
  • 在 MIT 许可下免费和开源

3、配置要求

基本上，每个能够驱动显示器的现代控制器都适合运行 LVGL。 最低要求是：

  • 16、32 或 64 位微控制器或处理器
  • 建议使用 >16 MHz 时钟速度
  • 闪存/ROM： > 64 kB 用于非常重要的组件 (> 建议使用 180 kB)
  • RAM:
  • 静态 RAM 使用量：~2 kB，取决于使用的功能和对象类型
  • 堆: > 2kB (> 建议使用 8 kB)
  • 动态数据（堆）: > 2 KB (> 如果使用多个对象，建议使用 16 kB). 在 lv_conf.h 文件中配置 LV_MEM_SIZE 生效。
  • 显示缓冲区：> “水平分辨率”像素（推荐 >10 × 10ד 水平分辨率”）
  • MCU或外部显示控制器中的一个帧缓冲区
  • C99 或更新的编译器
  • 具备基本的 C（或 C++）知识：
  • 指针。
  • 结构体。
  • 回调。

4、Windows下vscode+wsl2模拟环境搭建

https://github.com/lvgl/lv_port_pc_vscode相较于vs、eclipse、codeblock等模拟环境vscode基本上相当于Windows、Linux、macos都可以比较简单的配置了，所以比较推荐（如果你是qt开发的话，那么QT Creator也是可以使用的）。
该项目是针对VSCode配置的，并且仅在 Linux 上进行了测试，尽管这可能适用于 OSx 或 WSL。它需要 GCC、GDB 的工作版本并在您的路径中进行制作。
为了允许在 VSCode 中进行调试，您还需要 GDB扩展或其他合适的调试器。所有要求、构建和调试设置都已在.workspace文件中预先配置（只需双击该文件即可打开项目）。
该项目可以使用SDL，但它可以很容易地被任何其他内置 LVGL 驱动程序替换。

4.1、安装vscode+wsl2

安装vscode和wsl2这里不再赘述，网上的教程比较多了，我之前也有总结，这里不再展开，安装好后创建工作目录并启动终端，准备下载配置lvgl模拟所需要的环境（wsl2需要更新到最新，对于Windows的版本也有要求的）：

嵌入式UI开发-lvgl+wsl2+vscode系列：1、资料收集以及Windows下WSL2模拟环境运行示例demo_lvgl


WSL运行Linux GUI应用程序条件：https://learn.microsoft.com/zh-cn/windows/wsl/tutorials/gui-apps如果电脑系统不满足则需要升级或者安装Linux桌面版虚拟机去跑示例了。

  • 需要使用 Windows 10 版本 19044+ 或 Windows 11 才能使用此功能。

嵌入式UI开发-lvgl+wsl2+vscode系列：1、资料收集以及Windows下WSL2模拟环境运行示例demo_lvgl_02

  • 已安装适用于 vGPU 的驱动程序
  • Linux GUI 应用仅受 WSL 2 支持，并且不能用于为 WSL 1 配置的 Linux 发行版。

powershell运行如下命令检测wsl版本，显示版本为2才可以：

wsl --list --verbose

wsl --update
wsl --shutdown
安装完成后最好重启电脑一下。

嵌入式UI开发-lvgl+wsl2+vscode系列：1、资料收集以及Windows下WSL2模拟环境运行示例demo_lvgl_03


wsl2也可以安装如下一些带ui的软件方便后续使用（也可以不用，看个人需要）：

sudo apt install gimp -y
sudo apt install gedit -y
sudo apt install nautilus -y
sudo apt install vlc -y
sudo apt install x11-apps -y

之后我们Windows下使用wsl2运行带有gui的程序就可以跑起来了，否则会报错，且无法运行起来gui。

4.2、下载获取项目：

GitHub拉取慢的话可以尝试进行加速：https://github.com/lvgl/lv_port_pc_vscode

git clone https://github.com/lvgl/lv_port_pc_vscode
4.3、安装显卡驱动

SDL2必须安装：（SDL是一套开放源代码的跨平台多媒体开发函式库，使用C语言写成。SDL提供了数种控制图像、声音、输出入的函数，让开发者只要用相同或是相似的代码就可以开发出跨多个平台的应用软件。目前SDL多用于开发游戏、模拟器、媒体播放器等多媒体应用领域。）
Linux终端安装比较简单（但第一次安装也需要花费不短的时间）：

在 Linux 上，您可以通过终端轻松安装 SDL2：

查找 SDL2 的当前版本： apt-cache search libsdl2（例如 libsdl2-2.0-0）

安装 SDL2： sudo apt-get install libsdl2-2.0-0（用找到的版本替换）

安装 SDL2 开发包： sudo apt-get install libsdl2-dev

如果尚未安装构建基础工具： sudo apt-get install build-essential

可选库安装：
ffmtype和FFmpeg：（这个对于音视频相关内容有用，只是简单 UI界面前期可以不用安装）

# FreeType support
wget https://kumisystems.dl.sourceforge.net/project/freetype/freetype2/2.13.2/freetype-2.13.2.tar.xz
tar -xf freetype-2.13.2.tar.xz
cd freetype-2.13.2
make
make install
# FFmpeg support
git clone https://git.ffmpeg.org/ffmpeg.git ffmpeg
cd ffmpeg
git checkout release/6.0
./configure --disable-all --disable-autodetect --disable-podpages --disable-asm --enable-avcodec --enable-avformat --enable-decoders --enable-encoders --enable-demuxers --enable-parsers --enable-protocol='file' --enable-swscale --enable-zlib
make
sudo make install
4.4、下载lvgl并编译运行示例demo

目前可以选择的语言包括microPython、c、c++、js、pikascript，嵌入式目前主打还是c，所以这里我还是以c接口为主，其它语言接口大家可以按需自己研究一下。

cd lv_port_pc_vscode
rm lvgl/ -rf
git clone https://github.com/lvgl/lvgl.git
cd lvgl
git status
（根据lv_port_pc_vscode需要的lvgl版本提示下载及切换版本）
git checkout 8691574
cd ..
mkdir build
cd build
cmake ..
make
make install
//gdb这个也是必须安装的，lvgl的运行调试会通过gdb来进行
apt-get install gdb
apt-get install gcc

一定要切换lvgl的版本以及安装好相关环境，否则编译会报一些不同的错误：

嵌入式UI开发-lvgl+wsl2+vscode系列：1、资料收集以及Windows下WSL2模拟环境运行示例demo_windows_04


编译成功：

嵌入式UI开发-lvgl+wsl2+vscode系列：1、资料收集以及Windows下WSL2模拟环境运行示例demo_Windows_05


之后运行或者f5调试生成在bin目录下的main程序即可（lv_port_pc_vscode/bin/main）：

嵌入式UI开发-lvgl+wsl2+vscode系列：1、资料收集以及Windows下WSL2模拟环境运行示例demo_lvgl_06

四、最后

接着我们根据该示例修改熟悉各个控件、事件等接口的使用即可。
这里我正好手头有一个ssd202的开发板，一般来跑Linux，做一些显示屏，常见的作为电梯屏、一些消费场所的简易控制屏、购物屏、家里小的中控屏等，在熟悉完相关lvgl的接口后，我们将模拟环境下的程序移植到该显示屏上，整体嵌入式linux下使用lvgl进行开发移植的一套流程就走完了。
lvgl在mcu上的开发和移植我们在最后可能会尝试一下，目前先以嵌入式Linux为主，在mcu上使用lvgl开发ui目前觉得还是一件很酷的事情，还是能激发我的研究热情的。