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

2024-05-27 15:04
文章标签 windows 运行 开发 ui 模拟 环境 系列 vscode 嵌入式 示例 资料 收集 demo lvgl wsl2

本文主要是介绍嵌入式UI开发-lvgl+wsl2+vscode系列：1、资料收集以及Windows下WSL2模拟环境运行示例demo，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

    • 一、前言
    • 二、资料收集
    • 三、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/lvgl
lvgl官方文档：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的版本也有要求的）：
image.png
WSL运行Linux GUI应用程序条件：https://learn.microsoft.com/zh-cn/windows/wsl/tutorials/gui-apps
如果电脑系统不满足则需要升级或者安装Linux桌面版虚拟机去跑示例了。

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

image.png

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

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

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

image.png
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的版本以及安装好相关环境，否则编译会报一些不同的错误：
image.png
编译成功：
image.png
之后运行或者f5调试生成在bin目录下的main程序即可（lv_port_pc_vscode/bin/main）：
image.png

四、最后

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

这篇关于嵌入式UI开发-lvgl+wsl2+vscode系列：1、资料收集以及Windows下WSL2模拟环境运行示例demo的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1007808。

相关文章

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具
阅读更多...
MySQL 定时新增分区的实现示例

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后，有时候会需要自动创建分区。比如，一些表数据量非常大，有些数据是热点数据，按照日期分区MululbU
阅读更多...
Python函数作用域示例详解

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域（Local）2.2 闭包作用域（Enclos
阅读更多...
C++20管道运算符的实现示例

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多，因为它实际属于c++20最为重要的
阅读更多...
Java中调用数据库存储过程的示例代码

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示
阅读更多...
ModelMapper基本使用和常见场景示例详解

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置（如匹配策略、转换器）,可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例：简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹
阅读更多...
SQLite3 在嵌入式C环境中存储音频/视频文件的最优方案

SQLite3 在嵌入式C环境中存储音频/视频文件的最优方案

《SQLite3在嵌入式C环境中存储音频/视频文件的最优方案》本文探讨了SQLite3在嵌入式C环境中存储音视频文件的优化方案,推荐采用文件路径存储结合元数据管理,兼顾效率与资源限制,小文件可使用B... 目录SQLite3 在嵌入式C环境中存储音频/视频文件的专业方案一、存储策略选择1. 直接存储 vs
阅读更多...
嵌入式数据库SQLite 3配置使用讲解

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置（1）、下载安装SQLite库（2）、解压下载的文件（3）、
阅读更多...
C++11作用域枚举(Scoped Enums)的实现示例

C++11作用域枚举(Scoped Enums)的实现示例

《C++11作用域枚举(ScopedEnums)的实现示例》枚举类型是一种非常实用的工具,C++11标准引入了作用域枚举,也称为强类型枚举,本文主要介绍了C++11作用域枚举(ScopedEnums... 目录一、引言二、传统枚举类型的局限性2.1 命名空间污染2.2 整型提升问题2.3 类型转换问题三、C
阅读更多...
Java实现自定义table宽高的示例代码

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格（JTable）作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2