基于Qt的溫度計(jì)界面設(shè)計(jì)

王莉莉

(蘇州工業(yè)職業(yè)技術(shù)學(xué)院，江蘇 蘇州 215104)

?

基于Qt的溫度計(jì)界面設(shè)計(jì)

王莉莉

(蘇州工業(yè)職業(yè)技術(shù)學(xué)院，江蘇 蘇州 215104)

摘要：Qt是一個(gè)跨平臺(tái)的C++圖形用戶界面應(yīng)用程序框架。它提供給應(yīng)用程序開(kāi)發(fā)者建立藝術(shù)級(jí)的圖形用戶界面所需的所用功能。Qt是完全面向?qū)ο蟮?，很容易擴(kuò)展，并且允許真正地組件編程。本文介紹的基于Qt的溫度計(jì)可以顯示溫度，并實(shí)現(xiàn)攝氏溫度與華氏溫度之間的轉(zhuǎn)換，并分別顯示出來(lái)。

關(guān)鍵詞：Qt；溫度計(jì)界面；華氏溫度；攝氏溫度

Qt是1991年奇趣科技開(kāi)發(fā)的一個(gè)跨平臺(tái)的C++圖形用戶界面應(yīng)用程序框架。Qt是面向?qū)ο蟮目蚣?，使用特殊的代碼生成擴(kuò)展(稱為元對(duì)象編譯器(Meta Object Compiler，moc))以及一些宏，易于擴(kuò)展，允許組件編程。它既可以開(kāi)發(fā)GUI程序，也可用于開(kāi)發(fā)非GUI程序，比如控制臺(tái)工具和服務(wù)器。自從1996年早些時(shí)候，Qt進(jìn)入商業(yè)領(lǐng)域，它已經(jīng)成為全世界范圍內(nèi)數(shù)千種成功應(yīng)用程序的基礎(chǔ)。Qt也是流行的Linux桌面環(huán)境KDE的基礎(chǔ)?；旧?，Qt同X Window上的 Motif，Openwin，GTK等圖形界面庫(kù)和Windows平臺(tái)上的MFC，OWL，VCL，ATL是同類型的，但Qt具有優(yōu)良的跨平臺(tái)特性、面向?qū)ο?、豐富的API、大量的開(kāi)發(fā)文檔等優(yōu)點(diǎn)[1]。

1設(shè)計(jì)要求

利用Qt實(shí)現(xiàn)具有圖1所示的界面的窗體。該窗體左側(cè)的滑動(dòng)條用于調(diào)整攝氏溫度的值，右側(cè)的表盤(pán)用于調(diào)整華氏溫度的值。當(dāng)調(diào)整攝氏溫度的值時(shí)，編程使滑動(dòng)條上方的標(biāo)簽顯示當(dāng)前的溫度值，并使表盤(pán)同步顯示對(duì)應(yīng)的華氏溫度。當(dāng)使用表盤(pán)調(diào)整華氏溫度時(shí)，編程使段碼液晶顯示當(dāng)前的華氏溫度，并使滑動(dòng)條同步顯示對(duì)應(yīng)的攝氏溫度。

圖1　溫度計(jì)界面

2設(shè)計(jì)原理

本設(shè)計(jì)中，需要有實(shí)現(xiàn)溫度轉(zhuǎn)換計(jì)的界面，并實(shí)現(xiàn)攝氏溫度與華氏溫度之間的關(guān)聯(lián)，使當(dāng)二者中的一個(gè)發(fā)生變化時(shí)另外一個(gè)可以隨之變化。本設(shè)計(jì)需使用5個(gè)控件，它們的布局如圖2所示。

圖2　控件布局

可以看出，Label和Slider可以使用一個(gè)垂直布局器；Dial和LCDNumber也可以使用一個(gè)垂直布局器，而兩個(gè)垂直布局器之間形成了水平的布局關(guān)系，最后，和PushButton一起，又形成了一個(gè)垂直布局?？梢允褂脠D3所示的幾個(gè)布局器來(lái)設(shè)計(jì)界面。

圖3　溫度轉(zhuǎn)換界面布局拆分圖

攝氏溫標(biāo)(Celsius)和華氏溫標(biāo)(Fahrenheit)是兩種不同的溫度測(cè)量標(biāo)準(zhǔn)

F=(C*9/5)+32.

C=(F-32)*5/9 .

其中：F表示華氏溫度，C表示攝氏溫度。

當(dāng)滑動(dòng)條發(fā)生變化時(shí)，要求標(biāo)簽可以顯示當(dāng)前的攝氏溫度值，所以，可以使用下面的代碼設(shè)置標(biāo)簽顯示當(dāng)前攝氏溫度值：

ui->label->setNum(ui->verticalSlider->value())；

同時(shí)，還需要計(jì)算華氏溫度的值，并修改表盤(pán)的當(dāng)前值：ui->dial->setValue(ui->verticalSlider->value()*9/5+32)；

同樣，當(dāng)表盤(pán)發(fā)生變化時(shí)，要求液晶顯示部件可以顯示當(dāng)前的華氏溫度值，所以，可以使用下面的代碼設(shè)置液晶顯示部件顯示當(dāng)前華氏溫度值：

ui->lcdNumber->display(ui->dial->value())；

同時(shí)，還需要計(jì)算對(duì)應(yīng)的攝氏溫度，并修改滑動(dòng)條：

ui->verticalSlider->setValue((ui->dial->value()-32)*5/9)；

3設(shè)計(jì)過(guò)程

1) 在Qt Creator中新建一個(gè)工程，并命名為T(mén)empM；

2) 在主窗體中，按照設(shè)計(jì)界面布局要求，依次添加按鈕、標(biāo)簽、垂直滑動(dòng)條、LCDNumber、表盤(pán)，并將它們的位置先做大概布局。利用垂直布局按鈕將Label和滑動(dòng)條Slider二者組織起來(lái)。使用同樣的方法，將LCDNumber 和表盤(pán)也使用一個(gè)垂直布局器組織起來(lái)，然后用同樣的方法將最上面的PushButton一起組織起來(lái)。至此界面設(shè)計(jì)即完成。

3) 接下來(lái)開(kāi)始關(guān)聯(lián)各個(gè)部件之間的動(dòng)作。由于在該設(shè)計(jì)中，需要執(zhí)行的動(dòng)作比較復(fù)雜，并不是簡(jiǎn)單的將兩個(gè)部件連接就可以完成，所以需要編寫(xiě)代碼來(lái)完成這些動(dòng)作；首先編寫(xiě)當(dāng)滑動(dòng)條變化時(shí)，將攝氏溫度轉(zhuǎn)換為華氏溫度的代碼。使用鼠標(biāo)右擊滑動(dòng)條。

右擊滑動(dòng)條在彈出的快捷菜單中選擇“Go to slot...”；將彈出圖4所示的對(duì)話框，其中列出了滑動(dòng)條能夠產(chǎn)生的信號(hào)，選擇“valueChanged(int)”，該信號(hào)是在滑動(dòng)條的值被改變時(shí)產(chǎn)生，然后點(diǎn)擊“OK”；

圖4　為表盤(pán)添加信號(hào)處理函數(shù)

4) 部分軟件編程。主程序如下：

/main.cpp：

#include

#include "ConversionScreen.h"

int main(int argc, char *argv)

{

QApplication app(argc, argv);

ConversionScreen w;

w.show();

return app.exec();

}

在ConversionScreen.h中，聲明了ConversionScreen類，在這個(gè)類中聲明了設(shè)計(jì)界面所用到的部件，以及進(jìn)行溫度轉(zhuǎn)換所需要的槽函數(shù)，在這里用到了兩個(gè)槽，CelTlFah實(shí)現(xiàn)攝氏溫度到華氏溫度的轉(zhuǎn)換，F(xiàn)ahToCel實(shí)現(xiàn)華氏溫度到攝氏溫度的轉(zhuǎn)換[2，3]，代碼如下所示：

//ConversionScreen.h

#ifndef CONVERSIONSCREEN_H

#define CONVERSIONSCREEN_H

#include

#include

#include

#include

#include

#include

#include

#include

#include

class ConversionScreen : public QWidget

{

Q_OBJECT

public:

ConversionScreen(QWidget *parent = 0);

~ConversionScreen();

private slots:

void CelToFah(int celNum);

void FahToCel(int fahNum);

private:

void CreateScreen();

void CreateCel();

void CreateFah();

QSlider* slider;

QDial* dial;

QHBoxLayout* celLayout;

QVBoxLayout* fahLayout;

};

#endif // CONVERSIONSCREEN_H

在ConversionScreen.cpp中對(duì)ConversionScreen類進(jìn)行了實(shí)現(xiàn)，其代碼如下所示：

#include "ConversionScreen.h"

ConversionScreen::ConversionScreen(QWidget *parent): QWidget(parent)

{

CreateScreen();

}

ConversionScreen::~ConversionScreen()

{

}

void ConversionScreen::CreateScreen()

{

QPushButton* quit = new QPushButton(tr("quit"));//創(chuàng)建“quit”按鈕

CreateCel();

CreateFah();

QGridLayout *mainLayout = new QGridLayout; //創(chuàng)建網(wǎng)狀布局

mainLayout->addWidget(quit, 0, 0);

mainLayout->addLayout(celLayout, 1, 0);

mainLayout->addLayout(fahLayout, 1, 1);

mainLayout->setSpacing(40);

mainLayout->setMargin(40);

setLayout(mainLayout);

slider->setFocus();

華氏溫度和攝氏溫度轉(zhuǎn)換子函數(shù)為：

void ConversionScreen::CelToFah(int celNum)

{

int fahNum = (celNum * 9 / 5) + 32;

dial->setValue(fahNum);

}

void ConversionScreen::FahToCel(int fahNum)

{

int celNum = (fahNum - 32) * 5 / 9;

slider->setValue(celNum);

}

5) 實(shí)驗(yàn)箱平臺(tái)顯示

本設(shè)計(jì)交叉編譯調(diào)試環(huán)境為凌陽(yáng)的A8實(shí)驗(yàn)箱為三星S5PV210，其為ARM A8架構(gòu)的處理器。GNU編譯器提供這樣的功能，在編譯器編譯時(shí)可以選擇開(kāi)發(fā)所需的宿主機(jī)和目標(biāo)機(jī)，從而建立開(kāi)發(fā)環(huán)境。所以在進(jìn)行嵌入式開(kāi)發(fā)前第一步的工作就是要安裝一臺(tái)裝有指定操作系統(tǒng)的PC 機(jī)作宿主開(kāi)發(fā)機(jī)。嵌入式開(kāi)發(fā)通常要求宿主機(jī)配置有網(wǎng)絡(luò)，支持NFS(為交叉開(kāi)發(fā)時(shí)mount 所用)。然后要在宿主機(jī)上建立交叉編譯調(diào)試的開(kāi)發(fā)環(huán)境。

接下來(lái)編譯用于實(shí)驗(yàn)箱運(yùn)行的Qt應(yīng)用程序，首先將實(shí)驗(yàn)箱的串口和網(wǎng)線連接到PC機(jī)。執(zhí)行Qt Creator的Build/Clean All，清理之前生產(chǎn)的編譯文件。單擊左下角所示的圖標(biāo)，會(huì)彈出編譯選擇框。點(diǎn)擊“Build”右側(cè)的下拉列表，在彈出的四種編譯類型中，選擇“Qt for A8 Release”。點(diǎn)擊“Build All”按鈕，即可開(kāi)始編譯實(shí)驗(yàn)箱運(yùn)行的版本，直到編譯選擇按鈕上方的進(jìn)度條變成綠色，即表示編譯完成。并在工程的保存目錄下，可以找到一個(gè)名為“TEMPM-build-desktop”的文件夾。編譯生成的可執(zhí)行程序即在此文件夾中[4]。

將TEMPM-build-desktop 文件夾中的TEMPM 文件復(fù)制到Windows 下，將TEMPM下載到實(shí)驗(yàn)箱；在超級(jí)終端中，利用chmod 777 TEMPM為T(mén)EMPM添加可執(zhí)行權(quán)限，并運(yùn)行它。

在實(shí)驗(yàn)箱上使用觸摸屏即可對(duì)應(yīng)用程序進(jìn)行操作。

4結(jié)束語(yǔ)

隨著嵌入式系統(tǒng)的飛速發(fā)展，其應(yīng)用已經(jīng)滲透到人們生活的每一個(gè)領(lǐng)域。大到軍事領(lǐng)域，小到小朋友的玩具，它正在以不同的形式悄悄地改變著人們的生產(chǎn)、生活方式。arm嵌入式很多都是運(yùn)行的嵌入式linux系統(tǒng)，在linux系統(tǒng)上可以用Qt來(lái)開(kāi)發(fā)可視化窗口界面程序。因此對(duì)Qt的探討有著十分重要的意義。

參考文獻(xiàn)

[1]蔡志明，盧傳富.精通Qt4編程[M].第2版.北京：電子工業(yè)出版社,2011.

[2]李春葆，陶紅艷.C++程序設(shè)計(jì)教程[M].北京：清華大學(xué)出版社，2007.

[3]華清遠(yuǎn)見(jiàn)嵌入式培訓(xùn)中心.嵌入式Linux C編程入門(mén)[M].北京：人民郵電出版社，2009.

[4]凌陽(yáng)科技.A8實(shí)驗(yàn)箱——Linux平臺(tái)篇[OL].[2014/08/25]http://www.unsp.com

The Design of Thermometer Interface Based on Qt

Wang Lili

(SuzhouInstituteofIndustrialTechnology,SuzhouJiangsu215104,China)

Abstract:Qt is an application framework of cross platform base on C++ graphical user interface. It provides all the functions for application developers to create an art level graphical user interface. It is fully object-oriented, easy to be expanded and allows the real component programming. In this paper, the thermometer designed based on Qt can display temperature and achieve the conversion between Celsius temperature and Fahrenheit temperature, and then show it.

Key words:Qt; thermometer interface; Fahrenheit temperature; Celsius temperature

中圖分類號(hào)：TP311.52；TP273

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1674- 4578(2016)01- 0055- 03

作者簡(jiǎn)介：王莉莉(1980- )，女，江蘇徐州，講師，研究方向?yàn)殡娮有畔⒓夹g(shù)。

收稿日期：2015-11-12