Luat 功能开发教程(十六) LittleVGL

最新推荐文章于 2024-06-04 18:12:33 发布
最新推荐文章于 2024-06-04 18:12:33 发布
阅读量10w+ 收藏 5
点赞数
分类专栏： Lua 功能开发教程 文章标签： lua
原文链接：https://doc.openluat.com/wiki/21?wiki_page_id=1971
版权

目录

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

显示效果如下：
image.png

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

显示效果如下：
image.png

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 = 4
    
    btn = 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

显示效果如下：
image.png

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 = 4

    arc = 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

显示效果如下：
image.png

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 = black
    style_sb.body.grad_color = black
    style_sb.body.border.color = white
    style_sb.body.border.width = 1
    style_sb.body.border.opa = lvgl.OPA_70
    style_sb.body.radius = lvgl.RADIUS_CIRCLE
    style_sb.body.opa = lvgl.OPA_60
    style_sb.body.padding.right = 3
    style_sb.body.padding.bottom = 3
    style_sb.body.padding.inner = 8

    page = 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

显示效果如下：
image.png

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, [[
    	Air722UG
    	Air724UG
    	行1
    	行2
    	行3]])
    -- lvgl.disp_load_scr(scr)
    return scr
end

显示效果如下：
image.png

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_CIRCLE
    style_bg.body.border.color = lvgl.color_hex(0xffffff)

    lvgl.style_copy(style_indic, lvgl.style_pretty_color)
    style_indic.body.radius = lvgl.RADIUS_CIRCLE
    style_indic.body.shadow.width = 8
    style_indic.body.shadow.color = style_indic.body.main_color
    style_indic.body.padding.left = 3
    style_indic.body.padding.right = 3
    style_indic.body.padding.top = 3
    style_indic.body.padding.bottom = 3

    lvgl.style_copy(style_knob, lvgl.style_pretty)
    style_knob.body.radius = lvgl.RADIUS_CIRCLE
    style_knob.body.opa = lvgl.OPA_70
    style_knob.body.padding.top = 10
    style_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

显示效果如下：
image.png

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 scr

end

显示效果如下：
image.png

常见问题

是否支持所有控件？

目前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

file-read-6032.png

相关资料以及购买链接

Lua版本LittleVGL开发介绍

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

曲振
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LVGL canvas的详细分析
bai915290475的博客
04-12 678
LVGL的canvas小部件是一个简单而强大的组件，它允许在一个小部件上绘制像素级的内容。这通常用于自定义图形和文本，或者作为更复杂图形元素的基础。Canvas小部件提供了一个缓冲区，可以在其中绘制任何您想要的内容。
LVGL库入门教程 - 颜色和图像
qq_45562973的博客
06-24 8388
在 LVGL 中，颜色以结构 表示。在最开始移植整个工程时，曾经在 中修改过颜色深度： LVGL 会自动根据所选的颜色深度创建合适的颜色结构。在接下来几处位置还有几个与颜色有关的配置选项，可以参照注释修改。例如，16 位 big-endian 的颜色定义为： 那么就可以根据该结构创建合适的颜色值了： 直接创建 RGB565 的颜色格式有点难以调色，不过可以借用以下函数从十六位颜色中生成合适的颜色值： 这些颜色在创建时，每种颜色通道的值都使用 0~255 表示即可，创建过程中会自动转换为合适的颜色值。LV
LVGL学习笔记 22 - 画布Canvas
pq的博客
03-15 5591
Canvas 继承自Image，用户可以在其中绘制任何内容。由lv_canvas_create创建。画布需要先分配足够空间的缓冲区来存储绘制的图像buffer必须是一个静态缓冲区，大小是(lv_img_cf_get_px_size(cf) * w) / 8 * h)，可以通过lv_mem_alloc()分配或静态数组或RAM(SRAM)的地址。w,h是画布的长宽cf是画布的图像格式此时由于buffer中的数据是全0，显示出来的就是黑色方块。所以，对画布的操作其实是对buffer的处理。
合宙Air724UG LuatOS-Air LVGL API控件--按钮 (Button)
l531798151的博客
08-28 1293
按钮控件继承自容器，可以使用设置容器特有的一些属性，比如 fit 这部分可以参考容器的使用，这部分就不在这里展开了，这里可以看看效果，lvgl.FIT_TIGHT 就是扩展到最大，我们现在可以创建一个按钮，让它横向填充满屏幕。简单看，一个按钮就三种状态，正常，按下，禁用。addBtn(100 , “BTN_STATE_CHECKED_PRESSED”) – 切换按钮 按下。addBtn(150 , “BTN_STATE_CHECKED_DISABLED”) – 切换按钮 禁用。
LittleVGL
qq_45803449的博客
12-25 1707
笔记博文
【Lua-lvgl】3.容器cont
qq_38091632的博客
01-27 2280
基于lua语言，lvgl cont使用
Luat_脚本开发指南V2.81 .pdf
06-11
luat脚本开发指南，详细说明了luat的API和使用注意事项， 可用于合宙luat网络的开发参考
Luat 脚本开发指南V2.81
08-03
第 1 页共 52 页上海合宙通信科技有限公司Luat 脚本开发指南 V2.7第 2 页共 52 页上海合宙通信科技有限公司合宙开源 OpenLuat QQ 讨
luat开发语言定位系统程序
05-02
c 语言开发程序包，可以定位系统》》。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...
luat软件驱动
12-17
Luat = Lua + AT, Luat推出的物联网开源架构，依托于通信模块做简易快捷的开发，将传统的AT命令用Lua语言封装成API，并提供各种功能应用的demo，大大减少用户的开发成本。包含luat的软件驱动，程序更新，下载，驱动...
Luat 4G模块AT命令手册V4.2.8.pdf
04-05
Luat 4G模块AT命令手册V4.2.8 适应 Air720 Air723 Air724系列模块
LittlevGL UI 移植
03-01
这个，如果下载后有图片不显示， 这个，如果下载后有图片不显示， littevGL移植得教程，说实话就是有点占内存，其他还是比较炫酷 littevGL移植得教程，说实话就是有点占内存，其他还是比较炫酷
基于stm32和GUI的指南针程序
03-27
本程序是基于战舰的基础程序框架写的指南针程序，里面有温湿度传感器程序，气压传感器程序。程序清楚好看懂
LittelvGL使用教程
12-31
LittelvGL使用中文教程 https://github.com/littlevgl/lvgl/issues/125
使用Air724模块设计全功能DTU
咸鱼钟的博客
11-10 5531
使用Air724模块设计全功能DTU 目前物联网开发中，4G模块的使用方式有几下几种： MCU连接4G模块，使用串口通讯，MCU通过AT指令控制数据收发； 4G模块通过USB连接到ARM等系统，通过RNDS或者PPP拨号上网。 4G模块支持二次开发，直接在模块片上开发应用。 方案1适合各类低配MCU，对系统要求低，但是AT指令解析繁琐，效率低速度慢。 方案2适合带有USB和有运行系统的设备，比如ARM+linux。 方案3只适合支持二次开发的模块，而且一般4G模块受硬件限制，外设或功能受限。 合宙724
LVGL学习笔记9 - 标签Label
pq的博客
12-31 5680
显示字符串是通过对象Label实现的。Label的Parts只有LV_LABEL_PART_MAIN。标签通过lv_label_create创建。
从繁琐到自由：Lua+LVGL 重塑嵌入式 GUI 学习体验
最新发布
m0_62192766的博客
06-04 365
在与 C 语言开发 LVGL 的传统路径对比之下，LuaLVGL-Simulator 以它的简洁性、易用性和前瞻性的设计，为 GUI 开发的学习者铺就了一条更为平滑的道路。它不仅解决了学习过程中遇到的实际问题，更是激发了初学者的创造力和探索欲，让每一个对 GUI 开发感兴趣的人都能轻松启航，畅游在图形界面设计的无限可能之中。GitCode - 全球开发者的开源社区,开源代码托管平台。
lvgl-标签学习篇(四)
weixin_41080308的博客
01-10 2515
通过本篇文章对lvgl的标签控件有了进一步了解
littlevgl教程 Linux,树莓派littlevGL系列教程：画布控件(lv_canvas)
weixin_39891317的博客
05-02 693
如上图，我们就通过画布控件轻松的画出我们微雪课堂的logo了，当然这个logo的图片内容是通过littlevGL的在线工具生成的C语言数组，所以本节课程会多一个文件，当然在文章的最后大家是可以下载的，那么我们先来看一下代码吧：三 代码分析用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程...
Luat esp32
07-28
然后，您可以通过在ESP32上安装Luat的固件或者使用Luat提供的开发套件来进行开发和调试。 Luat提供了一系列的API和库函数，方便您在ESP32上进行网络通信、文件操作、定时器控制、硬件访问等操作。您可以根据自己的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值