基于Python Flask的溫度數(shù)據(jù)可視化

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

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

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

圖1 程序設(shè)計(jì)流程圖

圖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è)務(wù)流程

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

3 庫簡介

3.1 ECharts

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

3.2 Flask

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

3.3 serial

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

4 硬件設(shè)計(jì)

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

5 軟件設(shè)計(jì)

5.1 串口通信

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

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

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

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

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

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

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

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

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