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

news2024/9/25 5:21:00

文章目录

    • 一、前言
    • 二、资料收集
    • 三、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 --verbose

wsl --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目前觉得还是一件很酷的事情，还是能激发我的研究热情的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1701204.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python数据分析-心脏病（随机森林预测分析）

Python数据分析-心脏病（随机森林预测分析）

本次案例分析用心脏病数据集来做随机森林模型预测 导入基本的数据分析包 import pandas as pd import numpy as np from sklearn.model_selection import train_test_split from sklearn.ensemble import RandomForestClassifier from sklearn.metrics import accuracy_score…
阅读更多...
云计算-关系型数据库（Relational Database）

云计算-关系型数据库（Relational Database）

关系数据库服务（RDS）（Relational Database Service (RDS)） Amazon RDS 可用于在云中设置和运行关系数据库。它支持多种数据库实例类型以及多个数据库引擎，如 Amazon Aurora、PostgreSQL、MySQL、MariaDB、Oracle 数据库…
阅读更多...
基于Vue的应届毕业生财务管理系统-计算机毕业设计源码82886

基于Vue的应届毕业生财务管理系统-计算机毕业设计源码82886

摘 要 随着互联网大趋势的到来，社会的方方面面，各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去，而其中最好的方式就是建立网络管理系统，并对其进行信息管理。由于现在网络的发达，应届毕业生财务…
阅读更多...
c# sqlite使用

c# sqlite使用

安装包 使用 const string strconn "Data Sourcedata.db"; using (SQLiteConnection conn new SQLiteConnection(strconn)) {conn.Open();var cmd conn.CreateCommand();//创建表cmd.CommandText "create table t1(id int,name varchar(10))";var obj…
阅读更多...
二百三十八、Hive——Hive中为每条数据创建唯一ID

二百三十八、Hive——Hive中为每条数据创建唯一ID

一、目的 由于Kafka的JSON中缺少唯一的ID标识字段，因此发现后面的需求中DWD层表需要有一个唯一ID字段，这样才能与数据质量表更好的关联 二、Hive版本 尚硅谷的3.1.2版本 三、Hive创建唯一ID方法 网上的创建唯一ID方法有很多，这里展示一些…
阅读更多...
子网划分，交换机原理与配置

子网划分，交换机原理与配置

子网划分 IP地址 IPv4由32位二进制数组成，一般用点分十进制来表示 IPv4是由32位二进制数组成，分成四组,第组八位。例如:11000000.10101000.00000000.00000010 为了便于配置通常表示成点分十进制形式例如:192.168.0.2 255.255.255.0 IPv6由128位组成&…
阅读更多...
HDR视频相关标准-HDR vivid（二）

HDR视频相关标准-HDR vivid（二）

上文介绍了HDRvivid的一些技术。今天从全局角度来看看HDR视频的处理流程，HDR视频系统，即建立一个比SDR视频更大的色彩/亮度坐标体系，并改变系统的传输函数，以再现更大的色域(WCG)和更高的亮度动态范围。 菁彩 HDR技术的专业术语 …
阅读更多...
充电宝哪个牌子好用？充电宝品牌怎么选？充电宝最好的牌子排名

充电宝哪个牌子好用？充电宝品牌怎么选？充电宝最好的牌子排名

现在市面上的充电宝品牌琳琅满目，但并不是所有的充电宝都安全可靠。据央视的一个报道，市面上有35%充电宝质量是不过关的!充电宝买不对就非常容易出现爆炸的一个情况，所以大家对选充电宝不仅能保障设备的安全。那么，充电宝哪个牌子…
阅读更多...
TypeScript学习日志-第三十二天（infer关键字）

TypeScript学习日志-第三十二天（infer关键字）

infer关键字 一、作用与使用 infer 的作用就是推导泛型参数，infer 声明只能出现在 extends 子语句中，使用如下： 可以看出 已经推导出类型是 User 了 二、协变 infer 的 协变会返回联合类型，如图： 三、逆变 infer…
阅读更多...
FusionCharts 隐藏试用图标

FusionCharts 隐藏试用图标

1、找到fusioncharts.js文件 2、搜索“raphael-group-” 3、找到此处进行替换黄线部分 将："a.setAttribute("class","raphael-group-"t)" 替换成"(a.setAttribute("class","raphael-group-"t),a.setAttr…
阅读更多...
基于 Wireshark 分析 TCP 协议

基于 Wireshark 分析 TCP 协议

一、TCP 协议 TCP（Transmission Control Protocol）是一种面向连接的、可靠的传输层协议。它在网络通信中扮演着重要的角色，用于保证数据的可靠传输。 TCP协议的特点如下： 1. 面向连接：在通信前需要先建立连接&#x…
阅读更多...
学习Uni-app开发小程序Day26

学习Uni-app开发小程序Day26

这一章学习的内容细节较多，主要是分为：首次加载减少网络消耗、获取图片的详细信息、图片的评分和避免重复评分、将图片下载到本地并且获取设备的授权 加载图片减少网络消耗 这里突出这个功能，是根据老师视频上的描述，个人觉得很…
阅读更多...
如何彻底搞懂组合（Composite）设计模式？

如何彻底搞懂组合（Composite）设计模式？

当我们在设计系统对象关系时，有时候会碰到这样一种场景，一个对象中包含了另一组对象，两者构成一种”部分-整体”的关联关系。 正如上图中所展示的，当我们面对这样一种对象关系时，通常都需要分别构建单独的访问方式&…
阅读更多...
11.Redis之zset类型

11.Redis之zset类型

1.zset类型基本介绍 有序描述的是：升序/降序 Set 集合 1.唯一 2. 无序 孙行者,行者孙, 者行孙 >同一只猴~~ List有序的 孙行者,行者孙, 者行孙 >不同的猴~~ zset 中的 member 仍然要求是唯一的!!(score 则可以重复) 排序的规则是啥? 给 zset 中的 member 同…
阅读更多...
太狠了，凌晨5点面试。。

太狠了，凌晨5点面试。。

(关注数据结构和算法，了解更多新知识) 网上看到一网友发文说收到面试邀请，面试时间竟然是早晨5点，这是要猝死的节奏。有的网友说应该是下午 5 点，如果是下午 5 点直接写下午 5 点就行了，或者写 17 点也行，直…
阅读更多...
中医理疗元宇宙 科技赋能中医药产业走向国际市场

中医理疗元宇宙 科技赋能中医药产业走向国际市场

基于380亿参数量，对中医药海量文本进行数据训练，实现方剂优化、机制阐释和新适应症的精准发现……日前在天津召开的数智赋能大健康产业新质生产力暨第四届中医药国际发展大会上，由天士力医药集团与华为云共同开发的“数智本草”中医药大模型正…
阅读更多...
【再探】设计模式—职责链模式、命令模式及迭代器模式

【再探】设计模式—职责链模式、命令模式及迭代器模式

行为型设计模式研究系统在运行时对象之间的交互，进一步明确对象的职责。有职责链模式、命令模式、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式、策略模式、模板方法模式及访问模式共11种。 1 职责链模式 需求：1) 请求能被多…
阅读更多...
自动驾驶中的“ImageNet”？CVPR2024新作OccFeat：BEV 自监督预训练

自动驾驶中的“ImageNet”？CVPR2024新作OccFeat：BEV 自监督预训练

论文标题： OccFeat: Self-supervised Occupancy Feature Prediction for Pretraining BEV Segmentation Networks 论文作者： Sophia Sirko-Galouchenko, Alexandre Boulch, Spyros Gidaris, Andrei Bursuc, Antonin Vobecky, Patrick Prez, Renaud Ma…
阅读更多...
Nginx实战（安装部署、常用命令、反向代理、负载均衡、动静分离）

Nginx实战（安装部署、常用命令、反向代理、负载均衡、动静分离）

文章目录 1. nginx安装部署1.1 windows安装包1.2 linux-源码编译1.3 linux-docker安装 2. nginx介绍2.1 简介2.2 常用命令2.3 nginx运行原理2.3.1 mater和worker2.3.3 Nginx 的工作原理 2.4 nginx的基本配置文件2.4.1 location指令说明 3. nginx案例3.1 nginx-反向代理案例013.…
阅读更多...
紧固件松动的危害及原因——SunTorque智能扭矩系统

紧固件松动的危害及原因——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 紧固件松动，这一看似微小的机械问题，实际上可能引发一系列严重的后果。在机械设备中，紧固件扮演着至关重要的角色，它们通过紧固作用将各个部件紧密连接在一起，…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023