第5讲 监控界面

常规组态软件难以实现的动画效果 组合图形特有 动画的多级嵌套、相对动画 配置极其简单
用户程序动画
编写脚本程序直接控制图形对象的动画 实现特殊动画效果、功能强大 随心所欲、如虎添翼
复合动画和用户程序动画是易控独创的高级动画功能。 在常规动画中也有许多是易控独有的特点。
常规动画
可见性动画：显示/隐藏、闪烁
常规动画
倾斜动画：倾斜动画是和图形对 象的倾斜度相关的动画。分垂直 和水平，线性和非线性倾斜动画。
离散倾斜：倾斜度随表达式的 倾斜：倾斜度随表达式的值按 值按“值对”关系变化 线性关系变化
常规动画
缩放动画：缩放动画是和图形对 象的“大小”属性相关的动画。 分水平和垂直，线形和离散的四 种缩放。
离散缩放：大小随表达式的值 线性缩放：大小随表达式的值 按“值对”关系变化 按线性关系变化
常规动画
动画效果在使用的时 候可以单独使用，也可以 叠加使用。动画的叠加使 得动画效果也叠加起来。
有些动画是互相冲突的， 不能叠加到一起，易控自 动为用户过滤并屏蔽了这 些冲突。 例图中可以同时配置垂 直移动和水平移动，相冲 突的离散移动则被屏蔽起 来。
动画属性窗口
复合动画
子图形已定义动画，形成组合图形后还可以定义自己的动画，这种动画 的嵌套就构成复合动画。
用户程序动画
用户程序动画是高级的动画。 通过在用户程序中改变图形对象的属性值来实现。
5.4
事件
事件是指画面上的对象由于某些外部设备的触发从而执行相应任务的操作。 易控中有菜单事件、滑动输入事件、鼠标键事件、旋转输入事件、值输入事件.
菜单事件：在图形对象上按 下鼠标弹出菜单，有鼠标左 滑动事件： 值输入事件： 键菜单，鼠标右键菜单 鼠标键事件： 通过拖动图形对象，改变变 鼠标左键点击图形弹出对话框输入 选择鼠标的操作，弹出用户程序窗 量值，有水平滑动，垂直滑 对应的值。有离散值输入、模拟值 旋转事件： 口，进行事件设置。有键按下、键 动。 输入、时间值输入、字符串输入。 选择画面中菜单 按住、键抬起、右键按下、右键按 旋转图形对象改变变量的数值（根据 住、右键弹起。 角度变化）。
在画面上的图符对象都可以输出为图片文件，对于单个图形对象只有 组合为组合图形后才能输出。
5.6
画面的扩展
高级功能组件：专门设计，具有特有属性，丰富和增强监控系统 的功能和效果。 例如：报警窗、实时趋势曲线、历史趋势曲线、XY曲线、菜单、 媒体文件播放器、视频浏览器、WEB浏览器、数据库浏览器、饼图、 棒图等
图库工具箱
图库工具箱中的对象被称为 “图符”，是通过易控的基本图形绘 制组合而成。 易控的图库具有图符精美、制 作容易等特点。
用户可以自己制作图符，并 将它添加到图库工具箱中。
图形属性
重点介绍：线、矩形等各种图形、文本及其属性，中心点、旋转等属性
图形编辑
图形编辑是指在画面开发过程中对画面上单个或多个图形图符对象 的旋转、倾斜、对齐、组合、分解、分层等操作。
第一步：在画面中根据用户的需要绘制出图符的各个部分，并 且将各个部分的动画和事件配置完成。 第二步：选中所有对象，将这些对象组合到一起形成一个组合 图形，在组合的过程中选择需要暴露的子图形属性。
第三步：将该组合图形添加到图库中。
图符的使用
在图符中可直接修改暴露出来的子图形属性。
图符组合过程中子图形的动画和事件配置将作为图符的内部动画和事 件保留下来。
图形格式工具条
图形编辑
对象浏览器
对象浏览器是管理画面中所有对 象的一个工具，可以快速方便地 定位画面中的所有对象。 可以在画面浏览器中对画面中的 对象进行剪切、复制、粘贴以及 删除的操作。
还可以对画面中的对象进行层次 的调整。
易控的对象浏览器窗口
5.3 动画
动画是工程中的变量或表达式的数值改变而引起的画面上的对象属 性的变化。
图符在使用时只需将图符中的内部变量替换为工程中的工程变量，可 以通过变量替换功能实现。
在图符中当需要调整没有暴露出来的子图形的属性、动画、事件时， 可以取消组合，重新配置。 图符中可嵌入新的动画和事件，动画可是多层次的，能实现易控独创 的“复合动画”效果，所以易控中的图符又称为“智能图符”。
第五讲：监控界面
第5讲 监控界面
教学目的要求
• • • • • 了解静态画面、动画、事件等基本概念 掌握基本的界面开发方法 了解图库图符的使用和制作 了解常用高级插件和控件 掌握画面管理的内容
教学重点
• • 静态图形绘制及动画和事件定义 组合图形制作
教学难点
• • 复合动画制作 组合图形制作
教学方法
监控界面是进行人机交互的主要接口， 是工业控制系统的“脸面”，工程开发时， 30%以上的时间是和监控界面密切相关的。
5.2 静态画面
• • • • 静态画面：对绘图元素的编辑和修改。 易控的图形和图库工具箱提供大量绘图元素。 图库图符具有基本属性、动画、事件等属性配置，为智能图符。 易控图形系统基于GDI+（Graphics Device Interface）技术。
画面属性
画面属性是指画面本身具有的一些属性：名称、大小、位置、风格等。 重点：画面背景、画面样式、起始画面
首页
画面样式：非窗口模式
画面背景：单色
流水线
此画面不能操作
首 页
画面背景：渐变 画面样式：正常窗口 具有标题、可变大小、具有滚动条等 •起始画面一般在“运行选项”里设置。
•工程里一般起始画面会设置多个，由 位于不同位置的多个画面组成。确定 各个画面的位置可用“预览”功能。 •例如：易控演示工程的起始画面就是 两个“首页”和“流水线”。 •因此，工程画面的布局规划很重要。
画面背景：图案 画面样式：模式窗口 当前画面为模式窗口时，不能操作 其它画面
首页
画面背景：图片 画面样式：顶层窗口 当前画面为顶层窗口时，存在多个 画面时，当前画面在最前面
画面绘图元素
易控的绘图元素位于“图形工具箱”和“图库工具箱”。
画面构成元素：图形+图符 图形： 1. 基本图形：
• • • • • 线（直线、折线、曲线、弧线）； 园、弧、扇、切； 矩形、圆角矩形、多边形； 文本、图片； 标准Windows控件 变量、变量表、开关按钮仪表时钟等 边框、标尺 实时、历史、跟踪、XY等曲线 报警、事件等显示窗口 配方、数据库、媒体、视频、报表、 WEB等浏览器
常规动画
文本动画：通过变量或表达式值 来控制文本的颜色、图案、纹理、 渐变等的变化。
定义一组表达式的取值范围所 分别对应的文本字体颜色或模 式
常规动画
直线端点移动动画：直线的起点 和终点位置随着连接的变量或表 达式的值改变。分别是直线的起 点和终点的沿水平、垂直或直线 方向上移动的动画。
直线起点或终点的相应坐标，随变量 或表达式的值按线性关系变化
2.
高级图形：插件、控件
• • • • •

3. 组合图形 4. 可灵活添加图形至工具箱 图符: 1. 精美、1310种图符 2. 智能：动画、复合动画、操 作事件 3. 制作简单、可选暴露子图属 性
图形工具箱的图形
图形工具箱中包括画面构成对象 中的基本图形、高级图形、插件和控 件。
图形工具箱分类: 常用 Windows 控件 开关、按钮 仪表 图表曲线 时钟 其他
定义顺时针或逆时针旋转时表达式与旋转 定义每次旋转时的步长 速度的旋转百分比 定义旋转的速度，是顺时针还是逆时针
常规动画
数值显示动画：文本的显示内容 随变量或表达式的值动态变化。 有离散值动画、模拟值动画、字 符串值动画和模拟值字符串动画。
时间值显示： 模拟值字符串显示： 离散值显示： 显示表达式连接的时间型变 文本的显示内容随变量或 模拟值： 量或字符串变量的结果 文本的显示内容随表达式的 表达式的值按“值对”关 显示表达式的模拟结果值 离散结果值而变化 系变化 字符串值显示：显示表达式 定义一组表达式的取值范 定义模拟值显示的显示方式， 设置日期格式 的字符串结果值 围和分别对应的文本显示 整数位数、小数位数等 内容 设置时间格式
常规动画
填充动画：填充动画是和图形对 象的“填充”属性相关的动画。 有百分比填充、填充和透明三种 动画。
百分比填充：填充区域占整体 离散填充：填充样式随变量或 的百分比随变量或表达式的值 表达式的值按“值对”关系变 透明：透明度随变量或表达式 按线性关系变化 化 的值按线性关系变化
定义填充方向 定义填充模式
选择菜单显示位置
易控将常用的事件操作处理办法直 接提供给了用户，用户只需做最简 单的配置即可。
5.5
组合图形和图形库
组合图形是将单个或多个图形或图符对象进行组合形成一个新的对象。
组合图形
组合图形在组合的时候可 以选择子图形中需要暴露的属 性，这样在修改组合图形的属 性时可以直接在组合图形中修 改。 当组合图形中子图形的属 性、动画或事件不适合组合图 形时，可以将组合图形分解后 重新配置。 图形组合对话框
常规动画
弧、扇形和切的起始角、扫描角 动画：图形的起始点（或边）和 终点（或边）的位置随变量的值 的改变
起始角度： 扫描角度： 表达式的值与扇形等的起始角度 表达式的值与扇形等的扫描角 呈线性关系变化 度呈线性关系变化
常规动画
其它动画 一些其它动画和图形对象的一些特殊属性有关。这里不一一列举。 允许禁止 “禁止/允许”动画是一个特别动画，它由变量或表达式的值来控 制图形对象的事件是否有效。它和安全区的安全控制类似，但安 全区是不能动态控制的，“允许禁止”动画则可以动态决定图形 的事件是否被允许执行。
实时趋势曲线
实时趋势曲线用来显示变量或表达式的值随着时间的变化而实时 变化的情况。
历史趋势曲线
历史趋势曲线用来显示一个或多个历史记录数据或其表达式在某 一时间段的数值变化情况，还可以显示在这一段时间内的数值统计 值。
大屏幕投影演示 易控软件操作
时间安排
4学时
5.1 概述
静态画面：监控系统整体界面风格和工艺流程的设计，用来直观描 述监控对象的构成。 动画：监控现场信号的改变引起画面上的相应对象的颜色、形状、 大小、位置、内容等（称为对象的属性）的变化，通过它来展现监 控现场的状况。 事件：在监控界面上通过对对象的移动、点击或者数值的输入等操 作改变监控系统中的数据从而改变现场设备的状态。 图库图符：具有动画和事件的智能图符 高级功能组件：完成配方的管理、数据的统计分析、图表的对比、 报表的显示、打印、储存等高级功能 画面管理：对画面进行导入、导出、另存为图片、分组等操作
常见动画
– – – –
独有动画
– – – – –
常规动画
动画可叠加
可见性、移动、缩放、填充 线条、旋转、倾斜、流动 数值显示、文本动画 Enable/Disable、GIF等
直线端点移动动画 弧线、扇形和切的起始 角度和扫描角度 倾斜动画 纹理和渐变流动 旋转动画
复合动画
图库
图库是组态软件为了方便用户开发画面，提供给用户的一 些根据多年工程经验和实际需要所制作出来的常用画面对象的
集合，在易控中称为图库工具箱。
组合图形和图符的关系
组合图形是图符的基础，图符都是由组合图形构成。
画面中所有的对象只有组合后才能放入到图库中形成图符。
图符的制作
用户可以在图库中添加自己的图符。
可以定义闪烁的快慢
常规动画
流动动画：流动动画是让图形 “流动” 起来的动画效果。有填 充流动、线条流动、线条流动启 停、填充流动启停四种。
填充流速：通过模拟型变量来 填充流动启停：通过开关型变 控制流动动画的速度 量来控制动画的启停 通过模拟量的值来控制流动 速度 通过方向、流速和 通过方向和步长控制流动 步长控制流动效果 效果
常规动画
线型动画：图形对象的线型随变 量或表达式的值按“值对”关系 变化。
表达式的取值与线型的 对应关系
常Baidu Nhomakorabea动画
旋转动画：旋转动画是和图形对 象的“旋转角度”属性相关的动 画。有旋转、离散旋转、旋转启 停和旋转速度四种旋转动画。
旋转动画：旋转角度随变量或表达式 旋转启停：通过变量或表达式的值为1或者 旋转速度：通过变量或表达式的值控制对 0（True或False）控制对象是否开始围绕 的值按线性关系变化 象围绕中心点在旋转过程中的旋转速度 中心点旋转 离散旋转：旋转角度随变量或表达式 的值按“值对”关系变化