五、支持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<Content>;
}
/**
* 內容
*/
class Content {
/**
* 內容數據
* 圖像：圖像路徑
* 文字：文字內容
* 形狀：形狀數據
*/
public ContentInfo: string;
/**
* 條件
*/
public Condition: string;
/**
* 命令
*/
public Command: string;
}
元件的位置變換涉及到大量鼠標鍵盤操作，以及座標變換。在操作過程中，需要有一個狀態記錄變量，在每一次操作後都改變狀態。例如，在沒有選中的狀態下，點擊目標，狀態將發生怎樣的變化，如果按下了Ctrl，這一狀態又應該發生怎樣的變化。狀態變化只是複雜，容易出錯，並沒有難點。本組態軟件的鼠標操作狀態圖如下：
