第四章　HMI项目画面的组态和画面对象应用

第一节　模板的组态编辑

首先，按照第二章介绍的方法运用博途自动化工程组态软件创建一个新项目,将新项目名称设置为“画面组态和编辑_V13_SP1”，然后在该项目的“项目视图”界面的项目树窗格，鼠标双击打开“设备”→“画面组态和编辑”→“添加新设备”编辑器。弹出如图4-1-1所示添加新设备对话框。

按照图4-1-1中指示的5个步骤,为新项目添加TP1200型号的触摸屏。TP1200表示屏幕尺寸为12英寸，可用来替代早前型号的10"MP277等面板。图右侧有TP1200简单的参数说明，读者可对照第三章的图3-1-2，比较TP900的简单说明,了解精智系列面板的大致特性。

取消“启动设备向导”选项，是因为本章将学习和认识不用组态软件系统提供的“HMI设备向导”，手动分步创建组态上一章向导为我们所创建的那些画面、画面对象和模板等。

单击“确定”按钮，显示“画面组态和编辑”项目的“项目视图”界面，展开其项目树，如图4-1-2所示，可看到系统会生成一个空白的画面“画面_1”和一个空白的模板“模板_1”。下面我们就在这样的一个基础上组态模板和画面，通过拖放操作工具箱中的各类“画面对象”，选择和设定“画面对象”的属性、动画、事件等，完成模板和画面功能的编辑组态。

一、模板的作用和模板的层

模板中的组态对象将显示在基于此模板的所有画面中,这是模板的主要作用。每个画面都可在其常规属性中指定使用的模板。画面和模板之间遵从如下关系：

①一个模板不仅适用于一个画面；

②一个画面只能基于一个模板；

③一个HMI设备可以创建多个模板；

④一个模板不可基于另一个模板。

有些画面对象（例如公司标志Logo、显示日期/时间的域）或者画面功能（单击命令按钮回到起始画面等）希望在项目指定的许多个画面中都出现，那么，就把这些画面对象和功能按钮编辑在模板上，然后，这许多个画面都基于该模板就可以了。这样可以提高画面组态的效率，不必为每个画面都重复同样的组态操作，而且画面显示的一致性效果更好。还可以在模板中为 KP型HMI 设备分配功能键的函数，见第十三章内容。

精智系列HMI设备支持基于同一模板的所有画面的顶部区域开辟固定窗口的功能，即在模板设计时，将模板区域上边线下移，相当于模板区域缩小，面板上部腾出的区域叫做总览域，相当于为所有基于此模板的画面设定了一个固定窗口。

适用于画面的所有画面对象，包括控件等也同样适用于粘贴到模板中。

如果模板中的对象与画面中的对象具有相同的位置，则模板对象被覆盖。其原理如图4-1-3所示，我们按照图示箭头方向看过去的画面实际上是由系统层、全局画面、画面和模板等元素对象叠加在一起的，有固定的前后顺序，这反映了各个显示对象的优先级安排。

如图4-1-3所示，画面位于模板的前面，同一位置的画面上的画面对象就遮盖了模板上的画面对象，这在组态设计画面和模板时是要注意的。应用全局画面（后面通过实例介绍）时也会碰到相同的情况，全局画面上的显示对象可能会遮盖画面和模板上的画面对象。在它们之前还有一层系统层，用于在画面上显示博途软件系统的动作和信息，如触摸式面板的直接按键、输入对话框、操作系统报警等都显示在系统层中，不可编辑。

全局画面、画面和模板又各自都有32层叠加，所谓的层是透明看不见的存在的一个剖面片，这个概念在很多计算机绘图软件中都用到，这里也具有同样含义。模板或画面上的画面对象可以放到不同的层中，层可以通过一个层开关控制层是否显示，如果关闭某层的显示，则该层中所有画面对象都看不到了，这是个非常有实用意义的特性。处于编辑组态状态中的层叫做活动层，画面对象等都是组态在活动层中的，只有一个层是活动层，若想把某画面对象组态编辑到第N层，则首先将第N层设置为活动层，可以任意设定活动层。模板的层属性可以在模板的属性巡视窗格中设定，见图4-1-4。

在同一模板/画面层内，先后组态到模板/画面中的画面对象也是呈先后“叠加”状态放置的，后放置入的画面对象总是处于最上一层。最先置入模板/画面的画面对象处于最底层，这里的“层”不同于图4-1-4所示的层。在画面对象的右键快捷菜单中，可看到“顺序”→“上移一层”等命令，这是指同一层中画面对象的上下相对位置的移动。

到目前为止，我们组态的实例操作都是位于同一层的。

二、分步创建“HMI设备向导”中的那个引导型模板

在第三章介绍博途组态软件的“HMI设备向导”时，“HMI设备向导”自动创建了一个模板，这个模板有个重要功能就是可以引导对画面的浏览。但该模板是如何创建的呢？现在，我们在“画面组态和编辑”项目中分步创建这个模板，介绍创建过程，掌握画面对象的应用方法。

在图4-1-2中，双击打开“画面组态和编辑”→“HMI_2[TP1200 Comfort]”→“画面管理”→“模板”→“模板_1”。在编辑工作区窗格,显示“模板_1”,在右侧选项板区窗格,显示“工具箱”选项板，在中下方巡视窗格，显示“模板_1”的属性选项卡等，模板组态设计工作就将在这三个窗格中进行。

步骤一　确定模板的总览区和模板区

在“模板_1”上，将鼠标箭头指向显示区上边线，可以看到鼠标箭头形状变化为上下双箭头形状，按住左键向下拖动，可以看到显示区被能够拖动的上边线划分为上下两个矩形区域。上部矩形即为总览区（Overview）,对应画面固定窗口区，下部分矩形即为模板区，见图4-1-5。

鼠标点选“总览区”，这时“总览区”成为显示焦点，在下方的巡视窗口中对应显示“总览区”的属性及组态设置选项，可以在“属性”→“属性”选项卡中为总览区设定“背景色”、布局“高度”等属性。在上方的编辑工作窗口可以即时看到设定效果。

同理，使“模板区”处于显示焦点，在当前巡视窗口的属性选项卡中为模板设定名称、背景色等。图4-1-5的模板区即为显示焦点，显示焦点区周围有明显标记。

步骤二　在总览区组态Logo图标、画面浏览域等

在“总览区”粘贴一个Logo图标，一个显示日期/时间域和一个用于方便查看各画面的浏览域。

1.“图形视图”的用法—为模板/画面粘贴任意图形图片

在选项板窗口，从“工具箱”→“基本对象”展板中，将“图形视图”画面对象拖放到编辑工作区窗口内的“总览区”，运用鼠标调整“图形视图”的大小和安放位置，此时，“图形视图”画面对象的名称默认为“图形视图_1”，并处于显示焦点状态，围绕其四周分布有8个小矩形块，用鼠标拖放这些小矩形块，可以调整“图形视图”对象的大小。单击电脑键盘上的上下左右四个方向上的三角箭头键，可以实现“图形视图”画面对象在四个方向上的移动，通常较大范围上的移动，采用鼠标拖动的方式；小范围移动或者准确定位时，采用电脑键盘上的方向键操作。以上方法适于所有画面对象的编辑操作。

“图形视图”是一个基本的画面对象，相当于一个有边框的图片框，可以用来放置各种格式的图形图片，可使用下列图形格式： *.bmp、*.tif、*.png、*.ico、*.emf、*.wmf、*.gif、*.jpg 或 *.jpeg，也可在图形视图中将图形使用作为 OLE 对象。在模板或画面上粘贴图片，先在相应位置上放置一个“图形视图”画面对象，然后为其配置合适的图片即可，可以方便更换。

同时，在巡视窗口显示“图形视图”对象的属性选项卡等，见图4-1-6说明。

图4-1-6的“属性”→“属性”选项卡左侧为“属性列表”，有“常规”“外观”等属性；右侧为对应属性具体内容或参数查看组态区。其它的画面对象组态也是这种格式，仅属性列表内容不同。

在图形或图片列表中，选择并预览图形；也可通过执行“从文件创建新图形”命令按钮，在自己的图形文件夹中找到并输入图片，单击“应用”按钮，所选图片就粘贴到上述“图形视图_1”中，有了图形图片后，可能还要调整图形视图的位置及大小等,取得较好的显示效果。

图形视图的“外观”“布局”属性见图4-1-7、图4-1-8。“闪烁”和“其它”属性采用默认值。

在后面章节学习其它画面对象时,遇到具有相同和类似的属性选定设置内容时就不再一一赘述和图示,可参照前述的图示方法。

通过“图形视图”画面对象展示图形图片的效果见图4-1-14中的Logo图形。

运用“符号I/O域”画面对象创建一个方便查看任意画面的浏览域。例如，在HMI运行系统上，想查看画面名称为“机器实时运行状态”的画面，由于浏览域是在模板的总览区上组态的，浏览域中有一个保存所有画面名称的文本列表。这样在任意基于此模板的画面上的浏览域的文本列表中选中并使之显示“机器实时运行状态”文本，则运行系统会激活显示“机器实时运行状态”画面，即浏览域中选定哪个画面名称，当前面板就显示该画面，这样方便对任意指定画面的浏览查看。

“符号I/O域”画面对象的使用比之前“图形视图”的应用复杂些，例如要使用到变量表、文本和图形列表等编辑器和相关概念，这些重要的概念和编辑器使用还会详细叙述，在本例中仅介绍编辑操作过程，使读者有一个初步认识。

2. 实例操作初步认识“变量表”和“文本列表”

请看图4-1-9，从项目树开始预先创建一个变量表，在变量表中添加一个内部变量。

做法是双击图4-1-9当前项目树中的“默认变量表”，在编辑工作区窗口可看到打开的变量表。在变量表的名称列中双击<添加>字符,系统自动添加一个变量,重命名为“画面编号变量”，并设定为内部变量，内部变量是指WinCC系统内部使用的变量，不与PLC变量连接。数据类型为INT，即16位整数型变量,表示该变量只能作为整数参与程序运算。以后凡需要使用的变量，不论内部变量，还是外部变量（要连接PLC变量）都在变量表中创建，定义其属性。当项目较大,运用变量较多时,一个项目可以创建多个变量表,把具有某种一致含义的变量放在同一个变量表中,方便查看。变量的名称可以用具有一定含义，方便识别和记忆的中文，也可使用添加变量时系统默认的名称。

为方便识别画面，我们为每个画面命名，并安排一个唯一的整数编号。“画面编号变量”的作用是：在运行系统中，变量值与当前正在显示的画面的编号对应一致，改变变量值，就改变了显示的画面。例如使变量值为6，则面板当前就显示编号为6的画面，“符号I/O域”画面对象就能实现这种功能。

为画面分配编号的工作由“文本和图形列表”编辑器完成。如图4-1-9项目树中，双击打开“文本和图形列表”编辑器，在编辑工作区窗口显示文本和图形列表，如图4-1-10所示。

在图4-1-10文本列表的“名称”列中，双击<添加>字符，系统自动添加一个文本列表,重命名为“画面名称列表”，在“选择”列选择“值/范围”项。对应“画面名称列表”，在窗口下部的“文本列表条目”中输入画面名称和分配其整数值。这些画面是HMI项目通常要设计规划的画面，现在仅有个画面名称作为文本列表项，我们将在后续的章节中，分步骤创建编辑组态这些画面，在组态这些画面的过程中，学习认识按钮、I/O域、棒图等众多画面对象的属性、事件和用法，学习认识如何通过画面组态实现人机交互，控制机器设备，学习认识如何通过自动化工程软件编辑组态HMI项目。

通过定义一个“画面名称列表”的文本列表，为项目的每个规划画面分配一个唯一对应的整数值编号。

通过以上操作，我们在编辑工作区窗口先后打开“模板_1”“默认变量表”和“文本和图形列表”三个任务窗口。在整个组态软件下方的任务条上会显示目前处于活动状态的三个任务窗的标题名称。当前“文本和图形列表”任务标签高亮显示，对应编辑工作区窗口显示“文本和图形列表”编辑器界面。

在预先定义了一个内部变量（“画面编号变量”）和一个文本列表（“画面名称列表”）后，需回到“模板_1”任务中，单击任务条上的“模板_1”任务标签，呈高亮显示，且编辑工作区窗口显示“模板_1”画面。

3.“符号I/O域”的用法

从右侧选项板窗口的“工具箱”→“元素”展板中，将“符号I/O域”画面对象拖放到编辑工作区窗口内的“总览区”，调整位置和大小，如图4-1-14所示，运行状态下的“画面浏览域”就是“符号I/O域”，系统为其默认命名为“符号I/O域_1”。

在“符号I/O域_1”属性巡视窗口，显示其常规属性，见图4-1-11。在“属性”→“属性”→“常规”→“过程”→“变量”选项格中为其设定变量，操作方法见图中说明。本例选择先前创建的内部变量“画面编号变量”。

如果选择的是外部变量，则系统会显示连接的PLC变量名、地址、数据类型等信息。

在“属性”→“属性”→“常规”→“内容”→“文本列表”选项格中为其设定“画面名称列表”，可见条目设为3。

在“属性”→“属性”→“文本格式”属性中，为浏览域显示的文字设定字体、字形和大小等。

在“属性”→“属性”→“安全”属性中，可为操作浏览域设置操作安全权限，这个概念与项目的用户管理相关，详见“用户管理”章节介绍。

很多属性的设定效果都可在编辑工作区中及时看到，方便评估修改。

点击打开图4-1-11中的“属性”→“事件”选项卡，如图4-1-12所示。左侧为“符号I/O域_1”的事件选项，右侧为系统函数列表区，有关系统函数应用在后面章节中会专门介绍。

鼠标点击选择“更改”事件，在右侧系统函数列表第一行，点击下拉列表按钮，在弹出的系统函数列表中，选择“根据编号激活屏幕”系统函数，并为其参数项“画面号”配置参数“画面编号变量”。

系统函数是WinCC Advanced V13系统预先编制好的一段常用的功能程序，可供用户调用。系统函数很多，学好掌握好系统函数，可大大提高组态编程的效率。

4.“日期/时间域”的用法—显示HMI面板系统时间

在选项板窗口，从“工具箱”→“元素”展板中，将“日期/时间域”画面对象拖放到编辑工作区窗口内的“总览区”右侧，系统为其默认命名为“日期/时间域_1”。

在“日期/时间域_1”属性巡视窗口，显示其常规属性，见图4-1-13。在“属性”→“属性”→“常规”→“格式”中勾选“系统时间”，同时勾选“域”板块上的“显示日期”“显示时间”两项，表示要求“日期/时间域_1”显示HMI设备内置的时钟值，日期、时间同时显示。

在“属性”→“外观”→“背景”板块，为文本和颜色等取值，其中颜色值与“总览区”背景颜色值一致，“边框”“宽度”为0。

在“布局”参数组态区，取消“使对象适合内容”的选择，这时“日期/时间域_1”的大小可以调整。在“文本格式”中，为显示文本选择合适的字体、字形、大小和对齐方式等。

模板“总览区”组态结果见图4-1-14。

至此，“模板_1”创建结束，在这个模板上，我们介绍使用了三个画面对象：“图形视图”“符号I/O域”和“日期/时间域”。模板是给画面用的，下面我们创建基于“模板_1”的画面，每个画面用“文本域”画面对象为画面粘贴画面名称标签。

三、生成基于引导型模板的画面

1. 如何添加新画面

现在创建“文本和图形列表”编辑器中声明的那些个画面。具体做法如下。

回到图4-1-2所示项目树窗格，连续双击“画面”→“添加新画面”，在“画面”文件夹中工程组态软件系统会生成“画面_1”“画面_2”“画面_3”等，这些画面名称都是系统默认的，为明确画面名称与画面内容，现通过右键快捷菜单命令“重命名”这些画面，其中系统原定义的根画面“画面_1”重命名为“起始画面”。重命名后的结果见图4-1-15。

这些画面在一般的控制系统HMI项目中常会用到，画面名称包括:

①起始画面　HMI面板上电开始显示的项目画面。

②机器实时运行状态　表现机器（或者系统）设备实时运行时主要工艺工况和主要运行参数等。

③工艺参数设置画面　可结合“配方”控件输入机器（或者系统）设备的给定工艺参数等。

④手动操作画面　在自动化运行之外设定的手动运行操作画面。

⑤运行参数曲线图　主要运行参数以图示运行曲线的形式表现。

⑥报警信息画面（窗口）　集中显示机器（或者系统）设备系统出现的各种报警信息。

⑦系统画面　可以设置一个控制和显示控制系统运行状态的画面。

⑧用户管理画面　对接触机器（或者系统）设备的生产、工艺、设备、管理等各类人员的操作进行管理。

⑨机器使用和安全说明　机器（或者系统）的使用说明、图例图片和操作安全事项等

这些新创建的画面目前都是空白画面，等待编辑组态，它们都基于前面组态的“模板_1”，可在每个画面常规属性巡视窗口中组态选用画面的模板。在画面属性中组态是否使用模板，使用哪个模板，读者自己操作试一试。

注意每个画面，在其画面常规“属性”→“样式”→“编号”中输入画面编号，这个编号等于“文本和图形列表”中“文本列表条目”的值，否则，在画面浏览时会出现名不符实的情况。画面和编号值是唯一对应的。

在仿真演示这些新添加的画面时，由于都是空白画面，打开的画面都一样，因此下面用“文本域”画面对象，将每个画面的名称粘贴在其画面上，这样在仿真时，能够知道当前打开的是哪个画面，更清晰地看到浏览域操作画面翻页的动作是否正确。

2. 用“文本域”做画面名称标签

“文本域”是一个较常用的基本画面对象,主要用来为画面或者模板添加字符文字。

双击图4-1-15“画面”→“起始画面”，激活“起始画面”在编辑工作窗口区的显示。在选项板窗口，从“工具箱”→“基本对象”展板中，将“文本域”画面对象拖放到编辑工作区窗口内的画面组态区，系统为其默认命名为“文本域_1”。页眉显示的是模板_1的总览区的内容，页眉以下为画面组态区。

在属性巡视窗口，“文本域_1”的常规属性“文本”输入格内输入“起始画面”四个汉字。其它属性设定见图4-1-16。

在“属性”→“外观”中，设置“文本域_1”的背景颜色和填充图案，选定文本的显示颜色，是否有边框等。

可以用鼠标将文本域调整到画面合适的位置。

同理，为其它画面输入画面名称。为提高组态效率，可以采取复制的方法，将“起始画面”上的文本域_1（文本为“起始画面”）复制粘贴到其它画面上，在其它画面上的文本域属性窗口的“文本”输入格内更改输入为当前画面的名称，可以看到前述组态好的属性也都复制粘贴过来了。

将所有画面都粘贴画面名称字符标签。

四、画面/模板组态结果的编译和仿真

做出以上组态编辑后，点击图标工具行中按钮工具“保存项目”，系统在做出保存动作后，此按钮文字将变成灰色。然后点击“编译”按钮，系统将对当前所做的编辑组态工作进行检查，并译成可在运行系统中能够正确运行的格式。编译结果会在巡视窗口的“信息”→“编译”选项卡上显示出来，见图4-1-17。如果编译过程中出现警告和错误，会通报警告或者错误的细节，指导修正。

点击组态软件工具栏上的“开始仿真”工具按钮，工程组态软件进入仿真实际运行状态。图4-1-18是HMI设备项目的实时仿真运行画面。在画面名称浏览域中，选择“机器实时运行状态”，则HMI面板即时显示“机器实时运行状态”画面，可以看到画面中先前用“文本域”标明的画面名称标签。

在运行画面上单击浏览域右侧的下拉选择按钮，下拉菜单中显示一列画面名称清单，这些画面名称就是前面“文本和图形列表”编辑器中定义的项目画面名称及编号列表（见图4-1-10），从中任选一画面名称，HMI面板即显示指定画面。

浏览域的下拉列表一次只能显示三行文本，这对应图4-1-11“属性”→“属性”→“常规”→“内容”中的“可见条目”的设定参数为3，即下拉列表可显示3条画面名称，其它画面名称通过拖动右侧指示滑块查看。

日期和时间是用两个“日期/时间域”对象完成的，也可以只用一个“日期/时间域”组态，显示HMI面板的系统时间，而面板的系统时间通过面板的操作系统设定。