網頁

Blynk雲端平台的SuperChart工具-監控環境溫溼度



在Blynk這個開發平台中,當初最吸引我的莫過於SuperChart這個工具。在我介紹過的Value Display工具Gauge工具LCD工具等顯示工具中,唯有SuperChart能夠將資料庫中的資料給下載下來讀取。

也因此這個工具會稍微複雜一些,同時也用比較長的篇幅來講解。在LCD的文章中我使用DHT11上傳溫溼度資訊到Blynk的伺服器中,同時我在程式碼中是使用每秒傳送一次資料(PUSH)的模式,每當使用Blynk.virtualWrite這個指令進行傳送時,資料會自動的儲存在Blynk的雲端資料庫中,所以這也是我覺得Blynk相當具有魅力的一點。

然而提到資料庫,肯定有它的大小限制。在SuperChart工具介紹的文末中也提到(As Blynk Cloud is free to use we have a limit on how many data you can store. At the moment Blynk Cloud accepts 1 message per minute per pin.),意思是資料庫僅提供每分鐘一筆資料的儲存。

而且如果一分鐘內傳送多組資料則會被進行平均後再儲存(In case you send your data more frequently your values will be averaged. For example, in case you send value 10 at 12:12:05 and than again 12 at 12:12:45 as result in chart you’ll see value 11 for 12:12.)。

同時要注意的是在PUSH DATA的範例程式中有特別警告,不要在每秒發送超過十組的資料(Please don't send more that 10 values per second.),不然可能會造成斷線的問題。

至於在儲存時間的部分,"網路上的說法"是三個月後會刪除,但這點我並沒有在官方文件中找到,這點尚待證實。


說了這麼多,該來看看這個工具的設定了。首先是名稱、文字尺寸與文字位置的部分,這個自行嘗試即可。

在DataStream的部分,它提供一次4組的資料顯示,可以透過+Add DataStream來新增。


接著在下面的TITLE則是顯示標題開關,LEGEND則是各數值的標題開關,X-AXIS VALUES是時間軸,OVERRIDE AUTO SCALING FOR ALL DATASTEAMS則是會自動調整所有數值的Y軸比例大小(自適應),ALLOW FULL SCREEN VIEW則是提供全螢幕顯示的功能,能夠將圖表滿版的顯示在手機上。



最下面的STANDARD RESOLUTIONHIGH RESOLUTION則是顯示時間的部分。

上面提到說Blynk會將數值點每分鐘做一次儲存,而在顯示上會有這樣的劃分,在1h、6h、1d會採用每分鐘一點顯示,而1w、1m、3m則會以每小時一點顯示,這個部分我覺得講得有點含糊,因此我特別去Blynk的社群中找到解答,它翻出Blynk的程式碼並解釋其劃分的區別。(SuperChart low-res mode “engaged”. How to disengage it?)

Live模式中會即時顯示所接收到的數據,而STANDARD RESOLUTION裡面的15m、30m、1h、3h、6h、12h以每分鐘顯示;1d、2d、3d、1wk則是以每小時顯示;1Mo、3Mo、6Mo、1Yr則是以每天顯示。
至於在下方的HIGH RESOLUTION則有1d、1wk、2wk、1Mo、3Mo則會用更細的顯示方式,當然上述的不一定正確,因為我也沒有去翻它內部的程式碼,但這可以自己多嘗試試試看。但實務上我們最後還是會把它導出CSV檔案在電腦上進行數據分析,所以其實不用太計較這個顯示的方式,這只是為了方便檢視而已。


大致的設定介紹完之後,接著我們進到更細部的設定DataStream裡面,來看看資料的顯示有幾種不同的方式。資料的顯示方式主要有四種模式,分別如下:

Line 折線圖
Area 區域圖
Bar 直條圖
Binary (anchor LINK to binary) 數位訊號圖

前三種都相當的好懂,唯獨最後一項Binary需要注意,這個顯示方式就是像比較器一樣,可以自訂輸入多少數值以上為HIGH,多少數值以下則為LOW,可以像數位訊號一樣進行輸出顯示。



除了顯示的方式之外,還有Y軸的數值比例選項也相當重要,分別有AUTOMIN/MAXHEIGHTDELTA四種,如果在工具首頁的OVERRIDE AUTO SCALING FOR ALL DATASTEAMS有勾選的話,這邊就全部會設為自動。


在MIN/MAX的部分,Y軸數值圖形會在你所設定的區間內顯示,如果超過的話會被裁切掉。

而HEIGHT的設定則是會在整個圖表中的0~100%多少部分顯示,顯示的部分則一樣是把數據中的最大與最小值做自適應,這部分可能用講的有點抽象,請直接參考下圖即可,用這個方式可以將圖表顯示的範圍進行劃分,當有多組數據的情況下我覺得是一個不錯的做法。(下圖我將溫度設為50~100%;濕度則為0~50%)


最後一個DELTA模式,則是可以設定一個區間,當數值的上下限值小於這個區間值,統一以這個大小做Y軸範圍,當超過時則自動變成AUTO模式。


而Line 折線圖與Area區域圖還多了一個連接缺少數據點(Connect Missing Data Points)的功能,這個功能如果關閉時,當資料庫有中斷沒有資料時,會自動把數據空掉而不會直接以直線連接。

最後在SuperChart的教學文件中還有一個Tags的選項,好像是能對多組感測器做總和、平均、中間值、最大值與最小值的篩選,不過這個部份我還弄不太懂,就暫不做解釋了。


這個專案的程式碼可以直接複製官方的DHT11範例即可,APP端則可以下載我設定好的介面,打開Blynk APP在掃描以下的QRcode即可。


而資料的輸出我會另外再撰寫一篇文章,因為再寫下去篇幅實在有點太長了。SuperChart是一個很不錯的工具,我覺得算是Blynk非常經典的一樣工具,我看許多人使用ESP8266等雲端開發版都是用來點燈、控制家電不然就是監控環境,光監控環境這一點SuperChart就十分的好用也容易上手了。目前我有DHT11的溫溼度計,改天再買一個PM2.5和氣壓計來做一個比較詳盡的環境監控系統。