嵌入式Qt-做一个秒表
之前的文章： 嵌入式Qt-动手编写并运行自己的第1个ARM-Qt程序
介绍了如何编写第一个嵌入式Qt程序，实现了一个电子时钟的演示。
本篇，继续进行Qt实践，仿照手机中的秒表，实现一个相同功能的秒表：
回顾上一次的Qt开发流程，整个Qt的开发都是通过敲代码实现的，实际上，还可以利用Qt Creater的UI界面功能，通过图像化的配置来开发图形界面，本篇就使用这种方法来进行开发。
先来看下效果：
http://mpvideo.qpic.cn/0b2elqaaaaaaceaicbxgtjrfaxgdaboaaaaa.f10002.mp4?
1 新建Qt工程
Qt工程创建的具体步骤可参照之前的文章： 嵌入式Qt-动手编写并运行自己的第1个ARM-Qt程序 ，这里只说明不同之处。
上篇是通过代码实现页面设计的，本篇要借助Qt Creater的UI界面设计功能，因此要把下面的 创建页面 勾选上：
创建完成之后的Qt默认工程结构如下：
双击 widget.ui ，即可打开UI设置页面，如下图：
这里先简单熟悉下各个功能区：
2 代码编写
2.1 ui界面设计
修改界面的尺寸，我的Linux板子屏幕的分辨率是800x480，因此调整到对应的尺寸：
从左侧拖入一个 Label ，然后可以修改字体的大小：
再从左侧拖入其它需要用到的组件（ PushButton 、 TextBrower ）和位置调节组件（弹簧形状的 HorizontalSpacer 、 VericalSpacer ）
进行水平布局和竖直布局，选中对应的组件，例如3个按钮和中间的2个弹簧，点击上方工具栏中的水平布局按钮：
3个按键的水平布局效果如下：
然后再依次对其它组件进行布局：
字体可以调整到居中显示：
鼠标选中最大的组合组件，拖拽边缘调整到合适的外尺寸。然后选中不同级别的组合组件，调整layoutStretch的参数，实现按比例显示各个组件（相当于调节各个弹簧组件的弹力大小）
点击左下角上面那个三角图标，运行，查看效果：
注意左边留的空白是给秒表的表盘留的。
2.2 QTimer与QTime介绍
QTimer 类为定时器提供了一个高级编程接口，提供重复和单次计时。
QTime 类提供时钟时间功能，QTime 对象包含一个时钟时间，它可以表示为自午夜以来的小时数、分钟数、秒数和毫秒数。
Qt Creater提供了方便的帮助文档，可以在Qt Creater中直接查看对应功能函数的使用，比如搜索QTimer，就可以看到对应的介绍，以及可用的API函数：
本篇需要用到QTimer的功能有：
- start：启动定时器
- stop：停止定时器
再看看QTime的介绍：
本篇需要用到QTime的功能有：
- setHMS：设置初始时间
- addMSecs：增加一个时间（毫秒单位）
- toString：时间转为字符串格式
- minute：获取分钟
- second：获取秒
- msec：获取毫秒
2.3 对应按钮的函数
为了编写出更易看懂的代码，在编写代码之前，需要修改对应的组件的默认名称为便于理解的名称，比如我将3个按键的名称分别改为了：
- Btn_Start：开始按钮，并同时具有暂停/继续功能
- Btn_Reset：复位按钮
- Btn_Hit：打点按钮，用于记录不同名次的时间
然后还要手动添加QTimer和QTime对象，用于实现秒表的计时功能：
2.3.1 开始按钮的处理
Qt编程中重要处理就是 信号和槽 机制，它可用通过手动通过connet函数实现，而对于使用Qt Creater的图形界面设计方式，通常也是继续通过界面实现信号和槽的连接：在开始按钮上右键，选则“**转到槽...**”：
然后有多种按钮信号可以选择，因为开始按钮同时具有暂停/继续的功能，这里使用 toggled 功能，利用按钮的按下和松开状态，来实现暂停/继续的功能：
点击OK之后，会自动跳到到代码页面，并自动生成对应的槽函数框架，然后就可以在里面编译对应的业务逻辑代码了：
开始按钮的具体业务逻辑代码如下，当首次按下时，checked为true，此时启动timer，记录此时的时间戳，然后将按钮的文字显示为“暂停”，同时将复位和打点按钮置灰，使这两个按钮不能再按下，因为暂停的时候执行复位和打点无意义。
timer每隔一段时间会触发超时，这里ADD_TIME_MSEC设置的是30ms，超时时间到后，编写对应的超时处理函数timeout_slot以及声明对应的信号和槽的处理。
void Widget::on_Btn_Start_toggled(bool checked)
if (checked)
timer.start(ADD_TIME_MSEC);
lastTime = QTime::currentTime();//记录时间戳
ui->Btn_Start->setText("暂停");
ui->Btn_Reset->setEnabled(false);
ui->Btn_Hit->setEnabled(true);
timer.stop();
ui->Btn_Start->setText("继续");
ui->Btn_Reset->setEnabled(true);
ui->Btn_Hit->setEnabled(false);
connect(&timer, SIGNAL(timeout()), this, SLOT(timeout_slot()));
void Widget::timeout_slot()
//qDebug("hello");
QTime nowTime = QTime::currentTime();
time = time.addMSecs(lastTime.msecsTo(nowTime));
lastTime = nowTime;
ui->Txt_ShowTime->setText(time.toString("mm:ss.zzz"));
超时时间到了之后，计算一些两次的时间差值，然后通过addMSecs函数来累加时间。
2.3.2 复位按钮的处理
复位按钮也是通过右键来调整到槽，注意这里使用 clicked 函数即可，因为复位按钮只需要使用它的点击按下功能：
对应的槽函数的具体实现如下：
void Widget::on_Btn_Reset_clicked()
m_iHitCnt = 0;
timer.stop();
time.setHMS(0,0,0,0);
ui->Txt_ShowTime->setText("00:00:00");
ui->Txt_ShowItem->clear();
ui->Btn_Start->setText("开始");
ui->Btn_Start->setChecked(false);
ui->Btn_Reset->setEnabled(false);
ui->Btn_Hit->setEnabled(false);
主要是将时间归零，将显示情况，并将各个按钮的显示状态复位为默认显示状态。
2.3.3 打点按钮的处理
打点按钮与复位按钮一样，也是只使用 clicked 函数即可，对应的槽函数的具体实现如下：
void Widget::on_Btn_Hit_clicked()
QString temp;
m_iHitCnt++;
temp.sprintf("--计次 %d--", m_iHitCnt);
ui->Txt_ShowItem->setFontPointSize(9);
ui->Txt_ShowItem->append(temp);
ui->Txt_ShowItem->setFontPointSize(12);
ui->Txt_ShowItem->append(time.toString("[mm:ss.zzz]"));
打点功能用于在秒表的运行过程中，记录不同名次的时间，并显示在右侧的文本显示框中。
这里通过setFontPointSize函数来设置不同大小的字体显示。
2.4 秒表表盘的实现
之前这篇文章： 嵌入式Qt-动手编写并运行自己的第1个ARM-Qt程序 ，通过代码的方式，实现了一个时钟表盘的显示，本篇在这个的基础上，修改代码，实现一个显示秒和分的秒表表盘，具体修改后的代码如下：
connect(&timer, SIGNAL(timeout()), this, SLOT(update()));
connect(ui->Btn_Reset, SIGNAL(clicked()), this, SLOT(update()));
void Widget::paintEvent(QPaintEvent *event)
int side = qMin(width(), height());
//QTime time = QTime::currentTime();
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.translate(width()/3, height()*2/5); //画图的基准位置
painter.scale(side/300.0, side/300.0); //随窗口尺寸自动缩放
//表盘(3个同心圆)
for (int i=0; i<PANEL_RADIUS_NUM; i++)
QBrush brush(stPanelParaArr[i].color);
QPen pen(stPanelParaArr[i].color);
painter.setBrush(brush);
painter.setPen(pen);
painter.drawEllipse(-stPanelParaArr[i].radius, -stPanelParaArr[i].radius, 2*stPanelParaArr[i].radius, 2*stPanelParaArr[i].radius);
//秒的刻度
painter.setPen(secondColor);
for (int i = 0; i < 60; i++)
if ((i % 5) == 0)
painter.drawLine(PANEL_RADIUS3-8, 0, PANEL_RADIUS3, 0);
QFont font("TimesNewRoman", SEC_NUM_SIZE);
painter.setFont(font);
painter.drawText(-SEC_NUM_SIZE, -(CLOCK_RADIUS-15), 2*SEC_NUM_SIZE, 2*SEC_NUM_SIZE, Qt::AlignHCenter, QString::number(i==0? 60 : i));
painter.drawLine(PANEL_RADIUS3-5, 0, PANEL_RADIUS3, 0);
//秒再细分5个格
for (int j = 0; j < 5; j++)
painter.rotate(6.0/5);
if (j != 4)
painter.drawLine(PANEL_RADIUS3-2, 0, PANEL_RADIUS3, 0);
//分钟的刻度
painter.setPen(minuteColor);
for (int k = 0; k < 30; k++)
if ((k % 5) == 0)
painter.rotate(-90.0);
painter.drawLine(PANEL_RADIUS4-8, 0, PANEL_RADIUS4, 0);
painter.rotate(90.0);
QFont font("TimesNewRoman", MIN_NUM_SIZE);
painter.setFont(font);
painter.drawText(-MIN_NUM_SIZE, -(PANEL_RADIUS4-10), 2*MIN_NUM_SIZE, 2*MIN_NUM_SIZE, Qt::AlignHCenter, QString::number(k==0? 30 : k));
painter.rotate(-90.0);
painter.drawLine(PANEL_RADIUS4-4, 0, PANEL_RADIUS4, 0);
painter.rotate(90.0);
painter.rotate(12.0);
//分钟的表针
painter.setPen(Qt::NoPen);
painter.setBrush(minuteColor);
painter.save();
painter.rotate(12.0 * (time.minute() + time.second() / 60.0));
painter.drawConvexPolygon(minuteHand, 3);
painter.restore();
//秒钟的表针
painter.setPen(Qt::NoPen);
painter.setBrush(secondColor);
painter.save();
//painter.rotate(6.0 * time.second());
painter.rotate(6.0 * (time.second()+time.msec()/1000.0));
painter.drawConvexPolygon(secondHand, 3);