五、支持Web的组态软件
事实上，整个组态功能就是在Web上开发的，而桌面软件上显示的组态界面，其实是加载浏览器内核完成的。
浏览器下的组态图编辑界面：
桌面软件中的组态图编辑界面：
桌面软件中的组态图运行界面：
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，这一状态又应该发生怎样的变化。状态变化只是复杂，容易出错，并没有难点。本组态软件的鼠标操作状态图如下：