| CODESYS Visualization > 教程 > 使用客户端动画 |
该示例显示了带有3个屏幕的可视化。菜单控制屏幕的导航。通过汉堡按钮进入菜单之前，菜单一直处于隐藏状态。移动过程中，菜单的透明度将改变。选定屏幕后，菜单移出视图。动画的计算完全基于目标系统。CODESYS可视化只定义目标值（位置、透明度）。
1.准备工作 2.创建 PLC_PRG 程序程序检查菜单按钮是否已按下。如果菜单栏不可见(位置-300)，那么该位置将移动到可见区域(0)。如果菜单栏已经可见(位置0)，那么该位置将移动到隐藏区域。
| 1. | 在编辑器中打开PLC_PRG程序。 |
| 2. | 在声明编辑器中输入以下代码： PROGRAM PLC_PRG
VAR
iSelection : INT; // 切换引用的可视化页面
xVisible: BOOL; // 辅助变量来切换菜单栏
iMenuPos : INT := -300; // 菜单栏的位置
xToggle: BOOL; // 切换菜单栏的按钮变量
END_VAR
|
| 3. | 在实现中输入以下代码: IF xToggle THEN
xToggle := FALSE;
IF xVisible THEN
xVisible := FALSE;
iMenuPos := -300;
ELSE
xVisible := TRUE;
iMenuPos := 0;
END_IF
END_IF
|
3.创建菜单栏菜单栏有3个菜单项。通过单击相应的菜单项，将显示一个可视化屏幕。
| 1. | 在应用程序下面插入一个Visu_Menu可视化。 | ||||
| 2. | 打开对象属性。在可视化选项卡中，设置可视化大小为宽度300，高度180。 | ||||
| 3. | 在编辑器中打开可视化。 | ||||
| 4. | 在属性视图中选择高级选项。 | ||||
| 5. | 在左上角添加一个宽度为300、高度为60的按钮。 | ||||
| 6. | 将按钮标记为“Visu 1”。设置字体大小为24。 | ||||
| 7. | 打开 Inputconfiguration ➔ OnMouseClick 属性。 | ||||
| 8. | 选择执行 ST 代码操作。 | ||||
| 9. | 输入以下ST代码： PLC_PRG.iSelection := 0;
PLC_PRG.xToggle := TRUE;
| ||||
| 10. | 设置按钮状态变量 ➔ 数字变量属性为 PLC_PRG.iSelection=0 | ||||
| 11. | 增加两个按钮，命名为“Visu 2”和“Visu 3”。 | ||||
| 12. | 编辑 "Visu2" (PLC_PRG.iSelection = 1) 和 "Visu3" (PLC_PRG.iSelection = 2)的按钮属性。
|
4.创建更多的可视化屏幕 5.创建主可视化屏幕在这个屏幕上，您可以看到菜单栏和显示或隐藏菜单栏的按钮。不同的可视化屏幕在一个框架可视化元素中导航。
| 1. | 打开Visu_Main可视化的属性。在可视化选项卡中，设置可视化大小为宽度800，高度600。 | ||||
| 2. | 在编辑器中打开可视化。 | ||||
| 3. | 在可视化中插入框架元素。
| ||||
| 4. | 添加可视化Visu1（索引 0），Visu2（索引1），Visu3（索引2）。 | ||||
| 5. | 设置位置 属性值如下：X = 0，Y = 0，宽度 = 800，高度 = 600。 | ||||
| 6. | 设置开关变量 ➔ 变量属性为 PLC_PRG.iSelection。 | ||||
| 7. | 在可视化中插入按钮元素。 | ||||
| 8. | 设置位置 属性值如下：X = 0，Y = 0，宽度 = 60，高度 = 60。 | ||||
| 9. | 文本 ➔ 文本属性值为=。 | ||||
| 10. | 文本 ➔ 文本属性值为Arial; 36。 | ||||
| 11. | 打开 Inputconfiguration ➔ OnMouseClick 属性。 | ||||
| 12. | 选择执行 ST 代码操作。 | ||||
| 13. | 输入以下ST代码： PLC_PRG.xToggle := TRUE;
| ||||
| 14. | 设置按钮状态变量 ➔ 数字变量属性为 PLC_PRG.xVisible。 | ||||
| 15. | 从当前工程类别中插入Visu_Menu可视化元素到可视化中。 | ||||
| 16. | 设置位置 属性值如下：X = 0，Y = 0，宽度 = 300，高度 = 180。 | ||||
| 17. | 设置属性值绝对移动 ➔ 移动 ➔ X 为 PLC_PRG.iMenuPos。 | ||||
| 18. | 设置状态变量 ➔ 不可见属性为 not(PLC_PRG.xVisible)。 | ||||
| 19. | 设置动画持续时间的属性值为2000。
|
6.将工程下载到控制器并启动 WebVisu