KingSCADA初级教程 第四章 现场画面

本文格式为Word版，下载可任意编辑——KingSCADA初级教程第四章现场画面第四章绘制现场画面

第四章绘制现场画面

本章内容

????

认识图形编辑器制作精灵图制作图形模型制作现场画面

第一节认识图形编辑器

在本章我们将利用KingSCADA3.1强大的绘图工具来制作现场的流程画面，画面的组成包括管道、阀门、水泵、反应釜、保存罐等等。在制作过程中我们还会用到图库精灵、图形模型等功能。

KingSCADA3.1图形编辑器中即绘制现场的画面，包括监控画面、趋势画面、报警画面、现场流程图等，还可以为画面中的图素设置连接动画，编写按钮的控制程序等等。图形编辑器为您提供了强大的绘图工具，不仅提供了基本绘图工具、扩展绘图工具、WindowsUI绘图工具还提供了精灵图库，大大提高了工程开发的效率。

启动图形编辑器的方法如下：

在KingSCADA3.1工程开发环境（KingMake）中单击“编辑〞菜单中的“图形系统〞命令，即可弹出画面编辑器，如图4-1所示：

图4-1画面编辑器

画面编辑器包括：菜单栏、工具栏、工具箱、编辑界面、动画连接窗口、内容窗口、对象浏览窗口、属性配置窗口。

在画面编辑器中开发画面时，可以随时切换到运行环境，测试画面效果，提高生产率和缩短开发周期。

北京亚控科技发展有限公司

第四章绘制现场画面

图形系统的绘图工具：

图形系统的绘图工具有三部分组成：基本工具、扩展工具和WindowsUI。

每种图素都包含一系列的对象属性，属性窗口中包括图素的名称、大小、位置等外观通用属性，用户可以对这些属性进行修改。同时每种图素还有自己的独特的属性。详细的图素属性说明请参考KingScada3.1操作手册，下面简单介绍几种图素的制作。新建画面：

在KingSCADA3.1图形编辑器中执行“文件〞菜单中的“新建画面〞命令，弹出如图4-2所示：输入画面名称，例如“学习〞，设置画面大小，然后点击“确定〞。

如图4-2所示：

图4-2新建画面1、圆角矩形框：

选择基本图形工具的圆角矩形框，然后将图素放置在画面上。圆角矩形的属性如图4-3所示：我们主要用到的属性为：

Pen：矩形边框属性；Brush：矩形画刷属性；DrawOption：矩形框显示属性；现在我们先设置Pen属性，点击

弹出设置线属性对话框，如图4-4所示，我们选择线的宽度为

弹出设置画刷对话框，选择“线性〞如图4-5所示，

3，其他不变。然后我们设置Brush属性，点击

设置画刷的属性。DrawOption属性可以设置显示的方式，其他属性的设置请参考操作手册。

北京亚控科技发展有限公司

第四章绘制现场画面

图4-4线属性设置

图4-5画刷属性设置

图4-3圆角矩形属性2、文本：

文本用来显示一个文本字符串，只能进行单行显示，该文本的大小随图素的尺寸而变化，十分适用于值输出的显示；对于多行文本的显示，建议使用Windows控件中的文本框或超级文本，文本框部分属性如下：

Text：显示的文本内容；

TextFont：显示的文本的字体；

TextBrush：显示的文本的颜色画刷；

选择基本图形工具的文本T，然后将图素放置在画面上。可以通过属性设置文本的内容、文本字体、文本颜色等等属性。

我们将文本“Text〞修改为“##〞，然后使用动画连接“添加连接〞选择模拟值输出，如图4-5，4-6所示使用模拟值输出动画连接，连接变量“\\\\local\\liquid_level〞。

北京亚控科技发展有限公司

第四章绘制现场画面

图4-5动画连接

图4-6模拟值输出

需要注意的是：当文本对象在开发状态下，输入带有“#〞的字符，即为数值类型的通配符，即当该字符串进行数值类型输出动画连接时，将文本中第一次遇到的#显示得到的数值，依照动画连接中设定的数值格式显示，例如：

1、当文本内容为“#米〞时，而值输出动画连接要显示的数据为20.4，则运行时，该文本显示“20.4米〞；

2、当文本内容为“此时液位高度为#米〞时，而值输出动画连接要显示的数据为20.4，则运行时，该文本显示“此时液位高度为20.4米〞；

北京亚控科技发展有限公司

第四章绘制现场画面

3、当文本内容为“###米###〞或者在单个#，则显示“20.4米###〞，包括当输入文本为“##.##〞时，也会将遇到的第一个不为#的字符替换为当前的数值显示，即显示为“20.4.##〞，因此不需要使用该通配符进行格式化；

4、当文本内容中不含有#号，却关联了数值输出类型的动画连接时，则在文本后面显示值输出，例如：原文本内容为“Text〞，关联动画后，显示“Text20.4〞；

3、管道：

管道是表示带有外壁并内部可以进行滚动的特别图素。管道部分属性如下：OOutterWidth：设置管道外壁的宽度，以像素为单位；OutterColor：设置管道外壁的颜色；

InnerWidth：设置管道内部的宽度，以像素为单位；InnerColor：设置管道内部的颜色；

选择基本作图工具的管道，在画面中依照要求画一条管道，然后根据需要设置相关的宽度、颜色属性，双击画面上的管道，“添加连接—基本—管道滚动〞，离散值输入中选择“\\\\local\\water_pump〞，假使“\\\\local\\water_pump〞变量为1，管道滚动，如图4-6。

图4-6管道滚动4、按钮

按钮可以设置成普通的按钮，也可以设置成多态按钮，按钮部分属性如下：（1）FlatStyle：置按钮外观风格；（2）Font：设置按钮文本的字体；

（3）Background：设置按钮的背景颜色；

（4）Foreground：设置按钮的前景颜色，即文本的颜色；

（5）Style：两种选择，常态和多态，当按钮处于常态时，使用Background属性进行按钮背景的填充；选中择多态时，可使用以下属性配置对按钮进行操作时相应的按钮背景颜色：

2PressedBackground：当按钮按下时，按钮显示的背景颜色2FocusedBackground：当按钮处于焦点时，按钮显示的背景颜色

2DisabledBackground：当“Enable〞属性设置为false时有效，即按钮不可操作时，按钮显示的背景颜色

（6）Caption：设置按钮上显示的文本；（7）ShapeStyle：设置按钮的形状

我们制作一个按钮，并且将此按钮的控制功能与前面的管道结合起来使用，通过按钮来控制管道是否滚动。

选择扩展工具的按钮，然后在画面上画出一个按钮，设置按钮的颜色、文本、字体等等属性，如图4-7

北京亚控科技发展有限公司

第四章绘制现场画面

所示：我们设置按钮的文本为“阀门控制〞，设置正常色、按下时颜色、获得焦点的颜色等等属性。

图4-7按钮属性设置

设置按钮的鼠标左键按下的动画连接，如图4-8，4-9所示，我们将管道的滚动动画与前面建立的变量valve_gate1结合起来，通过按钮控制阀门1的开通、闭合状态，以及控制管道的滚动与中止。脚本程序如下：

if(\\\\local\\valve_gate1==false){}else{}

\\\\local\\valve_gate1=false;\\\\local\\water_pump=false;\\\\local\\valve_gate1=true;\\\\local\\water_pump=true;

北京亚控科技发展有限公司

第四章绘制现场画面

图4-8按钮动画连接

图4-9按钮脚本

保存画面有进行运行系统，我们就可以通过点击按钮来控制管道的滚动啦。其他作图工具可以参考KingScada3.1的操作手册。

其次节制作精灵图

所谓精灵图就是在外观上类似于组合图素，但内嵌了丰富的动画连接和规律控制，工程人员只需把它从精灵图库中调出来放在画面上，再做少量的修改，就能完成繁杂的控制功能。

KingSCADA3.1的精灵图库中提供了大量工程中常用的精灵图，用户可以直接使用，假使精灵图库中没有适合您的精灵图，您也可以自己开发精灵图，然后将其放到图库中，以备日后使用。

北京亚控科技发展有限公司

第四章绘制现场画面

我们下面就制作一个液位指示精灵图在这个工程中使用，这个精灵图即能够显示液位数值，也能够动态显示液位的高低。

认识精灵图开发界面

在KingSCADA3.1图形编辑器中执行“文件〞菜单中的“新建—精灵图〞命令，弹出精灵图开发界面，如图4-10所示：

图4-10精灵图开发界面

精灵图开发界面与图形开发界面很相像，由菜单栏、工具栏、工具箱、图形编辑区、属性窗口等组成，操作方法也基本相像。

创立精灵图

第一步：制作精灵图外观：

在图4-10所示的图形编辑区编辑我们要做的精灵图形的外观，我们先利用前面讲的圆角矩形图素以及直线图素、文本图素，画出精灵图的各个组成部分，各个部分的颜色需要通过调色板进行设置，设置出我们需要的绚丽的颜色。如图4-11所示：这个精灵图的外观有6部分组成，我们用字母A、B、C、D、E、F表示。然后将各个组成部分一起组合成我们需要的精灵图形，如图4-12所示：这样精灵图的外观就做好了。在组合精灵图的时候我们会用到图素上下层的调整，可以选中图素，点击右键，通过右键菜单“位置〞来调整，如图4-13所示。

北京亚控科技发展有限公司

第四章绘制现场画面

图4-11精灵图的组成部分

图4-12精灵图的外观图4-13右键菜单其次步：建立精灵图的属性、变量：

我们要考虑好精灵图在使用中需要暴露出那些属性需要在使用中进行修改以及精灵图具备那些功能。在我们这个精灵图中我们可以考虑暴露到外面的属性包括：整体的背景颜色、需要动态显示的液位的颜色、液位高度的最大值、最小值。需要关联液位高度的变量。

属性定义：单击右侧“内容〞选项卡，选中“属性〞点击右键在弹出的右键菜单中执行“添加属性〞

北京亚控科技发展有限公司

第四章绘制现场画面

命令，弹出图4-14所示属性定义对话框，我们先定义背景颜色，属性名称：BackColor，属性类型：Brush。点击“默认〞后面的

弹出调色板，通过调色板设置默认的画刷类型与图4-11我们设置的画刷类型一致。

图4-14属性定义

依照这种方式我们再定义液位颜色：fluidcolor，类型：Brush。液位高度最大值：Max，最小值Min，类型：float。如图4-15所示，四个参数定义完成。

图4-15参数定义

北京亚控科技发展有限公司

第四章绘制现场画面

图4-26图形模型开发界面

图形模型开发界面与图形编辑器界面具有一致的布局，由菜单栏、工具栏、图形编辑区、属性窗口和连接窗口等构成。

我们利用基本作图工具椭圆、矩形框来制作罐体的外观，罐体（椭圆、矩形框）使用过渡色来表达金属质感，以增加罐体的美观程度。过渡色的设置可以通过Brush属性来设置。我们在罐体上添加一个可以显示液位高度的图素，利用圆角矩形和文本来实现。圆角矩形通过设置Pen，Brush来设置提高图素美观程度。文本T可以修改文本的颜色、字体。

如图4-27所示：为了以后在说明时简单一些，我们将罐体设为A图素，圆角矩形设为B图素，文本设置C图素。

图4-27图素制作

北京亚控科技发展有限公司

第四章绘制现场画面

罐体设置完成后我们将精灵库中前面已经做好的精灵图取出来放置在罐体上面。点击工具栏图标弹出精灵图库对话框，选择我们前面定义的精灵图文件夹“mygenius〞，如图4-28所示，选择右侧区域的液位指示的精灵图，双击此精灵图，然后放置在图形编辑区域。精灵图我们就叫图素D。

然后我们将精灵图与前面画的各种图素组合起来就制作完了了一个罐的图形模型的外观了。如图4-29所示的罐的图形外观。在组合图素的时候我们会用到图素上下层的调整，可以选中图素，点击右键，通过右键菜单“位置〞来调整，如图4-13所示。

图4-28精灵图库

图4-29图形模型外观

北京亚控科技发展有限公司

第四章绘制现场画面

其次步：建立图形模型的属性、变量：

制作属性、变量的方法与前面制作图库精灵的方法相像，具体操作可以参考前面讲解精灵图的属性、变量定义部分。

定义的图形模型的属性为：罐体颜色（图素A的颜色）、面板颜色（精灵图D背风景）、液位指示颜色（精灵图D液位指示颜色）、文本框颜色（图素B的背风景）、字体大小（图素C的字体）、Max、Min（对应精灵图D的Max、Min属性，也就是液位的最大值、最小值），其中颜色类型选择Brush，字体类型选择Font，Max、Min选择float类型。如图4-30所示：

图4-30图形模型属性设置

定义图形模型的变量为：液位高度。此变量主要是与液位指示的精灵的变量进行关联显示液位，以及与文本（图素C）进行模拟值输出的关联。

第三步：建立图形模型的动画连接：

图形模型的动画连接与前面讲解的精灵图的动画连接相像，主要是将我们前面定义的属性、变量与图形模型的具体图素关联起来。

建立图形与属性的关联：

首先我们将罐体（图素A）的颜色与“罐体颜色〞属性关联起来，选中作为罐体的圆角矩形，在右侧的属性栏中设置Brush属性，点击Brush属性后面的

按钮，弹出如图4-31所示对话框，选择我们前面定

义的“罐体颜色〞属性，点击OK完成此属性的关联。同样的方式选择作为罐体一部分的椭圆，进行Brush属性的设置。

图素B的颜色设置，选中圆角矩形然后设置右侧属性的Brush属性，点击Brush属性后面的出如图4-30所示对话框，关联图形模型的“文本框颜色〞属性。

文本图素C选择“##〞，然后设置右侧属性的TextFont属性，点击TextFont属性后面的

北京亚控科技发展有限公司

按钮弹

按钮弹出如

第四章绘制现场画面

图4-30所示对话框，关联到图形模型的“字体大小〞属性。

图4-30选择属性

设置精灵图D的属性，选中精灵图，右侧精灵图的属性如图4-31所示，首先设置“BackColor〞属性，点击BackColor属性后面的

按钮弹弹出如图4-30所示对话框，关联图形模型的“面板颜色〞属性。同样

的方式设置“fluidcolor〞属性，关联图形模型的“液位指示颜色〞属性。设置“Max〞属性，关联图形模型的“Max〞属性。设置“Min〞属性，关联图形模型的“Min〞属性。属性设置完成后，图形模型的属性变为如图4-32所示。

4-31精灵图属性图4-32精灵图属性建立图形与变量的关联：

属性设置完成后我们再进行变量的设置。变量的设置主要有两个地方需要设置，一个是文本（图素C）的模拟量输出，一个是精灵图（图素D）的液位高度。实际上两者关联的是同一个变量，即“液位高度〞变量。

选中文本“##〞，然后双击弹出如图4-33所示对话框，点击“添加连接〞，弹出下拉菜单，如图4-34所示，选择“值输出－模拟值输出〞，弹出关联变量对话框，选择

，弹出选择变量对话框，然后我们

选择变量“液位高度〞，设置显示的整数位数、小数位数分别为2位，点击确定完成此动画连接的设置。

北京亚控科技发展有限公司

第四章绘制现场画面

图4-33动画连接

精灵图变量的关联比较简单，选中精灵图，选择右侧的“连接〞，显示如图4-35所示图形，点击

弹

出变量选择对话框，如图4-36所示，此处即可以选择图形模型的变量，也可以选择系统变量。我们点击左侧的“This〞，在右侧即可显示我们前面定义的图形模型的变量“液位高度〞，选择此变量，点击“OK〞即可完成精灵图变量的关联。

图4-34下拉菜单

图4-35连接

北京亚控科技发展有限公司

第四章绘制现场画面

图4-43流程画面

这样我们就把一个基本的流程图画完了，假使为了画面美观，我们也可以做一些进一步的细致的美化工作，例如我们从精灵图中将墙壁的背景放到画面上，再利用基本图素的多边形做地板，可以设置多边形Brush属性的“Texture〞。

基本的流程图画面完成后，我们就可以根据工程要求的功能对图素进行属性设置以及动画连接了。

对图素进行设置：