LittleVGL

简介

• LittlevGL是一个免费的开源图形库，提供了创建嵌入式GUI所需的一切，具有易于使用的图形元素、漂亮的视觉效果和低内存占用。
• 目前官方的LittleVGL只支持C语言和MicroPython两种开发语言，合宙在保留了官方接口的同时，推出了支持Lua语言的LittleVGL版本，方便开发者使用Lua语言在Air724U系列模块中开发图形界面。

---

控件API说明

API接口	描述
lvgl.init()	lvgl初始化
lvgl.cont_create()	创建容器
lvgl.img_create()	创建image控件
lvgl.canvas_create()	创建画布控件
lvgl.btn_create()	创建按键控件
lvgl.arc_create()	创建加载器控件
lvgl.page_create()	创建page控件
lvgl.label_create()	创建标签控件
lvgl.slider_create()	创建滑动条控件
lvgl.sw_create()	创建开关条控件

详细的使用介绍见Lua版本LittleVGL开发介绍

实现流程

lua版本的littlevgl继承了C语言版本的大部分接口，既能满足嵌入式UI界面开发，又能减少内存使用，详细的接口介绍可以参考《官方文档API部分》，中文翻译版本LVGL中文手册.pdf，只要将其中的lv_或者LV_开头去掉，换成lvgl.开头就可以直接使用，例如：

//button创建c接口
lv_obj_t *lv_btn_create(lv_obj_t *par, constlv_obj_t *copy)
//button创建Lua接口
lv_obj_t lvgl.btn_create(par, copy)

以其中按钮创建为例：

//C语言
void lv_ex_btn_1(void)
{lv_obj_t * label;lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL);lv_obj_set_event_cb(btn1, event_handler);lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, -40);label = lv_label_create(btn1, NULL);lv_label_set_text(label, "Button");lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);lv_obj_set_event_cb(btn2, event_handler);lv_obj_align(btn2, NULL, LV_ALIGN_CENTER, 0, 40);lv_btn_set_toggle(btn2, true);lv_btn_toggle(btn2);lv_btn_set_fit2(btn2, LV_FIT_NONE, LV_FIT_TIGHT);label = lv_label_create(btn2, NULL);lv_label_set_text(label, "Toggled");
}

--Lua语言
function lv_ex_btn_1()act_src = lvgl.scr_act()btn1 = lv.btn_create(act_src, nil)lvgl.obj_set_event_cb(btn1, event_handler)lvgl.obj_align(btn1, nil, LVGL.ALIGN_CENTER, 0, -40)label = lvgl.label_create(btn1, nil)lvgl.label_set_text(label, "Button")btn2 = lvgl.btn_create(act_src, nil)lvgl.obj_set_event_cb(btn2, event_handler)lvgl.obj_align(btn2, nil, lvgl.ALIGN_CENTER, 0, 40)lvgl.btn_set_toggle(btn2, true)lvgl.btn_toggle(btn2)lvgl.btn_set_fit2(btn2, lvgl.FIT_NONE, lvgl.FIT_TIGHT)label = lvgl.label_create(btn2, nil)lvgl.label_set_text(label, "Toggled")
end

示例

image控件

image空间主要用来存放已经导入lua的图片资源文件，对应代码在demo\lvgl\widget.lua文件

local function empty()--创建容器（非必需）c = lvgl.cont_create(nil, nil)--创建image控件img = lvgl.img_create(c, nil)--设置image文件lvgl.img_set_src(img, "/lua/logo.png")--设置显示位置lvgl.obj_align(img, nil, lvgl.ALIGN_CENTER, 0, 0)--显示容器lvgl.disp_load_scr(c)
end

显示效果如下：

Canvas控件

Canvas（画布）控件类似于image控件，用户可以在这个控件上画任何内容、包括绘制图片、绘制线条、绘制文字等。lua中用该控件显示了二维码。

function create()--创建容器（非必需）scr = lvgl.cont_create(nil, nil)--创建画布控件cv = lvgl.canvas_create(scr, nil)lvgl.canvas_set_buffer(cv, 100, 100)lvgl.obj_align(cv, nil, lvgl.ALIGN_CENTER, 0, 0)layer_id = lvgl.canvas_to_disp_layer(cv)--设置当前画布的图层disp.setactlayer(layer_id)--根据数据生成二维码width, data = qrencode.encode('http://www.openluat.com')l_w, l_h = disp.getlayerinfo()displayWidth = 100--设置二维码显示位置disp.putqrcode(data, width, displayWidth, (l_w-displayWidth)/2, (l_h-displayWidth)/2)--显示画布图层disp.update()return scr
end

显示效果如下：

button控件

button控件比较好理解，可以相应用户在屏幕上的按下操作，并做出相应动作

function create()scr = lvgl.cont_create(nil, nil)style = lvgl.style_t()lvgl.style_copy(style, lvgl.style_plain)style.line.color = lvgl.color_hex(0x800000)style.line.width = 4btn = lvgl.btn_create(scr, nil)btn_label = lvgl.label_create(btn, nil)lvgl.label_set_text(btn_label, "按钮")lvgl.obj_align(btn, nil, lvgl.ALIGN_CENTER, 0, 40)lvgl.obj_set_size(btn, 60, 60)return scr
end

显示效果如下：

Arc控件（加载器）

加载器用一个圆圈的来表示一个任务的处理进程，处理完成后圆圈便完整显示出来

function create()scr = lvgl.cont_create(nil, nil)style = lvgl.style_t()lvgl.style_copy(style, lvgl.style_plain)style.line.color = lvgl.color_hex(0x800000)style.line.width = 4arc = lvgl.arc_create(scr, nil)lvgl.arc_set_style(arc, lvgl.ARC_STYLE_MAIN, style)lvgl.arc_set_angles(arc, 180, 180)lvgl.obj_set_size(arc, 40, 40)lvgl.obj_align(arc, nil, lvgl.ALIGN_CENTER, -30, -30)arc_label = lvgl.label_create(scr, nil)lvgl.label_set_text(arc_label, "加载器")lvgl.obj_align(arc_label, arc, lvgl.ALIGN_OUT_RIGHT_MID, 4, 0)sys.timerLoopStart(arc_loader, 100)return scr
end

显示效果如下：

page控件

page控件本身是一个容器，可以设置这个容器的大小，容器内部也可以放置其他的子控件。并且随着page的增大减小，page根据里面的内容来决定是否可以滑动显示

function create()black = lvgl.color_make(0, 0, 0)white = lvgl.color_make(0xff, 0xff, 0xff)scr = lvgl.cont_create(nil, nil)style_sb = lvgl.style_t()style_sb.body.main_color = blackstyle_sb.body.grad_color = blackstyle_sb.body.border.color = whitestyle_sb.body.border.width = 1style_sb.body.border.opa = lvgl.OPA_70style_sb.body.radius = lvgl.RADIUS_CIRCLEstyle_sb.body.opa = lvgl.OPA_60style_sb.body.padding.right = 3style_sb.body.padding.bottom = 3style_sb.body.padding.inner = 8page = lvgl.page_create(scr, nil)lvgl.obj_set_size(page, 100, 150)lvgl.obj_align(page, nil, lvgl.ALIGN_CENTER, 0, 0)lvgl.page_set_style(page, lvgl.PAGE_STYLE_SB, style_sb)return scr
end

显示效果如下：

label控件

标签控件一般用来显示一段文字，也可以显示多行文字

function create()...label = lvgl.label_create(page, nil)lvgl.label_set_long_mode(label, lvgl.LABEL_LONG_BREAK)lvgl.obj_set_width(label, lvgl.page_get_fit_width(page))lvgl.label_set_recolor(label, true)lvgl.label_set_text(label, [[Air722UGAir724UG行1行2行3]])-- lvgl.disp_load_scr(scr)return scr
end

显示效果如下：

Slider控件

滑动条类似进度条，但本身滑动条上有一个圈可以根据需要进行拖动。

function create()scr = lvgl.cont_create(nil, nil)style_bg = lvgl.style_t()style_indic = lvgl.style_t()style_knob = lvgl.style_t()lvgl.style_copy(style_bg, lvgl.style_pretty)style_bg.body.main_color = lvgl.color_hex(0x00ff00)style_bg.body.grad_color = lvgl.color_hex(0x000080)style_bg.body.radius = lvgl.RADIUS_CIRCLEstyle_bg.body.border.color = lvgl.color_hex(0xffffff)lvgl.style_copy(style_indic, lvgl.style_pretty_color)style_indic.body.radius = lvgl.RADIUS_CIRCLEstyle_indic.body.shadow.width = 8style_indic.body.shadow.color = style_indic.body.main_colorstyle_indic.body.padding.left = 3style_indic.body.padding.right = 3style_indic.body.padding.top = 3style_indic.body.padding.bottom = 3lvgl.style_copy(style_knob, lvgl.style_pretty)style_knob.body.radius = lvgl.RADIUS_CIRCLEstyle_knob.body.opa = lvgl.OPA_70style_knob.body.padding.top = 10style_knob.body.padding.bottom = 10--创建滑动条slider = lvgl.slider_create(scr, nil)lvgl.obj_set_size(slider, 100, 20)lvgl.slider_set_style(slider, lvgl.SLIDER_STYLE_BG, style_bg)lvgl.slider_set_style(slider, lvgl.SLIDER_STYLE_INDIC, style_indic)lvgl.slider_set_style(slider, lvgl.SLIDER_STYLE_KNOB, style_knob)lvgl.obj_align(slider, nil, lvgl.ALIGN_CENTER, 0, 0)-- lvgl.disp_load_scr(scr)label = lvgl.label_create(scr, nil)lvgl.label_set_text(label, "滑动条")lvgl.obj_align(label, slider, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 0)return scr
end

显示效果如下：

switch控件

开关控件用来表示业务的状态开或者关。

function create()scr = lvgl.cont_create(nil, nil)...sw = lvgl.sw_create(scr, nil)lvgl.obj_align(sw, nil, lvgl.ALIGN_CENTER, 0, 0)lvgl.sw_set_style(sw, lvgl.SW_STYLE_BG, bg_style)lvgl.sw_set_style(sw, lvgl.SW_STYLE_INDIC, indic_style)lvgl.sw_set_style(sw, lvgl.SW_STYLE_KNOB_ON, knob_on_style)lvgl.sw_set_style(sw, lvgl.SW_STYLE_KNOB_OFF, knob_off_style)label = lvgl.label_create(scr, nil)lvgl.label_set_text(label, "开关")lvgl.obj_align(label, sw, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 2)sys.timerStart(sw_toggle, 1000, true)return scrend

显示效果如下：

常见问题

是否支持所有控件？

目前Lua版本的LittleVGL由于空间有限，并未支持所有控件，已支持的常用控件：
button,image button, image, label, page, container, list, checkbox, slider, window, switch, Arc, spinbox, Animations，

一款新屏，例如347D的屏能驱动吗？

目前 Air724 所有支持的屏幕驱动已经添加到了 demo\ui 路径下，可以先在 demo 中查看自己需要的屏幕驱动是否已经实现。
如果屏幕驱动未实现，但是屏幕接口属于spi，或者i2c，那么用户需要自己根据屏幕厂家提供的 datasheet 进行驱动编写了。
若在未支持的屏幕中驱动调试碰到问题，也可以将屏幕寄给我们进行驱动调试。

Air724有适配过比1.8寸更大的屏吗？

这个是跟分辨率相关的，和屏幕尺寸无关，Air724 支持的屏幕分辨率最大是 240*320，如果这个分辨率的屏大于 1.8寸，同样也是可以驱动的。

LVGL 支持显示的图片格式有哪些？

目前LVGL支持显示的格式有 jpg, bmp, png。由于目前电脑端的图片查看处理软件相对智能，是依靠图片本身的文件数据结构判断文件格式并显示的，所以标注为 png 后缀的图片可能文件本身并不是 png 格式。所以如果图片在电脑端显示正常，但是无法通过 Air724 显示，需要确认图片本身格式是否与标注一致。

LVGL 支持透明图片显示吗？

LVGL支持透明图片显示。由于 jpg 和 bmp 格式本身是不支持透明背景的。所以如果显示图片的透明像素，请将格式转换为 png， 并通过 LVGL 官网转化为 bin 文件格式。
https://lvgl.io/tools/imageconverter

---

相关资料以及购买链接

Lua版本LittleVGL开发介绍

相关开发板购买链接
Air724UG开发板
Air724 开发板使用说明

Luat 功能开发教程(十六) LittleVGL相关推荐

1. Luat 功能开发教程(十八) 阿里云

   目录 阿里云 简介 API说明 实现流程 示例 阿里云操作 产品操作 设备操作 其他说明 LUAT方式连接概述 一机一密LUAT方式连接 一型一密LUAT方式连接 发布消息 订阅消息 OTA升级 常见 ...

2. Luat 功能开发教程(十三) 生成二维码

   目录 二维码 API说明 实现流程 示例 生成二维码 显示二维码 扫码 常见问题 为什么烧录了生成二维码的demo以后运行会报错 相关资料以及购买链接 二维码 二维条码/二维码(2-dimension ...

3. Luat 功能开发教程(七) 基站 WIFI定位

   目录 基站/WIFI定位 简介 API说明 实现流程 示例 常见问题 1. 如何在网站上查询小区对应的位置信息? 2. wifi定位失败的可能原因有哪些? 3. 基站定位获取的经纬度是什么格式的? 相 ...

4. 【Visual C++】游戏开发四十八 浅墨DirectX教程十六 三维地形系统的实现

   分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本系列文 ...

5. 【Visual C++】游戏开发四十八 浅墨DirectX教程十六 三维地形系统的实现

   本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/zhmxy555/article/details/8685546 作者:毛星云(浅墨) ...

6. EnjoyingSoft之Mule ESB开发教程第六篇：Data Transform - 数据转换

   目录 1. 数据转换概念 2. 数据智能感知 - DataSense 3. 简单数据转换组件 3.1 Object to JSON 3.2 JSON to XML 3.3 JSON to Object ...

7. Senparc.Weixin.MP SDK 微信公众平台开发教程（六）：了解MessageHandler

   原文地址为: Senparc.Weixin.MP SDK 微信公众平台开发教程(六):了解MessageHandler 上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程( ...

8. ArcGIS Maritime Server 开发教程（六）Maritime Service 开发技巧

   ArcGIS Maritime Server 开发教程(六)Maritime Service 开发技巧 本章导读:GIS 开发人员基于 Maritime Service 开发海图应用时总会遇到与海图数 ...

9. S3C2416裸机开发系列十六_sd卡驱动实现

   S3C2416裸机开发系列十六 sd卡驱动实现 象棋小子    1048272975 SD卡(Secure Digital Memory Card)具有体积小.容量大.数据传输快.可插拔.安全性好等优 ...

最新文章

1. 区块链技术如何改变我们对DNA的看法
2. GDCM：读取gdcm::DataSetHelper的测试程序
3. MongoDB Driver：使用正确的姿势连接复制集
4. pos加盟申请php_ThinkPHP万能表单程序源码 报名预约加盟申请调查表单程序源码
5. SharePoint at .NET技术大会
6. letsencrypt 自动续期不关闭nginx
7. 未捕获的异常 'NSInternalInconsistencyException'
8. 用t430搭建虚拟服务器教程,T430完美使用VmWare
9. mysql 锁定表_MySQL表锁定
10. cesium 文本标注被遮挡_Cesium-知识点（Viewer）
11. python -- 判断给定的参数是否是地理位置的经度和纬度
12. 刚入职就写了个bug，把几万用户搞蓝屏了···
13. DOS命令行界面打开文件
14. Flume1.6.0之Error-protobuf-This is supposed to be overridden by subclasses
15. 网站seo运营中如何精确预测热门搜索关键词？
16. 法语语法学习笔记——代词（2）
17. c51单片机汇编语言1秒延时,51单片机汇编延时程序算法详解
18. CentOS7安装squid代理服务器
19. C\C ++语言 文件备份实验
20. 年轻人宣言：青春符号

热门文章

1. 第二篇supervisor集群管理工具cesi安装详解-如何安装supervisor-cesiwebUI
2. 发送消息(SendMessage)常识普及
3. JavaScript函数和BOM及DOM编程（详细总结-无尿点）
4. 如何注册和申请阿里云域名？
5. 干货知识：高清监控怎么选配交换机
6. java 怎么写异步方法_java如何学习异步编程?
7. 服务器如何接收GPS定位器发送过来的数据
8. 某广告SDK流量加解密-响应
9. DLL中无法定位程序输入点inflateReset2于动态链接库
10. 浏览器主页被2345拦截