②GUI Guider+Python，强强联手，关键在动手

NXP管管

GUI Guider+Python，强强联手，关键在动手

故事紧接上一篇《还在用C用LVGL画界面，何不试试Python (3)》，在上一篇的结尾，我们说了在使用小工具转换GUI Guider所生成的源代码，还有一些小的注意事项，限于篇幅，小编只是大致说了一下如何规避。


本篇中，小编就为大家带来一篇彻底的解惑篇，详详细细的介绍解决方法（以下我们只说明MicroPython方式的调用）。

使用image控件

在使用image控件时，需要手动定义lv.img_dsc_t()变量。
那么什么是image控件呢，官方说明是，这是一个用于显示的基础对象，待显示内容可以是存放在flash中的数组变量，也可以是存储在外部的图像文件。同时image模块还支持显示symbol。定义在lv.SYMBOL中，以供使用。
要注意的是，如果是特殊的图片格式，用户需要自定义解码函数，并以函数指针的方式提供给LVGL内部使用。
使用方式：

1. # 文件系统获取二进制图片
   
2. img_data = open("your_path/image_name.txt").read()
   
3. # image控件声明
   
4. img = lv.img(lv.scr_act())
   
5. # 设置对齐属性
   
6. img.align(lv.scr_act(), lv.ALIGN.CENTER, 0, 0)
   
7. # 声明img_dsc_t，表征图像属性
   
8. img_dsc = lv.img_dsc_t(
   
9.     {
   
10.         # 图像header，图像宽，高，颜色格式，always_zero是特殊占位符
    
11.          # 值要设为0
    
12.         "header": {"always_zero": 0, "w": 100, "h": 75, "cf": lv.img.CF.TRUE_COLOR},
    
13.         "data_size": len(img_data),
    
14.         "data": img_data,
    
15.     }
    
16. )
    
17. # 设置待显示图像到image控件
    
18. img.set_src(img_dsc)

复制代码

这里要特殊说明一下，只能采用字典的方式来声明img_dsc变量。

定义字体

在需要定义字体的场合，需要手动定义lv.font_t()变量。


关于字体这部分，由于小编使用的lv_mpy.c中没有包含特殊的字符库，因此小编建议大家直接使用lv. theme_get_font_normal ()来代替，例如：

1. style.set_text_font(lv.STATE.DEFAULT,lv. theme_get_font_normal())

复制代码

当你需要自动让某个变量的值在某个区间内变化，动画控件可以帮到你，这样一来，无需为控件注册特殊事件回调函数，就可以实现某种控件相关的动作。


使用方法：

1. def arc_anim(obj, value):
   
2.     print(value)
   
3.     arc.set_end_angle(value)
   
4.     label = arc.get_child(None)
   
5.     label.set_text("%d"%value)
   
6. 
   
7. anim = lv.anim_t()
   
8. anim.init()
   
9. anim.set_var(ui_screen_arc4)
   
10. # 配置动画处理函数
    
11. anim.set_custom_exec_cb(arc_anim)
    
12. anim.set_values(0, 360)
    
13. # 设置循环次数，这里设置为最大值，即一直循环
    
14. anim.set_repeat_count(0xffff)
    
15. # 这里要特殊注意，lvgl v7.0版本不能支持直接使用anim.start()
    
16. lv.anim_t.start(anim)

复制代码

这里我们定义了一个动画对象，对arc对象的值进行设置。

控件的callback

需要手动添加callback。


callback也叫回调函数，在这里，指的是满足控件的某种状态时才会被执行的函数。例如按钮按下，按钮点击之后要执行的动作，就需要通过callback函数实现。


当然，不同的控件类型所对应的事件状态也有所不同，我们以按钮控件为例，假设我们定义了一个叫做btn的按钮控件：


首先要定义回调函数：

1. def callback(obj = None,  event = -1):
   
2.     if event == lv.EVENT.CLICKED:
   
3.         print(obj, event)

复制代码

这样我们就定义了一个当点击按钮事件发生时，会将当前调用对象和事件类型打印出来的回调函数，是不是很简单，之后我们只需要再调用:
btn.set_event_cb(callback)
进行注册即可实现点击按钮打印相应信息的功能。

文本控件

文本控件也需要手动声明（lvgl默认文本绑定键盘，处理起来有些复杂）。


文本控件就不给大家科普了，它就是一个支持键盘输入的文本框。


因为GUI Guider默认文本控件和键盘控件是耦合在一起的，这就对程序处理上带来些许麻烦，可能就要麻烦大家多多辛苦，想要使用文本控件的话，要生生的手撕了。


使用说明：

1. keyboard = None
   
2. def keyboard_cb(obj=None, event=-1):
   
3.     global keyboard
   
4.     obj.def_event_cb(event)
   
5.     if(event == lv.EVENT.CANCEL) or (event == lv.EVENT.APPLY):
   
6.         obj.set_textarea(None)
   
7.         obj.delete()
   
8. 
   
9. def create_kb():
   
10.     # 选择默认时，为正常全键盘
    
11.     keyboard = lv.keyboard(lv.scr_act())
    
12.     # 普通数字键盘
    
13.     # keyboard.set_mode(keyboard.MODE.NUM)
    
14.     # 大写字母键盘
    
15.     # keyboard.set_mode(keyboard.MODE.TEXT_UPPER)
    
16.     # 小写字母键盘
    
17.     # keyboard.set_mode(keyboard.MODE.TEXT_LOWER)
    
18.     # 特殊符号键盘
    
19.     # keyboard.set_mode(keyboard.MODE.SPECIAL)
    
20.     keyboard.align(lv.scr_act(), lv.ALIGN.IN_TOP_LEFT, 0, 0)
    
21.     keyboard.set_event_cb(keyboard_cb)
    
22.     return keyboard
    
23. 
    
24. def text_cb(obj=None, event=-1):
    
25.     global keyboard
    
26.     # 点选文本控件时创建键盘控件
    
27.     if(event == lv.EVENT.RELEASED):
    
28.         if(keyboard == None):
    
29.             keyboard = create_kb()
    
30.         obj.set_cursor_hidden(False)
    
31.         keyboard.set_textarea(obj)
    
32.     # 没选中文本控件时，隐藏光标
    
33.     if(event == lv.EVENT.DEFOCUSED):
    
34.         obj.set_cursor_hidden(True)
    
35.    
    
36. text = lv.textarea(lv.scr_act())
    
37. text.align(lv.scr_act(), lv.ALIGN.IN_BOTTOM_LEFT, 0, 0)
    
38. text.set_drag(True)
    
39. text.set_event_cb(text_cb)

复制代码

这样我们就创建了一个文本控件，同时将键盘控件的创建放到文本控件的事件回调函数中，以达到在选中文本框后，能自动创建键盘对象以供输入。

使用日历控件

使用日历控件的时候，需要手动定义lv.calendata_data_t()变量，声明年月日。


日历控件，顾名思义，能够显示日历，而且可以说功能强大，包括：高亮当前天、高亮用户自定义日期，显示月份和星期，通过点击button还能切换当前和下一月，高亮选中天等。


日期的定义方法，目前来看有两种声明方法：


1，采用字典方式声明：

1. date = lv.calendar_date_t(
   
2. {
   
3.         “year” ：2021,
   
4.         “month”：4,
   
5.         “day”：28
   
6. })

复制代码

2，采用属性定义方法，类似于C中的结构体赋值：

1. date = lv.calendar_data_t()
   
2. date.year = 2021
   
3. date.month = 4
   
4. date.day = 28

复制代码

结束语

收尾结束，小编瞬间觉得轻松了很多。


今天小编为大家带来了还在用C用LVGL画界面，何不试试Python的第四篇，解决了第三篇文章最后的遗留问题，现在大家再遇到类似的问题，就可以直接参考文中的使用方法来定义/配置相应控件。


欢迎大家试用把玩，遇到什么问题或好的建议，请在文末给小编留言。

阅读全文

canooee

没个界面展示么

NXP管管

canooee 发表于 2021-5-13 16:51
没个界面展示么

且看上一个帖子，链接在此：https://www.nxpic.org.cn/module/forum/thread-622359-1-1.html

dsfsfefwef

转换小工具在哪里下载啊

NXP管管

dsfsfefwef 发表于 2021-6-15 15:37
转换小工具在哪里下载啊

GUIGuider这个软件吗？

dsfsfefwef

NXP管管 发表于 2021-6-15 16:05
GUIGuider这个软件吗？

c的UI转mpy的工具，我最近也在玩mpy开发lvgl

dsfsfefwef

lvgl 官方也在做自己的UI设计器，今天发布的0.3测试版本已经可以支持C或micropython代码导出了

NXP管管

dsfsfefwef 发表于 2021-6-16 13:45
lvgl 官方也在做自己的UI设计器，今天发布的0.3测试版本已经可以支持C或micropython代码导出了 ...

可以可以