在一个可视化组件中显示多个可视化组件

您可以在“Frame” 或“Tabs” 元素中引用主可视化中的其他可视化，然后将它们显示在该元素的窗口窗格中。

对于“Frame” 元素，您可以自由设定在什么时间显示哪种可视化效果。一种方法是使用“Frame” 元素的 switch frame 变量，它会根据变量值自动触发切换。您还可以为附加控件编程，用户输入后，这些控件会触发输入操作，从而切换可视化效果。

注意

可通过“Frame” 元素对可视化进行任意深度的嵌套。为了顺利使用“切换到任何可视化” 框架选择类型，“框架” 所包含的引用可视化不得超过 21 个。

更多信息，请参阅“元素的输入配置” 的说明：操作“交换机帧可视化” 。

此外，您还可以使用“Tabs” 引用可视化内容。“Tabs” 元素可对可视化开关进行预配置控制，这既方便又有利。

在CODESYS Forge 中，您可以找到示例项目 "可视化切换"。在那里，你会看到一个可视化窗口，它可以在运行时在一个框架区域内相继显示其他可视化窗口。可视化开关可由用户、程序或通过 FrameManager 控制。

另见

‎⮫ 项目示例 CODESYS Forge

通过变量切换框架视觉效果

在主可视化中，“Frame” 元素会在运行时显示其中一个引用的框架可视化。用户可以选择显示在框架中的“单选按钮” 元素。

用单选按钮元素连接框架可视化效果

在CODESYS 中创建一个新的标准项目。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎VisuMain‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu1‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu2‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu3‎ ，然后单击“添加” 关闭对话框。

除了主可视化对象外，还有三个可视化对象。
打开‎Visu1‎ 对象。
在“可视化工具箱” 中，在“基本” 类别中，选择并拖动“单选按钮” 元素到可视化编辑器。

打开元素的“Properties” 视图。
配置矩形的属性如下：
- 属性“文本”,“文本” = ‎Visu1‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“浅灰色”
对‎Visu2‎ 进行相应编程。
矩形的属性
- 属性“文本”,“文本” = ‎Visu2‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“灰色”
对‎Visu3‎ 进行相应编程。
矩形的属性
- 属性“文本”,“文本” = ‎Visu3‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“深灰色”
打开‎VisuMain‎ 对象。
在“可视化工具箱” 中，在“基本” 类别中，选择并拖动“框架” 元素到可视化编辑器。

“Frame Configuration” 对话框将打开。
在“可用可视化” 窗口区域，在“按可视化名称” 选项卡上，选择对象‎Visu1‎ 。在“所选可视化” 中，单击“添加” 。
然后选择对象‎Visu2‎ ，在“所选可视化”中单击“添加”。
然后选择对象‎Visu3‎ ，在“所选可视化”中单击“添加”。
单击“OK” 退出对话框。

现在，“Frame” 元素引用了三个选定的可视化内容。引用 (1) 列于“Frame” 元素属性中的“References” 属性。除了可视化名称外，还会显示相应的索引值 (2)。

请注意：在“References” 属性的值字段中单击“Configure” 按钮时，可以打开对话框。见 (3)。您可以通过“Selected Visualizations” 列表中的可视化顺序来影响索引。
在“可视化工具箱” 中，在“常用控件” 类别中，将“单选按钮” 元素拖到可视化编辑器中。

打开元素的“Properties” 视图。
在“单选按钮设置” ，“单选按钮” ，单击“创建新的” 按钮。

该元件有三个开关可供选择。
配置单选按钮的属性如下：
- 属性“单选按钮设置”,“区域”,“[0]”,“文本” = ‎Visu1‎
- 属性“单选按钮设置”,“区域”,“[1]”,“文本” = ‎Visu2‎
- 属性“单选按钮设置”,“区域”,“[2]”,“文本” = ‎Visu3‎
在‎PLC_PRG‎ 程序中，为激活的可视化编号声明一个本地变量。
```
VAR
	iActiveVisu : INT; // Index of visu activated by the user
END_VAR
```
选择“单选按钮” 元素。在“变量” 属性的值字段中，单击。
在“输入助手” 对话框中，选择最近声明的变量。然后退出对话框。
“单选按钮” 元素的属性：
- 属性“变量” = ‎PLC_PRG.iActiveVisu‎
选择“Frame” 元素。单击“开关帧变量”,“变量” 属性的值字段。在此也指定最近声明的变量。
“Frame” 元素的属性：
- 属性“切换帧变量”,“变量” = ‎PLC_PRG.iActiveVisu‎
“单选按钮” 元素的控制变量也是“框架” 元素的开关框架变量。“单选按钮”元素的用户输入可切换框架可视化。
单击“Build Generate Code” 。
点击“在线登录” 并开始申请。

可视化开始。其中一个引用的可视化系统正在画面中运行。单击“单选按钮” 元素的未选中选项时，可视化效果会将框架中的内容切换为所需的可视化效果。

在示例中，开关帧变量与输入变量相连。您也可以在 IEC 代码中以编程方式设置开关帧变量。

通过后续操作切换框架视觉效果

在主可视化中，“Frame” 元素会在运行时显示其中一个框架可视化。用户可以使用按钮来控制框架中的显示内容。用户输入会触发“切换帧可视化” 输入操作。

可视化编程

在CODESYS 中创建一个新的标准项目。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎VisuMain‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu1‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu2‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu3‎ ，然后单击“添加” 关闭对话框。

除了主可视化对象外，还有三个可视化对象。
打开‎Visu1‎ 对象。
在“可视化工具箱” 中，在“基本” 类别中，选择并拖动“矩形” 元素到可视化编辑器。

打开元素的“Properties” 视图。
配置矩形的属性如下：
- 属性“文本”,“文本” = ‎Visu1‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“浅灰色”
对‎Visu2‎ 进行相应编程。
矩形的属性
- 属性“文本”,“文本” = ‎Visu2‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“灰色”
对‎Visu3‎ 进行相应编程。
矩形的属性
- 属性“文本”,“文本” = ‎Visu3‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“深灰色”
打开‎VisuMain‎ 对象。
在“可视化工具箱” 中，在“基本” 类别中，选择并拖动“框架” 元素到可视化编辑器。

“Frame Configuration” 对话框将打开。
在“可用可视化” 窗口区域，在“按可视化名称” 选项卡上，选择对象‎Visu1‎ 。在“所选可视化” 中，单击“添加” 。
然后选择对象‎Visu2‎ ，在“所选可视化”中单击“添加”。
然后选择对象‎Visu3‎ ，在“所选可视化”中单击“添加”。
单击“OK” 退出对话框。

现在，“Frame” 元素引用了三个选定的可视化内容。引用 (1) 列于“Frame” 元素属性中的“References” 属性。除了可视化名称外，还会显示相应的索引值 (2)。

请注意：在“References” 属性的值字段中单击“Configure” 按钮时，可以独立打开对话框。见 (3)。您可以通过“Selected Visualizations” 列表中的可视化顺序来影响索引。
在“可视化工具箱” ，在“常用控件” 类别中，将“Button” 元素拖到可视化编辑器中。

元素被选中，其属性在“Properties” 视图中可见。
通过‎Visu1‎ 配置“文本”,“文本” 属性。
在“输入配置”“OnMouseDown” 属性中，单击“配置” 。

“输入配置” 对话框将打开。
选择“交换机帧可视化” 操作，然后单击。

操作将显示在右侧窗口中。
配置操作：
- 选择“Switch 本地可视化” 选项。
- 将“可视化选择” 设为‎Visu1‎ 。
- 单击“OK” 退出对话框。
后续行动在“输入配置” 属性中配置。

属性“输入配置”,“OnMouseDown”,“开关帧可视化” = ‎0‎
将另一个“Button” 元素拖到可视化编辑器中。相应配置按钮。
按钮的属性：
- 属性“文本”,“文本” = ‎Visu2‎
- 属性“输入配置”,“OnMouseDown”,“开关帧可视化” = ‎1‎
将另一个“Button” 元素拖到可视化编辑器中。相应配置按钮。
按钮的属性：
- 属性“文本”,“文本” = ‎Visu3‎
- 属性“输入配置”,“OnMouseDown”,“开关帧可视化” = ‎2‎
单击“Build Generate Code” 。
单击“在线登录” 设备并启动应用程序。

可视化开始。其中一个引用的可视化系统正在画面中运行。当您点击其中一个按钮时，可视化功能会将框架中的内容切换到相应的可视化功能。

在标签元素上显示可视化内容

对于“Tabs” ，可自动提供所引用的可视化导航。参考的第一个可视化图像位于前景，而其他图像则隐藏在它的后面。用户可以通过自动提供的选项卡在它们之间进行导航。

配置标签元素

在CODESYS 中创建一个新的标准项目。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎VisuMain‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu1‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu2‎ ，然后单击“添加” 关闭对话框。
在设备树中选择应用程序，然后单击“添加对象可视化” 。
在“添加可视化” 对话框中，指定名称‎Visu3‎ ，然后单击“添加” 关闭对话框。

除了主可视化对象外，还有三个可视化对象。
打开‎Visu1‎ 对象。
拖动“矩形” 元素到可视化编辑器。

打开元素的“Properties” 视图。
配置矩形的属性如下：
- 属性“文本”,“文本” = ‎Visu1‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“浅灰色”
对‎Visu2‎ 进行相应编程。
矩形的属性
- 属性“文本”,“文本” = ‎Visu2‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“灰色”
对‎Visu3‎ 进行相应编程。
矩形的属性
- 属性“文本”,“文本” = ‎Visu3‎
- 属性“文本属性”,“字体” =“标题”
- 属性“颜色”,“正常状态”,“填充颜色” =“深灰色”
打开‎VisuMain‎ 对象。
在“可视化工具箱” 中，在“基本” 类别中，选择并拖动“框架” 元素到可视化编辑器。

“Frame Configuration” 对话框将打开。
在“可用可视化” 窗口区域，在“按可视化名称” 选项卡上，选择对象‎Visu1‎ 。在“所选可视化” 中，单击“添加” 。
然后选择对象‎Visu2‎ ，在“所选可视化”中单击“添加”。
然后选择对象‎Visu3‎ ，在“所选可视化”中单击“添加”。
单击“OK” 退出对话框。

现在，“Tabs” 元素引用了三个选定的可视化内容。引用 (1) 列于“Frame” 元素属性中的“References” 属性。除了可视化名称外，还会显示相应的索引值 (2)。

请注意：单击“References” 属性值字段中的“Configure” 按钮时，可以独立打开“Frame Configuration” 对话框。见 (3)。您可以通过“Selected Visualizations” 列表中的可视化顺序来影响索引。
在“可视化工具箱” ，在“常用控件” 类别中，将“标签” 元素拖到可视化编辑器中。

打开元素的“Properties” 视图。
配置该选项卡的属性如下：
- 属性“标签宽度” ： ‎40‎
- 属性“引用”,‎Visu1‎,“页眉” = ‎Visu1‎
- 属性“引用”,‎Visu2‎,“页眉” = ‎Visu2‎
- 属性“引用”,‎Visu3‎,“页眉” = ‎Visu3‎
单击“Build Generate Code” 。
单击“在线登录” 设备并启动应用程序。

可视化开始。“Tabs” 元素中正在运行一个引用的可视化功能。点击标签切换到相应的可视化界面。

另见