邵 剛 貴 恒 胡楊超

中國船舶重工集團公司第七一三研究所 河南 鄭州 450001

0 引言

在工業(yè)控制系統(tǒng)中，經(jīng)常需要通過上位機的圖形用戶界面（GUI）來和下位機進行一些必要的交互[1]。隨著工業(yè)控制系統(tǒng)不斷的發(fā)展，用戶對工業(yè)控制系統(tǒng)的圖形用戶界面的需求也不斷提高。為了滿足特定環(huán)境的需求，尤其是針對一些特定的工控系統(tǒng)，我們經(jīng)常需要定制一些個性化的GUI。

目前，在工業(yè)控制系統(tǒng)中的圖形用戶界面，除了采用通用的組態(tài)軟件之外，自行開發(fā)相應(yīng)的工業(yè)控制圖形軟件是在特定項目中常見的手段。以傳統(tǒng)的 MFC（Microsoft Foundation Classes）方法開發(fā)復(fù)雜的圖形界面，需要程序員編寫大量的代碼，對控件的實現(xiàn)需要調(diào)用底層的繪圖函數(shù)進行繪制[2]。本文采用Qt開發(fā)平臺，通過Qt對HTML標簽支持的特性，完成圖文顯示控件的快速開發(fā)。

1 Qt概述

Qt是一個多平臺的C++圖形用戶界面應(yīng)用程序框架[3]。它提供給應(yīng)用程序開發(fā)者建立圖形用戶界面應(yīng)用程序所需的所有功能，并提供 Qt Designer 圖形界面開發(fā)工具直接用來設(shè)計可視化的應(yīng)用程序界面，可進行拖拽式的界面控件排布，便于程序開發(fā)。Qt 具有跨平臺性能，可以一次編寫多處編譯，具有良好的封裝機制、友好的信號-槽連接事件驅(qū)動機制，能夠非常優(yōu)雅的完成事件的投遞與響應(yīng)。Qt是KDE等項目所使用的支持庫，完全面向?qū)ο螅苋菀讛U展，并且具有可移植性、易用性和運行速度快等特點[4]。

2 Qt的可擴展性

Qt具備非常完善的可擴展性，通過Qt的面向?qū)ο筇匦院筒寮C制，用戶可以很方便的擴展Qt本身和應(yīng)用程序。

一般來說，在Qt中擴展自定義控件，基本上都是對Qt已有控件的直接繼承，通過繼承并重載父類中的虛函數(shù)來實現(xiàn)。當需要繪制時，首先調(diào)用update()或者repaint()方法來產(chǎn)生繪圖事件，然后應(yīng)用程序的notify()函數(shù)把它發(fā)送到事件接收者，最后事件接收者通過paintEvent()函數(shù)調(diào)用特定的繪制方法來實現(xiàn)自身的繪制[5]。其流程圖如下：

圖1 Qt控件自繪流程圖

上述方法是傳統(tǒng)的Qt控件擴展方法，但是，該方法對使用稍顯繁瑣，而且針對工控軟件的圖文顯示需求而言，需要是動態(tài)、靈活的顯示下位設(shè)備的實時狀態(tài)，一個控件會有多種現(xiàn)實需求。而這種方法對每個不同圖像的顯示都需要定義一個擴展類，不具備靈活性。

在這種情況下，通過Qt的QLabel等控件支持HTML標簽的特性，通過實時更換控件文本參數(shù)就可以切換其顯示內(nèi)容，可以很方便的實現(xiàn)自定義圖文的功能，達到事半功倍的效果。

3 QLabel對HTML的支持

Qt的某些文本窗體部件能夠顯示富文本，使用HTML4標記。能夠以這種方式顯示富文本的窗體控件有：QTextDocument,以及QLabel、QTextEdit等。而作為顯示控件而言，QLabel是最具備多場景適應(yīng)性的。對于QLabel而言，HTML4的大多數(shù)基本標簽都是支持的，其中包括，這樣就能夠通過標簽，在QLabel中顯示圖片。同時，QLabel還支持基本的CSS語法，通過組合HTML和CSS元素，可以較為靈活的組合各種效果。例如：QLabel("hello
")；其顯示效果為下圖所示：

圖2 HTML顯示效果圖

4 使用HTML擴展QLabel

在工控項目中，經(jīng)常需要各種各樣的圖文混排顯示控件，根據(jù)下位設(shè)備設(shè)施的實際情況來動態(tài)設(shè)置標簽的顯示。類似下圖：

圖3 工控圖文顯示效果圖

面對這種需求，可以很簡單的通過HTML來達到希望的效果。

為了達到靈活控制的目的，我們自定義一個類sgLabel繼承于QLabel，同時，自定義幾個接口函數(shù)：

表1 擴展控件接口函數(shù)表

其中，setContent的第3個參數(shù)align是一個ALIGN 型的枚舉值，我們通過這個值來定義圖片與文本的布局方式，包括文本與圖片的橫向排列、縱向排列、前后順序、上下順序、對齊方式等定義，以此來適應(yīng)不同場景對圖文顯示控件的不同需求。

需要注意的是，QLabel對某些布局性的CSS是不支持的，因此在這里，我們使用了HTML的表格標簽，配合HTML的標簽屬性來實現(xiàn)圖片和文本內(nèi)容的居中對齊。其部分關(guān)鍵代碼如下：

switch (_align) {

case H_R_CENTER：

{

"").arg(_picture).arg(_text))；

}

break；

case H_L_CENTER：

{

this->setText(QString(""

}

break；

case V_B_CENTER：

{

}

break；

case V_T_CENTER：

{

this->setText(QString("

}

break；

…………

}

經(jīng)過這樣定義后，通過3個接口函數(shù)的靈活使用，就可以在軟件運行中，根據(jù)需求調(diào)用不同的接口函數(shù)，靈活的動態(tài)更改圖文顯示控件的顯示效果，達到上位機監(jiān)控軟件的顯示需求。其實際的工程應(yīng)用效果如下：

圖4 擴展控件工程應(yīng)用效果圖

上圖中的主體部分，各類圖文顯示控件都是基于上述方法擴展而來，可以根據(jù)現(xiàn)場設(shè)備的實際運行情況靈活的顯示動態(tài)內(nèi)容，達到了使用簡單、靈活的效果。

5 結(jié)論

利用QLabel對HTML標簽的支持，擴展QLabel控件，可以使得QLabel作為工控上位機軟件的圖文顯示控件，同時能夠進行靈活的動態(tài)設(shè)置，為基于Qt框架的工控圖文顯示控件提供了新的思路。