如何使用Faceplate的事件接口

一 概述

本文基于WinCC Unified V21 介绍WinCC Unified PC的Faceplate（面板类型）事件接口的用法。最终的运行效果是点击面板实例中的不同按钮弹出不同的画面，如下图所示：

图1

二 不使用事件参数的组态过程

在Portal V21中新建项目，插入WinCC Unified PC V21设备，如图2所示：

图2

接着在WinCC Unified PC所在的PC Station中插入网卡，如图3所示：

图3

切换到库视图，在类型下双击“添加新类型”来添加Faceplate，如图4所示：

图4

在“添加新类型”对话框中，选择“面板”，为新类型指定设备为”Unified面板/ WinCC Unified PC”，如图5所示：

图5

首先修改Faceplate的大小，本例设为200*300，如图6所示：

图6

在Faceplate画面中添加按钮，在Faceplate的按钮事件中是没有操作画面（例如，打开画面，弹出画面等）接口的，如图7所示。因此，为了实现在Faceplate中弹出画面的功能，就需要使用Faceplate的事件接口。

图7

为了演示需要，需要在Faceplate画面中添加两个按钮，如图8所示。

图8

在Faceplate中切换到事件接口，点击“新增”按钮来新增一个事件接口，新增的事件接口命名为“openPic1”，如图9所示：

图9

同样点击下图10中红框标注的“新增”来添加第二个事件接口在事件接口。

图10

最终的事件接口如图11所示：

图11

在“Picture1”按钮的“按下”事件中，点击下图12中的“将函数列表转换为脚本”按钮，打开JS脚本编辑器。

图12

在脚本编辑器空白处，点击右键，依次选择“片段-Faceplate-Rais a custom faceplate event”，如图13所示：

图13

初始脚本如图14所示。函数格式为Faceplate.RaiseEvent("事件接口名称", 事件接口的参数);

图14

修改事件接口名称为图11中的第一个事件接口的名称“openPic1”。由于没有为faceplate的事件接口添加参数（后面会专门介绍参数的使用），因此把参数设为空，如图15所示：

图15

同样，“Picture2”按钮的“按下”事件的脚本如图16所示：

图16

组态完成后，按图17所示步骤来发布faceplate。

图17

然后，在项目中新建三个画面“Main”、“Picture1”和“Picture2”。打开画面“Main”，从库中把刚才创建的faceplate拖拽到画面中，如图18所示：

图18

在faceplate实例事件下，可以看到刚才创建的两个事件接口“openPic1”和“openPic2”，在“openPic1”事件中选择“在弹出窗口中打开画面”函数，如图19所示：

图19

“在弹出窗口中打开画面”函数的“画面名称”参数选择图18中创建的画面“Picture1”，如图20所示：

图20

同样，在“openPic2”事件中来弹出画面“Picture1”，如图21所示：

图21

打开画面“Picture1”，设置其尺寸，并添加文本，如图22所示：

图22

同样，打开画面“Picture2”，设置其尺寸，并添加文本，如图23所示：

图23

激活WinCC Unified PC项目，分别点击faceplate实例中的“Picture1”和“Picture2”按钮，可以分别弹出画面“Picture1”和“Picture2”，如图24和图25所示：

图24

图25

三 事件使用参数的组态过程

下面介绍，如何使用faceplate事件接口的参数。

在库中找到faceplate，点击右键，选择“编辑类型”，如图26所示：

图26

切换到事件接口，只保留一个接口，并修改接口名称为“openPic”，点击接口下的“新增”来为接口添加参数，如图27所示：

图27

参数名称改为“picName”，参数类型选择“String”，如图28所示：

图28

接下来画面中的两个按钮调用同一个事件接口，但是使用不同的接口参数。

修改“Picture1”按钮的脚本，修改Faceplate.RaiseEvent函数中的事件接口名称为"openPic"，参数“picName”设定为“Picture1”，如图29所示：

图29

同样修改“Picture2”按钮的脚本，参数“picName”设定为“Picture2”，如图30所示：

图30

接着，发布修改后的faceplate，发布时需要选择“更新项目中的实例”，如图31所示：

图31

可以看到画面中faceplate实例中的faceplate类型版本自动更新为V0.0.2，并且只有一个事件接口，如图32所示。

图32

点击图32中的“将函数列表转换为脚本”按钮，将函数转换为JS脚本编辑器。如图33所示。可以看到在faceplate中定义的参数“picName”会自动作为faceplate实例中自定义事件的参数。

图33

在脚本编辑器中，把函数中具体的要打开的画面名称，替换为参数“picName”即可，如图34所示：

图34

最后，激活WinCC Unified PC项目，分别点击faceplate实例中的“Picture1”和“Picture2”按钮，同样，可以分别弹出画面“Picture1”和“Picture2”，如图35和图36所示：

图35

图36

请登录后查看全文