搜索
第四章绘制现场画面北京亚控科技发展有限公司第四章绘制现场画面本章内容认识图形编辑器制作精灵图制作图形模型制作现场画面第一节认识图形编辑器在本章我们将利用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所示，我们选择线的宽度为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-18Brush属性设置同样的方法，我们设置液位（图素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缩放动画连接定义第四章绘制现场画面北京亚控科技发展有限公司第四步：保存精灵图：至此所有的动画连接完成了