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

已于 2024-06-15 23:30:07 修改
阅读量3.3k 收藏 59
点赞数 41
分类专栏： 嵌入式系统UI设计 文章标签： vscode c++ ide
于 2024-06-15 09:58:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mftang/article/details/139669200
版权

目录

概述

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

软件下载地址：

和lvglUI开发仿真相关的软件资源-CSDN文库

概述

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

1 运行环境

1.1 版本信息

软件信息版本信息
VS CodeV1.74.2
MinGW-w64MinGW-W64 GCC-8.1.0
Simple Directmedia Layer(SDL)V2.30.3
CMake3.30.0-rc2
LVGLV8.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

mftang
关注
专栏目录
VSCode开发C、C++环境搭建系列（一）——基于Mingw-w64搭建
01-08
前言：本次系列文章详细说明基于VS Code来搭建C、C++的开发环境，本次的操作系统是Windows系统，在Windows上面，会有两种不同主流编译器，及Mingw-W64和MSVC，本文介绍第一种，是系列文章的第一篇。 概念辨析： ...
LVGL 8.3.11 windows vscode模拟器 含图文详细教程.zip
04-30
LVGL是什么？ LVGL (Light and Versatile Graphics Library) 是最流行的免费开源嵌入式图形库，可为任何 MCU、MPU 和显示类型创建漂亮的 UI。 在嵌入式设备场景，资源比较受限的情况，从渲染性能、许可费用、社区活跃度等做综合对比，LVGL是目前相对较好的选择。 LVGL是如何渲染UI的？ 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 或更新的编译器在嵌入式设备场景，资源比较受限的情况，从渲染性能、许可费用、社区
VSCode搭建LVGL模拟器环境示例（lv_sim_vscode_sdl）
10-21
lv_sim_vscode_sdl_7.11.0，完整的示例代码，已包含lvgl、lv_drivers、lv_examples 子模块，来源：https://github.com/lvgl/lv_sim_vscode_sdl github 拉取太慢，备份下来使用。 使用参考：https://blog.csdn.net/p1279030826/article/details/120890075
嵌入式UI开发-lvgl+wsl2+vscode系列：12、GUI Guider安装使用及在ssd202开发板上测试
最新发布
逍遥游的博客
08-25 886
接下来我们根据开发板官方的指南安装lvgl的ui工具GUI Guider进行开发和测试。理论上还有SquareLine Studio，但是由于一些收费等因素暂时不做过多介绍，gui工具只是辅助，加快开发效率，很多时候还是得直接用代码写界面。（还有一个原因就是GUI Guider可以直接设置中文界面）_gl=11fwx4f8_ga需要注册账号登陆并下载，Windows、mac（x86、m2）、ubuntu等系统都有对应安装包。GUI Guider一直在更新，截止到我下载这里已经到1.7.2版本了。
LVGL移植到基于VSCode的platformio工程的STM32L476 Nucleo开发板的程序(st7789显示驱动)
03-18
LVGL移植到基于VSCode的platformio工程的STM32L476 Nucleo开发板，移植说明文档见https://blog.csdn.net/BigAntHome/article/details/114965827
LVGL在VScode中安装模拟器运行配置笔记教程
weixin_49337111的博客
03-07 1万+
LVGL(Light and Versatile Graphics Library,轻巧而多功能的图形库)是一个免费的开放源代码图形库,它提供创建具有易于使用的图形元素,精美的视觉效果和低内存占用的嵌入式GUI所需的一切。本文主要讲述如何实现在VScode中实现LVGL模拟器环境的搭建运行。
【LVGL学习手札】（1）VSCode+GuiGuider搞定UI设计与调试
热门推荐
coolouba的专栏
05-01 1万+
结合VScode和GuiGuider，实现UI设计和仿真调试穿插迭代
LittlevGL下载lvgl下载（VSCode运行例程）
07-01
LittlevGL下载lvgl下载（VSCode运行例程）
vscode搭建LVGL开发环境
南山府的博客
12-01 4775
准备环境vscodemsys2关注微信公众号南山府嵌入式回复4000可得到环境有关vscode程序的安装这里不在演示。
VS code+LVGL仿真
vintagestyle的博客
01-20 1353
vscode，lvgl，
lvgl使用vscode编译程序的方法
fengzhirui_的博客
12-07 1091
把两个环境变量添加好后，重启一下vscode，在vscode中的终端中打开你自己创建的lvgl工程文件，在文件目录中找到lvgl-simulator目录，使用。lvgl是自带编译器的，只用把lvgl里的编译器放到电脑的环境变量中就可以使用vscode编译lvgl文件。这样就添加好了一个环境变量，我们还要在添加一个，就可以使用了。我们还是在lvgl的安装路径下，找到。把该路径复制后，在环境变量path中，新建后确定。把该路径复制后，在环境变量path中，新建后确定。打开lvgl的安装路径，找到。
vscode编译LVGL库
TuringEvo专栏
11-04 2209
点击vscode 底部栏 [all] ,选择 [install],然后点击 Build ，即安装。修改lvgl 源码 根目录 CMakeLists.txt。修改默认安装路径 ,指定变量。
MinGW-w64安装包
03-29
总的来说，MinGW-w64是C++开发者在Windows平台上不可或缺的工具，它提供了与开源GNU工具链兼容的编译环境，使得开发、调试和部署C++应用程序变得更加便捷。通过了解其组成部分和工作原理，你可以更好地利用这个强大...
mingw-w64 压缩包
10-29
Mingw-w64 是一个为 Windows 平台构建的开源 GCC (GNU Compiler Collection) 工具链，它提供了原生的 Windows 编译器和运行时环境，支持 32 位和 64 位应用程序的开发。Mingw-w64 项目是对原始 Mingw（仅支持 32 位...
MinGW-w64的离线安装包和环境包
01-27
MinGW-w64项目旨在提供一个与GCC（GNU Compiler Collection）兼容的编译器工具链，用于在Windows环境下开发C、C++和其他编程语言的应用程序。这个离线安装包包含了所有必要的组件，使得开发者无需连接互联网就可以...
mingw-w64-8.1.0
08-03
mingw-w64-8.1.0 解决问题 VScode 检测到#include 错误,请更新includepath。 已为此翻译单元 禁用波形曲线的一种解决思路 需要注意要在系统变量的path中添加环境变量：G:\mingw\mingw64\bin 具体环境变量需要根据...
LVGL PC模拟器项目教程
gitblog_00215的博客
08-08 482
LVGL PC模拟器项目教程 lv_port_pc_vscode项目地址:https://gitcode.com/gh_mirrors/lv/lv_port_pc_vscode 项目介绍 LVGL（Light and Versatile Graphics Library）是一个专为微控制器和嵌入式系统设计的轻量级图形库。尽管主要面向嵌入式系统，LVGL也可以在PC上运行，无需任何嵌入式硬件。lv...
LVGL入门使用（搭建Linux + VSCode模拟环境）
mengxinxiaoyue的博客
11-09 4562
LVGL入门 Linux + VSCode 模拟器环境搭建
LVGL 使用VSCode 开发环境搭建
qq_36722048的博客
03-31 2171
使用VSCode 开发LVGL
vscode mingw-w64配置
02-20
VSCode是一款轻量级的代码编辑器，而Mingw-w64是一个用于Windows平台的开发工具集，它提供了一套GNU工具链，包括编译器、链接器等。下面是配置VSCode和Mingw-w64的步骤： 1. 安装VSCode：首先，你需要下载并安装VSCode编辑器，可以从官方网站（https://code.visualstudio.com/）下载适合你操作系统的版本。 2. 安装Mingw-w64：接下来，你需要下载并安装Mingw-w64。你可以从Mingw-w64官方网站（http://mingw-w64.org/doku.php）下载最新版本的安装程序。在安装过程中，选择合适的架构（32位或64位）和目标系统（例如，Windows）。 3. 配置环境变量：安装完成后，需要将Mingw-w64的bin目录添加到系统的环境变量中。打开控制面板，搜索"环境变量"，点击"编辑系统环境变量"。在弹出的窗口中，点击"环境变量"按钮，在"系统变量"部分找到"Path"变量，点击"编辑"按钮，在弹出的窗口中点击"新建"按钮，并添加Mingw-w64的bin目录路径（例如，C:\mingw-w64\bin）。点击确定保存修改。 4. 配置VSCode插件：打开VSCode，点击左侧的扩展图标（或按下Ctrl+Shift+X），在搜索框中输入"C/C++"，找到并安装"Microsoft C/C++"插件。安装完成后，点击"重新加载"按钮。 5. 配置编译器路径：在VSCode中，打开你的C/C++项目文件夹。点击左侧的调试图标（或按下Ctrl+Shift+D），在顶部的下拉菜单中选择"添加配置"，选择"C++ (GDB/LLDB)"。然后，VSCode会自动生成一个".vscode"文件夹，并在其中创建一个"launch.json"文件。在该文件中，找到"configurations"数组中的第一个对象，将"miDebuggerPath"属性的值设置为Mingw-w64的gdb.exe路径（例如，C:\\mingw-w64\\bin\\gdb.exe）。 6. 编写和调试代码：现在，你可以在VSCode中编写C/C++代码，并使用Mingw-w64进行编译和调试了。点击左侧的调试图标，在顶部的下拉菜单中选择你的配置（例如，"C++ (GDB/LLDB)"），然后点击绿色的播放按钮开始调试。 希望以上步骤对你有帮助！如果还有其他问题，请随时提问。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值