几次想照着课本系统地学习Qt，但我发现还是有详细问题驱动时学习比較快。

于是我给自己设定了这个任务：

读取HMC5843的三轴磁场强度值，计算出角度，并把角度用直观形式显示在图形界面上。

这里面涉及到一些问题，接下来就用问答的形式记录一下。

Q1: 搭建Ubuntu-BBB的Qt交叉编译环境、配置触摸屏：

A1: http://blog.csdn.net/wyt2013/article/details/18549415

Q2: 去掉Qt界面的标题栏

A2: 

在mainwindow.cpp中MainWindow(QWidget *parent)函数里的ui->setupUI(this);下加入一行就可以

this->setWindowFlags(Qt::FramelessWindowHint);

Q3: 去掉鼠标指针。保留触摸操作

A3: 

首先include <QWSServer>
然后在mainwindow.cpp中MainWindow(QWidget *parent)函数里的ui->setupUI(this);下加入一行就可以

QWSServer::setCursorVisible(false);

Q4: 在Qt中实现定时中断

A4: 

使用QTimer。

在mainwindow.cpp中构造函数MainWindow(QWidget *parent)里的ui->setupUI(this);下加入

    QTimer *timer = new QTimer(this);
    connect(timer,SIGNAL(timeout()),this,SLOT(timerUpDate()));
    timer->start(T);

这样就设定好了一个周期为T毫秒的类似定时中断的东西。每过T毫秒就会触发一次timerUpDate()函数。

别忘了在MainWindow类中加入timerUpDate()函数声明：

private slots:
    void timerUpDate();

然后就是编写timerUpDate()函数体了。

注意假设函数体内做的事情耗时超过了定时周期T，Qt不会像单片机的定时中断那样挂掉，而是会尽可能完毕每次任务，导致总体定时周期延长。

我这里就在这个函数中实现了定时读取I2C设备的数值，并更新各个UI元素。

Q5: 怎样測试函数运行时间

A5: 

使用gettimeofday()函数。

#include<stdio.h>
#include<sys/time.h>
#include<unistd.h>

int main()
{
	struct  timeval start;
	struct  timeval end;
       
	unsigned  long diff;
	gettimeofday(&start,NULL);
	//Put things you want to test here.
	gettimeofday(&end,NULL);
	diff = 1000000 * (end.tv_sec-start.tv_sec)+ end.tv_usec-start.tv_usec;
	printf("It took %ld us.\n",diff);
	return 0;
}

Q6: 怎样画直线图形

A6: 

用QPainter。

首先引用头文件

#include <QPainter>
#include <QPointF>

在.h文件里加入声明

private:
    void paintEvent(QPaintEvent *);

然后在函数里实现画图

void MainWindow::paintEvent(QPaintEvent *)
{
     QPainter painter(this);
     QPen pen;

     pen.setColor(Qt::darkRed);
     painter.setPen(pen);
     static const QPointF points[4] = {QPointF(-50, 0), QPointF(50, 10), QPointF(50, -10),QPointF(-50, 0)};
     painter.drawPolyline(points, 4);
}

屏幕左上角是坐标(0,0)点。

这里就绘制出了我第一个图片中所看到的的三角形。


Q7: 怎样定时刷新图形

A7: 

上面给出的是绘制精巧图片的方法。想绘制动态图片的话仅仅须要在前面提到的定时中断timerUpDate()函数中添加一句

update();

Q8: 怎样旋转图形

A8:

能够直接旋转坐标系来实现。首先将坐标系原点平移到旋转中心点，然后旋转坐标系就可以。在paintEvent(QPaintEvent *)中添加

     painter.translate(200,160); 
     painter.rotate(dir);

Q9: 怎样绘制波形图

A9:

使用QPainterPath。

在.h文件里加入定义 QPainterPath path;
在paintEvent中使用例如以下三行：

this->path.lineTo(num,-dir/4);
painter.translate(300-num,180);
painter.drawPath(this->path);

这里num是一个每次定时中断都会自增的变量。

所以lineTo(num,-dir/4);会绘制历史上全部的线，以及绘制近期一个端点和(num,-dir/4)这个坐标的连线。

translate(300-num,180);将坐标每次都向左平移一个单位。

Q10: 怎样加入退出程序button

A10:

在图形界面拖放一个PushButton，右键点击之。选择"Go to slot"，然后选择第一个clicked()。这时Qt creator会自己主动跳到void MainWindow::on_pushButton_clicked()函数中。在里面加入：

    QApplication* app;
    app->quit();

调试时建议用这个button退出程序，而非使用Qt creator上的停止button。由于有时停止button会失效，然后就仅仅能重新启动BBB了。

完整的源码放到了我的github里。欢迎參考

https://github.com/wytalfred/Beaglebone-magnetometer-Qt-display

https://github.com/wytalfred/beaglebone-mag-scope