基于VSCode和MinGW-w64搭建LVGL模拟开发环境

目录

概述

1 运行环境

1.1 版本信息

1.2 软件安装

1.2.1 下载安装VS Code

1.2.1.1 下载软件

1.2.1.1 安装软件

1.2.2 下载安装MinGW-w64

1.2.2.1 下载软件

1.2.2.2 安装软件 

 1.2.3 下载安装SDL

1.2.3.1 下载软件

​1.2.3.2 安装软件

1.2.4 下载安装CMake

1.2.4.1 CMake工具介绍

1.2.4.2 下载CMake

 1.2.4.3 下载CMake

2 LVGL 软件包

2.1 lvgl 下载

2.2.1 lvgl的官方模拟器Proj

2.2.2 LVGL driver

2.2.3  lvgl源代码

2.2 lvgl软件包配置

3 VsCode中的配置

3.1  配置CMake参数

3.2 其他配置

3.2.1 准备SDL2.dll

3.2.2 check运行环境

4 测试

4.1 修改屏幕参数

4.2 测试案例

4.2.1 案例一： lv_demo_widgets

4.2.2 案例二： lv_demo_stress

---

概述

本文主要介绍使用VSCode和MinGW-w64搭建LVGL模拟开发环境，在使用LVGL进行项目UI设计时，通过编写代码，然后下载到板卡上运行，以查看其运行结果。这种方式虽然能正确反应UI在嵌入式设备上的运行状态，但对于开发过程来说很耗费时间。通过模拟器的形式开发UI能极大的节约时间。

1 运行环境

1.1 版本信息

软件信息	版本信息
VS Code	V1.74.2
MinGW-w64	MinGW-W64 GCC-8.1.0
Simple Directmedia Layer(SDL)	V2.30.3
CMake	3.30.0-rc2
LVGL	V8.3.0

1.2 软件安装

1.2.1 下载安装VS Code

1.2.1.1 下载软件

登录VS Code网站，选择相应的版本下载软件，链接地址如下：

https://code.visualstudio.com/

1.2.1.1 安装软件

下载完成后，按照常规软件安装方法，安装该软件即可。安装完成后，需要配置如下3个插件，使其支持C/C++功能。

1.2.2 下载安装MinGW-w64

mingw-w64项目是一个完整的运行时环境，用于gcc支持Windows 64位和32位操作系统的本机二进制文件。

特性
1）编译器工具链本地托管
2）支持本地TLS回调
3）支持宽字符启动(-municode)
4）支持32位和64位Windows i386/x64
5）支持Multilib工具链
6）支持先进的gcc/binutils

1.2.2.1 下载软件

登录官方网址，选择相应的版本下载软件：

https://sourceforge.net/projects/mingw-w64/files/mingw-w64/

在该页面的下载栏，选择如下软件：

1.2.2.2 安装软件 

1）解压软件

下载完成后，得到软件包如下：x86_64-8.1.0-release-posix-seh-rt_v6-rev0.7z

其包含如下内容：

直接解压该软件包，笔者建议不要更改目录名称：

2）配置环境路径

解压完成在windows 环境变量中配置其工作路径

 3）验证

打开Windows PowerShell工具，输入命令，如果路径配置成功会看见如下信息：

gcc -v

 1.2.3 下载安装SDL

Simple DirectMedia Layer是一个跨平台开发库，旨在提供对音频、键盘、鼠标、操纵杆和图形硬件的低级访问。视频播放软件、模拟器和流行游戏(包括Valve的获奖目录和许多Humble Bundle游戏)都使用了它。

1.2.3.1 下载软件

登录官方网址，选择相应的版本下载软件，笔者建议选择最新的v2.30.3 

https://github.com/libsdl-org/SDL/tags

下载选项如下：

 1.2.3.2 安装软件

下载完成后，得到软件包：

其内容如下：

 将如下两个目录复制到mingw64的根目录中

SDL2-2.30.1目录中需要复制到mingw64目录中的文件夹：

1）x86_64-w64-mingw32

2）cmake

1.2.4 下载安装CMake

1.2.4.1 CMake工具介绍

1）单一源代码构建在多个平台上
CMake允许开发人员描述如何用一组输入文件构建简单和非常复杂的软件系统。这可以用于在多个平台上构建软件，从Android到iOS再到高性能计算系统。

2）准确的依赖关系和最小的重建
CMake具有精确的依赖关系，并且只允许对已更改的代码进行最小程度的重建。它还支持Fortran和c++模块。

3）Out-of-source构建
CMake允许源外构建，并提供每个源树拥有多个构建树的能力。

4）Target-centric方法
现代CMake允许将构建指定为一组目标(可执行文件，库，自定义命令)。每个目标定义了它直接依赖的其他目标。然后，CMake以正确的顺序执行构建，并包含可传递的链接目标。

5）使用允许捕获构建环境的缓存进行系统自省
每个CMake构建树都包含一个缓存文件，其中包含作为该构建的一部分设置的变量。这包括通过系统自省找到的所有内容、安装软件的路径和用于构建的标志。Cmake包含几个gui来允许编辑这个缓存文件。

6）多个目标构建系统
CMake支持多种目标构建系统，包括Visual Studio、Xcode、ninja、make和VSCode。它允许项目充分利用其最重要的资源——开发人员。由于CMake支持许多流行的c++ IDE系统以及命令行构建工具，开发人员可以选择他们最高效的构建工具。

7）跨平台打包系统
CMake包含CPack系统，它允许创建Linux、Windows和Mac的跨平台安装程序。

8）全跨平台安装系统
CMake包含一个完整的跨平台安装系统。使用同一组命令可以在Linux、Windows和Mac上安装软件包。

9）跨平台测试系统
CMake包括一个完整的跨平台测试系统。测试可以在项目的CMake源代码中指定，并在构建完成后运行。然后使用CTest来运行测试。结果可以发送到CDash，并且它们可以并行运行。

10）自定义命令
除了构建标准库和可执行文件外，CMake还允许在构建时运行任意命令。这允许代码生成工具的跨平台集成。

11）配置头文件
CMake允许项目为构建配置头文件。

12）导出/导入目标器
CMake可以从构建中导出和导入目标，以允许软件被重用。

13）集成调试器
CMake实现了调试适配器协议，以使用第三方工具交互调试项目的CMake代码。

1.2.4.2 下载CMake

登录官网下载软件

https://cmake.org/download/

 选择如下版本，下载该软件

 1.2.4.3 下载CMake

下载完成后，安装该软件，安装完成后，会在环境变量中看见其工作路径

2 LVGL 软件包

2.1 lvgl 下载

2.2.1 lvgl的官方模拟器Proj

登录github，下载该软件包：

https://github.com/lvgl/lv_port_pc_eclipse/tree/release/v8.3

选择下载版本

2.2.2 LVGL driver

登录github，下载该软件包：

https://github.com/lvgl/lv_drivers/releases/tag/v8.3.0

选择下载版本

2.2.3  lvgl源代码

登录github，下载该软件包：

https://github.com/lvgl/lvgl/tree/release/v8.3

选择下载版本

2.2 lvgl软件包配置

下载完成lvgl相关的软件包后，得到如下3个安装包，现在需要费别解压这3个软件包

1）解压：lv_port_pc_eclipse-release-v8.3.zip

直接解压该软件包，建议不需要更改任何目录名称

2）解压：lv_drivers-release-v8.3.zip 至 lv_port_pc_eclipse-release-v8.3

3）解压：lvgl-release-v8.3.zip 至 lv_port_pc_eclipse-release-v8.3

3 VsCode中的配置

3.1  配置CMake参数

1）使用vscode打开lv_port_pc_eclipse-release-v8.3工作空间

 2）配置CMakeLists.txt

在该文件中配置如下代码：

file(COPY SDL2.dll DESTINATION ../bin)

3.2 其他配置

3.2.1 准备SDL2.dll

将D:\tools\mingw64\x86_64-w64-mingw32\bin目录下的SDL2.dll 复制到 lv_port_pc_eclipse-release-v8.3 工作空间中

3.2.2 check运行环境

查看运行环境，重点查看编译器编信息

4 测试

4.1 修改屏幕参数

为了方便观察屏幕显示信息，建议调整屏幕大小，在lv_port_pc_eclipse-release-v8.3\lv_drv_conf.h 文件中可以更该参数

4.2 测试案例

4.2.1 案例一： lv_demo_widgets

调试代码信息：

运行代码后，可以看见如下UI

4.2.2 案例二： lv_demo_stress

调试代码信息：

 运行代码后，可以看见如下UI