五、支援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，這一狀态又應該發生怎樣的變化。狀态變化隻是複雜，容易出錯，并沒有難點。本組态軟體的滑鼠操作狀态圖如下：