五、支持Web的组态软件

事实上，整个组态功能就是在Web上开发的，而桌面软件上显示的组态界面，其实是加载浏览器内核完成的。

桌面软件中的组态图运行界面：

/*****

1、本人非美工，界面丑休怪。

2、组态图中使用的图形，是非常容易定制的。

3、组态功能是整个SCADA系统的一部分，所以运行时只有一块白板，可以灵活地安放在系统界面的任一个地方。

*****/

5.1 组态实现功能

1、可以在图中添加三种元素，分别是图片、图形（可调填充颜色、描边颜色、边宽）、文字（可调文字大小、颜色、对齐方式）。

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，无需部署服务器即可使用。

元件类如下：

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