[UP-Borad]windows应用开发--串口图像显示上位机

colin2135

UP-Board 试用汇总（2017年2月13日）

这一篇分享是继续使用QT进行程序开发的讲解，使用是串口通信类QtSerialPort，里面有一些我的使用介绍。

先上最终软件的效果图：


通信过程：
1.stm32连接相机ov7670。
2.上位机通过发送拍照指令给stm32
3.stm32拍照后，回传图像数据给上位机。
4.上位机接收图像数据后，将RGB565转换成RGB888显示到label，并保存到本地图像。

硬件连接：
stm32通过usb转ttl连接到UP-Board的USB口。

步骤1：和前面的分享一样，使用QT先画出软件界面框

使用的控件有：
1.Push Button  拍照按键
2.Combo Box   端口选择
3.Progress Bar 进度条
4.Label           图像显示


步骤2：添加串口头文件

1. #include <QtSerialPort/QSerialPort>
   
2. #include <QtSerialPort/QSerialPortInfo>

复制代码

步骤3：添加拍照信号和槽

1. //cpp:
   
2. connect(ui.takePictureButton, SIGNAL(clicked()),this, SLOT(takePicture()));
   
3. 
   
4. //h:
   
5. private slots:
   
6. void takePicture();

复制代码

步骤4：进度条初始值设置，根据QVGA图像大小值设置。

1. pictureHeight=240;
   
2.         pictureWidth=320;
   
3. 
   
4.         ui.progressBar->setMinimum(0);
   
5.         ui.progressBar->setMaximum(pictureWidth*pictureHeight*2);
   
6.         ui.progressBar->setValue(0);

复制代码

步骤5：声明串口对象，并把系统的端口显示到ComboBox里

1. serial=new QSerialPort(this);
   
2.         foreach (const QSerialPortInfo &info, QSerialPortInfo::availablePorts())
   
3.                 ui.serialComboBox ->addItem(info.portName());        

复制代码

步骤6：加入串口接收到的信号和槽，当串口接收到数据时，调用该函数

1. connect(serial,SIGNAL(readyRead()),this,SLOT(readSerialPortData()));

复制代码

步骤7：拍照按键触发指令，串口波特率等参数初始化

1. void PictureViewer::takePicture(){
   
2.         receivedLength=0;
   
3.         
   
4. 
   
5.         if(ui.serialComboBox->count()==0){
   
6.                 QMessageBox::critical(this,"error","please connect the com device");
   
7.                 return;
   
8.         }
   
9.         QString portName=ui.serialComboBox->currentText();
   
10.         serial->setPortName(portName);
    
11.         if(!serial->open(QIODevice::ReadWrite)){
    
12.                 QMessageBox::critical(this,"error","fail to open com");
    
13.                 serial->close();
    
14.                 return;
    
15.         }
    
16. 
    
17.         serial->setBaudRate(QSerialPort::Baud115200);
    
18.         serial->setDataBits(QSerialPort::Data8);  
    
19.         serial->setParity(QSerialPort::NoParity);
    
20.         serial->setStopBits(QSerialPort::OneStop);  
    
21.         serial->setFlowControl(QSerialPort::NoFlowControl);
    
22. 
    
23.         char takePictureCmd[2]={0x12,0x34};
    
24.         serial->write(takePictureCmd,2);
    
25. 
    
26. }

复制代码

步骤8：图像数据接收，并且显示到Label

1. void PictureViewer::readSerialPortData(){
   
2.         QByteArray temp = serial->readAll();
   
3.         if(temp.length()>0 ){
   
4.                
   
5.                 memcpy((imageBuffer+receivedLength),temp.data(),temp.length());
   
6.                 receivedLength+=temp.length();
   
7.                 //fwrite(temp.data(),1,temp.length(),picture);
   
8.                 //fflush(picture);
   
9.                 ui.progressBar->setValue(receivedLength);
   
10.                 if (receivedLength==pictureWidth*pictureHeight*2)
    
11.                 {
    
12.                         QImage img(pictureWidth,pictureHeight,QImage::Format_RGB888);
    
13.                         unsigned char r,g,b;
    
14. 
    
15.                         
    
16.                         unsigned short *pD=(unsigned short*)imageBuffer;
    
17.                         for(int i=0;i<pictureHeight;i++){
    
18.                                 for(int j=0;j<pictureWidth;j++,pD++){
    
19.                                         unsigned short td=*pD;
    
20.                                         r=(td & 0xf800)>>8;
    
21.                                         g=(td & 0x07e0)>>3;
    
22.                                         b=(td & 0x001f)<<3;
    
23.                                         img.setPixel(j,i,qRgb(r,g,b));
    
24.                                 }
    
25.                         }
    
26.                         img.save("receive.png");
    
27.                         ui.pictureLabel->setPixmap(QPixmap::fromImage(img));        
    
28.                         //fclose(picture);
    
29.                         receivedLength=0;
    
30.                         serial->close();
    
31.                 }
    
32.         }
    
33. }

复制代码

OK，本分享就到这里，先不上传代码，如果需要请私信。

michael_llh

这个不错，关键是32和up之间的串口通信的图像数据如何转换是一个比较重要的问题

colin2135

michael_llh 发表于 2017-2-10 09:43
这个不错，关键是32和up之间的串口通信的图像数据如何转换是一个比较重要的问题 ...

最后那段代码就是图像数据转换，stm32得到的是RGB565图像，所以需要转换成RGB888，转换代码如下

1. or(int i=0;i<pictureHeight;i++){
   
2.                                 for(int j=0;j<pictureWidth;j++,pD++){
   
3.                                         unsigned short td=*pD;
   
4.                                         r=(td & 0xf800)>>8;
   
5.                                         g=(td & 0x07e0)>>3;
   
6.                                         b=(td & 0x001f)<<3;
   
7.                                         img.setPixel(j,i,qRgb(r,g,b));
   
8.                                 }
   
9.                         }

复制代码

michael_llh

colin2135 发表于 2017-2-10 12:25
最后那段代码就是图像数据转换，stm32得到的是RGB565图像，所以需要转换成RGB888，转换代码如下 ...

恩恩，谢谢回复

wmslecz

很强，感谢楼主分享。赞一个。如果是windows。我感觉delphi开发串口类工具非常的nice。虽然我几个工具都用。嘿嘿。

colin2135

wmslecz 发表于 2017-2-14 08:47
很强，感谢楼主分享。赞一个。如果是windows。我感觉delphi开发串口类工具非常的nice。虽然我几个工具都用 ...

是的啊，不管是QT，或者C#,或者delphi这些工具都很方便啊。