App Inventor學習記錄158-上傳資料到 thingspeak用的外掛~ThingSpeak

上一篇上傳資料到 thingspeak,是用網址硬湊上去的,用起來有點麻煩。
有人開發了上傳資料到 thingspeak用的外掛~ThingSpeak,用起來方便很多,這次就來介紹一下。


這次範例的完成品如下。

我把畫面整理了一下,用兩個水平配置把 8個數據輸入的地方整理起來。
用一個清單選擇器,來選擇要出現的是那一個 thinkspeak提供的折線圖。
隨機數據按鈕,只是產生 1~30的隨機數據。(懶得再填 8個數據測試)
資料送出按鈕就不用說明。

另外,由於 thingspeak要間隔 15s後,才能送出第 2筆數據,所以也放了一個標籤,用來顯示還有多久才能送出第 2筆資料。但這個 15s實際測試起來的效果,還是建議設定成 30s或以上。


畫面編排的部份如下。

很明顯的,我把畫面重新整理過了。
在畫面編排的上半部份,就是水平配置和標籤、文字輸入盒的組合,這裡就不多說明了。
清單選擇器用的是 listpicker元件來做,外型看上去很像按鈕。
webviewer瀏覽器元件,是用來顯示 thingspeak的折線圖用的。

web元件,這裡就比較特別一點。等一下我們全部的程式中,都用不到這一個 web元件的方塊,但請一定要拉一個 web元件進來,不然這次介紹的 thingspeak上傳外掛,是無法使用


全部的程式碼如下。


第 1部份使用到的方塊說明。

建立變數_數據列表,它的值是一個清單。
這個要用來放在清單選擇器上的。它的值就是清單選擇器的內容。


第 2部份使用到的方塊說明。

建立變數_圖表網址列表。
把從 thingspeak上取得的圖表連結,建立一個清單。


這個連結是從這裡取得的。


第 3部份使用到的方塊說明。

建立變數_倒數,預設值是 15。用來倒數 15秒用的。


第 4部份使用到的方塊說明。

when screen 1.initialize,當程式初始化的時候。
set listpicker.elements,設定清單選擇器的元件為變數_數據列表


第 5部份使用到的方塊說明。

when button 1.click,當按鈕 1,也就是資料送出按鈕被按下的時候。
set thinkspeak.channel api key,設定 thinkspeak的 api的值,這裡用文字方塊填入 api值就可以了。

set thing speak 1.field 1,設定 thinkspeak要上傳的第 1個數字為 textbox 1.text文字輸入盒 1的文字。
接下來的 set thing speak 1.field 2~8,都是一樣的做法。

call thing speak 1.upload data,呼叫外掛程式中,資料上傳的程式。

call web veiwer.go to url,呼叫網路瀏覽器前往指定的網址。

set clock 1.timer enabled,設定計時器啟動,開始計時。

用外掛上傳到 thinkspeak的部份,到這裡就已經介紹完了。還沒有用到 web網路元件的方塊對吧。因為真的用不到,但請千萬記得,一定要拉一個 web網路元件進來,不然這個外掛會沒有作用

其它的部份的方塊,我一樣它記錄一下。


第 6部份使用到的方塊說明。

when clock 1. timer,當計時器開始計時的時候。
這個部份我們就跳過不說明了。
以往的範例中已經介紹過挺多次的了。


第 7部份使用到的方塊說明。

when button 2.click,當按鈕 2按下的時候。
set textbox 1.text,設定文字輸入盒 1的值為隨機值。
這裡用 random integer from的方塊來做,取 1~30間的隨機值。

set textbox 2.text~set textbox 8.text,文字輸入盒 2~8的值也是一樣的做法。


第 8部份使用到的方塊說明。

when list picker 1.after picking,當清單選擇器選擇後。
set webviewer 1.home url,設定網路瀏覽器的網址。
利用 listpicker 1.selection index清單選擇器的選中項的索引值,搭配 select list item清單方塊做。
假設我們在清單選擇器上,點擊數據 3的圖表這個值,那麼 listpicker 1.selection index的值就是 3,因為它位於變數_數據列表中的第 3項。我們再利用 select list item清單方塊,去取變數_圖表網址列表中的第 3項,就可以得到我們的網址值。

call web viewer. go to url,呼叫瀏覽器前往指定的網址。


這次的外掛就介紹到這裡,不得不說,用了外掛之後,真的方便了許多。畫面看上去也清爽很多。

接下來是補充的說明。
thinkspeak,提供的圖形不只是折線圖而已,還有其它的圖形可以做選擇。但是不知道為什麼用它提供的網址,是無法顯示的。要用嵌入網頁代碼的部份,才能夠正確的顯示。

我再來研究看看該怎麼做……

這次的 aia檔的下載連結如下:
NO_158_Thing_speak_extension.aia

至於外掛下載連結或是網站,真的是找不到,這個外掛我是從某個範例檔上看到的。
有需要的朋友,請參考一下這一篇:
App Inventor 小技巧,怎麼取得 aia檔中,使用的 aix外掛程式

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響