HMI

# HMI 简介
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913182143.png" width="100%"/>

【HMI】模块，提供简单的数据读取组件、数据输入组件，工业素材。用于制作SCADA看板或表单页面，监控产线实时情况并且进行指令下发。

看板均可以通过连接投屏到电视、平板、PC上查看。
开通云边协同功能后，可以在微信小程序中查看（详情请咨询支持人员）。

# 创建看板
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913160112.png" width="100%"/>

点解右上角的【新建】按钮，即可创建看板。

# HMI看板设置
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913183801.png" width="100%"/>

- 左侧为组件库。将所需要的组件或素材拖动到中间的画本中即可使用。
- 右侧为组件属性。可以设置样式和数据来源、输出配置。

<span id="toBoard_simple"> </span>
## 数据源说明
通过“[数据机器人](http://doc.cloud-bird.com/doc/8/)”可以将采集到的数据发送给监控看板进行展示。

用例：
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913183928.png" width="60%"/>

如上图，从【MoudbusTCP读】节点，获取设备的数据。并将数据发送到【发送至HMI/BI报表】节点。

【发送至HMI/BI报表】节点设置：
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230714173702.png" width="100%"/>
- 【发送至监控看板】栏中，选择目标的看板
- 【数据标识】中，填写目标组件设置中的【数据标识】
以上两栏设置完毕后，则可以将【ModbusTCP读】节点的数据，发送至“test”看板的“data_1”组件中进行展示。

<span id='send_data_simple'> </span>
## 数据下发说明
监控看板中，提供了可以下发数据的组件（比如按钮），触发下发事件时（比如点击按钮），HMI看板即会将指定的数据发送到“[数据机器人](http://doc.cloud-bird.com/doc/8/)”的【监控看板触发】节点，即可触发“[数据机器人](http://doc.cloud-bird.com/doc/8/)”中下一个节点的业务。

用例：
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913184157.png" width="60%"/>
如图，通过【HMI/BI报表触发】节点，下发触发信号和数据；“[数据机器人](http://doc.cloud-bird.com/doc/8/)”接收到触发信号后，即会将收到的数据通过【ModbusTCP写】协议，写入到设备中，完成指令下发。

【HMI/BI报表触发】节点配置：
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230714181038.png" width="90%"/>
- 绑定监控看板：指定接收来自哪一个看板的信号。
- 触发标识：指定接收来自看板的哪一个组件的信号和数据。

## 组件说明
### 组件通用说明-【数据】属性设置
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913185011.png" width="30%"/>

>注意：不同组件的“数据”中的可配置属性有轻微差别

【数据】属性的作用为：可以根据从【[数据源](#toBoard_simple)】中接收的数据，动态设置组件的某个属性。比如“数据/文本”设置中，可以动态设置组件展示的文案。

#### “数据”配置：
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913185348.png" width="90%"/>

配置弹窗中：
- 数据标识：设置本组件的标识ID。作为数据机器人[发送数据](#toBoard_simple)时的目标标识。
- 数据方式：
  - 【栏位绑定】：该模式下，直接读取从【[数据源](#toBoard_simple)】中传来的数据值。
  - 【表达式】：该模式下，可以读取数据值并进行一些计算。
- 数据栏位：在【数据方式-栏位绑定】模式下需要输入。从【[数据机器人](#toBoard_simple)】中获取的数据为Json格式，通过设置{$msg.data_name}，指定该组件读取Json中的具体哪一个数据值。

### 组件通用说明-【事件】属性设置
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913191255.png" width="40%"/>

>注意：不同组件的“数据”中的可配置属性有轻微差别

【事件】属性的作用为：当执行组件动作（即事件）时，可以将配置中的指定数据[发送给“数据机器人”](#send_data_simple)

#### “事件配置” 
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913191958.png" width="100%"/>

配置弹窗中：
- 点击确认弹窗：【单击】事件可以开启，开启后，需要二次确认才会执行时间动作。
- 事件操作：当触发这个事件时，需要执行哪些动作。
  - 发送数据流：将数据[下发](#send_data_simple)到“[数据机器人](http://doc.cloud-bird.com/doc/8/)”。
  - 打开弹出框：可以以弹窗的形式打开其他HMI看板。
  - 跳转页面：可以跳转到SDR中的其他页面。
- 触发标识：将配置中的数据[下发](#send_data_simple)到“[数据机器人](http://doc.cloud-bird.com/doc/8/)”时，以这里的“触发标识”作为来源标识。
- 操作权限：有哪一些角色账号可以进行该事件操作。
- 数据：【事件操作-发送数据流】中需要配置。设置当触发当前事件时，将哪些数据值[下发](#send_data_simple)到“[数据机器人](http://doc.cloud-bird.com/doc/8/)”。
- 打开时传入参数：【事件操作-打开弹出框/跳转页面】中需要配置。当打开弹出框或跳转页面时，需要携带哪些参数到目标弹出框/页面。

### 【文本显示】组件
主要用于从【[数据源](#toBoard_simple)】中数据并展示。

### 【滚动文本】组件
同【文本显示】组件主要用于从【[数据源](#toBoard_simple)】中数据并展示。但可以接受较长的文本，然后滚动播放。

### 【进度展示】【环形图】组件
这两个组件用于展示进度，从【[数据源](#toBoard_simple)】中接收的数据值（0～100的数字格式），在组件会以百分比进度的形式表示。

### 【仪表板】组件
用于以仪表的样式展示数值，仪表板需设置上下限。然后从【[数据源](#toBoard_simple)】中接收的数据值（任意大小的数字格式），仪表板指针会指向对应的数值。

### 【动态表格】组件
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913201143.png" width="90%"/>

用于将从【[数据源](#toBoard_simple)】中接收到的数据，以表格形式展示。从【[数据源](#toBoard_simple)】中获取到的数据为Json格式，通过“属性”-“状态配置”，可以指定Json数据中，每个栏位对应表格中的哪一列。

### 【菜单】组件
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913201044.png" width="90%"/>

可以添加一个菜单，用于跳转到其他HMI看板。

### 【指示灯】【多态按钮】组件
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913194853.png" width="100%"/>
【指示灯】和【多态按钮】组件的“属性”-“状态配置”中，可以设置根据“数据”-“数据/文本”中的不同状态值，动态展示不同灯/按钮状态和文案。
区别为：

- 【指示灯】主要用于展示，触发事件不区分状态。
- 【多态按钮】的触发事件中，支持对不同状态下，发送不同的数据。可用于开关类的场景。开、关分别发送不同的指令。

### 输入类组件
输入类组件区别仅为输入格式不同。按需要选择即可。输入累组件的【事件】均为“数值变化”，即修改输入组件中的内容时触发事件。并且将输入框（或选择框）中的内容[下发](#send_data_simple)到“[数据机器人](http://doc.cloud-bird.com/doc/8/)”。

### 图表类组件
<img src="https://cloudbird-1305191050.cos.ap-guangzhou.myqcloud.com/20230913195041.png" width="100%"/>
图表类组件从【[数据机器人](#toBoard_simple)】中获取到的数据为Json格式，通过“属性”-“状态配置”，可以指定Json数据中，每个栏位对应的折线/柱状的颜色。