常州信息職業(yè)技術學院電子與工程學院 胡 釗

本文闡述了基于Python Flask的溫度數(shù)據(jù)可視化方法，主要包括通過51單片機驅動DS18B20溫度傳感器通過串口通信向上位機發(fā)送溫度數(shù)據(jù)，前端循環(huán)定時1s向后端Flask web框架發(fā)送ajax請求獲取json數(shù)據(jù)，前端收到后端的響應數(shù)據(jù)通過ECharts可視化庫顯示溫度。

在數(shù)據(jù)科學飛速發(fā)展的今天，擁有豐富的工具包與活躍的開源社區(qū)Python語言，在web開發(fā)數(shù)據(jù)可視化等領域的的價值日漸增長。能夠對數(shù)據(jù)進行行之有效的探索性數(shù)據(jù)分析，并使用便捷的工具實現(xiàn)美觀的數(shù)據(jù)可視化至關重要。本文研究的是溫度傳感器的數(shù)據(jù)可視化，實現(xiàn)單片機與上位機串口通信，后端向前端發(fā)送數(shù)據(jù)，前端拿到數(shù)據(jù)進行處理，可視化能將數(shù)據(jù)以更加直觀的方式展現(xiàn)出來，使數(shù)據(jù)更加客觀、更具說服力。在各類報表和說明性文件中，用直觀的圖表展現(xiàn)數(shù)據(jù)，顯得簡潔、可靠。

圖1 程序設計流程圖

圖2 硬件原理圖

1 開發(fā)環(huán)境

（1）操作系統(tǒng)：Window 10

（2）Python版本：Python 3.7.4

（3）開發(fā)環(huán)境：Pycharm keil

（4）Python第三方庫：Flask serial

（5）前端：jquery庫，EChars庫

2 業(yè)務流程

在編寫程序時，需要了解程序執(zhí)行流程，如圖1所示，在程序開始執(zhí)行時，前端程序會設置一個定時器每個1s中向后端發(fā)送一個ajax請求，然后后端Flask收到請求后就會通過串口從單片機獲取溫度，再把數(shù)據(jù)轉換成json格式發(fā)送給前端，前端收到數(shù)據(jù)通過處理追加到ECharts數(shù)組中，從而就能夠實現(xiàn)需求。

3 庫簡介

3.1 ECharts

ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，是百度的一個開源的數(shù)據(jù)可視化工具，一個純Javascript的圖表庫，能夠在PC端和移動設備上流暢運行，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas庫ZRender，ECharts提供直觀，生動，可交互，可高度個性化定制的數(shù)據(jù)可視化圖表。

3.2 Flask

Flask是一個使用Python編寫的輕量級Web應用框架其WSGI工具箱采用Werkzeug，模板引擎則使用Jinja2,Flask自帶開發(fā)用服務器和debugger集成單元測試(uint testing)和RESTful調度請求。

3.3 serial

serial是Python的第三方庫，這個庫是一個類提供了非常多的方法，使用較少代碼就可以實現(xiàn)從PC的串口接收數(shù)據(jù)。在本設計中就是使用serial來獲取下位機傳來的溫度數(shù)據(jù)。

4 硬件設計

本設計采用STC89C52單片機驅動溫度傳感器DS18B20實時獲取溫度，通過串口通信把數(shù)據(jù)發(fā)送給上位機，如圖2所示。

5 軟件設計

5.1 串口通信

在獲取溫度數(shù)據(jù)之后，需要向上位機通過串口通信發(fā)送數(shù)據(jù)，程序中會設置tab[5]={1,2,’.’,3,4}這個數(shù)組索引0,1,3,4會保存溫度數(shù)據(jù)，索引2是小數(shù)點，具體代碼如下所示：

5.2 接收單片機數(shù)據(jù)并向前端發(fā)送數(shù)據(jù)

接收數(shù)據(jù)用的是python的第三方庫serial需要pip install serial進行安裝才能使用，后端flask框架需導入render_template用來引入html模板，還需導入jsonify在使用Flask寫一個接口時候需要給客戶端返回json數(shù)據(jù)，在Flask中可以直接使用jsonify生成一個json的響應返回前端，具體代碼如下：

5.3 前端數(shù)據(jù)可視化圖表實現(xiàn)

向后端發(fā)送數(shù)據(jù)需引入jquery，jquery是一個快速、簡潔的JavaScript框架。引入jquery后就能使用$.ajax()這個方法就能發(fā)送ajax請求了，ajax請求是指一種創(chuàng)建交互式、快速動態(tài)網(wǎng)頁應用的網(wǎng)頁開發(fā)技術，無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術。通過在后臺與服務器進行少量數(shù)據(jù)交換，ajax可以使網(wǎng)頁實現(xiàn)異步更新，后端收到請求后就會返回json，在拿到后端的json數(shù)據(jù)后就可以把數(shù)據(jù)插入到EChart數(shù)組里面。這樣溫度數(shù)據(jù)就可以動態(tài)的更新了，ajax請求代碼如下：

圖3 溫度數(shù)據(jù)可視化圖

5.4 溫度數(shù)據(jù)可視化圖

瀏覽器訪問網(wǎng)址127.0.0.1:5000所加載的頁面，通過Echarts實現(xiàn)數(shù)據(jù)到圖形的映射，每一秒鐘會動態(tài)更新數(shù)據(jù)。具體效果如圖3所示。

結論：本設計利用Python和單片機實現(xiàn)的實時溫度采集，通過后端數(shù)據(jù)和前端頁面數(shù)據(jù)交互實現(xiàn)溫度數(shù)據(jù)可視化。可以很直觀的觀察數(shù)據(jù)值，因為數(shù)據(jù)是網(wǎng)頁端顯示的，所以有很好的跨平臺性，在不同的客戶端都能很方便的觀察溫度狀態(tài)。在此基礎上還可以擴展一些空氣濕度傳感器，光敏電阻傳感器等等?？梢詫嶋H運用到一些工廠，機房等進行環(huán)境監(jiān)測。