背景说明
小白刚开始接触LVGL,前些日子狠心花198元入手了一块堪称LVGL 入门利器~HMI-Board 开发板,虽然有RT-Thread 集成好的LVGL 环境,只需要几个步骤就能成功把lvgl 的示例运行起来,对于爱折腾的我来说,过于简单也并非好事,对其中的实现流程也是一无所知。于是便想着尝试把lvgl 官方的代码在vscode 运行起来。
步骤1:git 克隆 lv_port_vscode 仓库
lvgl 官方有说明模拟器可以在 linux/mac 平台上使用VS Code,目前暂不支持Windows 系统下使用 VS Code 模拟器。
官方提供GitHub - lvgl/lv_port_pc_vscode的 git 仓库`GitHub - lvgl/lv_port_pc_vscode`在git 仓库里面有README 文档,下面按照官方文档在 WSL2 中进行操作。
- 1.运行vscode 进入wsl 环境,创建`lvgl_workspace`目录,后面的操作都在这个文件夹下执行。
- 2.使用git clone 命令克隆git 仓库
git clone --recursive https://github.com/lvgl/lv_port_pc_vscode
但是在这里克隆时间特别长,而且很大概率会不成功,这里尝试在使用git 代理把仓库克隆下来,然后拷贝到 lv_port_pc_vscode 目录下。
这里使用git 代理的方式把lvgl 仓库克隆下来到本地,下一步需要把lvgl 的仓库切换到指定的版本,避免因版本不同编译出错。
在vs code 终端中查看git 克隆到本地的git 状态。
- 根据git 仓库的 README 操作安装SDL / X11,这里主要安装 SDL 。
sudo apt-get update && sudo apt-get install -y build-essential libsdl2-dev 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 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
安装完成后,在VS CODE 中使用 F5 快捷键进行编译工程,会提示下面的错误。
这个错误是因为git clone 仓库的时候子模块 lv_drivers 目录下的文件没有同步好,这时候我们命令行切换到 lv_drivers 目录,进行下面的操作。
终端中执行下面的命令
cd lv_port_pc_vscode/ git checkout 5a5b4a1
输入git status 命令查看,分支切换是否成功。
此时,再切回到`lv_port_pc_vscode`目录下,按下键盘的F5 快捷键编译工程,一般到此应该可以正常运行lvgl 才对,然而实际运行报了下面一个错误,瞬间不知道咋回事。
这里折腾了不少时间,由于这个错误完全没看懂,实在没有办法,只能尝试wsl2 环境下gui 显示(这里是sdl )看看功能是否正常。
找到`Run Linux GUI apps with WSL | Microsoft Learn`这个链接,抱着尝试的心态看看能不能运行起来。
在操作之前需要再次确认一下 WSL 环境下linux 环境是使用WSL2 的版本,可以使用
查看WSL 环境下linux 环境是哪个版本 wsl --list -v
确认是WSL 2 版本,然后进行安装相关GUI 软件,在安装gui 软件之前先更新一下wsl ,这里不确定是否有效,不过还是按照官方的推荐操作执行一遍。
按照上面的命令执行(需要退出wsl 环境,这里把vscode 关闭后再在powershell 中执行)。
接下来,正式开始安装gui app.
sudo apt update sudo apt install gedit -y sudo apt install gimp -y 此时gui 界面都能正常显示,但是再次在工程中按下F5 依旧是报错。 后面尝试重新安装gdb,居然可以正常运行了。 apt-get install gdb
所以前面报错的原因竟是没有安装gdb.
运行效果显示:
到此基于wsl 搭建的LVGL 环境搭建完成,下一步开始学习 LVGL 的使用和界面设计。