基于Web發(fā)布的組態(tài)軟件設(shè)計與實現(xiàn)

張 成，李 迪，吳培浩，王世勇

（華南理工大學 機械與汽車工程學院，廣州 510640）

隨著全球經(jīng)濟的發(fā)展和科學技術(shù)的進步，大規(guī)模、集成化、智能化生產(chǎn)已是工業(yè)發(fā)展的必然趨勢。組態(tài)軟件運用于生產(chǎn)系統(tǒng)的監(jiān)控管理層，對于統(tǒng)籌全局，調(diào)整生產(chǎn)，提高效率發(fā)揮著巨大的作用。然而，目前大多數(shù)組態(tài)軟件屬于嵌入式組態(tài)軟件，完成組態(tài)的監(jiān)控界面在運行時，必須依托于軟件開發(fā)商的運行軟件或運行設(shè)備，從而導致監(jiān)控工作的效率較低且實現(xiàn)復雜。對此，提出了一種基于Web發(fā)布的組態(tài)軟件設(shè)計與實現(xiàn)。監(jiān)控界面在編輯完成后生成配置文件，并通過Web發(fā)布，用戶只需使用瀏覽器就可以運行監(jiān)控界面；監(jiān)控界面在瀏覽器端通過與Web服務器的數(shù)據(jù)交互，實時刷新界面，實現(xiàn)監(jiān)控。

1 軟件功能分析

基于一般組態(tài)軟件的功能和Web發(fā)布的特點分析，此組態(tài)軟件應滿足以下需求：

（1）用界面元素構(gòu)建監(jiān)控界面。界面元素包括基本圖元和功能控件。添加界面元素后，能夠編輯其屬性和布局。

（2）監(jiān)控界面的動態(tài)變化靠實時數(shù)據(jù)驅(qū)動。在界面編輯時，軟件能夠獲取數(shù)據(jù)源數(shù)據(jù)的信息，建立內(nèi)外數(shù)據(jù)的聯(lián)系。

（3）組態(tài)軟件的Web發(fā)布是指將組態(tài)生成的監(jiān)控界面以及相關(guān)配置信息以 Web頁面的形式發(fā)布，用戶通過 Internet和瀏覽器對現(xiàn)場實時監(jiān)測[1]。發(fā)布前，需將組態(tài)結(jié)果生成適合用于Web發(fā)布的配置文件，并以Web服務器為中心構(gòu)建發(fā)布環(huán)境，實現(xiàn)監(jiān)控界面的工作。

2 結(jié)構(gòu)設(shè)計

根據(jù)軟件的功能分析，基于Web發(fā)布的組態(tài)軟件的設(shè)計分為組態(tài)環(huán)境和發(fā)布環(huán)境兩部分，如圖1所示。組態(tài)環(huán)境由組態(tài)編輯軟件和通信接口組成，其主要功能是編輯監(jiān)控界面，建立組態(tài)數(shù)據(jù)對象并確立其與界面元素和外界數(shù)據(jù)源數(shù)據(jù)的對應關(guān)系，最終生成配置文件。Web發(fā)布環(huán)境則是由瀏覽器、Web服務器、數(shù)據(jù)區(qū)和通訊接口組成，它的功能是解析配置文件并配置發(fā)布環(huán)境中的各組成部分，使得用戶可以用瀏覽器實現(xiàn)監(jiān)控。在此，著重分析組態(tài)環(huán)境、配置文件及發(fā)布環(huán)境。

圖1 軟件框架Fig.1 Software framework

2.1 組態(tài)環(huán)境

組態(tài)環(huán)境的主體是組態(tài)編輯軟件，由界面組態(tài)模塊、數(shù)據(jù)組態(tài)模塊、通信配置模塊3個功能模塊組成。

2.1.1 界面組態(tài)模塊

界面模塊的主要功能是編輯監(jiān)控界面，獲取“所見即所得”的組態(tài)效果。用戶添加界面元素，并設(shè)置其屬性和布局。此外，界面元素的部分屬性可以與數(shù)據(jù)組態(tài)模塊中的數(shù)據(jù)對象進行關(guān)聯(lián)，并設(shè)置界面元素如何依據(jù)數(shù)據(jù)進行變化。

2.1.2 數(shù)據(jù)組態(tài)模塊

數(shù)據(jù)組態(tài)模塊主要進行自定義組態(tài)數(shù)據(jù)對象的創(chuàng)建和管理。數(shù)據(jù)對象是數(shù)據(jù)值、數(shù)據(jù)類型、最值、報警值等數(shù)據(jù)相關(guān)信息的綜合體。數(shù)據(jù)對象是信息交互媒介。如圖2所示，對于軟件內(nèi)部，數(shù)據(jù)對象關(guān)聯(lián)界面元素，“驅(qū)動”界面的變化，同時聯(lián)系各界面元素；對于外部，數(shù)據(jù)對象通過通信接口與數(shù)據(jù)源數(shù)據(jù)接觸，實現(xiàn)內(nèi)外數(shù)據(jù)的對應。

圖2 數(shù)據(jù)關(guān)聯(lián)模式Fig.2 Data association model

2.1.3 通信配置模塊

監(jiān)控界面運行的“源動力”是數(shù)據(jù)源的數(shù)據(jù)，而通信配置模塊功能就是定義數(shù)據(jù)源數(shù)據(jù)與組態(tài)軟件內(nèi)部數(shù)據(jù)對象的對應關(guān)系。

數(shù)據(jù)源是指目標設(shè)備或者是第三方軟件。通信配置模塊通過通信接口訪問數(shù)據(jù)源，獲取可監(jiān)控數(shù)據(jù)的信息并呈現(xiàn)給用戶。這些可監(jiān)控數(shù)據(jù)一般被稱為通道數(shù)據(jù)，用戶根據(jù)監(jiān)控需求，將通道數(shù)據(jù)與數(shù)據(jù)組態(tài)模塊中組態(tài)數(shù)據(jù)對象關(guān)聯(lián)起來，完成內(nèi)外數(shù)據(jù)的對接。

2.2 配置文件

組態(tài)編輯軟件各模塊在組態(tài)后生成相應的配置文件。

界面組態(tài)模塊生成界面配置文件，包括HTML頁面文件、CSS（層疊樣式表cascading style sheets）樣式文件和JavaScript腳本文件等3種。其中，HTML頁面文件描述界面中包含的界面元素；CSS樣式文件描述元素的屬性和布局；JavaScript腳本文件實現(xiàn)元素的動態(tài)效果。

數(shù)據(jù)組態(tài)模塊和通信配置模塊生成XML形式的數(shù)據(jù)配置文件和通信配置文件。XML是一種可擴展標記語言，可以根據(jù)需求自定義XML標簽，具有跨平臺、跨語言的特點，兼容性強，適合用于保存配置信息。

2.3 發(fā)布環(huán)境

2.3.1 瀏覽器

瀏覽器是監(jiān)控界面運行的載體。利用瀏覽器呈現(xiàn)監(jiān)控界面的優(yōu)勢有：①瀏覽器是各種操作系統(tǒng)默認安裝的工具軟件，用戶不必為監(jiān)控工作安裝其他軟件。②瀏覽器基于互聯(lián)網(wǎng)使用，為遠程監(jiān)控和局域網(wǎng)內(nèi)多點監(jiān)控的實現(xiàn)帶來便利。

2.3.2 Web服務器

Web服務器為瀏覽器中的監(jiān)控界面與數(shù)據(jù)區(qū)之間的數(shù)據(jù)交互提供接口（PHP）。如圖3所示，該數(shù)據(jù)交互過程基于AJAX技術(shù)實現(xiàn)，AJAX（異步的JavaScript和XML）并不是一種新的語言或技術(shù)，包括了 XML HttpRequest，JavaScript和 DOM 等多項技術(shù)[3]。使用AJAX技術(shù)，瀏覽器可在不用重載整個頁面的情況下，與服務器進行數(shù)據(jù)交互并更新部分頁面，極大地提高監(jiān)控界面的運行效率。

圖3 監(jiān)控界面運行時的數(shù)據(jù)交互Fig.3 Data interaction during monitoring interface runtime

2.3.3 數(shù)據(jù)區(qū)

數(shù)據(jù)區(qū)主要由實時數(shù)據(jù)緩沖區(qū)和歷史數(shù)據(jù)庫構(gòu)成。實時數(shù)據(jù)緩沖區(qū)是根據(jù)配置文件動態(tài)生成的數(shù)據(jù)緩存區(qū)域，該區(qū)域為每個數(shù)據(jù)對象分配一定空間用于存儲當前值。所有數(shù)據(jù)的交互都是以緩沖區(qū)為中介。歷史數(shù)據(jù)庫的作用是長期存儲數(shù)據(jù)。

2.3.4 通信接口

發(fā)布環(huán)境中的通信接口與組態(tài)環(huán)境中的不同。在獲取數(shù)據(jù)信息后，需根據(jù)配置文件中內(nèi)外數(shù)據(jù)的關(guān)聯(lián)方式，將數(shù)據(jù)信息寫入實時數(shù)據(jù)緩沖區(qū)的對應內(nèi)部數(shù)據(jù)中。通信接口與數(shù)據(jù)源的數(shù)據(jù)交互，根據(jù)不同目標對象選用不同的通信標準，與設(shè)備進行通信常采用OPC標準，而與第三方軟件通信常采用DDE（動態(tài)數(shù)據(jù)交換）或 socket[4]。

3 關(guān)鍵技術(shù)與實現(xiàn)

3.1 界面元素設(shè)計

界面元素是監(jiān)控界面效果展示的核心部分。在組態(tài)環(huán)境中，界面元素基于MFC類庫實現(xiàn)。在發(fā)布環(huán)境中，監(jiān)控界面運行于瀏覽器，界面元素基于HTML實現(xiàn)。2種環(huán)境下的界面元素通過界面配置文件對應，設(shè)計界面元素時，為保證界面元素的一致性，需要在以下2種環(huán)境下進行協(xié)調(diào)。

3.1.1 組態(tài)環(huán)境下的實現(xiàn)

組態(tài)環(huán)境下，界面元素設(shè)計都可以分為創(chuàng)建和編輯兩個方面。在創(chuàng)建方面基于工廠模式進行設(shè)計。如圖4所示，界面元素相當于“產(chǎn)品”，從界面元素基類 CGraphObj派生 CMyRect，CMyEdit等界面元素子類。與“產(chǎn)品”對應的是“工廠”，自定義“工廠”基類CGraphTool，并派生出各界面元素的“工廠”類（CRectTool，CEditTool）[2]。 利用“工廠”類創(chuàng)建界面元素，可實現(xiàn)界面元素屬性與其創(chuàng)建方法分離，為其創(chuàng)建和擴展提供便利。主程序只通過“工廠”類提供的創(chuàng)建接口間接創(chuàng)建界面元素，因此界面元素類擴展后不會影響主程序，因為創(chuàng)建接口不變。

圖4 基于工廠模式的界面元素設(shè)計Fig.4 Design of interface elements based on factory model

界面元素的編輯操作與創(chuàng)建具有相似性（響應鼠標操作），因此利用CGraphTool派生CSelectTool類，用于界面元素的編輯操作（選中、拖拽、縮放等）。這樣可將創(chuàng)建和編輯操作分離，減小程序各模塊的耦合。

3.1.2 發(fā)布環(huán)境下的實現(xiàn)

在發(fā)布環(huán)境下，界面元素的設(shè)計基于HTML，CSS和JavaScript進行。采用HTML的