LVGL前台程序开发相关操作

13.4.4 实现Modbus RTU读操作

要使用libmodbus操作Modbus RTU传感器，需要做的事情有2个：

创建modbus_t：调用“modbus_new_rtu”、“modbus_connect”

调用“modbus_read_”、“modbus_write_”开头的函数

对于多个“点”，它们可能使用同一个“modbus_t”。所以需要先判断：如果已经有了对应的“modbus_t”，就无法再次创建。

以“读点”为例，代码在“modbus_client.c”里，如下：

其中“get_modbus_ctx”函数如下：

13.4.5 实现Modbus RTU写操作

代码在“modbus_client.c”里，如下：

13.4.6 实现Modbus TCP操作

Modbus TCP的操作跟Modbus RTU的操作时同一套代码，在如下函数中根据port_info确定是创建什么类型的 modbus_t结构体：

13.4.7 实现OTA升级

传感器升级设计各个传感器内部的实现，后台程序（控制中心）只是给出了接口。

前台程序在如下界面中，把如下信息：固件文件名、设置的端口信息、升级哪个设备，发送给后台程序（控制中心）：

发送的信息存为如下结构体：

然后使用如下函数发起RPC调用：

后台程序（控制中心）对应的代码如下：

在实现真正的传感器升级时，前台程序要知道升级进度，它可以调用如下函数发出RPC请求：

后台程序（控制中心）对应的代码如下：

13.5 LVGL前台程序开发

源码为：

我们要解析的代码基本都在这个文件里：

“demo_lv_modbus_toollv_100ask_modbus_toolsrclv_modbus_tool.c”。

13.5.1 程序流程

LVGL前台程序的源码里，关键点有两个：

如何布局、创建各类控件

它们的回调函数

1.布局的重要概念

布局、创建控件时，有一个“parent”的概念。可以认为“parent”是一个“容器”，在上面可以继续创建各个控件。

比如下图中，控件1对应绿色背景的区域，控件2对应大红框的区域，控件1、控件2都是在同一个“parent”上创建处理的。这个“parent”是整个屏幕区域。

对于控件1，它也可以作为“parent”，在它上面有可以继续创建按钮：“+”按钮、“Upgrade”按钮、“MQTT Setting”按钮：

对于控件2，它也可以作为“parent”，在它上面有可以继续创建各类控件：

表示一个点时，界面如下。它本身又可以作为一个 parent，在里面继续绘制各类控件：

2.控件的回调函数

当我们点击某个按钮时，会有对应的函数被调用，这就是它的回调函数。在回调函数里，我们可以弹出对话框，可以使用RPC读写传感器。

3.main函数

main函数在“demo_lv_modbus_toolmain.c”中，代码如下：

13.5.2 使用屏幕和鼠标

LVGL对基于Framebuffer的屏幕、鼠标的支持很完善，只需要提供设备节点即可。代码如下：

13.5.3 创建初始界面

main函数里调用“lv_modbus_tool”，就开始创建界面了。它的代码在“demo_lv_modbus_toollv_100ask_modbus_toolsrclv_modbus_tool.c”中。

1.第1个区域的创建

第1个区域指：

第1步：以整个屏幕为parent，创建出控件1。

第2步：以控件1为parent，创建出左边的3个控件。

代码如下：

2.第2个区域的创建

第2个区域指：

代码如下：

3.“点”的创建

LVGL前台程序运行时，会使用RPC调用获得点的信息。对于每个点，都会创建出类似下面的控件：

代码如下：

add_new_item函数是核心代码，单独讲解。

13.5.4 add_new_item函数解析

1.代码里层级的注释

add_new_item函数里，创建了多层控件。在代码的注释里，怎么体现这些一层又一层的嵌套关系呢？使用类似“[0]、[1]”表示第1层，使用“[1-0]、[1-1]”表示第2层。

在使用“add_new_item”函数创建如下控件时，理解了注释里的数字，更容易理解代码：

最底层，表示“点”的整个区域，它没有数字注释。比如下面的cont2_x，它对应下图红框的区域（忽略里面的内容）：

cont2_x作为parent，作为底层，在上面创建了4个“child”。这些“child”的代码注释是“[0]、[1]、[2]、[3]”，如下：

“[0]”对应的控件：

“[1]”对应的控件：

“[1-0]”对应的控件：

2.代码分析

add_new_item函数非常庞大，把源码和图案进行对比，才容易理解。

第1步，划分区域得到cont2_x，如下：

第2步，在cont2_x里继续划分，得到cont2_x_1，如下：

第3步，在cont2_x_1里添加按钮、复选框，代码如下：

以后的操作是类似的，不再赘述。