跨平台SCADA系统（组态软件）开发5

五、支持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;
}

/**
 * 内容
 */
class Content {
    /**
     * 内容数据
     * 图像：图像路径
     * 文字：文字内容
     * 形状：形状数据
     */
    public ContentInfo: string;

    /**
     * 条件
     */
    public Condition: string;

    /**
     * 命令
     */
    public Command: string;
}

元件的位置变换涉及到大量鼠标键盘操作，以及坐标变换。在操作过程中，需要有一个状态记录变量，在每一次操作后都改变状态。例如，在没有选中的状态下，点击目标，状态将发生怎样的变化，如果按下了Ctrl，这一状态又应该发生怎样的变化。状态变化只是复杂，容易出错，并没有难点。本组态软件的鼠标操作状态图如下：