作者：飛揚的青春

拿到開發板日子也過半了，體驗也逐漸深入，自己也想著用這款開發板做下QT小項目，所以在這里記錄下一個小的項目開發。

選擇這個項目呢需要準備點東西。我這邊為了開發方便選擇了是單片機開發板，板載兩個傳感器一個SHT20和一個光照度傳感器，通過串口和我們的OK3399之間傳輸數據，后續有機會，最方便的就是在Linux底層加入驅動，寫Linux驅動方式來讀傳感器數據，有機會會寫一篇體驗的。

OK3399這邊也是處理好了底層串口驅動，我使用的是與SPI口復用的串口4，設備名稱ttyS4，有這個我們就可以在QT中寫串口程序了。

接下來就是接好線，注意TX和RX交叉和共地，基本就可以完成數據傳輸。

上面就是串口接收程序，目前主要是采用定時器和一個槽函數完成定時接收數據解析。

寫完這個程序后我測試了下打印。

通過usb轉TTL的模塊把電腦端的數據傳送到底層調試串口上打印出來，效果就是這樣。

單片機這邊也同樣是初始化傳感器和串口，以及一個定長數組包就可以完成三組數據的同時傳輸。兩邊串口設置需要相同。

接下來就是把剩余程序編寫完成。然后傳輸到下位機上，具體可以看我體驗二的文章，里面有具體步驟。然后就是運行，效果如下。

我在這里使用了一個開源的QT繪制曲線庫，QCustomPlot，這個庫功能強大，太多的我也沒深入研究，這里就貼上我的代碼。

????QFont?font; //????font.setPointSize(12); ????/*?實例化，設置位置、背景顏色?*/ ????QBrush?brush(QColor(50,?50,?50)); ????dataCustomPlot?=?new?QCustomPlot(ui->widget); ????dataCustomPlot->setGeometry(0,?0,?880,?440); ????dataCustomPlot->setBackground(brush); ????//設定右上角圖形標注可見 ????dataCustomPlot->legend->setVisible(true); ????dataCustomPlot->legend->setFont(QFont("Helvetica",?9)); ????dataCustomPlot->legend->setRowSpacing(-3); ????dataCustomPlot->installEventFilter(ui->widget); ????QVector?shapes; ????shapes?<setInteractions(QCP::iRangeDrag?|?QCP::iRangeZoom);??????//可拖拽+可滾輪縮放 ????dataCustomPlot->xAxis->setLabelColor(QColor(Qt::white));?//?X軸上標識label字體顏色 ????dataCustomPlot->yAxis->setLabelColor(QColor(Qt::white)); ????dataCustomPlot->xAxis->setTickPen(pen);??????????????????//??設置x軸上坐標點上對應的刻度線的顏色 ????dataCustomPlot->xAxis->setTickLabelRotation(60);//設置標簽角度旋轉 ????dataCustomPlot->yAxis->setTickPen(pen); ????dataCustomPlot->xAxis->setBasePen(pen);??????????????????//??設置x軸?軸線本身的顏色 ????dataCustomPlot->yAxis->setBasePen(pen); ????dataCustomPlot->xAxis->setTickLabelColor(QColor(Qt::white));?//?設置x軸刻度值文本的顏色 ????dataCustomPlot->yAxis->setTickLabelColor(QColor(Qt::white)); ????dataCustomPlot->xAxis->setSubTicks(false);??//??隱藏x軸刻度線 ????dataCustomPlot->yAxis->setSubTicks(false);??//??隱藏y軸刻度線 ????dataCustomPlot->xAxis->setLabelFont(font);??//??設置x軸標識label文本字體大小 ????dataCustomPlot->yAxis->setLabelFont(font);??//??設置y軸標識label文本字體大小 ????font.setPointSize(10); ????dataCustomPlot->xAxis->setTickLabelFont(font); ????dataCustomPlot->yAxis->setTickLabelFont(font); ????dataCustomPlot->xAxis->setLabel("時間"); ????QSharedPointer?dateTicker(new?QCPAxisTickerDateTime);?????//得到DateTime的 ????dateTicker->setDateTimeFormat("hh:mm:ss"); ????dataCustomPlot->xAxis->setTicker(dateTicker); ????dataCustomPlot->xAxis->setRange(20170101011234,20300228235959); ????dataCustomPlot->yAxis->setRange(0,?100);???//??設置y軸數據范圍 ????/*?增加一個數據曲線?*/ ????pen.setColor(Qt::blue);????//?設置畫筆的顏色 ????dataCustomPlot->addGraph();????????????????//?增加曲線圖 ????//設置右上角顯示名稱 ????dataCustomPlot->graph(0)->setName("溫度");?//?設置曲線的名字 ????dataCustomPlot->graph(0)->setPen(pen);?????//?設置曲線畫筆的顏色 ????dataCustomPlot->graph(0)->setLineStyle(QCPGraph::lsLine);?//?設置連接線的類型?兩點直線連接 ????dataCustomPlot->graph(0)->setScatterStyle(QCPScatterStyle(shapes.at(3),?10)); ????pen.setColor(Qt::green);????//?設置畫筆的顏色 ????dataCustomPlot->addGraph();????????????????//?增加曲線圖 ????dataCustomPlot->graph(1)->setPen(pen);?????//?設置曲線畫筆的顏色 ????dataCustomPlot->graph(1)->setName("濕度");?//?設置曲線的名字 ????dataCustomPlot->graph(1)->setLineStyle(QCPGraph::lsLine);?//?設置連接線的類型?兩點直線連接 ????dataCustomPlot->graph(1)->setScatterStyle(QCPScatterStyle(shapes.at(5),?10)); ????pen.setColor(QColor(250,?168,?140));????//?設置畫筆的顏色 ????dataCustomPlot->addGraph();????????????????//?增加曲線圖 ????dataCustomPlot->graph(2)->setPen(pen);?????//?設置曲線畫筆的顏色 ????dataCustomPlot->graph(2)->setName("光照度");?//?設置曲線的名字 ????dataCustomPlot->graph(2)->setLineStyle(QCPGraph::lsLine);?//?設置連接線的類型?兩點直線連接 ????dataCustomPlot->graph(2)->setScatterStyle(QCPScatterStyle(shapes.at(7),?10)); ????/*?刷新顯示?*/ ????dataCustomPlot->replot();

以上是初始化繪制背景和三個曲線的樣式。

?????uchar?FHone?=?buf.at(0);?????uchar?FHtwo?=?buf.at(1);?????uchar?FTone?=?buf.at(8);?????uchar?FTtwo?=?buf.at(9);????if(FHone==0x11&&FHtwo==0x22&&FTone==0xff&&FTtwo==0xee)????{????????tempreture?=?(buf.at(2)<<8|buf.at(3))/10.0;????????humidity???=?(buf.at(4)<<8|buf.at(5))/10.0;????????Light_Value?=?buf.at(6)<<8|buf.at(7);?????????QString?tmp?=QString::number(tempreture,?'f',?1);????????QString?hum?=QString::number(humidity,?'f',?1);????????QString?Light_value?=?QString("%1").arg(Light_Value);???????//光照度????????ui->label_2->setText(tmp+"℃");????????ui->label_4->setText(hum+"%");????????ui->label_6->setText(Light_value+"LX");?????????dataCustomPlot->graph(0)->addData(now,?tempreture);?????????????????dataCustomPlot->graph(1)->addData(now,?humidity);?????????????????dataCustomPlot->graph(2)->addData(now,?Light_Value);????????dataCustomPlot->xAxis->setRange(now,?5?,?Qt::AlignRight);????????dataCustomPlot->replot();????}

下面的這個是具體的解析數據，讓其顯示的過程。
至此搭建完硬件和軟件就能實現具體數據的顯示了，當然在Linux上直接做驅動是很好的，但是這種方式也比較適用專門用QT開發界面，用其他平臺搭建硬件環境的。驅動就能少關心一些。后面我也將繼續學習下OK3399的其他玩法。

關注官方網站了解詳情?飛凌嵌入式<<