TopStack 文档

主题

图标开发手册 ​

图标是由用户自己制作的具有动态特性和交互特性的图元，可以在图纸中重复使用。

TIP

图标可以理解为用户自己制作的组件。

使用方法如下：

步骤一：拖拽图标到图纸

  1. 在组态编辑器中，点击左侧面板的图标选项卡。
  2. 在基础中，找到相应的图标，然后将该图标拖拽到画布中。

步骤二：配置图标

  1. 配置样式：选中画面中的图标，在右侧面板中，配置相应的样式。
  2. 配置数据绑定：样式中有多个配置项支持配置数据绑定。
  3. 配置动画
  4. 配置交互动作

快速开始 ​

步骤1：新建图标

方法一 点击主菜单，选择【文件】【新建图标】，如下图所示 image.png方法二

  1. 在组态编辑器中，点击左侧面板的图标Tab。
  2. 选中一个图标文件夹（如果没有，可以右键新建一个文件夹），点击鼠标右键，选择【新建图标】，如下图所示：

image.png

步骤2：制作图标

创建图标之后，会自动打开“图标编辑器”，设置图标的宽高，默认宽高为100，100。 拖拽图库中的元素进入画布作为基础元素，也可以直接在图标中绘制基本元素。 点击保存，便可以在编辑器中使用。

步骤3：使用图标

  1. 新建或打开一张图纸。
  2. 在组态编辑器中，点击左侧面板的图标Tab。
  3. 找到刚才制作好的图标，将该图标拖到图纸的画布中。

步骤4：管理图标

  1. 在组态编辑器中，点击左侧面板的图标Tab，找到对应的图标。
  2. 双击图标，可打开图标编辑器。
  3. 点击鼠标右键，弹出操作菜单，可以重命名或者删除图标，如下图所示：

image.png

进阶：属性绑定 ​

步骤1：新建图标

同快速开始。

步骤2：制作图标

步骤2-1：搭建基本元素

  1. 从图库中拖一个电机到画布中。
  2. 在工具栏中，选中“文本”，在画布中绘制几个“文本”元素。

image.png

步骤2-2：添加自定义属性

自定义属性是图标被使用时，向外透露出可以编辑的属性项，在图标复用时，有些内容是需要编辑的。以上面的图标为例，展示某个电机设备的电流值，同时支持对设备的名字需要进行设置，面对这种情况，我们需要为图标暴露出名字属性和电流值属性，以便于在图纸中使用图标时可以编辑该名字和对电流值进行数据绑定。设置的方式如下：

  1. 点击图标空白位，在右侧属性栏中，展开“数据绑定”面板。
  2. 在“数据绑定”面板中，新建属性，填写自定义属性名、显示名称，分组名称、值类型。

image.png

步骤2-3：绑定自定义属性

将自定义属性绑定到图标内部元素的样式属性上。

  1. 选中“设备名称”元素
  2. 点击文本属性的“绑定”按钮，在弹出的面板的“属性”框中输入“name”。
  3. 点击确定，该文本元素的文本内容就与图标的 “name”属性绑定在一起了。

image.png 参照以上步骤，将电流值的文本属性跟 value 属性进行绑定。

更灵活的绑定方式

绑定自定义默认采用的类型为“attr”，我们还支持另一种更灵活的方式“func”类型。

当选择“func”类型进行绑定时，我们可以通过编写脚本来生成元素的属性值，如下图所示：

image.png

图中通过脚本判断图元的业务属性“value”是否为 1，进而控制元素的可见性（visible）。

IMPORTANT

“func”方式进行绑定常用于以下情形：

  • 需要多个“自定义属性”共用来决定该元素的属性值。
  • 自定义属性类型跟元素的属性类型不一致，比如自定义属性为“数值”类型，元素属性为“颜色”。
  • 自定义属性值跟元素属性值不能完全对应，需要通过脚本进行转换。

步骤2-4：点击保存，完成图标制作

步骤3：使用图标

  1. 新建或打开一张图纸。
  2. 在组态编辑器中，点击左侧面板的图标Tab。
  3. 找到刚才制作好的图标，将该图标拖到图纸的画布中。
  4. 修改图元的设备名称。
  5. 对图元的电流值进行数据绑定。

image.png

DANGER

如果设置了自定义属性的“分组名称”，会自动生成相应“分组名称”的属性面板。 如果不设置自定义属性的“分组名称”，默认会出现在“基础”属性面板中。

进阶：交互功能 ​

步骤1：新建图标

同快速开始。

步骤2：启用交互

将图标的“可交互”属性设置为“选中”状态。 image.png

步骤3：定义事件处理

步骤3-1：图标事件处理

用于监听整个图标的交互事件。 点击图标属性的“事件处理”按钮，如下图所示： image.png 在事件处理对话框中，编写脚本。

步骤3-2：元素事件处理

用于监听图标内部某个元素的交互事件。 选中某个图标内部元素，点击元素属性的“事件处理”按钮，如下图所示： image.png 在事件处理对话框中，编写脚本。

进阶：状态图标 ​

根据不同的状态，切换不同的内容进行显示。下面我们以创建一个 3 色指示灯为例，介绍一下实现步骤。

步骤1：新建图标

同快速开始。

步骤2：定义状态列表

在右下角的“状态”栏中，点击新建按钮，添加状态。 本教程中，我们定义 3 个颜色的状态，并将“红色”设置为默认。 image.png

步骤3：添加元素

在画面中绘制 3 个圆形元素，并设置为红、绿、黄 3 个颜色，如下图所示： image.png

步骤4：设置元素状态

分别选中每个元素，在右侧属性栏中，选择相应的状态值。 image.png

步骤5：使用图标

  1. 新建或打开一张图纸。
  2. 在组态编辑器中，点击左侧面板的图标Tab。
  3. 找到刚才制作好的图标，将该图标拖到图纸的画布中。
  4. 在右侧的属性面板中，找到“基础”下面的“状态”样式，并选择一个需要显示的状态。

image.png

进阶：设备图标 ​

设备图标可用于快速制作组态画面，只需要将图元绑定到设备即可，需要为图元的每个业务属性单独绑定测点。

步骤1：新建图标

同快速开始。

步骤2：定义测点绑定

点击测点绑定按钮，输入图标内部引用的测点标识。 66487d9fb6a0e6a73574811ef7fe816a.png

步骤3：图标内部绑定测点

1a0a000718b301678b4b7db13645a849.png

步骤4：在画面中使用设备图标

将设备图标拖到画布中，在扩展属性中选择相应的设备。 image.png”

WARNING

将图元绑定到设备后，由于图标内部已经完成了测点的绑定，所以不需要再对图标其它属性进行测点绑定。

通过脚本方式获取绑定的设备标识：

javascript
var deviceInfo = data.a('deviceInfo')
if (deviceInfo) {
  // 获取设备标识
  var deviceID = deviceInfo.id
}