# 4. 综合案例1：温度采集终端
本章开始将介绍一些使用 AWStudio 开发的 AWFlow+AWTK 低代码应用的综合案例，帮助读者加深对 AWFlow Designer + AWTK Designer MVVM 开发模式的理解。
# 4.1 案例介绍
本章介绍的综合案例为温度采集终端（FlowZwsIot-Demo），它业务逻辑流图和界面如图所示，主要功能如下：
- 使用 RS485 接口 ModbusRTU 协议通信，定时采集温湿度变送器的温度值、湿度值（测量温度、测量湿度），将其显示到主界面并上传到云端；
- 定时产生一个随机温度值（室内温度），将其显示到主界面并上传到云端；
- 点击"设置"按钮进入"设置界面"，在编辑框中输入温度值（设定温度），点击"确定"按钮，将其显示到主界面并上传到云端。
# 4.2 准备工作
# 4.2.1 硬件设备
本案例中用到的硬件设备主要有 显控一体机 和 温湿度变送器 ，它们与上一章Modbus案例中使用的为同样的设备，详情可以查看 3.1 章节。
# 4.2.2 ZWS云
在案例介绍中，我们提到需要将温度值数据上传到云端，这里的云端指的是 ZLG 物联网云平台——ZWS云 (opens new window)，因此我们需要注册一个 ZWS 云平台的账号，并登录该平台添加云端设备，具体操作详见上文 3.2 章节。
本案例中我们需要上传以下数据，请参考 3.2 章节给云端设备添加对应的数据点：
- 温湿度变送器的测量温度，数据点字段名称为"temp"。
- 温湿度变送器的测量湿度，数据点字段名称为"humi"。
- 随机生成的室内温度，数据点字段名称为"indoor_temp"。
- 界面上的设定温度，数据点字段名称为"setting_temp"。
如果不需要将数据上传到云平台，可以跳过本章节。
# 4.3 温度采集终端流图实现
用 AWStudio 新建一个 AWFlow 项目，双击打开该项目，进入 AWFlow Designer 后，新建一张流图并编辑。
# 4.3.1 读取温湿度变送器数据
显控一体机与温湿度变送器之间使用 RS485 接口 ModbusRTU 协议通信，因此我们需要根据温湿度变送器的使用手册进行 Modbus 的配置，定时采集温湿度变送器的数据并缓存起来显示到程序界面上。
1. 配置 th_transmitter_in
如下图所示，将"节点列表"中的"th_transmitter_in"类型的节点拖到流图编辑区，设置如下：
- 设置"从机ID"属性为 1 ，此处为温湿度变送器的ID，可根据实际情况填写。
- 设置"温度寄存器地址"属性为 0 。
- 设置"湿度寄存器地址"属性为 1 。此处两个寄存器地址由温湿度变送器决定。
- 设置"输出周期"属性为 1000 ，每 1 秒输出一次读取数据。
- 点击"modbus配置参数"属性右边的编辑按钮，进入"modbus_master_rtu"节点的编辑。
此处使用的节点为该温湿度变送器专用，如果需要使用其他设备，请使用"modbus_master_in"节点与"modbus_data_in_convert"节点搭配实现modbus通信。
2. 配置 modbus 参数
点击编辑按钮进入 modbus_master_rtu 节点的编辑：
- 设置通信串口"端口"属性为"/dev/ttyZMP1"，这里填写的是设备与温湿度变送器连接后的串口驱动名称，读者请根据实际情况填写。
- 设置"波特率"为 9600，由温湿度变送器的通信协议规则决定。
- 设置"数据位"属性为"8bit"，由温湿度变送器的通信协议规则决定。
- 设置"校验位"属性为"none"，由温湿度变送器的通信协议规则决定。
- 设置"停止位"属性为"1bit"，由温湿度变送器的通信协议规则决定。
3.传递温湿度数据
使用两个fscript节点将温湿度赋值给 "msg.temp"、"msg.humi" ，作用是传递数据到云平台时可以使用该字段名直接传递，如下图所示：
4. 保存测量温湿度（用于AWTK访问）
上个步骤拿到了测量温度与测量湿度，接下来要将它们显示到界面上，因此我们要用锁存器保存它们，用于 AWTK 访问，将"节点列表"中"hold"类型的节点拖到流图编辑区，设置如下：
- 设置"名称"属性为"temp"与"humi"。
- 设置"显示名称"属性为"温度"与"湿度"。
- 设置需要保存的数据"Key"为上一个节点（fscript节点）传输过来的"temp"与"humi"。
# 4.3.2 生成随机温度值
本案例中的室内温度是随机生成的，我们只需借助"timer"类型的节点定时触发生成事件，并使用"random_number"类型的节点生成随机数即可，具体步骤详见下文。
1. 定时生成随机温度值
将"节点列表"中的"timer"与"random_number"类型的节点拖到流图编辑区，将两节点相连，设置定时器的定时周期为 1 秒，设置随机温度的取值范围为 0 - 36，如下图所示：
2. 传递温度数据
与读取数值一样，此处需要使用"fscript"节点将数据赋值给"msg.indoor_temp"以便后续传递上云使用，如下图所示：
3. 保存室内温度（用于AWTK访问）
与上文保存测量温度一样，此处也需要用锁存器将随机生成的室内温度保存起来，用 AWTK 访问，方便将其显示到界面上。如下图所示，将"节点列表"中"hold"类型的节点拖到流图编辑区，设置如下：
- 设置"名称"属性为"indoor_temperature"。
- 设置"显示名称"属性为"indoor_temperature"。
- 设置需要保存的数据"Key"为上一个节点（random_number节点）传输过来的"payload"。
# 4.3.3 响应界面的设定温度按键
在本案例中，只有当我们点击"设置界面"中的"确定"按钮，才会把编辑框中输入的温度值（设定温度）显示到主界面，因此我们需要在流图中添加一个界面事件的接收器（uiinput节点），用于界面的对应按键进行绑定。
1. 添加界面事件接收器
将"节点列表"中的"uiinput"类型的节点拖到流图编辑区，然后将节点的"名称"属性设置为"set_temp"和"显示名称"属性设置为"设置温度"，如下图所示：
2. 保存设定温度
如下图所示，将"节点列表"中"fscript"类型的节点拖到流图编辑区，设置如下：
- 设置节点"名称"属性和显示名称"Display Name"为"save_setting_temperature"。
- 切换到"Function"页面，添加保存脚本，代码如下：
/* msg.payload 为上一个节点传过来的字符串，解析后赋值给msg.setting_temp用于传递上云*/
var obj = command_args_to_object(msg.payload)
msg.setting = obj.temp;
/* 将设定的温度值保存到全局 global 对象中 */
global.setting_temp = obj.temp;
/* 通知界面更新 */
notify_view_props_changed();
如果需要设置初始值，那么可以切换到"Initialize"页面，添加初始化代码，例如此处将设定温度 setting_temperature 初始化为 26.5，代码如下：
app_conf.setting_temperature = 26.5;
# 4.3.4 把温度数据保存到云端
我们在以上章节中一共拿到四个数据：温湿度变送器的测量温湿度、随机生成的室内温度和界面上的设定温度，接下来需要将这些数据上传至 ZWS云 (opens new window) 保存，分别对应四个数据点 temp（测量温度）、humi（测量湿度）indoor_temp（室内温度）和 setting_temp（设定温度）。
请首先在 ZWS 云中新建设备，并添加数据点，操作步骤详见本文 2.3 章节。
实现该功能需要用到 AWFlow 中的 zws_iot_data_out 节点，它用于上传数据，步骤详见下文。
1. 将数据上传至ZWS云
如下图所示，将"节点列表"中的"zws_iot_data_out"类型的节点拖到流图编辑区，设置如下：
- "设备配置"属性如果没有添加过"zws_iot"节点，则选择"添加新的zws_iot节点"，点击右边的按钮进行编辑。
- 设置"Output Type"属性为"Key-Values"，通过该形式上传数据。
- 设置"目标键值对"属性为"temp,humi,setting_temp,indoor_temp"，这四个数据与 zws 云所添加的四个字段名一一对应，上传的数据就为前面为 msg 对象所添加的四个属性。
"zws_iot"节点设置如下
- 设置"是否连接zws平台"属性为"connected"，即链接 ZWS 云。
- 设置"设备类型"属性为"temp_iot1"，即 ZWS 云中添加的设备类型。
- 设置"设备id"属性为"temp_iot_0"，即 ZWS 云中添加的设备 ID。
- 设置"设备密钥"属性为 ZWS 云中添加设备时自动生成的秘钥，可在ZWS云的设备列表中复制。
以上信息均需要读者根据实际情况填写，无需跟本文一致。
# 4.4 温度采集终端界面实现
用 AWStudio 新建一个 MVVM JS 项目，双击打开该项目。进入到 AWTK Designer后，按照1.6.2的步骤将上一章节编辑好的流图导入到项目里，之后开始设计界面。
# 4.4.1 主界面显示温度值
1. 显示设定温度
根据上文实现的流图，设定温度保存在全局对象 global 中，此处需要将"控件列表"中的"静态文本"控件（即 label 控件）拖到编辑区，并将该控件的"text"属性与流图的"global.setting_temp"数据进行绑定，如下图所示：
此处需要显示格式化的温度值，绑定代码如下：
fformat("%.1f",global.setting_temp)
绑定代码中的 _flow 对象是导入的流图对象，它是一个全局对象，通常用于 AWTK 访问流图中的数据。
2. 显示室内温度
根据上文实现的流图，室内温度保存在流图的"indoor_temp"节点中，其绑定步骤与设定温度类似，详见本章第一小节，此处同样需要显示格式化的温度值，绑定代码如下：
fformat("%.1f",objects_manager.indoor_temp_value)
3. 显示测量温度
根据上文实现的流图，测量温度保存在流图的"temp"节点中，其绑定步骤与设定温度类似，详见本章第一小节，此处同样需要显示格式化的温度值，绑定代码如下：
fformat("%.1f",objects_manager.temp_value)
4. 显示测量湿度
根据上文实现的流图，测量温度保存在流图的"humi"节点中，其绑定步骤与设定温度类似，详见本章第一小节，此处同样需要显示格式化的温度值，绑定代码如下：
fformat("%.1f",objects_manager.humi_value)
# 4.4.2 点击按钮打开设置界面
如下图所示，将"控件列表"中的"按钮"控件拖到编辑区，设置如下：
- 设置显示文本"text"属性为"设置"。
- 切换到"事件"页面，点击右上角的"+"按钮，添加点击事件"click"，并将事件的"动作"属性设置为"打开窗口"以及"窗口的名称"设置为窗口的 UI 文件名"config_page"。
# 4.4.3 点击按钮上传设定温度
在 AWTK Designer 中新建并打开"Window"类型的设置界面"config_page"，实现点击"确定"按钮上传设定温度步骤如下，最终效果图详见上文 3.1 章节。
1. 将流图数据显示到编辑框
如下图所示，将"控件列表"中的"单行编辑"控件（即 edit 控件）拖到编辑区，并将该控件的"text"属性与流图的"global.setting_temp"数据进行绑定且将其设置为仅视图初始化时绑定（仅绑定一次，即打开窗口时将流图数据读取到界面上），如下图所示：
此处需要格式化设定温度，绑定代码如下：
fformat("%.1f",global.setting_temp)
2. 将编辑框数据上传至ZWS云
根据上文实现的流图，此处只要执行 set_temperature 节点并将编辑框中的温度值传入该节点即可将数据上传至 ZWS 云，因此我们需要给一个按钮的点击事件绑定这个命令，步骤详见下文。
如下图所示，将"控件列表"中的"按钮"控件拖到编辑区，设置如下：
- 设置显示文本"text"属性为"确定"。
- 切换到"事件"页面，点击右上角的"+"按钮，添加点击事件"click"，并将事件的"动作"属性设置为"执行视图模型中的命令"。
- 设置"命令的名称"为"objects_manager.set_temperature_run"。
- 设置"命令的参数"为 edit 控件中的文本，操作如下图所示：
# 4.5 下载并运行温度采集终端
根据上文完成温度采集终端的业务逻辑流图和界面设计后，我们可以将该应用下载到显控一体机上查看效果，步骤详见下文。
# 4.5.1 将应用下载到显控一体机
1. 连接显控一体机
将运行有 runFlowAWTK 的显控一体机通过网口连接到电脑，此处主要是让电脑与显控一体机在同一个网段下，比如让二者连到同一个路由器也可以。由于温度采集终端需要将数据上传到 ZWS云 (opens new window)，因此它还要连接到互联网。
电脑与显控一体机连接成功后，可以在 AWStuio 中找到该设备，如下图所示：
2. 下载应用
将 AWStudio 左侧项目列表中的温度采集中 MVVM JS 项目拖拽到项目列表的对应设备上，点击右侧的"↓"按钮，可以将应用下载到设备中，如下图所示：
# 4.5.2 查看ZWS云的数据
下载成功后，重启显控一体机将自动启动 runFlowAWTK，运行温度采集终端，效果如下图所示：
此时我们可以在 ZWS云 (opens new window) 的设备列表中进入温度采集终端（设备ID：temp_iot_0）详情页面，如下图所示：
然后切换到实时数据页面，并选择"data数据"，可以看到设备上传的实时数据，主要有temperatuer（逆变器温度）、indoor_temperature（室内温度）和 setting_temperature（设定温度），如下图所示：
