04第四章 现场画面aa.docx

04第四章 现场画面aa.docx

《04第四章 现场画面aa.docx》由会员分享，可在线阅读，更多相关《04第四章 现场画面aa.docx（45页珍藏版）》请在冰豆网上搜索。

04第四章现场画面aa

第四章

绘制现场画面

本章内容

&认识图形编辑器

&制作精灵图

&制作图形模型

&制作现场画面

第一节认识图形编辑器

在本章我们将利用KingSCADA3.0强大的绘图工具来制作现场的流程画面，画面的组成包括管道、阀门、水泵、反应釜、储藏罐等等。

在制作过程中我们还会用到图库精灵、图形模型等功能。

KingSCADA3.0图形编辑器中即绘制现场的画面，包括监控画面、趋势画面、报警画面、现场流程图等，还可以为画面中的图素设置连接动画，编写按钮的控制程序等等。

图形编辑器为您提供了强大的绘图工具，不仅提供了基本绘图工具、扩展绘图工具、WindowsUI绘图工具还提供了精灵图库，大大提高了工程开发的效率。

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

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

图4-1图形编辑器

图形编辑器包括：

菜单栏、工具栏、绘图工具、属性窗口、动画连接窗口、对象窗口。

在图形编辑器中开发画面时，您可以随时切换到运行环境，测试画面的效果，这一特点能够显著提高生产率和缩短开发周期。

图形系统的绘图工具：

图形系统的绘图工具有三部分组成：

基本工具、扩展工具和WindowsUI。

每种图素都包含一系列的对象属性，属性窗口中包括图素的名称、大小、位置等外观通用属性，用户可以对这些属性进行修改。

同时每种图素还有自己的独特的属性。

详细的图素属性说明请参考KingScada3.0操作手册，下面简单介绍几种图素的制作。

新建画面：

在KingSCADA3.0图形编辑器中执行“文件”菜单中的“新建画面”命令，弹出如图4-2所示：

输入画面名称，例如“学习”，设置画面大小，然后点击“确定”。

图4-2新建画面

1、圆角矩形框：

选择基本图形工具的圆角矩形框，然后将图素放置在画面上。

圆角矩形的属性如图4-3所示：

我们主要用到的属性为：

Pen：

矩形边框属性；

Brush：

矩形画刷属性；

DrawOption：

矩形框显示属性；

现在我们先设置Pen属性，点击

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

然后我们设置Brush属性，点击

弹出设置画刷对话框，选择“linear”如图4-5所示，设置画刷的属性。

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

图4-4线属性设置

图4-3圆角矩形属性图4-4画刷属性设置

2、文本：

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

Text：

显示的文本内容；

TextFont：

显示的文本的字体；

TextBrush：

显示的文本的颜色画刷；

选择基本图形工具的文本T，然后将图素放置在画面上。

可以通过属性设置文本的内容、文本字体、文本颜色等等属性。

我们将文本“Text”修改为“##”，然后使用动画连接links选择模拟值输出，如图4-5，4-6所示使用模拟值输出动画连接，连接变量“\\local\activator.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、管道：

管道是表示带有外壁并内部可以进行流动的特殊图素。

管道部分属性如下：

OutterWidth：

设置管道外壁的宽度，以像素为单位；

OutterColor：

设置管道外壁的颜色；

InnerWinth：

设置管道内部的宽度，以像素为单位；

InnerColor：

设置管道内部的颜色；

FlowStart：

设置流动启动的条件，可以绑定组态王变量，也可以手动设定一个Bool值，即默认一直流动；

FlowDirection：

设定流动的方向，0为由起始端流到终止端，1为相反方向；

FlowSpeed：

可设置3种速度，快速、中速、慢速；

选择基本作图工具的管道，在画面中按照要求画一条管道，然后根据需要设置相关的宽度、颜色属性，我们可以将FlowStart属性设置为true，然后保存画面，将系统切换到运行环境看管道的流动状态如图·4-6所示。

图4-6管道流动

4、按钮

按钮可以设置成普通的按钮，也可以设置成多态按钮，按钮部分属性如下：

背景色：

设置按钮的颜色：

前景色：

设置按钮中文本的颜色；

按钮类型选择：

有两种选择，常态和多态，当按钮处于常态时，使用“背景色”属性进行按钮背景的填充；当选择多态时，使用以下属性进行按钮背景填充：

Ø正常背景颜色：

当按钮处于正常状态下，按钮显示的颜色；

Ø焦点背景颜色：

当按钮处于焦点时，按钮显示的颜色；

Ø按下背景颜色：

当按钮被按下时，按钮显示的颜色；

Ø实效背景颜色：

当按钮的Enable为Flase时，按钮显示的颜色；

字体：

按钮上显示的文字的字体；

文本：

按钮上显示的文本内容；

提示：

当鼠标移动到该按钮上时，显示的提示信息；

按钮形状：

可选矩形、椭圆和菱形中的任一种；

按钮风格：

可选择XP、Flat、3D中的任一种；

我们制作一个按钮，并且将此按钮的控制功能与前面的管道结合起来使用，通过按钮来控制管道是否流动，我们重新将管道的FlowStart属性设置为false，让管道进入运行环境时选不流动。

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

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

图4-7按钮属性设置

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

脚本程序如下：

if（\\local\valve_gate1==false）

{\\local\valve_gate1=true;

Pipe1.FlowStart=true;

}

else

{\\local\valve_gate1=false;

Pipe1.FlowStart=false;

}

图4-8按钮动画连接

图4-9按钮脚本

保存画面有进行运行系统，我们就可以通过点击按钮来控制管道的流动啦。

其他作图工具可以参考KingScada3.0的操作手册。

第二节制作精灵图

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

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

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

认识精灵图开发界面

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

图4-10精灵图开发界面

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

创建精灵图

第一步：

制作精灵图外观：

在图4-10所示的图形编辑区编辑我们要做的精灵图形的外观，我们先利用前面讲的圆角矩形图素以及直线图素、文本图素，画出精灵图的各个组成部分，各个部分的颜色需要通过调色板进行设置，设置出我们需要的绚丽的颜色。

如图4-11所示：

这个精灵图的外观有6部分组成，我们用字母A、B、C、D、E、F表示。

然后将各个组成部分一起组合成我们需要的精灵图形，如图4-12所示：

这样精灵图的外观就做好了。

在组合精灵图的时候我们会用到图素上下层的调整，可以选中图素，点击右键，通过右键菜单“Position”来调整，如图4-13所示。

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

图4-12精灵图的外观图4-13右键菜单

第二步：

建立精灵图的属性、变量：

我们要考虑好精灵图在使用中需要暴露出那些属性需要在使用中进行修改以及精灵图具备那些功能。

在我们这个精灵图中我们可以考虑暴露到外面的属性包括：

整体的背景颜色、需要动态显示的液位的颜色、液位高度的最大值、最小值。

需要关联液位高度的变量。

属性定义：

单击右侧“content”选项卡，选中“Properties”点击右键在弹出的右键菜单中执行“Add”命令，弹出图4-14所示属性定义对话框，我们先定义背景颜色，属性名称：

BackColor，属性类型：

Brush。

点击“Default”后面的

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

图4-14属性定义

按照这种方式我们再定义液位颜色：

fluidcolor，类型：

Brush。

液位高度最大值：

Max，最小值Min，类型：

float。

如图4-15所示，四个参数定义完成。

图4-15参数定义

变量定义：

在这里建立的变量是局部变量，只能应用在精灵图中，不能用在工程的其它地方。

参数定义完成后我们定义关联液位高度的变量。

如图4-16所示：

选中“Variables”，点击右键增加变量，弹出图4-17所示的变量定义对话框。

图4-16增加变量

图4-17变量定义

变量名称为：

fluidValue，变量类型：

float，初始值：

0。

精灵图的属性、变量定义完成。

下面我们定义精灵图的动画关联。

第三步：

建立精灵图的动画关联：

精灵图的动画关联主要是将我们前面定义的属性、变量与精灵图的具体图素关联起来。

首先我们关联液位指示精灵图的面板（图素A）的背景颜色，选中作为背景的圆角矩形，设置Brush属性，点击Brush属性后面的

按钮，弹出如图4-18所示对话框，选择我们前面定义的BackColor属性，点击OK完成此属性的关联。

图4-18Brush属性设置

同样的方法，我们设置液位（图素D）的颜色属性，选中作为液位的圆角矩形，设置Brush属性，点击Brush属性后面的

按钮，弹出如图4-18所示对话框，选择我们前面定义的fluidColor属性，点击OK完成此属性的关联。

其次再设置液位（图素D）的缩放的动画连接，选中作为液位的圆角矩形，选择Links，点击

增加动画连接，如图4-19所示，选择缩放的动画连接。

弹出如图4-20所示的对话框。

然后进行相关设置：

图4-19动画连接

选择关联的变量：

fluidValue，此处只能够选择定义的精灵图的内部变量。

选择缩放比例为：

Linearscaling。

选择缩放的参考点：

Bottom。

图4-20动画连接

设置最小时对应的数值：

点击

弹出如图4-18所示的对话框，选择属性Min，然后确定。

设置最大时对应的数值：

点击

弹出如图4-18所示的对话框，选择属性Max，然后确定。

设置完成后如图4-21所示。

点击确定完成设置。

图4-21缩放动画连接定义

最后我们设置坐标值（图素F部分）。

选择文本“100”，找到“Text”属性，点击

，然后弹出如图4-18所示画面，在String部分填写“Max+""”，如图4-22所示。

点击确定完成设置。

选择文本“00”，找到“Text”属性，点击

，然后弹出如图4-18所示画面，在String部分填写“Min+""”，点击确定完成设置。

选择文本“50”，找到“Text”属性，点击

，然后弹出如图4-18所示画面，在String部分填写“（Max-Min）/2+""”，点击确定完成设置。

这样坐标值的设置就完成了。

图4-22设置文本的Text属性

第四步：

保存精灵图：

至此所有的动画连接完成了，精灵图的开发也就完成了。

单击“文件”菜单中的“保存”命令，弹出精灵图库对话框如图4-23所示：

我们选中最上面的“GeniusGraphyFolders”，点击右键弹出菜单，选择创建一个新的文件夹，给文件夹命名，例如：

mygenius。

然后给这个精灵图命名，例如：

genius1。

这样一个精灵图就完成了。

精灵图的制作不仅仅是用基本作图工具来绘制，我们也可以利用现有的精灵图通过修改来生成新的精灵图。

我们在后面的工程画面的制作中也会用到此精灵图的。

图4-23保存精灵图

第三节制作图形模型

图形模型：

模拟现实中的生产设备，如锅炉、电机设备的图形展示、动画连接、安全设置、脚本语言等，把这些功能组合在一起形成图形模型，用户在使用时只需要将模型实例化，即对图形模型进行一系列配置，可以快速把图形展示及动态效果部署到工程中。

图形模型相对于图库精灵的优势在于不仅仅具有动画连接，还可以编写脚本程序，同时当模型重新编辑后，会把产生变化的内容更新到已经实例化的模型对象中。

我们将前面做的精灵图与罐结合起来制作一个图形模型来在本培训工程中使用。

制作过程如下：

第一步：

制作图形模型的外观：

在KingSCADA3.0开发环境的目录中选择“视图”→“图形模型”选项，在右侧编辑区中单击“新建”按钮，弹出对话框，如图4-24所示：

图4-24创建图形模型对话框

在图4-24中输入图形模型的名称如：

罐，并根据需要设置该模型的其他选项，如：

模型描述、创建者、密码等，如果设置密码的话，在对该模型执行编辑或删除操作时需要正确输入密码。

设置完毕后，单击“确认”按钮，该模型出现在开发环境的右侧编辑区中，如图4-25所示：

图4-25编辑区中的图形模型

在图4-25中选中模型图标，单击“编辑”按钮或双击图形模型图标，弹出对话框，如图4-26所示：

如果在创建图形模型对话框中设置密码的话，在编辑之前系统会提示密码输入对话框，只有输入正确后才可弹出下图：

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

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

我们利用基本作图工具椭圆、矩形框来制作罐体的外观，罐体（椭圆、矩形框）使用过渡色来体现金属质感，以增加罐体的美观程度。

过渡色的设置可以通过Brush属性来设置。

我们在罐体上添加一个可以显示液位高度的图素，利用圆角矩形和文本来实现。

圆角矩形通过设置Pen，Brush来设置提高图素美观程度。

文本T可以修改文本的颜色、字体。

如图4-27所示：

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

图4-27图素制作

罐体设置完成后我们将精灵库中前面已经做好的精灵图取出来放置在罐体上面。

点击工具栏图标

弹出精灵图库对话框，选择我们前面定义的精灵图文件夹“mygenius”，如图4-28所示，选择右侧区域的液位指示的精灵图，双击此精灵图，然后放置在图形编辑区域。

精灵图我们就叫图素D。

然后我们将精灵图与前面画的各种图素组合起来就制作完了了一个罐的图形模型的外观了。

如图4-29所示的罐的图形外观。

在组合图素的时候我们会用到图素上下层的调整，可以选中图素，点击右键，通过右键菜单“Position”来调整，如图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所示，选择“ValueOutput－AnalogOutput”，弹出关联变量对话框，选择

，弹出选择变量对话框，然后我们选择变量“液位高度”，设置显示的整数位数、小数位数分别为2位，点击确定完成此动画连接的设置。

图4-33动画连接

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

弹出变量选择对话框，如图4-36所示，此处即可以选择图形模型的变量，也可以选择系统变量。

我们点击左侧的“This”，在右侧即可显示我们前面定义的图形模型的变量“液位高度”，选择此变量，点击“OK”即可完成精灵图变量的关联。

图4-34下拉菜单图4-35Lins连接

这样我们图形模型变量的关联就完成了。

建立图形模型的脚本程序：

我们前面讲精灵图的时候可以知道精灵图是包含动画连接的，而图形模型不仅仅包含动画连接，还有脚本程序。

那么下面我们就举例说明图形模型脚本程序的使用方法。

我们假定在通过文本“##”显示液位高度的时候让此文本根据不同的数值显示不同的颜色，例如当液位高度超过90％或者低于10％时用报警色（例如红色）显示，在10％－90％之间时用正常色（例如绿色）显示，我们就可以使用图形模型的脚本程序了。

图4-36选择变量

图形模型脚本主要有三种，分别为OnOpen、WhileOpen、OnClose三种。

我们要设置文本的颜色，需要先设置文本颜色的属性，属性的设置与前面讲过的操作方式相同。

参考如图4-37所示：

我们增加属性参数“报警色”、“正常色”，他们的类型都是“Brush”类型。

默认的颜色通过调色板进行设置。

图4-37定义参数

参数设置完成后我们进行脚本程序的编写：

注意不要选择任何图素，然后在右侧的Links通过点击

弹出如图4-38所示，我们先编辑“OnOpen”脚本。

如图4-39所示：

脚本程序如下：

floatHAlarm;

floatLAlarm;

HAlarm=Max*0.9;

LAlarm=Max*0.1;

if（液位高度HAlarm）

Text1.TextBrush=报警色;

else

Text1.TextBrush=正常色;

同样的方式增加“WhileOpen”脚本，脚本程序与“OnOpen”相同，默认的执行周期为3000毫秒，我们修改为1000毫秒。

如图4-40所示：

图4-38增加脚本

图4-39OnOpen脚本

图4-40WhileOpen脚本

我们这里用不到“OnClose”，所以就不进行“OnClose”脚本的设置啦。

这样图形模型的脚本程序就完成了。

第四节制作现场流程图

我们利用前面讲的基本图素、亚控公司提供的精灵图和我们前面制作的图形模型来制作现场的流程画面。

新建画面

在KingSCADA3.0图形编辑器点击“文件”菜单的“新建画面”命令，弹出对话框，如图4-41所示：

图4-41新建画面对话框

对话框设置如下：

名称：

监控画面

画面位置：

左边：

0顶端：

0

显示宽度：

1024

显示高度：

700

画面宽度：

1024

画面高度：

700

画面类型：

覆盖式

其他选项可根据需要设置。

设置完毕后单击“确认”按钮，该画面被建立在图形编辑器中，我们还可以通过画面的属性进行相关的设置，例如选择Backgroud属性，单击“

”按钮，在弹出的画面背景颜色对话框中可以设置背景颜色的渐变效果等。

除了画面属性对话框外，凡是在画面中添加的任何图素或控件，在对其进行编辑时，都会有相应的属性对话框，如：

按钮属性对话框、报警控件属性对话框、趋势曲线控件属性对话框等等，某些属性不仅可以在开发时进行修改，在运行环境中也可以动态修改。

制作现场画面：

第一步：

在图形编辑器中单击“Object”菜单中的“GraphyModel…”命令，弹出图形模型选择对话框，选择我们前面建立的罐的图形模型，并将其添加到画面中，我们添加两个图形模型的罐，效果如图4-42所示：

图4-42流程画面

第二步：

在图形编辑器中单击“Object”菜单中的“Genius…”命令，在精灵库中选则具有搅拌器的反应罐“Blend