GIF控件在WINCCV7项目中的应用

admin管理员组

文章数量:1538169

2024年6月18日发(作者：)

GIF控件在WINCC V7项目中的应用

发布时间：2022-07-11T09:15:40.556Z 来源：《科技新时代》2022年7期 作者： 邓纯柳

[导读] GIF指的是图像交换格式。与其他图像格式相比，GIF可以采用LZW压缩算法编码，无损图像则采用索引色点阵图的方式。在实际应

用中，GIF压缩方法有两种：减少颜色数和减少帧数。所以在自动控制系统中，GIF动画是实现目标动态化应用显示最好的选择之一。

福建三钢冶金建设有限公司

内容摘要： 本文通过对西门子WINCC V7人机交互软件和GIF格式动画原理的探讨，深入地研究了GIF控件在WINCC经典项目中的应

用，通过长期细致项目运行比对，对图形图像显示效果与占用系统资源的分析，总结，充分展现了合理使用GIF动画效果在自动化控制系统

中的优势与创新。

关键词： WINCC、人机交互、动画、控件

1.引言

WINCC是西门子公司最经典的过程监视系统，它实现了自动控制系统与IT系统之间的互联互通。在WINCC中最为重要的就是人机交互

功能，它是利用WINCC强大的图形编辑器实现的。在工业企业中，上至管理层下到生产一线集控室，WINCC可以让每一位相关人员看到生

产流程的动态画面，从而更好地掌握生产现场的实际情况。这些主要来自WINCC的图形图像功能。WINCC虽然优势众多，但要在其创建的

人机交互画面上，显示出人们心中所期望的“动态”效果，并没有直接的方法。这就需要使用脚本运算或第三方控件等方法实现。本文就是

通过探索Animation GIF ActiveX这个第三方控件，在WINCC项目中动态效果的应用，以达到生产、技术和管理各方都较为满意，且操作

性、实用性强的动态化图形设计方法。本文所涉及的WINCC均由V5.X发展来的V7.X版本，即“经典版”，博图集成的WINCC版本无法使用

该功能。

动画的原理与优势

GIF指的是图像交换格式。与其他图像格式相比，GIF可以采用LZW压缩算法编码，无损图像则采用索引色点阵图的方式。在实际应用

中，GIF压缩方法有两种：减少颜色数和减少帧数。所以在自动控制系统中，GIF动画是实现目标动态化应用显示最好的选择之一。

图形编辑器与GIF控件结合

3.1 软件功能的扩展

在WINCC图形编辑器的对象选项板中的“控件”标签中，包含众多控件选项。这些控件可以直接插入画面中。可以使用“选择OCX控件”

对话框，并按要求更改选项。单个控件可以从选项中删除。该列表也可以使用操作系统中记录的任一ActiveX控件作为补充。ActiveX 控件

提供了将控制和监控系统过程的元素集成到过程画面中的选项。

3.2 GIF控件的特点

Animation GIF ActiveX是一款ActiveX多媒体控件，文件名为。通过该控件，用户可以在程序的OLE容器中显示GIF文件。它

支持所有的GIF89a标准，包括透明显示，循环播放，延迟时间，逻辑屏幕等功能，但该控件属于第三方控件，使用不善，可能导致错误以

及降低系统性能，甚至造成系统阻塞。

4.应用方法的实现

4.1 添加GIF控件

Animation GIF ActiveX不是WINCC图形编辑器自带的控件，所以，必须在WINCC图形编辑器中添加该控件。在添加之前，建议将控件

所在目录拷贝到用户当前编辑或使用的WINCC项目的目录下，以便项目备份到其它电脑后，不会遗失文件。

打开“选择OCX控件”对话框，在右键快捷菜单中选择“添加/删除”，打开“选择OCX控件”对话框。按下“注册OCX（R）...”，在“打开”对

话框中，按路径找到GIF控件文件，并“打开”。此后，“选择OCX控件”窗口的“可用OCX控件：”列表中，出现“Animation GIF

Control”选项，将其前面的复选标记勾选后，点击“确定”，此时，“Animation GIF Control”出现在对象选项板中的“控件”标签的列表中。

4.2 插入界面中的操作

打开WINCC项目并打开图形编辑器中所需编辑的过程画面，打开智能对象“控件”选项卡（有些版本操作上略有不同）。鼠标指针点击

“Animation GIF Control”，变为带有附带对象符号的十字形光标。将鼠标移动要画面中的指定位置，拖动光标放开可设置该控件的大小，若

直接在画面中单击会以默认大小放置在过程画面中，单击时的位置即为光标左上角的位置。控件对象的大小由包围对象的矩形几何参数确

定。拖动选择标记或修改控件对象属性“宽度”和“高度”值可以调整控件大小。使用此类方法也可以修改控件的位置。

在该控件中的任意位置中双击，弹出“Animation GIF Control属性”对话框。见图1。在“Animation GIF Control属性”中，与我们应用关系

紧密的有“GIF”和“Properties”两个选项卡。按下“GIF”选项卡中的“”按钮，找到GIF文件。在“Preview:”中预览即将要插入到过程画面

中的GIF文件图像，“Frame Count”后面的框内的数字为所选中GIF文件的帧数。按下“Clear”清除当前已选择的GIF文件。

图1 “Animation GIF Control属性”对话框

“Properties”选项卡的AutoSize 属性是使控件外框能够随GIF图像显示大小自动调整。Transparent属性勾选后，可支持GIF文件的全透明

背景显示。如果不勾选，全透明背景的GIF文件背景将使用“颜色”选项卡“BackColor”属性的颜色定义。通常将此项勾选。在“Stretch”属性单

选项中，选择“No Stretch”时，GIF文件图像显示大小不会随控件外框调整而改变；选择“Stretch”时，GIF文件图像显示大小能够随控件外框

调整而伸缩；选择“Proportional”，调整外框可控制图像显示大小，但图像比例不变。如需要选择后两项，需要取消“AutoSize”的勾选。

“Speed:”后面的数字为GIF动画的速度倍率，“1”为不变，数字越大，动画速度越慢。“Loop：”后面的数字为动画显示的周期次数，“0”为不

断循环显示。绝大部分选项在应用时都只需按默认选择。

5.制作符合应用要求的GIF动画文件

虽然网络上有各种各样的GIF下载途径和下载资源，但我们仍然很难在网上下载到完全符合生产实际要求的GIF文件。所以，根据现场

实际需求制作出小巧精细的GIF动画文件也是本文讨论的重点。

5.1制作软件

制作GIF动画最为专业和经典软件是Adobe Photoshop 。在GIF制作方面与Photoshop相似的还有Fireworks 。本文以Fireworks为例，论述

人机交互界面中常用的GIF动态图像文件的制作。

5.2 几种典型应用

在生产实际中，可以通过动画效果显示在WINCC画面上的设备主要有：启动的风机、泵类设备、给料机、输送机、物料流、提示或警

示灯（牌）等。

在不影响动态显示效果的前提下，GIF文件制作的原则是：大小1：1；帧数2到3帧，最好不超过5帧；颜色数量要少；确定好背景颜

色。

5.2.1 制作运行中的风机，也就是旋转的风叶效果

通过WINCC图形编辑器自带的图形库选一个风机外罩轮廓，调整确定大小。在其正中位置使用标准对象工具画一个正圆，层次在风机

外罩上一层，填充色可与风机外罩一致，请参照图3（一）风机静态时的显示。察看风机图形内正圆的对象属性，记下圆的直径像素值和圆

内填充的颜色代码。

图2 风机静态和动态显示的区别

启动Fireworks ，新建一个宽度与高度同圆的直径一致或略大的空白文件，画布颜色与圆内填充的颜色代码一致。使用适量绘图工具画

一个实心小圆，调整变形成一片风叶的形状，并将其平面化。

复制出另三片风叶，每片顺时针旋转90°，组合成一整个风扇图形（对象）。将每帧时间调整到20（0.2秒）到30（0.3秒），重制（复

制）帧，这样当前一共有两个帧。设置第二帧风扇图形的组合对象，将其顺时旋转45°。见图3。按“播放/停止”键预览。满意后，点击菜单

“文件”→“图像预览”，打开图像预览对话框，在“选项”标签的“格式”下拉选项中，找到“GIF动画”并点选，颜色数量选择“8”，透明度选择

“Alpha透明度”，其它保持默认不变。按“导出”按钮，导出该动画文件。查看导出的风机的GIF动态文件，显示仅占1.65KB，无论是制作过

程还是导出结果，均符合先前提到的制作原则，在插入项目使用时，能达到最小的资源占用率。

图3 风机GIF动画制作过程

参照本文4.2，将制作好的风机GIF动画插入WINCC项目中。调整位置，使GIF文件与原图中的圆形重合。见图2（二）风机动态时的显

示。

打开风机的GIF动态控件的对象属性，修改“显示”的静态属性为“否”，动态属性为变量“风机运行”，更新周期为“有变化时”。见图4。

图4 风机GIF控件的“对象属性”设置

保存后，激活WINCC试运行，在变量“风机运行”为“1”时显示的就是中间有红色风叶转动的动态效果。

5.2.2 制作给料机运行时的动态效果

与5.2.1风机运行的GIF动画的制作过程类似，所以共通部分不再赘述。

在WINCC图形编辑器中确定好给料机的位置、大小，以及画面的背景色。可以画一个背景无填充方框作为参照。记下方框的像素大小

和背景色代码。

在Fireworks中依照以上像素和背景色新建文件。使用矢量绘图工具画一个黑色虚线框，再调整成给料机的形状。此时，将文件通过“图

像预览”导出一个JPG文件，此文件做为给料机停机时显示。

将线框改为实线，填充“渐变”→“轮廓”，调整到满意的渐变状态。改变帧时长，重制帧。编辑第二帧，选定图像后按向下键，调整到

一定位置。播放，预览，导出GIF动画。如果需要更好的显示效果，可以适当增加颜色数量。查看导出的给料机动态GIF文件仅为829字节。

在WINCC图形编辑器中，先插入“智能对象”→“图形对象”，插入静态JPG图像到已确定的给料机位置，并修改“对象属性”中的“宽度”和

“高度”与方形图像素一致。再插入“GIF控件”，找到给料机动图，勾选控件属性“Properties”选项卡内的“AutoSize”属性，其它默认，点击“确

定”。

这里GIF控件的“对象属性”设置为变量“给料机运行”为“1”时显示，给料机静态的“图形对象”的“对象属性”则是在变量“给料机运行”为

“0”时显示，见图6。删除前面用于参照所绘的方框。使用对齐工具将动态和静态两幅图对齐。保存过程画面，激活试运行，观察效果。

图6 给料机静态时的图形对象显示属性设置

5.2.3 输送机动态图形的制作

输送机静止时，可以参照给料机静止状态，仅在画面上显示一个虚框。动态时，展示所制作的GIF动态文件。虚框可以在WINCC图形

编辑器里绘制，也可以像给料机静态图一样，使用图形图像软件制作，再插入到WINCC画面中。以下仅讨论输送机GIF动态图的制作。

首先参照风机动态效果的制作，使用Fireworks制作一个3到5帧皮带滚筒的旋转截面。新建输送机图像文件，使用矢量绘图绘制一个长

的圆角矩形，笔刷使用基本毛笔或类似接近45°的扁笔头，宽度设置在10左右。重制成3帧。在第一帧导入皮带滚筒GIF动图。重要的是在皮

带的上层面添加一个线性渐变填充图，每一桢所填充的高亮光影不尽相同，高亮光影向左位移或向右位移，就形成了输送机运行的定向动

态效果。见图7的帧分解示意。

图7 输送机光影效果逐帧分解

输送机表面光影移动的方向应与其滚筒滚动的方向一致。输送机传送物料的方向应与实际方向相同。

总而言之，在制作人机交互画面时，都应与现场实物和设备的运行状态为参照，不可有太大出入或反其道而行。否则，会给操作人员

的操作带来不便与困扰，甚至造成安全隐患。另外，太多的动态图片一起显示，会减弱其本身重点凸显的效果，再加上GIF文件如果本身优

化不足，更会给系统带来不必要的负担，所以是否使用GIF控件做为一般设备的运行或常态效果的显示，还需要多斟酌。

6.总结

人机交互界面显示的美观舒适和操作便捷，体现了企业的以人为本的管理模式。实现人机交互画面的动态显示的方法多种多样，各有

所长。就算是世界巨头西门子公司也在不停地探索WINCC在图形图像显示效果方面提升的途径。做为一名工程技术人员，更要深入技术领

域的各个方面，在前人的基础上总结积累、富于创新、大胆尝试，创造出更合理更高效的解决方案。

本文标签： 控件显示使用对象文件