嵌入式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。

相关文章

ESP32 esp-idf esp-adf环境安装及.a库创建与编译

ESP32 esp-idf esp-adf环境安装及.a库创建与编译

简介 ESP32 功能丰富的 Wi-Fi & 蓝牙 MCU, 适用于多样的物联网应用。使用freertos操作系统。 ESP-IDF 官方物联网开发框架。 ESP-ADF 官方音频开发框架。 文档参照 https://espressif-docs.readthedocs-hosted.com/projects/esp-adf/zh-cn/latest/get-started/index
阅读更多...
UnrealScriptIDE调试环境部署

UnrealScriptIDE调试环境部署

先安装vs2010   再安装VSIsoShell.exe， 下载地址 https://pan.baidu.com/s/10kPNUuDGTbWXbz7Nos-1WA       fd3t   最后安装unside，下载地址 https://archive.codeplex.com/?p=uside  安装中间有一步选择Binary文件夹要选对路径。   安装好以后，启动 UDKDe
阅读更多...
详细分析Springmvc中的@ModelAttribute基本知识（附Demo）

详细分析Springmvc中的@ModelAttribute基本知识（附Demo）

目录 前言1. 注解用法1.1 方法参数1.2 方法1.3 类 2. 注解场景2.1 表单参数2.2 AJAX请求2.3 文件上传 3. 实战4. 总结 前言 将请求参数绑定到模型对象上，或者在请求处理之前添加模型属性 可以在方法参数、方法或者类上使用 一般适用这几种场景： 表单处理：通过 @ModelAttribute 将表单数据绑定到模型对象上预处理逻辑：在请求处理之前
阅读更多...
eclipse运行springboot项目，找不到主类

eclipse运行springboot项目，找不到主类

解决办法尝试了很多种，下载sts压缩包行不通。最后解决办法如图： help--->Eclipse Marketplace--->Popular--->找到Spring Tools 3---->Installed。
阅读更多...
22.手绘Spring DI运行时序图

22.手绘Spring DI运行时序图

1.依赖注入发生的时间 当Spring loC容器完成了 Bean定义资源的定位、载入和解析注册以后,loC容器中已经管理类Bean 定义的相关数据，但是此时loC容器还没有对所管理的Bean进行依赖注入，依赖注入在以下两种情况 发生： 、用户第一次调用getBean()方法时，loC容器触发依赖注入。 、当用户在配置文件中将＜bean＞元素配置了 lazy-init二false属性,即让
阅读更多...
21.手绘Spring IOC运行时序图

21.手绘Spring IOC运行时序图

1.再谈IOC与 DI IOC(lnversion of Control)控制反转：所谓控制反转，就是把原先我们代码里面需要实现的对象创 建、依赖的代码，反转给容器来帮忙实现。那么必然的我们需要创建一个容器，同时需要一种描述来让 容器知道需要创建的对象与对象的关系。这个描述最具体表现就是我们所看到的配置文件。 DI(Dependency Injection)依赖注入:就是指对象是被动接受依赖类
阅读更多...
问题-windows-VPN不正确关闭导致网页打不开

问题-windows-VPN不正确关闭导致网页打不开

为什么会发生这类事情呢？ 主要原因是关机之前vpn没有关掉导致的。 至于为什么没关掉vpn会导致网页打不开，我猜测是因为vpn建立的链接没被更改。 正确关掉vpn的时候，会把ip链接断掉，如果你不正确关掉，ip链接没有断掉，此时你vpn又是没启动的，没有域名解析，所以就打不开网站。 你可以在打不开网页的时候，把vpn打开，你会发现网络又可以登录了。 方法一 注意：方法一虽然方便，但是可能会有
阅读更多...
Windows/macOS/Linux 安装 Redis 和 Redis Desktop Manager 可视化工具

Windows/macOS/Linux 安装 Redis 和 Redis Desktop Manager 可视化工具

本文所有安装都在macOS High Sierra 10.13.4进行，Windows安装相对容易些，Linux安装与macOS类似，文中会做区分讲解 1. Redis安装 1.下载Redis https://redis.io/download 把下载的源码更名为redis-4.0.9-source，我喜欢跟maven、Tomcat放在一起，就放到/Users/zhan/Documents
阅读更多...
java中查看函数运行时间和cpu运行时间

java中查看函数运行时间和cpu运行时间

android开发调查性能问题中有一个现象，函数的运行时间远低于cpu执行时间，因为函数运行期间线程可能包含等待操作。native层可以查看实际的cpu执行时间和函数执行时间。在java中如何实现？ 借助AI得到了答案 import java.lang.management.ManagementFactory;import java.lang.management.Threa
阅读更多...
Eclipse+ADT与Android Studio开发的区别

Eclipse+ADT与Android Studio开发的区别

下文的EA指Eclipse+ADT,AS就是指Android Studio。 就编写界面布局来说AS可以边开发边预览（所见即所得,以及多个屏幕预览），这个优势比较大。AS运行时占的内存比EA的要小。AS创建项目时要创建gradle项目框架，so,创建项目时AS比较慢。android studio基于gradle构建项目，你无法同时集中管理和维护多个项目的源码，而eclipse ADT可以同时打开
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2