一、LVGL
LVGL官网:https://lvgl.io/。
LVGL全称Light and Versatile Graphics Library,轻量化和多功能的图形库,遵循MIT开源许可协议,具有以下特性(what LVGL can do for you)。
1. 对硬件的要求
- CPU:16、32、64位
- 主频:推荐16 MHz
- Flash/ROM空间: > 64 kB (推荐180 kB)
- RAM空间: 8 kB (推荐24 kB)
- 1 Frame buffer(显存):在内部SRAM和外部RAM均可
- 显存大小至少要大于水平像素点(推荐1/10屏幕大小)
- C99语法
2. 功能特性
- 控件:支持30多种控件
- 显示设备:支持任意分辨率屏幕
- 输入设备:在同一个屏幕上支持多个输入设备
3. 在线demo
官方提供了丰富的demo在线演示,https://lvgl.io/demos,如下是一个打印机界面的demo:
4. 入门教程和文档
官方提供了基于多种开发板的入门教程:https://lvgl.io/developers,NXP、STM32、ESP32等等。
LVGL的教程和文档:https://docs.lvgl.io/。
韦东山老师提供了LVGL中文文档,非常丰富:http://lvgl.100ask.net
二、PC模拟器
LVGL支持多种模拟器,如下:
- Eclipse with SDL driver: Recommended on Linux and Mac
- CodeBlocks: Recommended on Windows
- VisualStudio with SDL driver: For Windows
- VSCode with SDL driver: Recommended on Linux and Mac
- PlatformIO with SDL driver: Recommended on Linux and Mac
那必然选在Linux上用VSCode,照着仓库readme文档直接开搞。
仓库地址:Simulator project for LVGL embedded GUI Library。
(1)需求
- gcc
- gdm
- make
- vscode
(2)安装 SDL
可以从官网下载(https://www.libsdl.org/),也可以直接安装(我使用的阿里源):
sudo apt-get update
sudo apt-get install -y build-essential libsdl2-dev
(3)拉取源码
git clone --recursive https://github.com/lvgl/lv_sim_vscode_sdl
(4)编译源码
下载完成之后进入源码目录,使用VScode打开(自带工作区):
code .
然后直接编译:
make
编译完成后,可执行文件在build/bin
目录下:
执行即可看到效果:
./demo
(5)更换示例
在main.c中可以选择不同的demo:
比如这里我选择lv_demo_music
的示例,重新编译运行:
这个界面也太好看了吧~
三、一个简单的示例
在 main.c 中选择 lv_example_switch_1 这个最简单的示例,运行看看效果:
再来看看其示例代码:
可以看到基于lvgl实现界面的代码还算简洁,这些API后续再深入学习。