LVGL学习笔记 | 01 - LVGL PC模拟器初体验

一、LVGL

LVGL官网:https://lvgl.io/

LVGL全称Light and Versatile Graphics Library,轻量化和多功能的图形库,遵循MIT开源许可协议,具有以下特性(what LVGL can do for you)。

LVGL学习笔记 | 01 - LVGL PC模拟器初体验

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:
LVGL学习笔记 | 01 - LVGL PC模拟器初体验

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目录下:
LVGL学习笔记 | 01 - LVGL PC模拟器初体验
执行即可看到效果:

./demo

LVGL学习笔记 | 01 - LVGL PC模拟器初体验
LVGL学习笔记 | 01 - LVGL PC模拟器初体验
LVGL学习笔记 | 01 - LVGL PC模拟器初体验
(5)更换示例

在main.c中可以选择不同的demo:
LVGL学习笔记 | 01 - LVGL PC模拟器初体验
比如这里我选择lv_demo_music的示例,重新编译运行:

LVGL学习笔记 | 01 - LVGL PC模拟器初体验
这个界面也太好看了吧~

三、一个简单的示例

在 main.c 中选择 lv_example_switch_1 这个最简单的示例,运行看看效果:
LVGL学习笔记 | 01 - LVGL PC模拟器初体验
再来看看其示例代码:
LVGL学习笔记 | 01 - LVGL PC模拟器初体验
可以看到基于lvgl实现界面的代码还算简洁,这些API后续再深入学习。

上一篇:vuex练习demo-todos


下一篇:java 小Demo练手