弹出画面功能

1. 概述

Unified Comfort Panel 与Unified Basic Panel 均可通过以下两个系统函数实现弹出画面的显示功能。

本文将以 Unified Comfort Panel 为例进行说明，Unified Basic Panel 的组态方法与此相同。

实现弹窗的系统函数：

• OpenScreenInPopup()（在弹出窗口中打开画面）
• OpenFaceplateInPopup()

2. 创建项目所需变量并编写PLC控制逻辑

2.1 在 PLC 侧创建项目所需要的变量，如下图所示。

2.2 本例程的设备启停控制逻辑如下图所示，仅为演示用途。实际应用中，请根据现场需求编写相应的 PLC 程序。

2.3 组态 MTP1200 Comfort 设备，并将 PLC 变量映射到 HMI 默认变量表，如下图所示。

3. 组态 HMI 画面及调用 OpenScreenInPopup() 函数。

3.1 新建"main"画面，添加 SVG 动态部件并设置颜色动态化，配置如下：

3.2 创建名称为"PopupScreen"的普通画面，设置此画面的尺寸宽度为300，高度为180,作为弹窗使用。

3.3 在"PopupScreen"画面中并添加“启动”、“停止”按钮以实现控制功能。启动”和“停止”按钮功能对应事件配置如下：

• 按下事件：“读取并设置变量中的位”函数
• 释放事件：“读取并设置变量中的位 ”及 “关闭弹出窗口”函数。
• 启动按钮的事件

• 停止按钮的事件

3.4在“main”画面中，为 SVG 图形的“单击鼠标左键”事件添加 OpenScreenInPopup() 函数，以触发弹窗显示。

系统函数“OpenScreenInPopup”具有以下参数：

3.5 最终运行效果

4. 组态 Faceplate 画面及调用 OpenFaceplateInPopup() 函数

4.1在项目库中创建名称为“Faceplate_Fan_Control”的面板类型，设置此画面的尺寸宽度为300，高度为180，并定义2个变量接口，分别为 Fan_Interface_Start 和Fan_Interface_Stop。

• 面板类型定义如下：

• 变量接口

4.2 在" Faceplate_Fan_Control "的面板画面中并添加“启动”、“停止”按钮以实现控制功能。”启动”和“停止”按钮功能对应的 JavaScript 脚本配置如下：

• 启动按钮的 JavaScript 脚本
  按下事件：HMIRuntime.Tags.Inching.SysFct.ReadAndSetBitInTag("Fan_Interface_Start", 0);

释放事件：

HMIRuntime.Tags.Inching.SysFct.ReadAndResetBitInTag("Fan_Interface_Start", 0);

Faceplate.Close()

• 停止按钮的 JavaScript 脚本

按下事件：
HMIRuntime.Tags.Inching.SysFct.ReadAndSetBitInTag("Fan_Interface_Stop", 0);
释放事件：
HMIRuntime.Tags.Inching.SysFct.ReadAndResetBitInTag("Fan_Interface_Stop", 0);

Faceplate.Close()

4.3 在3.1章节创建的“main”画面中，添加 SVG 动态部件并设置颜色动态化，配置如下：

4.4在SVG图形的“单击鼠标左键”事件中通过代码片段添加如下JavaScript脚本，以触发弹窗显示。

• 代码片段

• 执行的 JavaScript 脚本

let data = {Fan_Interface_Start:{Tag:"DeviceControl_Fan_Start"},Fan_Interface_Stop:{Tag:"DeviceControl_Fan_Stop"}};

let po = UI.OpenFaceplateInPopup("Faceplate_Fan_Control_V_0_0_1", "风机电机控制", data);

po.Left = 318;

po.Top = 86;

po.Visible = true;

关于 OpenFaceplateInPopup() 函数的更多参数的介绍可以查看帮助文档，具体如下图所示。

4.5 最终运行效果

5. 参考资料

• 通过脚本控制弹出窗口（ JavaScript 示例）

https://support.industry.siemens.com/cs/cn/en/view/109810540/zh

• 使用 WinCC Unified 组态面板的提示与技巧

https://support.industry.siemens.com/cs/cn/en/view/109812366/zh

请登录后查看全文