六、拓展技能训练
1.鼠标和数值动画练习
练习:手动控制阀门的开度。创建一个三角游标,用该游标的位置来代表阀门的开度,通过拖动该游标来改变阀门的开度,步骤如下。
(1)画面组态
创建一个画面组态窗口,在窗口中创建一个高为240像素的刻度尺,分别标示0~100%的刻度显示(刻度图标需要通过排列工具来调整实现刻度的均匀排列)。通过图库加载一个箭头,通过拖动该箭头来改变当前阀的开度。同时创建文本“###”来显示阀的当前开度。组态完的画面如图2-4-48所示。
图2-4-48 阀门开度的刻度显示界面
(2)变量定义
创建一个名为valve的实型中间变量,来表示阀门的开度值,如图2-4-49所示。
(3)添加箭头的动画
双击刻度旁边的箭头图标,为该图标添加“垂直拖动”动画效果。双击该图标,在弹出的“动画连接”对话框中勾选“拖动→垂直”,在弹出的“垂直拖动”对话框中(见图2-4-50)选择变量为“valve”,值变化为“在最低端时”为“0”,“在最顶端时”为“100.0”,表示valve的值能在0~100之间变化。移动像素数“向上最少”为“0”,移动像素数“向上最多”为“240”,表示箭头只能在0~240的高度范围内拖动。因为刻度尺起点为0,最高为240,因此这里填的数值是0和240。
图2-4-49 变量定义
图2-4-50 添加垂直拖动动画
(4)添加文本对象“###”的数值输出动画
鼠标双击文本对象“###”在弹出的“动画连接”对话框中勾选“数值输出→模拟”,在弹出的“模拟值输出”对话框中选择变量“valve”即可。
(5)运行
运行该工程后,用鼠标拖动该箭头图标,可以调整阀门的开度在0~100%之间连续变化,同时可以通过文本正确显示阀门的开度值。
2.动画效果的综合应用
练习:创建一个工程实现模拟电梯轿厢在井道内的运行状态模拟,具体要求如下。
1)新建组态画面,在画面中添加井道和轿厢。
2)添加“上升”“下降”“停止”和“检修”按钮。
3)单击“上升”按钮,轿厢开始上升,直至到最顶端。
4)单击“下降”按钮,轿厢开始下升,直至到最低端。
5)单击“停止”按钮,电梯轿厢停止运行。
6)当按下“检修”按钮时,“停止”按钮失效无法单击。同时“上升”和“下降”按钮变成点动按钮。
7)检修完毕再次按下“检修”按钮后回到正常状态。
8)实时显示运行高度、显示当前日期和时间(精确到秒)。
9)当“上升”“下降”“停止”和“检修”按钮被触发时显示绿色,平时显示红色。
说明:本练习需要综合使用颜色动画、鼠标动画、脚本编辑、数值输入等动画效果来实现。
参考的实现步骤如下。
(1)组态监控画面
1)创建井道、轿厢和背景(见图2-4-51)。
①通过工具箱创建一个高为600、宽为141的矩形对象作为井道,设置填充效果。
②创建一个高为60、宽为135的矩形对象作为轿厢(尺寸可以灵活掌握)。
③创建一个带填充效果的矩形模拟背景墙体。
④调整背景墙体、轿厢和井道的对齐方式和层次至合适位置。
2)创建控制按钮和文字符号。
在监控画面中添加“上升”“下降”“停止”和“检修”按钮以及当前时间和电梯当前高度的文字符号。
(2)创建变量
要实现控制逻辑和动画效果需要创建必要的变量,新建的变量如表2-4-1所示。
(3)实现控制逻辑和动画效果
1)添加控制逻辑。
在工程项目导航栏中“动作→应用程序动作”中添加如下运行脚本。
在脚本编辑器的“进入程序”编辑区输入以下脚本。
图2-4-51 模拟电梯运行监控画面
表2-4-1 变量说明表
//程序初次运行默认状态是非检修状态、同时电梯处于静止状态。
在脚本编辑器的“程序运行周期执行”编辑区输入以下脚本。
//若没按下“检修”按钮则上升和下降是自动的,若按下“检修”按钮,则上升和检修则变成点动按钮。
//单击了“上升”按钮,高度还没到顶端,则继续上升。
//单击了“下降”按钮,高度还没降到低端,则继续下升。
2)添加动画效果。
①为“停止”按钮添加动作脚本和颜色动画。
选择“动画连接→左键动作”,在“按下鼠标”脚本编辑区输入以下脚本。//非检修状态下按下“停止”按钮则电梯停止。
选择“动画连接→颜色变化→条件”,在对话框(见图2-4-52)中输入“down==0&&up==0”,“值为真时颜色”选择为绿色,“值为假时颜色”为红色,即可实现按钮被触发时显示绿色,平时显示红色。
图2-4-52 添加颜色变化动画
②为“上升”按钮添加动作脚本和颜色动画。
选择“动画连接→左键动作”,在“按下鼠标”脚本编辑区输入以下脚本。//非检修状态时的动作。
这里当为检修状态时按着“上升”按钮轿厢才上升,松开“上升”按钮轿厢停止运行,即“上升”按钮成为点动按钮。要实现该效果,需要在“上升”按钮的“动画连接→左键动作”的“鼠标按着周期执行”脚本编辑区输入以下脚本:
//检修状态时的动作
//单击了“上升”按钮,高度还没到顶端,则继续上升。
与“停止”按钮相同,对“上升”按钮选择“动画连接→颜色变化→条件”,在对话框中输入“up==1”,“值为真时颜色”选择为绿色,“值为假时颜色”为红色,即可实现按钮被触发时显示绿色,平时显示红色。
③为“下降”按钮添加动作脚本和颜色动画。
对“下降”按钮,选择“动画连接→左键动作”,在“按下鼠标”脚本编辑区输入以下脚本。
//非检修状态时的动画效果。
这里当为检修状态时按着“下降”按钮轿厢才下降,松开“下降”按钮轿厢停止运行,即“下降”按钮成为点动按钮。要实现该效果,需要在“下降”按钮的“动画连接→左键动作”的“鼠标按着周期执行”脚本编辑区输入以下脚本。//检修状态时的动作。
//单击了“下降”按钮,高度还没降到低端,则继续下升。
与其他按钮相同,选择“动画连接→颜色变化→条件”,在对话框中输入“down==1”,“值为真时颜色”选择为绿色,“值为假时颜色”为红色,即可实现按钮的颜色动画要求。
④为“检修”按钮添加动作脚本和颜色动画。
“检修”按钮的要求比较特殊,按下“检修”按钮,电梯处于检修状态,检修完毕再次按下“检修”按钮后回到正常状态。这里看起来都是由同一个按钮来实现,但在实现时我们是让两个完全一样外观的“检修”按钮叠放在一起,通过隐藏动画来实现的。
我们创建两个外观一致的“检修”按钮,为了区分我们命名其中的一个“检修”按钮为“检修1”按钮,另一个为“检修2”按钮。在“检修1”按钮的“动画连接→左键动作”的“按下鼠标”脚本编辑区输入以下脚本。
//按下“检修”按钮,电梯处于检修状态,停止运行。
该按钮的颜色动画我们的设置如图2-4-53所示,这样平时为非检修状态时该按钮显示为红色,即检修状态未被触发。
同时,需要设置该按钮的隐藏动画为repair==1时隐藏,这样按下“检修”按钮则电梯处于检修状态,该按钮隐藏。即该按钮只有在非检修状态时才出现,检修状态时隐藏,如图2-4-54所示。
图2-4-53 添加颜色变化动画
图2-4-54 添加可见性动画
接下来,在“检修2”按钮的“动画连接→左键动作”的“按下鼠标”脚本编辑区输入以下脚本。
//按下后检修信号消失,电梯处于静止状态。
该“检修2”按钮的颜色动画我们的设置如图2-4-55所示,这样平时检修状态时该按钮显示为绿色,显示检修信号被触发。
同时,需要设置“检修2”按钮的隐藏动画为repair==0时隐藏,即该按钮只有在检修时才出现,非检修状态时隐藏。
对“检修1”按钮和“检修2”按钮的“左键动作”“颜色变化→条件”“隐藏”动画都设置完成后必须要让二者中心尺寸相等、中心对齐,这样才能实现逼真的动画效果,设置完如图2-4-55和图2-4-56所示。
图2-4-55 颜色变化表达式
图2-4-56 可见性表达式
⑤为轿厢添加垂直移动动画效果。
对轿厢对象,选择“动画连接→目标移动→垂直”,在对话框中输入如2-4-57所示的文字。表达式为“hight.PV”,代表轿厢随着“hight.PV”值的变化而垂直移动。值为0时向上移动0,值为600时,向上移动的距离为530像素。
这里需要注意的是由于井道是600像素高,轿厢高为60,向上移动的距离是以轿厢的底部为基准的,因此若向上移动的距离填为600,则轿厢出现冒顶的状况,可以基于运行调试的状况来灵活调整数值,以使动画效果更加的逼真与实际相符。
⑥添加高度显示和时间显示。
在高度显示文本对象“###”中选择“动画连接→数值输出→模拟”添加动画即可,在对话框的表达式中输入或选择变量为“hight.PV”即可让文本对象“###”来显示电梯的实时运行高度。
日期和时间的显示是让两个文本对象来动画连接两个系统变量来实现的。日期的系统变量为“Date”,时间的系统变量为“
TimeEx”。“
Date”系统变量实时采集当前的日期,“
TimeEx”系统变量实时采集当前的系统时间(秒级)。
我们选中日期对象“###”,双击,选择“动画连接→数值输出→字符串”,在弹出的“字符输出”对话框(见图2-4-58)中的“表达式”栏中填写“Date”即可。同样道理可以完成时间动画连接的设置。
图2-4-57 添加垂直移动动画效果
图2-4-58 添加字符输出动画效果