LVGL仪表显示项目

一、LVGL模拟器环境搭建

1.1Mingw环境搭建

1.2系统环境变量配置

1.3mingw环境检测

简介：在做项目之前，我们先来看一下项目需要实现的效果。本项目主要是简单实现仪表的功能，因为没有硬件支持，所以只能使用模拟器进行模拟，相关信号只能用定时器模拟。主要功能包含，油耗，仪表转速，水温，油量等功能的显示。本demo只呈现编写项目的思路，起到抛砖引玉的作用，希望读者可以做到举一反三的效果。我们来看一下我们最终实现的效果

一、LVGL模拟器环境搭建

配置成功后完整展示

1.1Mingw环境搭建

mingw下载地址:

https://github.com/niXman/mingw-builds-binaries/releases/tag/13.1.0-rt_v11-rev1

选择x86_64-13.1.0-release-posix-seh-ucrt-rt_v11-rev1.7z这个版本

解压得到mingw64文件夹

本人复制到C盘根目录[也是你需要安装到哪里]

注意：这个文件后面还需要操作这里提个醒（比较多人不注意这点倒是配置失败，笔者也踩过这个坑）

1.2系统环境变量配置

由上述操作可知笔者安装在 C:\mingw64 路径中，接下来我们要找到当前文件夹里面的"bin"文件

如图：笔者的是C:\mingw64\bin 将路径复制出来，

接下来就是系统环境配置：

桌面右击我的电脑在选项卡中选择"属性" =》点击"高级系统设置" =》"环境变量设置"

双击"Path" 将安装路径的bin文件路径添加进来如我的是 C:\mingw64\bin 然后确定关闭

Mingw配置初步完成！因为后面还需要修改目录文件所以不算全部完成再次提醒一次！

1.3mingw环境检测

在windows打开终端，输入gcc -v。

具体操作：

键盘操作 windows键 + R 键输入 cmd 然后回车

在命令窗口输入 gcc -v 回车如下图安装成功

1.4Cmake环境搭建

cmake下载地址：https://cmake.org/download/

双击安装即可，安装过程中需要选择配置环境变量（这个默认是选中的直接下一步即可）

在windows打开终端，输入cmake --version，配置成功显示如下：

恭喜第二个环境搭建完成。

1.5SDL2环境安装

下载地址：https://github.com/libsdl-org/SDL/releases/tag/release-2.32.4

解压文件，如Mingw一样，文件里面有一个 SDL2-2.32.4 文件

将该文将复制到需要安装的目录位置，我装在C盘根目录中，这里需要安装在自己熟悉的路径下后面VScode配置需要用到SDL安装路径

接下来我们实现在Mingw安装时留下的文件配置操作，

进入文件复制以下红框的两个文件

把这连个文件黏贴到 mingw64文件的 bin 文件同级目录中

mingw 已经完成配置

1.6LVGL模拟器源码下载

一共3个文件，分别为模拟器、lvgl源码和 FreeRTOS操作系统,操作系统可根据实际需要进行下载，本文将带操作系统一起以满足需要操作系统的同学。

9.5下载地址：https://github.com/lvgl/lv_port_pc_vscode/tree/release/v9.5

注意这里面下载出来有三个文件，请一定注意后面我的操作

接下来我们分别下载这三个文件，可以用Git克隆，也可以下载压缩包。Git克隆可能受国外网路波动原因受影响（笔者这里尝试过几次失败了），我选择下载压缩包的方式虽然也有网络大坑但是可以用断点续传功能只要是时间问题。

第一个文件"模拟器文件"

第三个文件"FreeRTOS"操作系统文件【可选择性下载】

下载和第二个文集操作相同

我们将三个压缩包文件解压，

模拟器文件：lv_port_pc_vscode-release-v9.5

LVGL库文件：lvgl-release-v9.5

操作系统文件：FreeRTOS-Kernel-11.2.0

定义lv_port_pc_vscode-release-v9.5文件为主文件，其他俩个文件为子文件，我们要把子文件合到主文件中。

1.首先我们打开主文件 lv_port_pc_vscode-release-v9.5

2.主文件添加lvgl库文件

3.给主文件添加操作系统文件

文件合并操作完成。接下来就是VScode操作。

1.7VSCODE的环境搭建

VSCODE组件插件安装

安装红框部分，也可以安装汉化组件和其他组件来提高开发效率，红框组件为必须

2.文件路径配置

用VScode打开操作完成的主文件 lv_port_pc_vscode-release-v9.5 。

将前面安装的mingw里的SDL2.dll文件复制一份到bin文件夹中。

具体操作；找到安装的mingw64，我的安装在C:\mingw64这个位置。

找到该文件后点进去找到SDL2.dll文件，具体文件路径如下：

C:\mingw64\x86_64-w64-mingw32\bin 。这里必须注意一点，如果前期操作没有进行SDL安装文件的复制操作则这里就不会有这个文件，详细见菜单 1.3.2实现Mingw文件配置章节

复制该文件添加到VScode 的bin文件中，

找到VScode中的CMakeLists.txt文件添加之前安装的SDL路径，具体操作如下：

添加路径代码

cpp 复制代码

# 指定SDL配置路径
set(CMAKE_PREFIX_PATH "${PROJECT_SOURCE_DIR}C:/SDL2-2.32.4/x86_64-w64-mingw32" ${CMAKE_PREFIX_PATH})
file(COPY "C:/SDL2-2.32.4/x86_64-w64-mingw32/bin/SDL2.dll" DESTINATION ${PROJECT_SOURCE_DIR}/bin)

打开simulator.code-workspace文件

修改SDL头文件

cpp 复制代码

//注释掉#include "glob.h"，并添加SDL头文件
//#include "glob.h"
//添加SDL头文件
#include "SDL2/SDL.h"

到此处所有配置工作已经完成了，接下来就可以进行编译查看官方的示例了。

1.8编译与运行

点击生成进行编译，返回0表示成功返回2表示失败。

编译成功后，即可运行程序

VScode模拟器的安装已经全部结束。

结束语：配置参考链接：https://jishuzhan.net/article/2034487545715818497

二、LVGL创建仪表工程

2.1项目创建

打开上一章节中的模拟器工程，lv_port_pc_vscode-release-v9.5。进入工程项目，找到main的文件夹，在此文件夹下创建一个测试文件夹test。后续新建的工程文件都放在这个文件夹内。

用VSCODE打开模拟器工程，lv_port_pc_vscode-release-v9.5。新建两个文件lv_obj_test.h和lv_obj_test.c文件。

cpp 复制代码

lv_obj_test.h

#ifndef LV_OBJ_TEST_H
#define LV_OBJ_TEST_H
#include "lvgl.h"

void lv_obj_test_start();

#endif

cpp 复制代码

lv_obj_test.c

#include "lv_obj_test.h"
void lv_obj_test_start()
{

}

main.c文件中包含lv_obj_test.h头文件，并注释掉原有的lvgldemo示例函数，写入lv_obj_test_start()函数。

我们把显示屏幕的大小改为(1920,720)，上述操作完成后，我们就可以在lv_obj_test_start()函数中实现我们自己的界面了。下面我们开始进入UI界面开发。