HMI

# HMI简介
<img src="/media/202401/WX20240125-140448_1706162700.png" width="100%"/>

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

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

# 创建看板
<img src="/media/202401/WX20240125-152556_1706167566.png" width="100%"/>

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

# HMI看板编辑
通过看板列表中的【设计】按钮，进入看板编辑页面：
<img src="/media/202401/WX20240125-152744_1706167766.png" width="100%"/>

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

# 全局配置
可以对当前HMI进行全局配置。
<img src="/media/202401/WX20240125-153202_1706167930.png" width="35%"/>

当未选中任何组件的时候，右侧属性区设置的是HMI的全局配置：
- 全局变量：设置全局变量的ID和数据值。个别组件中可以使用或修改这个全局变量。
- 全局样式：一般为羽刃内部开发人员使用。用于快速设置HMI的颜色、风格。
- 页面加载事件：HMI页面打开/刷新的时候，将触发数据机器人中的什么事件；或者将全局变量设置为某一个默认值（见【[“发送数据流”配置](#data_flow)】）
- 多屏幕显示配置：当连接多个屏幕扩展时，这里配置屏幕排列规则。

# 组件配置
当选中画板区域中的某个组件时，右侧属性区将设置当前组件的属性：

“属性”分为三个类型：
- 数据：配置数据来源（见[数据来源配置](#data_source)）。
- 事件：配置当前组件，对组件执行指定的动作（比如点击），可以触发特定的事件。
- 属性：配置边框、文字等样式、颜色属性。

## “数据”配置
<img src="/media/202401/WX20240125-153908_1706168410.png" width="30%"/>

数据配置，指的是从【[数据机器人](http://doc.cloud-bird.com/doc/67/)】中，读取哪一些数据进行使用。
其中又分为几个类型：
- 数据：配置的是本节点需要展示的数据。个别组件需要传入特定的数据格式（比如柱状图、表格等）。
- 样式：可以从【[数据机器人](http://doc.cloud-bird.com/doc/67/)】中直接传入文字、边框等颜色值（RBG格式）。
- 动画：系统提供几种简单的动画，当传入布尔值【true】的时候即会执行动画，传入【false】的时候，停止动画。
- 位置：传入数字后，组件将移动到数字对应坐标位置，或设置数字对应的尺寸大小。

### 数据来源
 通过【[数据机器人](http://doc.cloud-bird.com/doc/67/)】可以将采集到的数据发送到HMI看板进行展示。

用例：
**一、组件的配置：**
<img src="/media/202401/WX20240125-160046_1706169709.png" width="100%"/>

组件的【数据配置】中，设定【数据标识】，以及数据栏位：

- 数据标识：与数据机器人中【发送至HMI】节点中的数据标识对应，即将两者进行绑定。
- 数据栏位：数据机器人中会通过JS格式发送多个数据过来HMI，这里就可以指定需要读取的数据ID。

**二、数据机器人的配置**
<img src="/media/202401/WX20240125-155632_1706169402.png" width="60%"/>

如上图，业务为：从【Euromap63读】节点获取设备的数据。并将数据发送到【发送至HMI】节点。

**三、【发送至HMI】节点的配置：**
<img src="/media/202401/WX20240125-155922_1706169883.png" width="100%"/>

- 【发送至监控看板】栏中，选择目标的看板
- 【数据标识】中，填写目标组件设置中的【数据标识】

以上三个步骤设置完毕后，则可以将【ModbusTCP读】节点的数据，发送至“MDG-1”看板的数据标识为“data_1”组件中进行展示。

## “事件”配置
<img src="/media/202401/WX20240125-161259_1706170389.png" width="100%"/>

对组件执行指定的动作（比如点击），可以触发特定的事件，事件分为三大类：
- 发送数据流：将指定的数据发送到【[数据机器人](http://doc.cloud-bird.com/doc/67/)】，触发数据机器人中的【HMI事件触发】节点。
- 打开弹出框：可以打开弹出框，弹出框中的内容可以是其他资源库的页面（包括HMI、数据集、表单等），也可以是系统内部或外部链接。
- 跳转页面：可以跳转到任意链接，可以跳转到其他资源库的页面（包括HMI、数据集、表单等），也可以是系统内部或外部链接。

**本文档将重点说明【发送数据流】的逻辑：**

### “发送数据流”配置
将特定数据发送到【[数据机器人](http://doc.cloud-bird.com/doc/67/)】，并触发数据机器人中的节点。
用例：
**一、组件的配置**
<img src="/media/202401/WX20240125-162203_1706170933.png" width="100%"/>

配置内容：

- 出发标识：与数据机器人中【HMI事件触发】节点中的数据标识对应，即将两者进行绑定。
- 操作权限：设置可以触发该事件的角色，如果不设置则全部角色可以操作。
- 数据：触发的时候，需要将那些数据发送到【数据机器人】，有三种类型：
	- 常量值：发送固定的数据值。
	- 全局变量：获取【[全局变量](global_config)】中的数据，发送到数据机器人。
	- 输入组件的内容：获取输入组件（比如文本输入框、开关、日期输入框等）中已输入的内容，发送到数据机器人。

**二、数据机器人的配置**
<img src="/media/202401/WX20240125-162916_1706171365.png" width="60%"/>

如上图，业务即为：通过【HMI事件触发】，当HMI发生事件的时候，将会发送配置好的数据到【TCP Client写】和【MySql】节点。

**三、【HMI事件触发】节点的配置**

![](/media/202401/WX20240125-163234_1706171563.png)

- 【发送至监控看板】栏中，选择需要监听的看板
- 【触发标识】中，填写需要监听的HMI组件设置中的【触发标识】

以上三个步骤设置完毕后，当HMI某个组件，发生“event_1”事件的时候，会将组件配置好的数据以JS格式发送给【数据机器人】中，同样设置为“event_1”的【HMI事件触发】节点，以及连接的下一个节点。