Skip to main content

可视化参考

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

重要

可视化可以通过以下方式嵌套到任意深度框架 . 为了使用切换到任何可视化框架选择类型没有任何问题,框架所包含的引用可视化不得超过 21 个。

您可以在主可视化中引用其他可视化,也可以框架标签元素,然后将它们显示在该元素的窗格中。

框架元素,您可以自由编程在何时显示哪个可视化。一种选择是使用框架元素,它会根据其值自动触发切换。您还可以编写额外的控件,在用户输入后触发输入操作,从而切换可视化效果。

此外,您还可以使用标签参考可视化。标签元素提供可视化开关的预配置控制。

有关详细信息,请参阅:For more information, see: 配置用户输入

在主可视化中,框架元素在运行时显示引用的框架可视化之一。用户可以选择单选按钮显示在框架中的元素。

过程. 将框架可视化与单选按钮元素连接起来
  1. 在中创建新的标准项目CODESYS

  2. 在设备树中选择应用程序并单击添加对象 → 可视化

  3. 添加可视化对话框中,指定名称VisuMain并点击添加关闭对话框。

  4. 在设备树中选择应用程序并单击添加对象 → 可视化

  5. 添加可视化对话框中,指定名称Visu1并点击添加关闭对话框。

  6. 在设备树中选择应用程序并单击添加对象 → 可视化

  7. 添加可视化对话框中,指定名称Visu2并点击添加关闭对话框。

  8. 在设备树中选择应用程序并单击添加对象 → 可视化

  9. 添加可视化对话框中,指定名称Visu3并点击添加关闭对话框。

    除了主可视化之外,还有三个可视化对象。

  10. 打开Visu1目的。

  11. 可视化工具箱,在基本的类别,选择并拖动单选按钮元素到可视化编辑器。

    特性元素的视图打开。

  12. 配置矩形的属性如下:

    • 文本文本财产:Visu1

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:浅灰色

    _visu_1_for_referencing.png
  13. 对对象进行编程Visu2因此。

    . 矩形的属性:
    • 文本文本财产:Visu2

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:灰色的

  14. 对对象进行编程Visu3因此。

    . 矩形的属性:
    • 文本文本财产:Visu3

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:深灰色

  15. 打开VisuMain目的。

  16. 可视化工具箱,在基本的类别,选择并拖动框架元素到可视化编辑器。

    框架配置对话框打开。

  17. 可用的可视化窗口区域,按可视化名称选项卡,选择对象Visu1。 在选定的可视化, 点击添加

  18. 然后选择对象Visu2并点击添加选定的可视化

  19. 然后选择对象Visu3并点击添加选定的可视化

  20. 点击好的关闭对话框。

    现在框架元素引用了三个选定的可视化效果。引用 (1) 列在参考元素属性中的属性框架元素。除了可视化名称外,还会显示相应的索引值 (2)。

    _visu_main_with_properties.png

    注意:单击配置值字段中的按钮参考属性。参见(3)。您可以通过可视化顺序来影响索引选定的可视化列表。

  21. 可视化工具箱,在常用控件类别,拖动单选按钮元素到可视化编辑器。

    特性元素的视图打开。

  22. 单选按钮设置单选按钮,点击创建新的按钮。

    该元素有三个开关可供选择。

  23. 配置单选按钮的属性如下:

    • 单选按钮设置区域 [0]文本财产:Visu1

    • 单选按钮设置区域 [1]文本财产:Visu2

    • 单选按钮设置区域 [2]文本财产:Visu3

    _visu_main_for_referencing.png
  24. PLC_PRG程序中,声明一个局部变量来表示活动的可视化的数量。

                                        VAR
                                        iActiveVisu : INT; // Index of visu activated by the user
                                        END_VAR
                                    
  25. 选择单选按钮元素的值字段多变的属性,单击_cds_icon_three_dots.png按钮。

  26. 输入助手对话框中,选择最近声明的变量。然后退出对话框。

    . 的财产单选按钮元素:
    • 多变的PLC_PRG.iActiveVisu

  27. 选择框架元素。单击切换框架变量多变的属性。在这里也指定最近声明的变量。

    . 的财产框架元素:
    • 切换框架变量多变的财产:PLC_PRG.iActiveVisu

    控制变量单选按钮元素也是框架元素。用户输入单选按钮元素切换框架可视化。

  28. 点击构建 → 生成代码

  29. 点击在线 → 登录并启动应用程序。

    可视化启动。其中一个引用的可视化正在框架中运行。当您点击单选按钮元素,可视化将框架中的内容切换为所需的可视化。

    _visu_reference_1_within_a_frame.png
    _visu_reference_2_within_a_frame.png
    _visu_reference_3_within_a_frame.png

在本例中,开关框架变量连接到一个输入变量。您也可以在 IEC 代码中以编程方式设置开关框架变量。

在主可视化中,框架元素在运行时显示框架可视化效果之一。用户可以使用按钮来控制框架中的显示。用户输入会触发切换框架可视化输入动作。

过程. 可视化编程
  1. 在中创建新的标准项目CODESYS

  2. 在设备树中选择应用程序并单击添加对象 → 可视化

  3. 添加可视化对话框中,指定名称VisuMain并点击添加关闭对话框。

  4. 在设备树中选择应用程序并单击添加对象 → 可视化

  5. 添加可视化对话框中,指定名称Visu1并点击添加关闭对话框。

  6. 在设备树中选择应用程序并单击添加对象 → 可视化

  7. 添加可视化对话框中,指定名称Visu2并点击添加关闭对话框。

  8. 在设备树中选择应用程序并单击添加对象 → 可视化

  9. 添加可视化对话框中,指定名称Visu3并点击添加关闭对话框。

    除了主可视化之外,还有三个可视化对象。

  10. 打开Visu1目的。

  11. 可视化工具箱,在基本的类别,选择并拖动长方形元素到可视化编辑器。

    特性元素的视图打开。

  12. 配置矩形的属性如下:

    • 文本文本财产:Visu1

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:浅灰色

    _visu_1_for_referencing.png
  13. 对对象进行编程Visu2因此。

    . 矩形的属性:
    • 文本文本财产:Visu2

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:灰色的

  14. 对对象进行编程Visu3因此。

    . 矩形的属性:
    • 文本文本财产:Visu3

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:深灰色

  15. 打开VisuMain目的。

  16. 可视化工具箱,在基本的类别,选择并拖动框架元素到可视化编辑器。

    框架配置对话框打开。

  17. 可用的可视化窗口区域,按可视化名称选项卡,选择对象Visu1。 在选定的可视化, 点击添加

  18. 然后选择对象Visu2并点击添加选定的可视化

  19. 然后选择对象Visu3并点击添加选定的可视化

  20. 点击好的关闭对话框。

    现在框架元素引用了三个选定的可视化效果。引用 (1) 列在参考元素属性中的属性框架元素。除了可视化名称外,还会显示相应的索引值 (2)。

    _visu_main_with_properties.png

    注意:单击配置值字段中的按钮参考属性。参见(3)。您可以通过可视化顺序来影响索引选定的可视化列表。

  21. 可视化工具箱,在常用控件类别,拖动按钮元素到可视化编辑器。

    元素被选中并且其属性在特性看法。

  22. 配置文本文本财产Visu1

  23. 输入配置鼠标按下时属性,单击配置

    输入配置对话框打开。

  24. 选择切换框架可视化操作并点击_icon_arrow_right.png

    该操作显示在右侧的窗口中。

  25. . 配置操作:
    • 选择切换本地可视化选项。

    • 设置可视化选择Visu1

    • 点击好的退出对话框。

    后续操作在输入配置财产。

    输入配置鼠标按下时切换框架可视化财产:0

  26. 拖动另一个按钮元素添加到可视化编辑器。相应地配置按钮。

    . 按钮的属性:
    • 文本文本财产:Visu2

    • 输入配置鼠标按下时切换框架可视化财产:1

  27. 拖动另一个按钮元素添加到可视化编辑器。相应地配置按钮。

    . 按钮的属性:
    • 文本文本财产:Visu3

    • 输入配置鼠标按下时切换框架可视化财产:2

  28. 点击构建 → 生成代码

  29. 点击在线 → 登录为设备并启动应用程序。

    可视化启动。其中一个引用的可视化正在框架中运行。单击其中一个按钮时,可视化会将框架中的内容切换到相应的可视化。

    _visu_1_in_runtime_action.png
    _visu_2_in_runtime_action.png
    _visu_3_in_runtime_action.png

对于标签,引用的可视化的导航将自动提供。第一个引用的可视化位于前台,而其他可视化则隐藏在“前台”之后。用户可以通过自动提供的选项卡在它们之间导航。

过程. 配置 tabs 元素
  1. 在中创建新的标准项目CODESYS

  2. 在设备树中选择应用程序并单击添加对象 → 可视化

  3. 添加可视化对话框中,指定名称VisuMain并点击添加关闭对话框。

  4. 在设备树中选择应用程序并单击添加对象 → 可视化

  5. 添加可视化对话框中,指定名称Visu1并点击添加关闭对话框。

  6. 在设备树中选择应用程序并单击添加对象 → 可视化

  7. 添加可视化对话框中,指定名称Visu2并点击添加关闭对话框。

  8. 在设备树中选择应用程序并单击添加对象 → 可视化

  9. 添加可视化对话框中,指定名称Visu3并点击添加关闭对话框。

    除了主可视化之外,还有三个可视化对象。

  10. 打开Visu1目的。

  11. 拖动长方形元素到可视化编辑器。

    特性元素的视图打开。

  12. 配置矩形的属性如下:

    • 文本文本财产:Visu1

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:浅灰色

    _visu_1_for_referencing.png
  13. 对对象进行编程Visu2因此。

    . 矩形的属性:
    • 文本文本财产:Visu2

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:灰色的

  14. 对对象进行编程Visu3因此。

    . 矩形的属性:
    • 文本文本财产:Visu3

    • 文本属性字体财产:标题

    • 颜色正常状态填充颜色财产:深灰色

  15. 打开VisuMain目的。

  16. 可视化工具箱,在基本的类别,选择并拖动框架元素到可视化编辑器。

    框架配置对话框打开。

  17. 可用的可视化窗口区域,按可视化名称选项卡,选择对象Visu1。 在选定的可视化, 点击添加

  18. 然后选择对象Visu2并点击添加选定的可视化

  19. 然后选择对象Visu3并点击添加选定的可视化

  20. 点击好的退出对话框。

    现在标签元素引用了三个选定的可视化效果。引用 (1) 列在参考元素属性中的属性框架元素。除了可视化名称外,还会显示相应的索引值 (2)。

    _visu_main_with_properties.png

    注意:您可以打开对话框框架配置单击配置值字段中的按钮参考属性。参见(3)。您可以通过可视化顺序来影响索引选定的可视化列表。

  21. 可视化工具箱,在常用控件类别,拖动标签元素到可视化编辑器。

    特性元素的视图打开。

  22. 配置选项卡的属性如下:

    • 标签宽度财产:40

    • 参考Visu1标题财产:Visu1

    • 参考Visu2标题财产:Visu2

    • 参考Visu3标题财产:Visu3

    _visu_within_a_tab.png
  23. 点击构建 → 生成代码

  24. 点击在线 → 登录为设备并启动应用程序。

    可视化启动。其中一个引用的可视化正在标签元素。单击选项卡即可切换到相应的可视化。

    _visu_within_a_tab_in_runtime.png