基于QT的闹钟日历

目录一．项目需求分析 2二．项目分工 2三．概要设计 2四．详细设计 4（一）原料 4（二）安装开发及编译环境 4（三）QtCreator开发环境配置及程序开发流程 61) 配置编译工具及编译环境 62) QT4程序开发基本流程—闹钟 8五．调试结果与改进方案 17（一）整体界面展示 17（二）在Qtopia-2.2.0环境下测试Qt程序 17（三）改进方案 19

基于QtE-4.8.5的时钟及日历实现一．项目需求分析设计目标:日历程序：在LCD上显示，例如可类似于windows中的时间和日期属性对话框，要求可设置当前日期并突出显示，可以查询不同年份和月份的日历列表。模拟时钟：在LCD上显示一个动态的模拟时钟，有秒针走动效果，要求能调整时间，带闹钟功能。设计思路：PC端用QTCreator做仿真，用QTE-4.8.5做arm程序编译，使用super4412开发版，该开发板在出厂时已预装了QtE-.4.8.5。二．项目分工三．概要设计（一）硬件介绍图3.1如图为tiny4412开发版的外观界面图3.2底板借口布局（二）开发版设置及连接Tiny4412支持SD卡和eMMC两种启动模式，通过S2开头来进行切换启动模式，如下图所示：图3.3开发版启动模式一般开发板在日常使用时，S2应拨向NAND那一侧，除非你需要烧写系统或者要从SD卡启动系统。初次使用Tiny4412开发板，可参照以下步骤连接开发板：请使用交叉串口线(蓝色头)连接开发板的串口0(图中的COM0)到PC机的串口；用5V电源适配器连接到板上的5V输入插座(注意不要太用力，以免损坏电源插座)；把音箱或者耳机的插头接入板上的绿色音频输出口；如果有液晶屏，请按照数据线头的方向与开发板的LCD接口相连(LCD接口在背面)。如何连接开发版：通过串口连接开发版，在Ubuntu系统中通过minicom可以登录开发版；另外通过网线连接开发版，然后修改相对应得IP为同一网段，可以Telnet登录开发版。四．详细设计（一）原料Super4412开发版、USB转串口线、网线、鼠标、键盘（二）安装开发及编译环境1.下载QtCreator，安装开发程序下载地址：https://www.qt.io/download/2.Ubuntu16.04安装下载地址：/download安装双系统，教程如下地址：/coderjyf/article/details/51241919《Win7U盘安装Ubuntu16.04双系统详细教程》3.将网线和串口线连接开发版和电脑。通过minicom进入开发版，Ifconfig查看开发版的网口IP为30；设置Ubuntu16.04系统直连的网口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的编译制作了现成的脚本build.sh，进入源代码目录执行： #cd/opt/FriendlyARM/tiny4412/linux/arm-qte-4.8.5 #./build.sh 这个过程将十分漫长，根据机器配置不同，会有不同的编译时间，请耐心等待，当顺利执行完毕，再运行mktarget脚本，将会从编译好的目标文件目录中，提取出必要的QtE-4.8.5库文件和可执行二进制示例，并打包为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是用于部署在开发板上的版本，为了节省空间该版本删除了开发工具只保留运行程序所需的库文件，而target-qte-4.8.5-to-hostpc.tgz则是用于安装在PC上，用来开发和编译程序的版本，带有qmake等Qt工具以及编译所需的头文件等，可用于配置QtCreator开发工具。 开发板在出厂时已预装了QtE-.4.8.5，如你想重新安装QtE-4.8.5到开发板，方法如下： 把target-qte-4.8.5-to-devboard.tgz在开发板的根目录下解压，假设你将压缩包放在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/下，它里面包含了运行所需要的所有库文件和可执行程序.

（三）QtCreator开发环境配置及程序开发流程配置编译工具及编译环境图4.1QtCreator开始界面 如图为QtCreator的开始界面，在我们开始开发我们的程序之前需要配置好编译环境，QtCreator桌面版支持多个不同编译器搭配，既可以在桌面仿真也可以生成可以在开发版上面运行的程序源代码。图4.2QtVersion配置 如图4.2软件只能检测出来自带的桌面编译器，需要手动添加我们用来编译arm代码的编译环境：QtE4.8.7-arm；图4.3编译器 如图4.3gcc编译器是自己检测出来的，下面的QtE4.8.7-arm对应的编译器需要手动添加，特别注意这里QtE4.8.7-arm对应的编译器需要和G++搭配构成套件，详见图4.4；图4.4构建套件如图4.4，新建构建套件，构建套件用于将QT和编译器搭配构建可供调试和发布的源代码，如图，设置编译器和Qt版本为我们刚才在图4.2和4.3添加的，生成一个命名为ARM的构建代码的套件。可以看到系统默认有一个命名为桌面的系统套件用于生成桌面程序，可以用来仿真使用。QT4程序开发基本流程—闹钟（1）创建文件选择QTWidgetsApplication图4.5创建一个桌面Qt应用，项目选择Application中的Widgets，这个模板可以帮助默认生成一个包括头文件，主程序，和UI文件的工程框架，是我们这次需要用到的一个结构。（2）设置工程名图4.6（3）选择我们刚才配置的构建套件图4.7构建套件用于生成可供不同功能的调试或者发布的代码。（4）生成工程文件目录框架图4.8（5）时钟程序时钟程序主要由以下两个模块4.9和5.0组成：图4.9模拟时钟和数字时钟图4.9闹钟和时间设置定时器Clock::Clock(QWidget

*parent)

:

QWidget(parent)

{

QTimer

*timer

=

new

QTimer(this);

//声明一个定时器

//update()会自动产生重绘消息，调用paintEvent()

connect(timer,

SIGNAL(timeout()),

this,

SLOT(update()));

//连接信号槽，定时器超时触发窗体更新

timer->start(1000);

//启动定时器

setWindowTitle(tr("My

Clock"));

//设置窗体名称

resize(300,

300);

//设置窗体大小

}

启动一个定时器，timer->start(1000);单位是ms，每一秒中update重绘一次窗口。重绘事件（1）先确定指针的颜色和形状大小。其坐标后面再确定。void

Clock::paintEvent(QPaintEvent

*event)

{

//下面三个数组用来定义表针的三个顶点，以便后面的填充

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);来执行比例变换，实现缩放效果，比如窗口变成600，则600/300.0放大2倍。painter.translate(width()/2,height()/2);将最标原点从(0,0)移动到窗口中心则原来的原点最标就变成(-150,-150)。坐标变换后具体的坐标如下：{

int

side

=

qMin(width(),

height());

//绘制的范围(宽、高中最小值)

QTime

time

=

QTime::currentTime();

//获取当前的时间

QPainter

painter(this);

//声明用来绘图用的painter

painter.setRenderHint(QPainter::Antialiasing);//绘制的图像反锯齿

painter.translate(width()

/

2,

height()

/

2);//重新定位坐标起始点，把坐标原点放到窗体的中央

painter.scale(side

/

300.0,

side

/

300.0);//设定画布的边界,用窗体宽高的最小值来计算时钟的大小，防止窗体拉伸导致的时钟变形以及显示不全

}

图4.11再看秒针的坐标(-3,8)、（3,8）、(0,90)即确定了秒针的具体大小和位置。变换后的圆心在屏幕的中心。（3）在坐标(-40,30)处画出时间，随系统一秒更新一次。{

painter.setPen(Qt::red);

//填充时针，不需要边线所以NoPen

QString

timeStr=

QTime::currentTime().toString();

//绘制当前的时间

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

|

Qt::AlignTop,

timeStr);

}

（4）根据当前的时间，计算时针的移动角度6.0*(time.minute()+time.second()/60.0，使用rotate进行最标旋转，比如最标旋转30度如下图4.12所示。图4.12painter.drawConvexPolygon(minuteHand,3);画出时针的三角形，如图4.11所示。然后painter.restore();恢复坐标到图4.11，不恢复的话无法确定分针的角度。在分别计算分针的角度6.0*(time.minute()+time.second()/60.0)和秒针的角度6.0*time.second()。{

//...

painter.setPen(Qt::NoPen);

//填充时针，不需要边线所以NoPen

painter.setBrush(hourColor);

//画刷颜色设定

painter.save();

//保存painter的状态，保存的是当前的坐标状态，如果不保存，画完之后坐标以改变不方便画下一个

painter.rotate(30.0

*

((time.hour()

+

time.minute()

/

60.0)));

//将painter（的”视角“）根据时间参数转移(30°

*

(小时

+

分钟

/

60))

painter.drawConvexPolygon(hourHand,

3);

//填充时针的区域

painter.restore();

//后面的跟前面的类似，分别绘制了分针和秒针，及相应的刻度

painter.setPen(Qt::NoPen);

painter.setBrush(minuteColor);

painter.save();

painter.rotate(6.0

*

(time.minute()

+

time.second()

/

60.0));

//设旋转(角度

=

6°

*

(分钟

+

秒

/

60))

painter.drawConvexPolygon(minuteHand,

3);

//填充分针部分

painter.restore();

painter.setPen(Qt::NoPen);

painter.setBrush(secondColor);

painter.save();

painter.rotate(6.0

*

time.second());

//设置旋转(6°

*

秒)

painter.drawConvexPolygon(secondHand,

3);

//设置填充

painter.restore();

//...

}

（5）每次旋转6度，绘制长4个像素的直线，正点先不绘制，因为正点是8个像素的直线。接着绘制正点刻度和数字。不用保存画图的坐标，绘制都是旋转了360，回到了原来的最标系统中。{

//...

painter.setPen(minuteColor);

for

(int

j

=

0;

j

<

60;

++j)

{

//循环60次，绘制表盘（其实可以从1开始，到59，提高一点效率）

if

((j

%

5)

!=

0)

//判断是否能被5整除(能被5整除表示是正点刻度，暂不绘制)

painter.drawLine(0,

-92,

0,

-96);

//不是正点刻度，绘制长4个像素的直线

painter.rotate(6.0);

//循环60次，每次旋转6度，所以不用save和restore

}

painter.setPen(hourColor);

//下面画表示小时的刻度，此时要用到画笔（因为要划线）

for

(int

i

=

0;

i

<

12;

++i)

{

painter.drawLine(0,

-88,

0,

-96);

//写上刻度数字

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)最后画上中心的小黑实心圆和外圈的空心圆，主要是计算下坐标。圆心分别为2和97。{

//...

painter.setPen(Qt::NoPen);

painter.setBrush(secondColor);

painter.save();

painter.rotate(6.0

*

time.second());

//设置旋转(6°

*

秒)

painter.drawConvexPolygon(secondHand,

3);

//设置填充

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）修改时间代码实现：

五．调试结果与改进方案（一）整体页面展示图5.1如图5.1，有虚拟时钟和数字时钟显示以及日期显示，并可以修改时间和日期，设置闹钟后程序到后台运行，到了指定时间再弹出来提醒用户。（二）在Qtopia-2.2.0环境下测试Qt程序要运行QtE-4.8.5的示例程序，需要先停止正在运行的Qtopia-2.2.0，点“设置”中的“关机”可出现如下界面，点“TerminateServer”即可关闭Qtopia-2.2.0系统。图5.2

关闭qtopia-2.2.0之后，在命令行输入qt4命令，即可启动刚刚解压安装的QtE-4.8.5了，如图：

如果你想运行自已编写的Qt4程序，你需要先设置相关的环境变量，可以使用/bin/setqt4env这个脚本设置输入以下命令创建并编写脚本/bin/setqt4env:@#vi/bin/setqt4env在vi编辑器中输入如下内容:#!/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