一看就会的Cat.1图形开发——合宙创新Lua版LVGL

Posted 2021-04-10 合宙Luat

LVGL（Light and Versatile Graphics Library）是一个免费的开源图形库——提供了创建嵌入式GUI所需的一切，具有易于使用的图形元素、精美的视觉效果和低内存占用。

目前官方的LVGL只支持C语言和MicroPython两种开发语言，合宙在保留了官方接口的同时，推出了支持Lua语言的LVGL版本，方便开发者使用Lua语言在Air724U系列模块中开发图形界面。

本文将简要介绍如何用Lua版本的LVGL来做UI界面开发。

1

开发准备工作

---

Lua版本的LVGL继承了C语言版本的大部分接口，既能满足嵌入式UI界面开发，又能减少内存使用。

详细接口介绍可参考LVGL官方文档API部分：

https://docs.lvgl.io/v6/en/html/overview/index.html

- Lua版LVGL开发相关准备 -

1. LuaTools开发工具下载

http://doc.openluat.com/wiki/3?wiki_page_id=695

2. Lua版本LVGL固件

https://gitee.com/openLuat/Luat_Lua_Air724U

3. Air724U开发板【合宙商城有售】

http://m.openluat.com/product/1264

4. LCD显示屏【合宙商城有售】

http://m.openluat.com/product/122

5. 其他配件：4G天线、USB数据线

2

运行官方示例

---

使用Luatools工具，下载core文件和Lua工程目录中的lib和相应demo文件即可运行。

官方固件支持图片显示和简单的button控件，没有按键和触摸屏的处理逻辑；采用定时器方式切换界面。交互逻辑用户可以通过驱动按键或者触摸屏自行添加。

2.1  core文件

https://gitee.com/openLuat/Luat_Lua_Air724U/tree/master/core

2.2  demo文件

https://gitee.com/openLuat/Luat_Lua_Air724U/tree/master/demo

2.3  效果演示

Play

注：目前Lua版本的LittleVGL由于空间有限，并未支持所有控件，已支持的常用控件包括：

button, image button, image, label, page, container, list, checkbox, slider, window, switch, Arc, spinbox, Animations

各种控件的使用和参考代码，可参考LVGL官方的控件介绍文档：

https://docs.lvgl.io/v6/en/html/object-types/index.html#

3

Lua版LVGL例程代码

---

利用Lua LVGL实现的例程代码，可通过合宙码云开源平台Luat_Lua_Air724U获取：

https://gitee.com/openLuat/Luat_Lua_Air724U

完整的 demolvgl 完成了LVGL支持的所有常用控件的列举，通过窗口切换来完成展示。

具体代码和显示效果如下：

3.1  Image控件

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

1. local function empty()

2.    --创建容器（非必需）

3.    c = lvgl.cont_create(nil, nil)

4.    --创建image控件

5.    img = lvgl.img_create(c, nil)

6.    --设置image文件

7.    lvgl.img_set_src(img, "/lua/logo.png")

8.    --设置显示位置

9.    lvgl.obj_align(img, nil, lvgl.ALIGN_CENTER, 0, 0)

10.    --显示容器

11.    lvgl.disp_load_scr(c)

12. end

3.2  Canvas控件

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

Lua中用该控件显示了二维码。

1. function create()

2.    --创建容器（非必需）

3.    scr = lvgl.cont_create(nil, nil)

4.    --创建画布控件

5.    cv = lvgl.canvas_create(scr, nil)

6.    lvgl.canvas_set_buffer(cv, 100, 100)

7.    lvgl.obj_align(cv, nil, lvgl.ALIGN_CENTER, 0, 0)

8.    layer_id = lvgl.canvas_to_disp_layer(cv)

9.    --设置当前画布的图层

10.    disp.setactlayer(layer_id)

11.    --根据数据生成二维码

12.    width, data = qrencode.encode('http://www.openluat.com')

13.    l_w, l_h = disp.getlayerinfo()

14.    displayWidth = 100

15.    --设置二维码显示位置

16.    disp.putqrcode(data, width, displayWidth, (l_w-displayWidth)/2, (l_h-displayWidth)/2)

17.    --显示画布图层

18.    disp.update()

19.    return scr

20. end

3.3  Button控件

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

1. function create()

2.    scr = lvgl.cont_create(nil, nil)

3.    style = lvgl.style_t()

4.    lvgl.style_copy(style, lvgl.style_plain)

5.    style.line.color = lvgl.color_hex(0x800000)

6.    style.line.width = 4

7.    btn = lvgl.btn_create(scr, nil)

8.    btn_label = lvgl.label_create(btn, nil)

9.    lvgl.label_set_text(btn_label, "按钮")

10.    lvgl.obj_align(btn, nil, lvgl.ALIGN_CENTER, 0, 40)

11.    lvgl.obj_set_size(btn, 60, 60)

12.    return scr

13. end

3.4  Arc控件（加载器）

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

1. function create()

2.    scr = lvgl.cont_create(nil, nil)

3.    style = lvgl.style_t()

4.    lvgl.style_copy(style, lvgl.style_plain)

5.    style.line.color = lvgl.color_hex(0x800000)

6.    style.line.width = 4

7.    arc = lvgl.arc_create(scr, nil)

8.    lvgl.arc_set_style(arc, lvgl.ARC_STYLE_MAIN, style)

9.    lvgl.arc_set_angles(arc, 180, 180)

10.    lvgl.obj_set_size(arc, 40, 40)

11.    lvgl.obj_align(arc, nil, lvgl.ALIGN_CENTER, -30, -30)

12.    arc_label = lvgl.label_create(scr, nil)

13.    lvgl.label_set_text(arc_label, "加载器")

14.    lvgl.obj_align(arc_label, arc, lvgl.ALIGN_OUT_RIGHT_MID, 4, 0)

15.    sys.timerLoopStart(arc_loader, 100)

16.    return scr

17. end

3.5  Page控件

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

1. function create()

2.    black = lvgl.color_make(0, 0, 0)

3.    white = lvgl.color_make(0xff, 0xff, 0xff)

4.    scr = lvgl.cont_create(nil, nil)

5.    style_sb = lvgl.style_t()

6.    style_sb.body.main_color = black

7.    style_sb.body.grad_color = black

8.    style_sb.body.border.color = white

9.    style_sb.body.border.width = 1

10.    style_sb.body.border.opa = lvgl.OPA_70

11.    style_sb.body.radius = lvgl.RADIUS_CIRCLE

12.    style_sb.body.opa = lvgl.OPA_60

13.    style_sb.body.padding.right = 3

14.    style_sb.body.padding.bottom = 3

15.    style_sb.body.padding.inner = 8

16.    page = lvgl.page_create(scr, nil)

17.    lvgl.obj_set_size(page, 100, 150)

18.    lvgl.obj_align(page, nil, lvgl.ALIGN_CENTER, 0, 0)

19.    lvgl.page_set_style(page, lvgl.PAGE_STYLE_SB, style_sb)

20.    return scr

21. end

3.6  Label控件

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

1. function create()

2.    ...

3.    label = lvgl.label_create(page, nil)

4.    lvgl.label_set_long_mode(label, lvgl.LABEL_LONG_BREAK)

5.    lvgl.obj_set_width(label, lvgl.page_get_fit_width(page))

6.    lvgl.label_set_recolor(label, true)

7.    lvgl.label_set_text(label, [[

8.        Air722UG

9.        Air724UG

10.        行1

11.        行2

12.        行3]])

13.    -- lvgl.disp_load_scr(scr)

14.    return scr

15. end

3.7  Slider控件

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

点击代码，上下滑动查看更多：

1. function create()

2.    scr = lvgl.cont_create(nil, nil)

3.    style_bg = lvgl.style_t()

4.    style_indic = lvgl.style_t()

5.    style_knob = lvgl.style_t()

6.    lvgl.style_copy(style_bg, lvgl.style_pretty)

7.    style_bg.body.main_color = lvgl.color_hex(0x00ff00)

8.    style_bg.body.grad_color = lvgl.color_hex(0x000080)

9.    style_bg.body.radius = lvgl.RADIUS_CIRCLE

10.    style_bg.body.border.color = lvgl.color_hex(0xffffff)

11.    lvgl.style_copy(style_indic, lvgl.style_pretty_color)

12.    style_indic.body.radius = lvgl.RADIUS_CIRCLE

13.    style_indic.body.shadow.width = 8

14.    style_indic.body.shadow.color = style_indic.body.main_color

15.    style_indic.body.padding.left = 3

16.    style_indic.body.padding.right = 3

17.    style_indic.body.padding.top = 3

18.    style_indic.body.padding.bottom = 3

19.    lvgl.style_copy(style_knob, lvgl.style_pretty)

20.    style_knob.body.radius = lvgl.RADIUS_CIRCLE

21.    style_knob.body.opa = lvgl.OPA_70

22.    style_knob.body.padding.top = 10

23.    style_knob.body.padding.bottom = 10

24.    --创建滑动条

25.    slider = lvgl.slider_create(scr, nil)

26.    lvgl.obj_set_size(slider, 100, 20)

27.    lvgl.slider_set_style(slider, lvgl.SLIDER_STYLE_BG, style_bg)

28.    lvgl.slider_set_style(slider, lvgl.SLIDER_STYLE_INDIC, style_indic)

29.    lvgl.slider_set_style(slider, lvgl.SLIDER_STYLE_KNOB, style_knob)

30.    lvgl.obj_align(slider, nil, lvgl.ALIGN_CENTER, 0, 0)

31.    -- lvgl.disp_load_scr(scr)

32.    label = lvgl.label_create(scr, nil)

33.    lvgl.label_set_text(label, "滑动条")

34.    lvgl.obj_align(label, slider, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 0)

35.    return scr

36. end

3.8  Switch控件

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

1. function create()

2.    scr = lvgl.cont_create(nil, nil)

3.    ...

4.    sw = lvgl.sw_create(scr, nil)

5.    lvgl.obj_align(sw, nil, lvgl.ALIGN_CENTER, 0, 0)

6.    lvgl.sw_set_style(sw, lvgl.SW_STYLE_BG, bg_style)

7.    lvgl.sw_set_style(sw, lvgl.SW_STYLE_INDIC, indic_style)

8.    lvgl.sw_set_style(sw, lvgl.SW_STYLE_KNOB_ON, knob_on_style)

9.    lvgl.sw_set_style(sw, lvgl.SW_STYLE_KNOB_OFF, knob_off_style)

10.    label = lvgl.label_create(scr, nil)

11.    lvgl.label_set_text(label, "开关")

12.    lvgl.obj_align(label, sw, lvgl.ALIGN_OUT_BOTTOM_MID, 0, 2)

13.    sys.timerStart(sw_toggle, 1000, true)

14.    return scr

15. end

扫码了解Lua版LVGL开发更多内容

内容持续更新中

http://doc.openluat.com/article/1246/0

- 欢迎加入Luat 社区 -

社区账户与ERP系统通用

Lua教程 | 模块资料 | 问答系统 | 工具下载 | 经验分享

关注合宙Luat微信视频号

开启更多精彩

- 合宙Luat官方视频号 -