MATLAB和物聯網連載4: Thingspeak Tutorial 3

01-29

如何在Thingspeak中添加MATLAB Plot

All comments and opinions expressed on Zhihu are mine alone and do not necessarily reflect those of my employers, past or present.

本文內容所有內容僅代表本人觀點，和Mathworks無關

下面頻道是筆者家的一顆巴西木的盆中土壤濕度，數據用NodeMCU+土壤濕度計收集而來。圖中左上是Thingspeak默認的數據可視化方式，圖片欄右上角的筆型按鈕可以用來定製它。如果用戶希望更深入地定製數據的可視化方式，可以使用Thingspeak提供的Online MATLAB.這節我們就介紹如何用MATLAB在雲端利用頻道數據作圖。

點擊右上的MATLAB Visualization，然後選擇Custom(no starter code),Thingspeak將提供一個online MATLAB editor 如下所示

首先給這個MATLAB Visualization起一個名字叫做：soil humidity from yesterday to now. 然後在online editor中填入以下代碼:

today=datetime(today);nyesterday=datetime(yesterday);n[d,t] = thingSpeakRead(138112,Fields,1,DateRange,[yesterday,today]);nts = timeseries(d,cellstr(t),Name,Soil Humidity From yesterday to now);nplot(ts)n

從這裡我們可以看出，Thingspeak提供的MATLAB APP其實和Desktop的MATLAB功能幾乎一樣，我們可以像使用Desktop MATLAB一樣在雲端直接使用這個 免費的 MATLAB。不同是這個MATLAB是運行在雲端的，每個用戶都每次運行這些MATLAB的代碼都將在雲端啟動一個新的MATLAB，運行用戶的代碼，返回結果，並且退出。

在上面這段代碼中，我們通過使用datetime對象，從Thingspeak Channel的138112頻道中利用thingSpeakRead獲取從昨天到今天，然後轉成timeseries對象，最後作圖。

在把該MATLAB Visualization添加到頻道之前，我們需要點擊Save and Run在驗證一下代碼和結果無誤，得到結果如下：

最後在Add this Visualization to a Channel中選擇要添加的頻道名稱就可以在頻道上使用MATLAB作圖了。

如何使用Javascript獲得Thingspeak頻道數據

如果用戶僅僅想把Thingspeak作為一個數據存儲的服務，而自己設計數據的前端展示，可以用Javascript對thingspeak的資源發出HTTP的請求。每個頻道的Data Import/Export Tab 中列出了這樣的請求的URL。

下面的代碼中，舉例使用JQuery來獲得Thingspeak頻道138112中的數據，然後用Google Charts做圖。

<html>n <head>n https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jshttps://www.gstatic.com/charts/loader.jsnnnn n google.charts.load(current, {packages:[corechart]});n google.charts.setOnLoadCallback(drawChart);nn function drawChart() {n var data = new google.visualization.DataTable();nt data.addColumn(number, index);nt data.addColumn(number, humidity);nnt var chart = new google.visualization.LineChart(document.getElementById(line_chart)); nnt var options = {nt title: Humidity,nt curveType: function,nt legend: { position: bottom }nt };nnt function display(channeldata){nt feeds = channeldata.feeds;nt for(var iter=0;itern </head>n <body>nn</body> </html>n

上述代碼可以直接保存成HTML文件，並且雙擊打開，效果圖如下：

雖然該圖和Thingspeak頻道上的默認可視化沒有太大的區別，但可以作為IOT編程的一種思路，它把數據的存儲（後端）和數據的可視化（前端）分離了開來。

如何在Thingspeak中使用JS Plugin

前節我們用一個包含Javascript代碼的HTML演示了如何用Javascript可視化Thingspeak數據，現在我們演示如何把這樣的代碼嵌入到Thingspeak的頻道到中去。

選擇Plugins -> New -> Javascript Template Custom (no starter code)

接著會出現如下的三個編輯框

在HTML 編輯框中填入

<html>n <head>n <title>Demo Plant Humidity</title>n %%PLUGIN_CSS%%n %%PLUGIN_JAVASCRIPT%%n </head>n <body>n

</body> </html>

其中%%符號表示此處插入其它CSS和Javascript的內容

在CSS編輯框中填入

<style type="text/css">n body { background-color: #ddd; }n #line_div { width: 500px; margin: 0 auto; }n</style>n

最後Javascript編輯框中填入

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jshttps://www.gstatic.com/charts/loader.jsnn google.charts.load(current, {packages:[corechart]});n google.charts.setOnLoadCallback(drawChart);n function drawChart() {n var data = new google.visualization.DataTable();n data.addColumn(number, index);n data.addColumn(number, humidity);nn var chart = new google.visualization.LineChart(document.getElementById(line_div)); nn var options = {nt title: Humidity Using Google Charts,nt curveType: function,nt legend: { position: bottom }n };nn function display(channeldata){nt feeds = channeldata.feeds;nt for(var iter=0;itern

這裡的代碼和上節一樣，只是把HTML和CSS,Javascript分開了，Thingspeak會幫助用戶最終把它們組合到一起，並且顯示在頻道的界面上