HMI触屏网关-创建第一个组态

上文：HMI触屏网关-了解VISON界面-CSDN博客

概述

本章节专注于深度剖析VISION软件在真实场景下的组态构建过程，系统性地涵盖了从创建项目、创建数据标签、创建图表源以及控件设置等关键环节，旨在引导读者遵循严谨的专业逻辑，依据实际业务需求，逐步搭建起一套完备且高效的WEB组态解决方案。

1. 创建项目

当用户点击主页上的“WEB组态”按钮后，将跳转到WEB组态工作台，选择编辑器进入组态编辑界面。创建新项目时，系统预设了一个名为“Mainview”的初始视图，用户也可以根据特定场景增加视图。

2. 创建数据标签

在本示例中，NODE-RED进行数据采集，VISION进行数据可视化。两者均扮演MQTT协议的客户端角色，通过与NODE-RED所部署的本地MQTT Broker建立连接，以Topic的形式进行通信。

2.1. NODE-RED流程设置

在本示例中，我们构建的数据点包括：水位（分别模拟四个等级：水位1至水位4）、温度、湿度、日期、时间及两个继电器输出（DO1和DO2）等，如下图所示。

2.2. VISION连接设置

在组态编辑界面，用户首先点击左上角的“设置”按钮，选择“连接”进入数据源管理界面，新建MQTT通讯连接，并设定相应的MQTT订阅以及发布主题的数据标签：

3. 创建图表源

为清晰展现水位变化趋势，我们采用了“线形图”这一数据可视化手段。鉴于线形图的构建依赖于图表数据源，因此需先创建符合要求的图表数据源：

4. 控件设置

一旦组态项目所需的数据标签及其关联的数据源构建完成，即可进入各个控件的设置页面进行数据绑定在本示例中，我们将选用一系列特定控件，用于实现数据的绑定与展示。

常规控件：文本工具

控制控件：输出值、线形图、按钮、仪表盘、开关、管道

自定义控件：分流器

接下来我们将逐步演示各控件的配置及数据绑定。

4.1. 文本工具

“文本工具”主要为组态画面中的特定元素提供文字说明，其配置过程简易，故在此不再赘述。接下来，我们将与“输出值”一并进行联合操作演示。

4.2. 输出值

“输出值”旨在实时展示多元化的数据形态，在当前应用示例中，它分别用于显示日期、时间及液位测量等信息。下图中，我们将通过显示日期数据来阐述该控件的配置流程：

4.3. 线形图

“线形图”被应用于描绘水位1至水位4随时间演变的连续变化轨迹。在本例中，为了实现通过点击“按钮”来触发展示含有所述线形图的视图目标，我们新增一个视图，用于放置线形图控件：

4.4. 按钮

“按钮”旨在响应用户交互动作，其功能设计用于触发线形图视图的呈现与关闭。具体操作流程如下所述：

4.5. 指针仪表盘

“指针仪表盘”被应用于实时展示温度及湿度读数，配置如下：

4.6. 开关/管道

“开关”旨在实现对EG8200PRO设备的DO1和DO2通道的开关动作指令下发功能，同时，通过引入管道控件，可实现实时同步DO1与DO2状态的联动效果。此处我们将整合演示这两项配置操作的具体步骤：

💡 绘制管道时保持按住Shift键可锁定直线路径，避免出现非直线弯曲形态。

4.7. 自定义控件

“自定义”控件可旨在通过整合和封装多样化的基本控件，将其功能集成为一种全新的、具备独特应用特性的复合控件。在此，以示例中的原创“分流器”为例，展示其实现过程：

5. 完整工程

以上配置步骤完成后，用户可依据自身业务需求灵活开展界面布局与元素关联，旨在构造出与预期相符的定制化组态界面。鉴于篇幅限制，我们不展开详尽的操作演示。不过，您可通过导入该案例项目文件以进一步探索其实现机制与可视化呈现的效果。

导入演示：

注意

💡 组件设置好后，可以先点击启动视图运行查看效果，再来考虑是否要进行大小、颜色以及相关数值的调整

目标源：成都纵横指控