記錄一下。
App Inventor學習記錄161-用webviewers讀取上傳到系統的html檔
這次完成的範例如下。
由於 thingspeak免費帳戶的權限是 15秒內只能上傳一筆資料。在這裡先點擊隨機數據按鈕，隨機產生 8個數據，再點擊資料送出按鈕，把資料送到 thingspeak中。
然後就會出現倒數計時15秒的標籤。等時間到之後，才能送出第 2筆資料。
再從清單選擇器中選擇要顯示那一個圖表。選擇後，就會用 webviewers開始對應的 html檔案。
畫面配置的部份如下。
上半部份，就是標籤和文字輸入盒的組合。
接著是 listpicker用來選擇圖表。
webviewer，用來讀取 html檔案。
全部的程式碼如下。
第 1部份的程式碼記錄。
建立一個變數，這個變數的內容就是 thinkspeak的上傳資料的路徑。
這部份的用法已經在上傳資料到 thingspeak用的外掛~ThingSpeak這篇中說明過了，請參考。
第 2部份的程式碼記錄。
這個是要倒數的秒數。
第 3部份的程式碼記錄。
數據列表這個清單，列出的項目，就是要給 listpicker用的顯示項目。
第 4部份的程式碼記錄。
圖表網址列表這個清單，對應的就是我們上傳的 html檔的位置。
要用 webviewer打開上傳到 app inventor的 html檔的時候，所用的網址格式是用 https://localhost/檔名的組合，這個要特別的注意一下。
第 5部份的程式碼記錄。
when screen1.initialize，當程式初始化的時候。
set listpicker 1.elements，設定清單選擇器的元素為數據列表這個清單。
第 6部份的程式碼記錄。
when button1.click，當按鈕 1，也就是資料送出按鈕被按下的時候。
拉出 thingspeak外掛中的積木，把 api key的值，跟 field 1~8的值都設定一下。
call thingspeak.upload data，呼叫 thingspeak外掛上傳資料。
call webveiwer1.go to url，呼叫 webviewer網路瀏覽器打開 homeurl這個網址。這個網址我在屬性中有設定成 https://localhost/1.html，也就是資料一上傳，就先打開 1.html這個檔案。
set clock 1.timereanbled to true，啟動計時器1 。
第 7部份的程式碼說明。
when button 2.click，當按鈕 2，也就是隨機取值的按鈕按下之後。
把文字輸入盒 1~8的值，設定成 1~30之間的隨機數值。
第 8部份的程式碼說明。
when listpicker.afterpicking，當清單選擇器 1選擇完成之後。
set webviewer 1.homeurl，設定一下網路瀏覽器元件的主網址。
這裡的 listpicker 1.selection index從清單選擇器選中項是數據列表中的第幾個的意思。
數據列表中的內容依照順序是數據 1圖表，一直到數據 8圖表。假設我們選擇的是數據 6圖表這一項， selection index的值就是 6，以此類推。
我們再用 selection index的值去取得圖表網址列表清單中的第六項。
然後呼叫網路瀏覽器前往清單圖表網址列表中第 6項的網址。
第 9部份的程式碼記錄。
當計時器開始計時的時候。
如果變數_倒數的值等於 0的話，設定 label 9的文字為”可以再次送出資料”
把變數_倒數的值設回 15。
關閉計時器。
不然的話，把變數_倒數的值設定成每次計時就減 1。
把 label 9的文字，設定成，還有幾秒後，可以重新送出資料。
補充一下 thingspeak取得嵌入代碼的過程。
登入 thingspeak之後，在圖表的上方，可以找到按鈕。
點擊之後，把視窗內的程式碼複製一下。
打開記事本，把取得的程式碼貼上。
把檔案另存成 html。
再上傳到 app inventor的素材中就可以了。
這次的 aia檔的下載連結如下:
NO_161_html_iframe.aia
之前介紹過的一些 appinventor的使用記錄，都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面