常州信息職業技術學院電子與工程學院 胡 釗
本文闡述了基于Python Flask的溫度數據可視化方法,主要包括通過51單片機驅動DS18B20溫度傳感器通過串口通信向上位機發送溫度數據,前端循環定時1s向后端Flask web框架發送ajax請求獲取json數據,前端收到后端的響應數據通過ECharts可視化庫顯示溫度。
在數據科學飛速發展的今天,擁有豐富的工具包與活躍的開源社區Python語言,在web開發數據可視化等領域的的價值日漸增長。能夠對數據進行行之有效的探索性數據分析,并使用便捷的工具實現美觀的數據可視化至關重要。本文研究的是溫度傳感器的數據可視化,實現單片機與上位機串口通信,后端向前端發送數據,前端拿到數據進行處理,可視化能將數據以更加直觀的方式展現出來,使數據更加客觀、更具說服力。在各類報表和說明性文件中,用直觀的圖表展現數據,顯得簡潔、可靠。

圖1 程序設計流程圖

圖2 硬件原理圖
(1)操作系統:Window 10
(2)Python版本:Python 3.7.4
(3)開發環境:Pycharm keil
(4)Python第三方庫:Flask serial
(5)前端:jquery庫,EChars庫
在編寫程序時,需要了解程序執行流程,如圖1所示,在程序開始執行時,前端程序會設置一個定時器每個1s中向后端發送一個ajax請求,然后后端Flask收到請求后就會通過串口從單片機獲取溫度,再把數據轉換成json格式發送給前端,前端收到數據通過處理追加到ECharts數組中,從而就能夠實現需求。
ECharts,縮寫來自Enterprise Charts,商業級數據圖表,是百度的一個開源的數據可視化工具,一個純Javascript的圖表庫,能夠在PC端和移動設備上流暢運行,兼容當前絕大部分瀏覽器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底層依賴輕量級的Canvas庫ZRender,ECharts提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。
Flask是一個使用Python編寫的輕量級Web應用框架其WSGI工具箱采用Werkzeug,模板引擎則使用Jinja2,Flask自帶開發用服務器和debugger集成單元測試(uint testing)和RESTful調度請求。
serial是Python的第三方庫,這個庫是一個類提供了非常多的方法,使用較少代碼就可以實現從PC的串口接收數據。在本設計中就是使用serial來獲取下位機傳來的溫度數據。
本設計采用STC89C52單片機驅動溫度傳感器DS18B20實時獲取溫度,通過串口通信把數據發送給上位機,如圖2所示。
在獲取溫度數據之后,需要向上位機通過串口通信發送數據,程序中會設置tab[5]={1,2,’.’,3,4}這個數組索引0,1,3,4會保存溫度數據,索引2是小數點,具體代碼如下所示:

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

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

圖3 溫度數據可視化圖

瀏覽器訪問網址127.0.0.1:5000所加載的頁面,通過Echarts實現數據到圖形的映射,每一秒鐘會動態更新數據。具體效果如圖3所示。
結論:本設計利用Python和單片機實現的實時溫度采集,通過后端數據和前端頁面數據交互實現溫度數據可視化。可以很直觀的觀察數據值,因為數據是網頁端顯示的,所以有很好的跨平臺性,在不同的客戶端都能很方便的觀察溫度狀態。在此基礎上還可以擴展一些空氣濕度傳感器,光敏電阻傳感器等等。可以實際運用到一些工廠,機房等進行環境監測。