五、支持Web的组态软件
事实上,整个组态功能就是在Web上开发的,而桌面软件上显示的组态界面,其实是加载浏览器内核完成的。
浏览器下的组态图编辑界面:
桌面软件中的组态图编辑界面:
桌面软件中的组态图运行界面:
/*****
1、本人非美工,界面丑休怪。
2、组态图中使用的图形,是非常容易定制的。
3、组态功能是整个SCADA系统的一部分,所以运行时只有一块白板,可以灵活地安放在系统界面的任一个地方。
*****/
5.1 组态实现功能
1、可以在图中添加三种元素,分别是图片、图形(可调填充颜色、描边颜色、边宽)、文字(可调文字大小、颜色、对齐方式)。
2、支持常规的图片编辑操作:位移、缩放、旋转、排列等。
3、可以编辑每个元件的显示条件、触发命令。
4、组态图可以保存到本地。
5、运行时,组态图根据数据变换图形,点击反控元件,向仪器发送命令。
6、显示条件支持复杂的逻辑表达式,如:条件1 && (条件2 || 条件3)
5.2 实现原理
组态图由若干元件组成,而每个元件又包含了若干图形。例如,我们在上图中看到泵由静态变为转动,整个泵就是一个元件,而这个元件里包含了两张图片:静态泵.png和动态泵.gif。每个图形都有一个显示条件和反控命令,当一个图形的显示条件满足时,这个图形就显示。而当显示这个图形时,点击这个图形,就会向外部发送相应的反控命令。
举个例子,在上图中,假设阀的配置如下图所示:
那么,如果当前{设备1.阀1}这个因子的值为0,那么显示的图片就是“阀关.png”,而点击阀时,它就会向外发送命令:{设备1.阀1}=1。(如果对设备因子的概念不熟悉,请参考本系列文章的第二章)
5.3 实现技术
组态功能使用HTML、JavaScript、TypeScript、SVG实现,桌面软件容器使用CefSharp(相当于Chrome浏览器的内核,保证性能和兼容性)。
组态图的使用分为两部分,一是有编辑时,二是运行时。编辑部分要复杂得多,需要处理大量的鼠标和键盘操作,界面上还有一些菜单、按钮。而运行部分只需要加载组态图,根据外部数据调整图形即可。两部分功能相差甚远,在开发时基本是分开开发的。
考虑到部署成本,组态图使用原生JS开发,没有使用node.js,无需部署服务器即可使用。
组态图的核心功能为元件属性的编辑和位置变换。
元件类如下:
/**
* 元件
*/
class Component {
/**
* 位置
*/
public Position: RotateRect;
/**
* 原始位置
*/
public OriginPosition: RotateRect;
/**
* 标题
*/
public Title: string;
/**
* 是否选中,0无选中,1选中,2多选中
*/
public Selected: number;
/**
* 伸缩类型,1全方向,2只能横向,3只能纵向
*/
public StretchType: number;
/**
* 元件类型,0无,1图像,2文字,3形状
*/
public ComponentType: number;
/**
* 内容共同信息
* 图像:原始宽|原始高
* 文字:字体大小|字体颜色|对齐方式
* 形状:原始宽|原始高|填充颜色|描边颜色|边宽
*/
public CommonInfo: string;
/**
* 内容列表
*/
public ContentList: Array<Content>;
}
/**
* 内容
*/
class Content {
/**
* 内容数据
* 图像:图像路径
* 文字:文字内容
* 形状:形状数据
*/
public ContentInfo: string;
/**
* 条件
*/
public Condition: string;
/**
* 命令
*/
public Command: string;
}
元件的位置变换涉及到大量鼠标键盘操作,以及坐标变换。在操作过程中,需要有一个状态记录变量,在每一次操作后都改变状态。例如,在没有选中的状态下,点击目标,状态将发生怎样的变化,如果按下了Ctrl,这一状态又应该发生怎样的变化。状态变化只是复杂,容易出错,并没有难点。本组态软件的鼠标操作状态图如下: