[App Inventor] LASS 測站資料查詢

LASS(Location Aware Sensing System)是一套開源和公益的「環境感測器網路系統」,是一群熱情的朋友針對空氣污染所建置的系統。由於空氣品質是小範圍的變化,例如校園內與十字路口可能只差50公尺,但空氣品質應該差很多吧!LASS就是讓有意願盡一份力的朋友,都能將感測器的資訊丟上LASS server,完全是 bottom-up 的概念,在一年多的時間之內就已經是相當知名的專案了。

LASS 針對許多物聯網開發板(Arduino、Raspberry Pi、LinkIt ONE、Realtek Ameba等等)都有現成的程式碼可以套用,裝置上線之後就能在LASS空汙地圖 看到各個測站的狀態。也可以購買套件包喔!

本文將說明如何使用 App Inventor 取得 LASS 各測站的資料,格式為JSON,網址為http://nrl.iis.sinica.edu.tw/LASS/last-all-airbox.json

程式說明

App功能很簡單,取得資料之後把 JSON 轉成陣列(list)放入 Listpicker,點選某個站之後會把該站的資料顯示在畫面上,並可將該測站開啟於手機的 Google Map (透過 App Inventor 的 ActivityStarter 把測站經緯度資料傳給 Google Map)

{

“gps_lat”: 25.04,

“gps_num”: 9,

“s_t0”: 24.75,

“SiteName”: “74DA3895C458”,

“timestamp”: “2016-11-29T09:36:32Z”,

“gps_lon”: 121.614,

“s_d0”: 40,

“s_h0”: 73,

“device_id”: “74DA3895C458”

}

緯度

GPS衛星數量

溫度

測站名稱(可自由設定)

時間戳記

精度

PM2.5濃度

濕度

裝置ID

Designer頁面

介面排版方式沒有特別規定,本app重點元件有

    1. web:取得指定網頁內容,並將 JSON格式轉為陣列
    2. ActivityStarter:將測站經緯度資料傳給手機上的 Google Map 來檢視該測站位置。並設定其屬性:
      • Action: android.intent.action.VIEW
      • ActivityClass: com.google.android.maps.MapsActivity
      • ActivityPackage: com.google.android.apps.maps

 

 

Blocks頁面

  1. 宣告一個 temp 用來儲存 JsonTextDecode 之後的陣列。按下按鈕去取得LASS JSON網頁內容。Web元件會在爬完網頁之後,呼叫 Web.GotText事件,在此我們將 reponseContent(就是網頁文字)轉為陣列之後存入 temp。完成之後會把 Screen.Title 設為OK,代表做完了。

您可使用這個網站來檢視 JSON資料,別忘了電腦不需要看排版。

http://www.jsoneditoronline.org/?url=http%3A%2F%2Fnrl.iis.sinica.edu.tw%2FLASS%2Flast-all-airbox.json

  1. 指定 ListPicker內容

點選 ListPicker 之前,把其元素(Elements)指定為temp陣列內容。由於尚未取得資料,所以在此先把 Button_Map設為無法點選,否則開啟Google Map 會有錯誤。

  1. 點選後取出相關資訊

這一段看起來很可怕,其實就是剝洋蔥而已。在此要顯示五筆資料:測站名稱、PM2.5、溫度、濕度與測站座標(經度+緯度)。以測站名稱(Sitename)來說,就是先取得 temp 這個陣列的所點選項目編號(ListPicker.SelectionIndex,點第一項就是1號)

接著再抽其1號元素([Sitename, 台北市大直國小] 這個陣列) 的2號(台北市大直國小),這樣就好了,其他欄位的做法完全一樣只是編號不同而已。請參照下圖即可。

最後把 Button_Map 設為可點選,代表準備好把經緯度資料傳給 Google Map了。

4.開啟Google Map

按下[Button_Map] 就會將 ActivityStarter 的DataUri 設為 “geo:0,0?q=” + Label_loc.Text,就是把測站經緯度資料傳給 Google Map,這樣就可以把該測站的位置開啟於手機的 Google Map

操作

初始畫面如下,請點選[更新資料]按鈕,完成之後會在 Screen.Title 顯示OK,代表資料都爬回來了。

screenshot_2016-11-29-13-08-34-70 screenshot_2016-11-29-13-08-40-13


接著點選[選擇站點]就可以看到各個測站的內容。請注意App Inventor 會把JsonTextDecode結果按照字母排序,而非原本定義的順序。我覺得有點多餘啦,但總之它是這樣做了。

點一個喜歡的站吧!以下是三組測站的執行結果,分別是在台中南屯、加拿大與台北市河堤國小。測站名稱為自訂,所以不一定可由測站名稱看出所在地,但是透過Google Map定位就很方便囉

screenshot_2016-11-29-11-42-15-03 screenshot_2016-11-29-11-42-28-71
screenshot_2016-11-29-11-42-15-03 screenshot_2016-11-29-11-43-07-75
screenshot_2016-11-29-11-43-31-05 screenshot_2016-11-29-11-43-42-22

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *