基于QT的鬧鐘日歷

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

基于QtE-4.8.5的時鐘及日歷實現(xiàn)一．項目需求分析設(shè)計目標(biāo):日歷程序：在LCD上顯示，例如可類似于windows中的時間和日期屬性對話框，要求可設(shè)置當(dāng)前日期并突出顯示，可以查詢不同年份和月份的日歷列表。模擬時鐘：在LCD上顯示一個動態(tài)的模擬時鐘，有秒針走動效果，要求能調(diào)整時間，帶鬧鐘功能。設(shè)計思路：PC端用QTCreator做仿真，用QTE-4.8.5做arm程序編譯，使用super4412開發(fā)版，該開發(fā)板在出廠時已預(yù)裝了QtE-.4.8.5。二．項目分工三．概要設(shè)計（一）硬件介紹圖3.1如圖為tiny4412開發(fā)版的外觀界面圖3.2底板借口布局（二）開發(fā)版設(shè)置及連接Tiny4412支持SD卡和eMMC兩種啟動模式，通過S2開頭來進行切換啟動模式，如下圖所示：圖3.3開發(fā)版啟動模式一般開發(fā)板在日常使用時，S2應(yīng)撥向NAND那一側(cè)，除非你需要燒寫系統(tǒng)或者要從SD卡啟動系統(tǒng)。初次使用Tiny4412開發(fā)板，可參照以下步驟連接開發(fā)板：請使用交叉串口線(藍色頭)連接開發(fā)板的串口0(圖中的COM0)到PC機的串口；用5V電源適配器連接到板上的5V輸入插座(注意不要太用力，以免損壞電源插座)；把音箱或者耳機的插頭接入板上的綠色音頻輸出口；如果有液晶屏，請按照數(shù)據(jù)線頭的方向與開發(fā)板的LCD接口相連(LCD接口在背面)。如何連接開發(fā)版：通過串口連接開發(fā)版，在Ubuntu系統(tǒng)中通過minicom可以登錄開發(fā)版；另外通過網(wǎng)線連接開發(fā)版，然后修改相對應(yīng)得IP為同一網(wǎng)段，可以Telnet登錄開發(fā)版。四．詳細設(shè)計（一）原料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)詳細教程》3.將網(wǎng)線和串口線連接開發(fā)版和電腦。通過minicom進入開發(fā)版，Ifconfig查看開發(fā)版的網(wǎng)口IP為30；設(shè)置Ubuntu16.04系統(tǒng)直連的網(wǎng)口IP為11即可；通過Telnet30用戶名root，密碼可以通過minicom進行修改。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，進入源代碼目錄執(zhí)行： #cd/opt/FriendlyARM/tiny4412/linux/arm-qte-4.8.5 #./build.sh 這個過程將十分漫長，根據(jù)機器配置不同，會有不同的編譯時間，請耐心等待，當(dāng)順利執(zhí)行完畢，再運行mktarget腳本，將會從編譯好的目標(biāo)文件目錄中，提取出必要的QtE-4.8.5庫文件和可執(zhí)行二進制示例，并打包為target-qte-4.8.5-to-devboard.tgz和target-qte-4.8.5-to-hostpc.tgz。 不想編譯，也可以直接使用我們編譯好的二進制包，它們放在光盤的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ā)工具只保留運行程序所需的庫文件，而target-qte-4.8.5-to-hostpc.tgz則是用于安裝在PC上，用來開發(fā)和編譯程序的版本，帶有qmake等Qt工具以及編譯所需的頭文件等，可用于配置QtCreator開發(fā)工具。 開發(fā)板在出廠時已預(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會安裝到目錄/usr/local/Trolltech/QtEmbedded-4.8.5-arm/下，它里面包含了運行所需要的所有庫文件和可執(zhí)行程序.

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

*parent)

:

QWidget(parent)

{

QTimer

*timer

=

new

QTimer(this);

//聲明一個定時器

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

connect(timer,

SIGNAL(timeout()),

this,

SLOT(update()));

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

timer->start(1000);

//啟動定時器

setWindowTitle(tr("My

Clock"));

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

resize(300,

300);

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

}

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

Clock::paintEvent(QPaintEvent

*event)

{

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

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);

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

QColor

minuteColor(0,

127,

127,

191);

QColor

secondColor(127,

127,

0,

127);

//...

}

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

int

side

=

qMin(width(),

height());

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

QTime

time

=

QTime::currentTime();

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

QPainter

painter(this);

//聲明用來繪圖用的painter

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

painter.translate(width()

/

2,

height()

/

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

painter.scale(side

/

300.0,

side

/

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

}

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

painter.setPen(Qt::red);

//填充時針，不需要邊線所以NoPen

QString

timeStr=

QTime::currentTime().toString();

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

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

|

Qt::AlignTop,

timeStr);

}

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

//...

painter.setPen(Qt::NoPen);

//填充時針，不需要邊線所以NoPen

painter.setBrush(hourColor);

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

painter.save();

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

painter.rotate(30.0

*

((time.hour()

+

time.minute()

/

60.0)));

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

*

(小時

+

分鐘

/

60))

painter.drawConvexPolygon(hourHand,

3);

//填充時針的區(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度，繪制長4個像素的直線，正點先不繪制，因為正點是8個像素的直線。接著繪制正點刻度和數(shù)字。不用保存畫圖的坐標(biāo)，繪制都是旋轉(zhuǎn)了360，回到了原來的最標(biāo)系統(tǒng)中。{

//...

painter.setPen(minuteColor);

for

(int

j

=

0;

j

<

60;

++j)

{

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

if

((j

%

5)

!=

0)

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

painter.drawLine(0,

-92,

0,

-96);

//不是正點刻度，繪制長4個像素的直線

painter.rotate(6.0);

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

}

painter.setPen(hourColor);

//下面畫表示小時的刻度，此時要用到畫筆（因為要劃線）

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)最后畫上中心的小黑實心圓和外圈的空心圓，主要是計算下坐標(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）將兩個元素合并，成為如下界面：效果如下：圖4.13（8）修改時間代碼實現(xiàn)：

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

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

如果你想運行自已編寫的Qt4程序，你需要先設(shè)置相關(guān)的環(huán)境變量，可以使用/bin/setqt4env這個腳本設(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