王莉莉

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

?

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

王莉莉

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

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

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

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

1設(shè)計要求

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

圖1　溫度計界面

2設(shè)計原理

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

圖2　控件布局

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

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

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

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

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

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

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

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

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

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

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

同時，還需要計算對應(yīng)的攝氏溫度，并修改滑動條：

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

3設(shè)計過程

1) 在Qt Creator中新建一個工程，并命名為TempM；

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

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

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

圖4　為表盤添加信號處理函數(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類，在這個類中聲明了設(shè)計界面所用到的部件，以及進(jìn)行溫度轉(zhuǎn)換所需要的槽函數(shù)，在這里用到了兩個槽，CelTlFah實現(xiàn)攝氏溫度到華氏溫度的轉(zhuǎn)換，F(xiàn)ahToCel實現(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中對ConversionScreen類進(jìn)行了實現(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è)計交叉編譯調(diào)試環(huán)境為凌陽的A8實驗箱為三星S5PV210，其為ARM A8架構(gòu)的處理器。GNU編譯器提供這樣的功能，在編譯器編譯時可以選擇開發(fā)所需的宿主機和目標(biāo)機，從而建立開發(fā)環(huán)境。所以在進(jìn)行嵌入式開發(fā)前第一步的工作就是要安裝一臺裝有指定操作系統(tǒng)的PC 機作宿主開發(fā)機。嵌入式開發(fā)通常要求宿主機配置有網(wǎng)絡(luò)，支持NFS(為交叉開發(fā)時mount 所用)。然后要在宿主機上建立交叉編譯調(diào)試的開發(fā)環(huán)境。

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

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

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

4結(jié)束語

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

參考文獻(xiàn)

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

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

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

[4]凌陽科技.A8實驗箱——Linux平臺篇[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

中圖分類號：TP311.52；TP273

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

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

作者簡介：王莉莉(1980- )，女，江蘇徐州，講師，研究方向為電子信息技術(shù)。

收稿日期：2015-11-12