五、支持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、JS、SVG实现，桌面软件容器使用CefSharp（相当于Chrome浏览器的内核，保证性能和兼容性）。
组态图的使用分为两部分，一是有编辑时，二是运行时。编辑部分要复杂得多，需要处理大量的鼠标和键盘操作，界面上还有一些菜单、按钮。而运行部分只需要加载组态图，根据外部数据调整图形即可。两部分功能相差甚远，在开发时基本是分开开发的。
考虑到部署成本，组态图使用原生JS开发，没有使用node.js，无需部署服务器即可使用。