GUI Guider+Python，强强联手

NXP管管

GUI Guider+Python，强强联手

经过前两篇文章的忽悠介绍，相信大家已经蠢蠢欲动，打算马上着手移植一套LVGL+MP玩儿玩儿了。

当然了，如果换作小编的话，听说了这么好玩儿的东西，肯定会马上放下电话那头的客户，先来他一套代码尝尝。
不过呢，小编今天还是要请大家先等等，因为今天小编还将为大家带来另一份神秘大礼。小编拍胸脯保证，绝对不会让大家失望。

设计师的烦恼

如果之前接触/使用过LVGL的朋友们，可能有这么一个大大的烦恼，就是LVGL不像桌面电脑的Qt那样，有一个辅助的GUI设计工具，当我们想放置或者说设计一个控件的时候，需要不断地调整其配置参数，才能达到我们满意的效果。而且，往往添加一个控件可不是简简单单一行代码就OK的。
如果只是单单的控件添加，我们一般还是可以应付的。但是，往往事情并不是我们想象的那样简单，我们还需要围绕这一个控件做很多事情，比如加个label，加点style属性等，这么一来，可能我们的草稿纸都不够画的了。可以说，LVGL的确好用，就是开发起复杂GUI来，有一丢丢的小麻烦。

开发神器降临

就在这时，一缕阳光照了进来，为方便设计开发，恩智浦为LVGL开发了一套上位机GUI设计工具--GUIGuider（详见《GUI Guider为LVGL装上翅膀，加速开发》一文），让用户可以通过拖拽的方式轻松设计GUI界面，让广大用户如虎添翼，享受设计，加速开发流程。
用户所设计的GUI，最终会被转换成C语言源代码，方便整合到MCU项目中。同时集成了上位机仿真器，即便不连接板子，也能提前尝鲜我们自己设计的GUI。

看到这里，可能大家会有点疑问，这一切仿佛和我们今天要讲的没太大关系，因为小编说了何不试试Python，怎么说来说去又说到C了。莫慌，小编这就开始开门见山。

没错，尽管有了GUI Guider这款神器，但只能转换出C语言，并不能为我们所用，似乎和我们强调的用Python去开发界面没啥太大关系。

小编还是不卖关子了，考虑到GUI Guider的强大，小编最近手写了一套可以实现将GUI Guider转换出的C代码，再转换为Python代码的小程序，就赶紧来和大家分享了。有了它，我们就可以让GUI Guider为我们所用，哈哈哈。

此处小编就不向大家哭诉开发过程了，想要尝鲜的朋友们，可以从这里下载。

操作入门1-2-3

此款神器使用方法如下：

首先请大家参照《GUI Guider为LVGL装上翅膀，加速开发》安装GUI guider，以下操作与文中略有不同，请大家按以下步骤操作。

1，开启GUI Guider，创建一个新项目：
   a.输入项目名称
   b.点选BOARD TEMPLATES然后选择Simulator
   c.点选APPLICATION TEMPLATES然后选择emptyDemo，
   d.COLOR DEPTH选择16bit，SIZE根据大家的需要设置
   e.点选CREATE

2，此时用户就可以在这块空的画布上修改，拖拽自己喜欢的控件，开发GUI了

在完成GUI设计之后，点击“Generate Code”产生LVGL的C代码，此处小编就为了省事儿，分别弄一个button，一个日历，一个roller，一个tab上去，可能有点丑，还请大家见谅：

3，生成了代码之后，不要急着导出

因为此时是Simulator模式，不支持代码导出，依次点选Code Viewer并选择setup_screen.c：

4，将代码全部复制粘贴到程序下载路径

并保存为gui_guider.txt，双击运行parse_lvgl_c.cpython-35.pyc，转换出的python代码将会保存在gui_guider_py.py中。

以下是代码对比部分，这是C代码的一部分：

1. //Write codes screen
   
2.         ui->screen = lv_obj_create(NULL, NULL);
   
3. 
   
4.         //Write codes screen_btn0
   
5.         ui->screen_btn0 = lv_btn_create(ui->screen, NULL);
   
6. 
   
7.         //Write style LV_BTN_PART_MAIN for screen_btn0
   
8.         static lv_style_t style_screen_btn0_main;
   
9.         lv_style_init(&style_screen_btn0_main);
   
10. 
    
11.         //Write style state: LV_STATE_DEFAULT for style_screen_btn0_main
    
12.         lv_style_set_radius(&style_screen_btn0_main, LV_STATE_DEFAULT, 50);
    
13.         lv_style_set_bg_color(&style_screen_btn0_main, LV_STATE_DEFAULT, lv_color_make(0xff, 0xff, 0xff));
    
14.         lv_style_set_bg_grad_color(&style_screen_btn0_main, LV_STATE_DEFAULT, lv_color_make(0xff, 0xff, 0xff));
    
15.         lv_style_set_bg_grad_dir(&style_screen_btn0_main, LV_STATE_DEFAULT, LV_GRAD_DIR_VER);
    
16.         lv_style_set_bg_opa(&style_screen_btn0_main, LV_STATE_DEFAULT, 255);
    
17.         lv_style_set_border_color(&style_screen_btn0_main, LV_STATE_DEFAULT, lv_color_make(0x01, 0xa2, 0xb1));
    
18.         lv_style_set_border_width(&style_screen_btn0_main, LV_STATE_DEFAULT, 2);
    
19.         lv_style_set_border_opa(&style_screen_btn0_main, LV_STATE_DEFAULT, 255);
    
20.         lv_style_set_outline_color(&style_screen_btn0_main, LV_STATE_DEFAULT, lv_color_make(0xd4, 0xd7, 0xd9));

复制代码

这是对应转换出的Python代码的一部分：

1. import lvgl as lv
   
2. lv.init()
   
3. scr = lv.obj()
   
4. ui_screen_btn0 = lv.btn(lv.scr_act(), None)
   
5. style_screen_btn0_main = lv.style_t()
   
6. style_screen_btn0_main.init()
   
7. style_screen_btn0_main.set_radius(lv.STATE.DEFAULT, 50)
   
8. style_screen_btn0_main.set_bg_color(lv.STATE.DEFAULT, lv.color_make(0xff, 0xff, 0xff))
   
9. style_screen_btn0_main.set_bg_grad_color(lv.STATE.DEFAULT, lv.color_make(0xff, 0xff, 0xff))
   
10. style_screen_btn0_main.set_bg_grad_dir(lv.STATE.DEFAULT, lv.GRAD_DIR.VER)
    
11. style_screen_btn0_main.set_bg_opa(lv.STATE.DEFAULT, 255)
    
12. style_screen_btn0_main.set_border_color(lv.STATE.DEFAULT, lv.color_make(0x01, 0xa2, 0xb1))
    
13. style_screen_btn0_main.set_border_width(lv.STATE.DEFAULT, 2)
    
14. style_screen_btn0_main.set_border_opa(lv.STATE.DEFAULT, 255)
    
15. style_screen_btn0_main.set_outline_color(lv.STATE.DEFAULT, lv.color_make(0xd4, 0xd7, 0xd9)

复制代码

是不是Python代码看起来清爽了很多呢？是不是想马上拥有了？那就让我们马上来看看运行效果。


5，运行方式有两种选择


如果是绑定了openMV的MicroPython版本，可以直接复制到openMV IDE中运行。
如果是采用REPL的形式，也可以直接粘贴到REPL命令行，或是保存到MicroPython的文件系统中，实现上电运行
因为小编的LVGL+MicroPython的绑定是基于openART工程的，这里采用的是openMV IDE的形式运行。
实际运行效果：

我们在GUI Builder上绘制的GUI：

一切都是那样的美好！
不过，小编也不能打保证小程序能转换所有的代码，目前来看由于种种限制问题，这个小小转换程序还有一些难以解决的小小问题，在使用时候还要大家注意。
6，注意事项
（也可以在read_me.txt中查看，或是生成的代码头部也能看到）：
a.代码仅包括GUI构建部分，buffer分配，显示以及触摸屏的驱动绑定部分需要手动操作
b.在使用image控件时，需要手动定义lv.img_dsc_t()变量
c.需要设置字体的场合，需要手动定义lv.font_t()变量
d.不支持插入/使用动画效果
e.不支持控件的callback，需要手动添加
f.不支持文本控件，需要手动声明（lvgl默认文本绑定键盘，处理起来有些复杂）
g.使用日历控件的时候，需要手动定义lv.calendata_data_t()变量，声明年月日


目前小编暂时发现了这些限制，在遇到这些问题时，会以注释的方式体现在python中，用户可以据此修改。

Let's GO


对于想利用Python开发LVGL的朋友们，不妨试下，因为小程序刚刚出炉，如果大家在使用时候发现了哪些不便，或是有新的小bug，也希望大家能够多多提出宝贵意见。
以上就是小编今天给大家带来的利用GUI Guider来构建GUI，并转换成对应的Python格式。

阅读全文

SquallBest

学习一下py

胤幻1988

因吹斯汀~

xiaoshen-372360

学习一下py

jobszheng5

现在硬件资源丰富的情况下，使用python也不是不可能的了

canooee

python慢慢吃开了啊，但是现在不知道用python写的多不多

shaoziyang

啥时有MP+LVGL活动啊，先报个名

tobot

python啊，我感觉我又行了。。。

TLLED

学习了            

graphicalanalys

学习了