基于QT的鬧鐘日歷

目錄一．項(xiàng)目需求分析 2二．項(xiàng)目分工 2三．概要設(shè)計(jì) 2四．詳細(xì)設(shè)計(jì) 4（一）原料 4（二）安裝開發(fā)及編譯環(huán)境 4（三）QtCreator開發(fā)環(huán)境配置及程序開發(fā)流程 61) 配置編譯工具及編譯環(huán)境 62) QT4程序開發(fā)基本流程—鬧鐘 8五．調(diào)試結(jié)果與改進(jìn)方案 17（一）整體界面展示 17（二）在Qtopia-2.2.0環(huán)境下測(cè)試Qt程序 17（三）改進(jìn)方案 19

基于QtE-4.8.5的時(shí)鐘及日歷實(shí)現(xiàn)一．項(xiàng)目需求分析設(shè)計(jì)目標(biāo):日歷程序：在LCD上顯示，例如可類似于windows中的時(shí)間和日期屬性對(duì)話框，要求可設(shè)置當(dāng)前日期并突出顯示，可以查詢不同年份和月份的日歷列表。模擬時(shí)鐘：在LCD上顯示一個(gè)動(dòng)態(tài)的模擬時(shí)鐘，有秒針走動(dòng)效果，要求能調(diào)整時(shí)間，帶鬧鐘功能。設(shè)計(jì)思路：PC端用QTCreator做仿真，用QTE-4.8.5做arm程序編譯，使用super4412開發(fā)版，該開發(fā)板在出廠時(shí)已預(yù)裝了QtE-.4.8.5。二．項(xiàng)目分工三．概要設(shè)計(jì)（一）硬件介紹圖3.1如圖為tiny4412開發(fā)版的外觀界面圖3.2底板借口布局（二）開發(fā)版設(shè)置及連接Tiny4412支持SD卡和eMMC兩種啟動(dòng)模式，通過S2開頭來進(jìn)行切換啟動(dòng)模式，如下圖所示：圖3.3開發(fā)版啟動(dòng)模式一般開發(fā)板在日常使用時(shí)，S2應(yīng)撥向NAND那一側(cè)，除非你需要燒寫系統(tǒng)或者要從SD卡啟動(dòng)系統(tǒng)。初次使用Tiny4412開發(fā)板，可參照以下步驟連接開發(fā)板：請(qǐng)使用交叉串口線(藍(lán)色頭)連接開發(fā)板的串口0(圖中的COM0)到PC機(jī)的串口；用5V電源適配器連接到板上的5V輸入插座(注意不要太用力，以免損壞電源插座)；把音箱或者耳機(jī)的插頭接入板上的綠色音頻輸出口；如果有液晶屏，請(qǐng)按照數(shù)據(jù)線頭的方向與開發(fā)板的LCD接口相連(LCD接口在背面)。如何連接開發(fā)版：通過串口連接開發(fā)版，在Ubuntu系統(tǒng)中通過minicom可以登錄開發(fā)版；另外通過網(wǎng)線連接開發(fā)版，然后修改相對(duì)應(yīng)得IP為同一網(wǎng)段，可以Telnet登錄開發(fā)版。四．詳細(xì)設(shè)計(jì)（一）原料Super4412開發(fā)版、USB轉(zhuǎn)串口線、網(wǎng)線、鼠標(biāo)、鍵盤（二）安裝開發(fā)及編譯環(huán)境1.下載QtCreator，安裝開發(fā)程序下載地址：https://www.qt.io/download/2.Ubuntu16.04安裝下載地址：/download安裝雙系統(tǒng)，教程如下地址：/coderjyf/article/details/51241919《Win7U盤安裝Ubuntu16.04雙系統(tǒng)詳細(xì)教程》3.將網(wǎng)線和串口線連接開發(fā)版和電腦。通過minicom進(jìn)入開發(fā)版，Ifconfig查看開發(fā)版的網(wǎng)口IP為30；設(shè)置Ubuntu16.04系統(tǒng)直連的網(wǎng)口IP為11即可；通過Telnet30用戶名root，密碼可以通過minicom進(jìn)行修改。4.安裝gcc和g++交叉編譯工具在命令行窗口輸入下面命令安裝，sudoapt-getinstallgcc

sudoapt-getinstallg++5.編譯與安裝arm版本QtE-4.8.5 和Qtopia-2.2.0十分類似，我們也為QtE-4.8.5的編譯制作了現(xiàn)成的腳本build.sh，進(jìn)入源代碼目錄執(zhí)行： #cd/opt/FriendlyARM/tiny4412/linux/arm-qte-4.8.5 #./build.sh 這個(gè)過程將十分漫長(zhǎng)，根據(jù)機(jī)器配置不同，會(huì)有不同的編譯時(shí)間，請(qǐng)耐心等待，當(dāng)順利執(zhí)行完畢，再運(yùn)行mktarget腳本，將會(huì)從編譯好的目標(biāo)文件目錄中，提取出必要的QtE-4.8.5庫文件和可執(zhí)行二進(jìn)制示例，并打包為target-qte-4.8.5-to-devboard.tgz和target-qte-4.8.5-to-hostpc.tgz。 不想編譯，也可以直接使用我們編譯好的二進(jìn)制包，它們放在光盤的Linux目錄下，名稱為target-qte-4.8.5-to-devboard.tgz和target-qte-4.8.5-to-hostpc.tgz。 其中target-qte-4.8.5-to-devboard.tgz是用于部署在開發(fā)板上的版本，為了節(jié)省空間該版本刪除了開發(fā)工具只保留運(yùn)行程序所需的庫文件，而target-qte-4.8.5-to-hostpc.tgz則是用于安裝在PC上，用來開發(fā)和編譯程序的版本，帶有qmake等Qt工具以及編譯所需的頭文件等，可用于配置QtCreator開發(fā)工具。 開發(fā)板在出廠時(shí)已預(yù)裝了QtE-.4.8.5，如你想重新安裝QtE-4.8.5到開發(fā)板，方法如下： 把target-qte-4.8.5-to-devboard.tgz在開發(fā)板的根目錄下解壓，假設(shè)你將壓縮包放在SD卡根目錄，則用如下命令即可： #rm–rf/usr/local/Trolltech/QtEmbedded-4.8.5-arm #tarxvzf/sdcard/target-qte-4.8.5-to-devboard.tgz–C/安裝QtE-4.8.5到PC上的方法如下： 把target-qte-4.8.5-to-hostpc.tgz在PC的根目錄下解壓即可，如下命令 #tarxvzftarget-qte-4.8.5-to-hostpc.tgz–C/QtE-4.8.5會(huì)安裝到目錄/usr/local/Trolltech/QtEmbedded-4.8.5-arm/下，它里面包含了運(yùn)行所需要的所有庫文件和可執(zhí)行程序.

（三）QtCreator開發(fā)環(huán)境配置及程序開發(fā)流程配置編譯工具及編譯環(huán)境圖4.1QtCreator開始界面 如圖為QtCreator的開始界面，在我們開始開發(fā)我們的程序之前需要配置好編譯環(huán)境，QtCreator桌面版支持多個(gè)不同編譯器搭配，既可以在桌面仿真也可以生成可以在開發(fā)版上面運(yùn)行的程序源代碼。圖4.2QtVersion配置 如圖4.2軟件只能檢測(cè)出來自帶的桌面編譯器，需要手動(dòng)添加我們用來編譯arm代碼的編譯環(huán)境：QtE4.8.7-arm；圖4.3編譯器 如圖4.3gcc編譯器是自己檢測(cè)出來的，下面的QtE4.8.7-arm對(duì)應(yīng)的編譯器需要手動(dòng)添加，特別注意這里QtE4.8.7-arm對(duì)應(yīng)的編譯器需要和G++搭配構(gòu)成套件，詳見圖4.4；圖4.4構(gòu)建套件如圖4.4，新建構(gòu)建套件，構(gòu)建套件用于將QT和編譯器搭配構(gòu)建可供調(diào)試和發(fā)布的源代碼，如圖，設(shè)置編譯器和Qt版本為我們剛才在圖4.2和4.3添加的，生成一個(gè)命名為ARM的構(gòu)建代碼的套件?？梢钥吹较到y(tǒng)默認(rèn)有一個(gè)命名為桌面的系統(tǒng)套件用于生成桌面程序，可以用來仿真使用。QT4程序開發(fā)基本流程—鬧鐘（1）創(chuàng)建文件選擇QTWidgetsApplication圖4.5創(chuàng)建一個(gè)桌面Qt應(yīng)用，項(xiàng)目選擇Application中的Widgets，這個(gè)模板可以幫助默認(rèn)生成一個(gè)包括頭文件，主程序，和UI文件的工程框架，是我們這次需要用到的一個(gè)結(jié)構(gòu)。（2）設(shè)置工程名圖4.6（3）選擇我們剛才配置的構(gòu)建套件圖4.7構(gòu)建套件用于生成可供不同功能的調(diào)試或者發(fā)布的代碼。（4）生成工程文件目錄框架圖4.8（5）時(shí)鐘程序時(shí)鐘程序主要由以下兩個(gè)模塊4.9和5.0組成：圖4.9模擬時(shí)鐘和數(shù)字時(shí)鐘圖4.9鬧鐘和時(shí)間設(shè)置定時(shí)器Clock::Clock(QWidget

*parent)

:

QWidget(parent)

{

QTimer

*timer

=

new

QTimer(this);

//聲明一個(gè)定時(shí)器

//update()會(huì)自動(dòng)產(chǎn)生重繪消息，調(diào)用paintEvent()

connect(timer,

SIGNAL(timeout()),

this,

SLOT(update()));

//連接信號(hào)槽，定時(shí)器超時(shí)觸發(fā)窗體更新

timer->start(1000);

//啟動(dòng)定時(shí)器

setWindowTitle(tr("My

Clock"));

//設(shè)置窗體名稱

resize(300,

300);

//設(shè)置窗體大小

}

啟動(dòng)一個(gè)定時(shí)器，timer->start(1000);單位是ms，每一秒中update重繪一次窗口。重繪事件（1）先確定指針的顏色和形狀大小。其坐標(biāo)后面再確定。void

Clock::paintEvent(QPaintEvent

*event)

{

//下面三個(gè)數(shù)組用來定義表針的三個(gè)頂點(diǎn)，以便后面的填充

static

const

QPoint

hourHand[3]

=

{

QPoint(3,

8),

QPoint(-3,

8),

QPoint(0,

-40)

};

static

const

QPoint

minuteHand[3]

=

{

QPoint(3,

8),

QPoint(-3,

8),

QPoint(0,

-70)

};

static

const

QPoint

secondHand[3]

=

{

QPoint(3,

8),

QPoint(-3,

8),

QPoint(0,

-90)

};//秒針

//填充表針的顏色

QColor

hourColor(127,

0,

127);

//分針顏色(第四個(gè)表示不透明度)

QColor

minuteColor(0,

127,

127,

191);

QColor

secondColor(127,

127,

0,

127);

//...

}

（2）qMin(width(),height());獲取長(zhǎng)寬的最小值，以確保繪制的時(shí)鐘是圓形的，并使用painter.scale(side/300.0,side/300.0);來執(zhí)行比例變換，實(shí)現(xiàn)縮放效果，比如窗口變成600，則600/300.0放大2倍。painter.translate(width()/2,height()/2);將最標(biāo)原點(diǎn)從(0,0)移動(dòng)到窗口中心則原來的原點(diǎn)最標(biāo)就變成(-150,-150)。坐標(biāo)變換后具體的坐標(biāo)如下：{

int

side

=

qMin(width(),

height());

//繪制的范圍(寬、高中最小值)

QTime

time

=

QTime::currentTime();

//獲取當(dāng)前的時(shí)間

QPainter

painter(this);

//聲明用來繪圖用的painter

painter.setRenderHint(QPainter::Antialiasing);//繪制的圖像反鋸齒

painter.translate(width()

/

2,

height()

/

2);//重新定位坐標(biāo)起始點(diǎn)，把坐標(biāo)原點(diǎn)放到窗體的中央

painter.scale(side

/

300.0,

side

/

300.0);//設(shè)定畫布的邊界,用窗體寬高的最小值來計(jì)算時(shí)鐘的大小，防止窗體拉伸導(dǎo)致的時(shí)鐘變形以及顯示不全

}

圖4.11再看秒針的坐標(biāo)(-3,8)、（3,8）、(0,90)即確定了秒針的具體大小和位置。變換后的圓心在屏幕的中心。（3）在坐標(biāo)(-40,30)處畫出時(shí)間，隨系統(tǒng)一秒更新一次。{

painter.setPen(Qt::red);

//填充時(shí)針，不需要邊線所以NoPen

QString

timeStr=

QTime::currentTime().toString();

//繪制當(dāng)前的時(shí)間

painter.drawText(-40,30,80,30,Qt::AlignHCenter

|

Qt::AlignTop,

timeStr);

}

（4）根據(jù)當(dāng)前的時(shí)間，計(jì)算時(shí)針的移動(dòng)角度6.0*(time.minute()+time.second()/60.0，使用rotate進(jìn)行最標(biāo)旋轉(zhuǎn)，比如最標(biāo)旋轉(zhuǎn)30度如下圖4.12所示。圖4.12painter.drawConvexPolygon(minuteHand,3);畫出時(shí)針的三角形，如圖4.11所示。然后painter.restore();恢復(fù)坐標(biāo)到圖4.11，不恢復(fù)的話無法確定分針的角度。在分別計(jì)算分針的角度6.0*(time.minute()+time.second()/60.0)和秒針的角度6.0*time.second()。{

//...

painter.setPen(Qt::NoPen);

//填充時(shí)針，不需要邊線所以NoPen

painter.setBrush(hourColor);

//畫刷顏色設(shè)定

painter.save();

//保存painter的狀態(tài)，保存的是當(dāng)前的坐標(biāo)狀態(tài)，如果不保存，畫完之后坐標(biāo)以改變不方便畫下一個(gè)

painter.rotate(30.0

*

((time.hour()

+

time.minute()

/

60.0)));

//將painter（的”視角“）根據(jù)時(shí)間參數(shù)轉(zhuǎn)移(30°

*

(小時(shí)

+

分鐘

/

60))

painter.drawConvexPolygon(hourHand,

3);

//填充時(shí)針的區(qū)域

painter.restore();

//后面的跟前面的類似，分別繪制了分針和秒針，及相應(yīng)的刻度

painter.setPen(Qt::NoPen);

painter.setBrush(minuteColor);

painter.save();

painter.rotate(6.0

*

(time.minute()

+

time.second()

/

60.0));

//設(shè)旋轉(zhuǎn)(角度

=

6°

*

(分鐘

+

秒

/

60))

painter.drawConvexPolygon(minuteHand,

3);

//填充分針部分

painter.restore();

painter.setPen(Qt::NoPen);

painter.setBrush(secondColor);

painter.save();

painter.rotate(6.0

*

time.second());

//設(shè)置旋轉(zhuǎn)(6°

*

秒)

painter.drawConvexPolygon(secondHand,

3);

//設(shè)置填充

painter.restore();

//...

}

（5）每次旋轉(zhuǎn)6度，繪制長(zhǎng)4個(gè)像素的直線，正點(diǎn)先不繪制，因?yàn)檎c(diǎn)是8個(gè)像素的直線。接著繪制正點(diǎn)刻度和數(shù)字。不用保存畫圖的坐標(biāo)，繪制都是旋轉(zhuǎn)了360，回到了原來的最標(biāo)系統(tǒng)中。{

//...

painter.setPen(minuteColor);

for

(int

j

=

0;

j

<

60;

++j)

{

//循環(huán)60次，繪制表盤（其實(shí)可以從1開始，到59，提高一點(diǎn)效率）

if

((j

%

5)

!=

0)

//判斷是否能被5整除(能被5整除表示是正點(diǎn)刻度，暫不繪制)

painter.drawLine(0,

-92,

0,

-96);

//不是正點(diǎn)刻度，繪制長(zhǎng)4個(gè)像素的直線

painter.rotate(6.0);

//循環(huán)60次，每次旋轉(zhuǎn)6度，所以不用save和restore

}

painter.setPen(hourColor);

//下面畫表示小時(shí)的刻度，此時(shí)要用到畫筆（因?yàn)橐獎(jiǎng)澗€）

for

(int

i

=

0;

i

<

12;

++i)

{

painter.drawLine(0,

-88,

0,

-96);

//寫上刻度數(shù)字

if

(i

==

0)

painter.drawText(-10,-88,20,20,Qt::AlignHCenter

|

Qt::AlignTop,QString::number(12));

else

painter.drawText(-10,-88,20,20,Qt::AlignHCenter

|

Qt::AlignTop,QString::number(i));

painter.rotate(30.0);

}

}

(6)最后畫上中心的小黑實(shí)心圓和外圈的空心圓，主要是計(jì)算下坐標(biāo)。圓心分別為2和97。{

//...

painter.setPen(Qt::NoPen);

painter.setBrush(secondColor);

painter.save();

painter.rotate(6.0

*

time.second());

//設(shè)置旋轉(zhuǎn)(6°

*

秒)

painter.drawConvexPolygon(secondHand,

3);

//設(shè)置填充

painter.restore();

painter.setBrush(Qt::black);

painter.drawEllipse(QPoint(0,0),2,2);

painter.setBrush(Qt::NoBrush);

painter.setPen(Qt::black);

painter.drawEllipse(QPoint(0,0),97,97);

//...

}（7）將兩個(gè)元素合并，成為如下界面：效果如下：圖4.13（8）修改時(shí)間代碼實(shí)現(xiàn)：

五．調(diào)試結(jié)果與改進(jìn)方案（一）整體頁面展示圖5.1如圖5.1，有虛擬時(shí)鐘和數(shù)字時(shí)鐘顯示以及日期顯示，并可以修改時(shí)間和日期，設(shè)置鬧鐘后程序到后臺(tái)運(yùn)行，到了指定時(shí)間再?gòu)棾鰜硖嵝延脩?。（二）在Qtopia-2.2.0環(huán)境下測(cè)試Qt程序要運(yùn)行QtE-4.8.5的示例程序，需要先停止正在運(yùn)行的Qtopia-2.2.0，點(diǎn)“設(shè)置”中的“關(guān)機(jī)”可出現(xiàn)如下界面，點(diǎn)“TerminateServer”即可關(guān)閉Qtopia-2.2.0系統(tǒng)。圖5.2

關(guān)閉qtopia-2.2.0之后，在命令行輸入qt4命令，即可啟動(dòng)剛剛解壓安裝的QtE-4.8.5了，如圖：

如果你想運(yùn)行自已編寫的Qt4程序，你需要先設(shè)置相關(guān)的環(huán)境變量，可以使用/bin/setqt4env這個(gè)腳本設(shè)置輸入以下命令創(chuàng)建并編寫腳本/bin/setqt4env:@#vi/bin/setqt4env在vi編輯器中輸入如下內(nèi)容:#!/bin/shif[-e/etc/friendlyarm-ts-input.conf];then./etc/friendlyarm-ts-input.conffitrue${TSLIB_TSDEVICE:=/dev/touchscreen}TSLIB_CONFFILE=/etc/ts.confexportTSLIB_TSDEVICEexportTSLIB_CONFFILEexportTSLIB_PLUGINDIR=/usr/lib/tsexportTSLIB_CALIBFILE=/etc/pointercalexportQWS_DISPLAY=:1exportLD_LIBRARY_PATH=/usr/local/Trolltech/QtEmbedded-4.7.0-arm/lib:/usr/local/exportPATH=/bin:/sbin:/usr/bin/:/usr/sbin:/usr/local/bin