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

第四章绘制现场画面
本章内容
认识图形编辑器
制作精灵图
制作图形模型
制作现场画面
第一节认识图形编辑器
在本章我们将利用KingSCADA3.1强大的绘图工具来制作现场的流程画面，画面的组成包括管道、阀门、水泵、反应釜、储藏罐等等。

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

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

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

启动图形编辑器的方法如下：
在KingSCADA3.1工程开发环境（KingMake）中单击“编辑”菜单中的“图形系统”命令，即可弹出画面编辑器，如图4-1所示：
图4-1画面编辑器
画面编辑器包括：菜单栏、工具栏、工具箱、编辑界面、动画连接窗口、内容窗口、对象浏览窗口、属性配置窗口。

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

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

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

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

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

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

如图4-2所示：
图4-2 新建画面
1、圆角矩形框：
选择基本图形工具的圆角矩形框，然后将图素放置在画面上。

圆角矩形的属性如图4-3所示：我们主要用到的属性为：
Pen：矩形边框属性；
Brush：矩形画刷属性；
DrawOption：矩形框显示属性；
现在我们先设置Pen属性，点击弹出设置线属性对话框，如图4-4所示，我们选择线的宽度为3，其他不变。

然后我们设置Brush属性，点击弹出设置画刷对话框，选择“线性”如图4-5所示，设置画刷的属性。

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属性进行按钮背景的填充；当选择多态时，可使用以下属性配置对按钮进行操作时相应的按钮背景颜色：
² PressedBackground：当按钮按下时，按钮显示的背景颜色
² FocusedBackground：当按钮处于焦点时，按钮显示的背景颜色
² DisabledBackground：当“Enable”属性设置为false时有效，即按钮不可操作时，按钮显示的背景颜色
（6）Caption：设置按钮上显示的文本；
（7）ShapeStyle：设置按钮的形状
我们制作一个按钮，并且将此按钮的控制功能与前面的管道结合起来使用，通过按钮来控制管道是否流动。

选择扩展工具的按钮，然后在画面上画出一个按钮，设置按钮的颜色、文本、字体等等属性，如图4-7
所示：我们设置按钮的文本为“阀门控制”，设置正常色、按下时颜色、获得焦点的颜色等等属性。

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

脚本程序如下：
if(\\local\valve_gate1==false)
{ \\local\valve_gate1 =true;
\\local\water_pump =true;
}
else
{ \\local\valve_gate1=false;
\\local\water_pump =false;
}
图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-16所示：选中“变量”，点击右键增加变量，弹出图4-17所示的变量定义对话框。

图4-16 增加变量
图4-17 变量定义
变量名称为：fluidValue，变量类型：float，初始值：0。

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

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

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

首先我们关联液位指示精灵图的面板（图素A）的背景颜色，选中作为背景的圆角矩形，设置Brush 属性，点击Brush属性后面的按钮，弹出如图4-18所示对话框，选择我们前面定义的BackColor属性，
点击“确定”完成此属性的关联。

图4-18 Brush属性设置
同样的方法，我们设置液位（图素D）的颜色属性，选中作为液位的圆角矩形，设置Brush属性，点击Brush属性后面的按钮，弹出如图4-18所示对话框，选择我们前面定义的fluidColor属性，点击“确认”完成此属性的关联。

其次再设置液位（图素D）的缩放的动画连接，选中作为液位的圆角矩形，选择“连接”，点击“增加连接”增加动画连接，如图4-19所示，选择缩放的动画连接。

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

然后进行相关设置：
图4-19 动画连接
选择关联的变量：fluidValue，此处只能够选择定义的精灵图的内部变量。

选择缩放比例为：线性缩放。

选择缩放的参考点：下。

图4-20 动画连接
设置最小时对应的数值：点击弹出如图4-18所示的对话框，选择属性Min，然后确定。

设置最大时对应的数值：点击弹出如图4-18所示的对话框，选择属性Max，然后确定。

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

点击确定完成设置。

图4-21 缩放动画连接定义
第四步：保存精灵图：
至此所有的动画连接完成了，精灵图的开发也就完成了。

单击“文件”菜单中的“保存”命令，弹出精灵图库对话框如图4-22所示：我们选中最上面的“Genius Graphy Folders”，点击右键弹出菜单，选择创建一个新的文件夹，给文件夹命名，例如：my genius。

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

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

保存之后再打开，如图4-23
精灵图的制作不仅仅是用基本作图工具来绘制，我们也可以利用现有的精灵图通过修改来生成新的精灵图。

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

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

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

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

制作过程如下：第一步：制作图形模型的外观：
在KingSCADA3.1开发环境的目录中选择“视图”→“图形模型”选项，在右侧编辑区中单击“新建”按钮，弹出对话框，如图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 图素制作
罐体设置完成后我们将精灵库中前面已经做好的精灵图取出来放置在罐体上面。

点击工具栏图标
弹出精灵图库对话框，选择我们前面定义的精灵图文件夹“my genius”，如图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-36 选择变量
这样我们图形模型变量的关联就完成了。

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

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

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

图形模型脚本主要有三种，分别为“打开时”、“存在时”、“关闭时”三种。

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

参考如图4-37所示：我们增加属性参数“报警色”、“正常色”，他们的类型都是“Brush”类型。

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

图4-37 定义参数
参数设置完成后我们进行脚本程序的编写：注意不要选择任何图素，然后在右侧的“连接”，通过点击“添加连接—基本”弹出如图4-38所示，我们先编辑“打开时”脚本。

如图4-39所示：脚本程序如下：float HAlarm;
float LAlarm;
HAlarm=Max*0.9;
LAlarm=Max*0.1;
if(液位高度<LAlarm||液位高度>HAlarm)
Text1.TextBrush=报警色;
else
Text1.TextBrush=正常色;
同样的方式增加“存在时”脚本，脚本程序与“打开时”相同，默认的执行周期为3000毫秒，我们修改为1000毫秒。

如图4-40所示：
图4-38 增加脚本
图4-39 打开时脚本
图4-40 存在时脚本
我们这里用不到“关闭时”，所以就不进行“关闭时”脚本的设置啦。

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

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

新建画面
在KingSCADA3.1图形编辑器点击“文件”菜单的“新建画面”命令，弹出对话框，如图4-41所示：
图4-41新建画面对话框
对话框设置如下：
名称：监控画面
画面位置：左边：0 顶端：0
显示宽度：1024
显示高度：700
画面宽度：1024
画面高度：700
画面类型：覆盖式
其他选项可根据需要设置。

设置完毕后单击“确认”按钮，该画面被建立在图形编辑器中，我们还可以通过画面的属性进行相关的设置，例如选择Backgroud属性，单击“”按钮，在弹出的画面背景颜色对话框中可以设置背景颜色的渐变效果等。

除了画面属性对话框外，凡是在画面中添加的任何图素或控件，在对其进行编辑时，都会有相应的属性对话框，如：按钮属性对话框、报警控件属性对话框、趋势曲线控件属性对话框等等，某些属性不仅可
以在开发时进行修改，在运行环境中也可以动态修改。

制作现场画面：
第一步：在图形编辑器中单击“对象”菜单中的“图形模型”命令，弹出图形模型选择对话框，选择我们前面建立的罐的图形模型，并将其添加到画面中，我们添加两个图形模型的罐，效果如图4-42所示：
图4-42 流程画面
第二步：在图形编辑器中单击“对象”菜单中的“精灵图”命令，在精灵库中选则具有搅拌器的反应罐“custom－test”，并将其添加到画面中，效果如图4-42所示：此反应罐可以通过控制电机来控制罐内搅拌器的搅拌运行，同时开可以通过仪表的表头显示一个模拟量数值，当在运行状态下鼠标移动到表头位置时表头会自动放大显示。

同样的方式我们从精灵图中将泵、阀门添加到画面中。

效果图如图4-43所示：
第三步：进行管道的连接，利用基本画图工具中的管道，将各个泵、阀门、罐、搅拌器等连接起来。

第四步：进行文字标注，利用基本画图工具中的文本T，对系统的各个图素进行命名。

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

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

对图素进行设置：
我们根据工程的功能要求对画面上的图素进行相关设置：
首先设置原料罐，选择原料罐的图形模型对象，修改右侧的属性对话框，如图4-44所示，前面我们制作图形模型时设置的属性在图4-45中可以显示出来，我们通过点击进行设置即可。

图4-44 属性设置
催化剂罐的属性设置与原料罐相似。

我们设置原料罐动画连接，选中原料罐图素，点击右侧的“连接”对话框，显示如图4-45所示，点击，弹出现在变量对话框，如图4-46所示，选择前面定义的数据模型变量：\\local\activator.liquid_level，
将此变量与图形模型对象的“液位高度”关联起来即可。

同样的方式设置催化剂罐的“液位高度”关联的变量：\\local\液位。

图4-45 连接对话框
图4-46 选择变量
设置管道的属性，为了区分不同的物质在不同管道中的颜色，我们可以将管道设置为三种不同的流动颜色，通过修改管道的“Innercolor”属性来设置流动的颜色。

如图4-47所示，这是运行环境下面显示的管道流动颜色。

启动或者停止管道的流动是通过控制管道的“连接—基本—管道流动”属性来实现的。

至于如何控制管道根据根据水泵、阀门状态来流动我们在下面章节中会介绍的。