LVGL学习笔记（3）——搭建环境、模拟仿真（Linux+VS Code）

一、LVGL简介

LVGL（Light and Versatile Graphics Library）轻量级通用型图形库，是一个免费的开源图形库，提供了创建嵌入式 GUI 所需的一切，具有易于使用的组件，美观的视觉效果和低内存占用等特点。支持触摸屏操作，移植简单方便，开发者一直在不断完善更新。

特点：

• 丰富且强大的模块化图形组件：按钮 (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格式

• LVGL官网：https://lvgl.io
• 官方文档：https://docs.lvgl.io/master/intro/index.html
• Github仓库：https://github.com/lvgl/lvgl
• 国内码云仓库：https://gitee.com/mirrors/lvgl
• 正点原子教程：http://www.openedv.com/docs/book-videos/zdyzshipin/4free/littleVGL.html

二、搭建环境

2.1 安装VMware Workstation

官网下载：https://customerconnect.vmware.com/en/downloads/info/slug/desktop_end_user_computing/vmware_workstation_pro/16_0
百度网盘：https://pan.baidu.com/s/1oN7H81GV0g6cD9zsydg6vg 提取码：mrn9

2.1.1 安装VMware Tools

• 解决办法：安装VMware Tools显示灰色正确解决办法
• 解决办法：VMware 安装 VMware tools出现“正在进行简易安装时，无法手动启动VMware tools安装”提示

2.2 安装Ubuntu 16.04

阿里云镜像：http://mirrors.aliyun.com/ubuntu-releases/
百度网盘：https://pan.baidu.com/s/1LzE--l-5k7PLQWhIp-ktBw 提取码：347p

2.3 安装VS Code

• 浏览器打开官网 Visual Studio Code - Code Editing. Redefined

• 下载安装 Linux Ubuntu 版本
  

  
  
  
  

• 进入 /usr/share/applications 目录中，把VScode复制到桌面
  

2.3.1 安装VS Code插件

• 安装中文包
  搜索 chinese，点击 install 安装。
  “Ctrl+Shift+P”组合键以显示“命令面板”，然后键入“display”以筛选并显示“Configure Display Language”命令。按“Enter”，然后会按区域设置显示安装中文，重启软件。
  
• 安装C/C++插件
  

2.4 安装SDL

sudo apt-get update
sudo apt-get install -y build-essential libsdl2-dev

在执行上一步 sudo apt-get update 时，下载速度过慢

• 解决办法：关于在ubuntu平台下使用apt-get命令下载速度太慢的问题解决

2.5 下载LVGL的CodeBlocks模拟器源码

Github仓库：https://github.com/lvgl/lv_sim_vscode_sdl

2.5.1 拉取源码

git clone --recursive https://github.com/lvgl/lv_sim_vscode_sdl

2.5.2 拉取子模块

cd ~/lvgl/lv_sim_vscode_sdl
git submodule update --init --recursive

拉取失败或者速度慢，可以在以下网址下载：

• lv_examples库下载：https://github.com/lvgl/lv_examples.git 并解压到上图lv_examples文件夹中
  

• lvgl_drivers库下载：https://github.com/lvgl/lv_drivers.git 并解压到lvgl_drives文件夹中
  

• lvgl库下载：https://github.com/lvgl/lvgl.git 并解压到lvgl文件夹中
  

三、模拟仿真

• 进入 lvgl_vscode_sdl 目录

 cd lvgl_vscode_sdl/

• 使用VS Code打开

code .

• 编译运行（F5）

• 编译错误，gcc 版本的原因

Building project file: lv_examples/src/lv_demo_widgets/lv_demo_widgets.c
gcc: error: unrecognized command line option ‘-Wshift-negative-value’
Makefile:44: recipe for target 'build/obj/lv_examples/src/lv_demo_widgets/lv_demo_widgets.o' failed
make: *** [build/obj/lv_examples/src/lv_demo_widgets/lv_demo_widgets.o] Error 1
The terminal process "/bin/bash '-c', 'make'" failed to launch (exit code: 2).

打开顶层 Makefile 文件，删除WARNINGS部分代码

• 重新编译运行（F5）

  
  

• 查看效果：

  
  

---

• 由 Leung 写于 2022 年 3 月 2 日

• 参考：LVGL学习笔记 | 01 - LVGL PC模拟器初体验
　　　　1、LVGL —— Ubuntu20环境建立vscode模拟器
　　　　LVGL模拟器