中文 | English

【家居物聯網】使用智慧行動裝置監控家居溫溼度(下篇之手機系統開發篇)

文/曹永忠、許智誠、蔡英德

智慧家居是物聯網開發中非常重要的一環,前文〈【家居物聯網】使用智慧行動裝置監控家居溫溼度(上篇)〉(曹永忠, 許智誠, & 蔡英德, 2017a),我們先使用 DHT22 溫溼度感測模組(曹永忠, 2016, 2017a, 2017b; 曹永忠, 許智誠, & 蔡英德, 2016a, 2016b),讀出溫溼度資訊後,接下來前文〈【家居物聯網】使用智慧行動裝置監控家居溫溼度(中篇)〉(曹永忠, 許智誠, & 蔡英德, 2017c)文章中,介紹如何將溫溼度資訊進行編碼,再透過藍芽通訊方式,將資訊傳送到連接藍芽模組的另一端裝置。

本文我們要使用 MIT APP INVENTOR 2 開發工具,進行智慧行動裝置監控家居溫溼度之物聯網系統開發,由於這個部分內容較長,所以筆者在前文〈【家居物聯網】使用智慧行動裝置監控家居溫溼度(下篇之藍芽開發篇)〉(曹永忠, 許智誠, & 蔡英德, 2017b; 曹永忠, 許智誠, et al., 2017c)文章中,先行介紹 MIT APP INVENTOR 2 開發工具的基本介紹,並了解如何設計藍芽通訊功能的手機應用程式。

本文將要進入如何開發完整的手機 APPs,教讀者如何將溫溼度感測資料於顯示漁行動裝置上,希望本文透過這樣簡單的案例,可以分享筆者在智慧家居環境監控開發上經歷。

如何執行 AppInventor 程式

如下圖所示,我們使用 Chrome 瀏覽器,開啟瀏覽器後,到 Google Search(網址),輸入「App Inventor 2」。

圖 1 搜尋 App_Inventor_2

如下圖紅框處所示,我們找到 App Inventor 2。

圖 2 找到App Inventor 2

如下圖紅框處所示,我們點選 App Inventor 2,進入 App Inventor 2。

圖 3 點選 App Inventor 2

進入 App Inventor 2 之後,一般而言,如下圖所示,我們可以進入 App Inventor 2 專案目錄的功能之中。

圖 4 App Inventor 2 專案目錄

開啟新專案

進入 App Inventor 2 開發環境中,第一個看到的是如下圖所示之專案保管箱的目錄,我們可以如下圖所示,我們在 App Inventor 2 程式模塊編輯畫面之中,開立一個新專案。

圖 5 建立新專案

首先,如下圖所示,我們先將新專案命名為 NTU_ReadDHT11。

圖 6 命名新專案為 NTU_ReadDHT11

建立新專案之後,如下圖所示,我們可以進到新專案主畫面。

圖 7 新專案主畫面

修改系統名稱

如下圖所示,我們先將系統名稱修改為「NTU_ReadDHT11」

圖 8 變更 APP Name

如下圖所示,我們也將系統 APP Title 修改為「讀取溫溼度模組」。

圖 9 變更 APP Title

通訊元件設計

首先,如下圖所示,我們在先拉出藍芽通訊元件,請拉出 BluetoothClient 元件,該元件為不可視元件,所以只會在底端出現該元件的 ICON。

圖 10 拉出藍芽元件

首先,如下圖所示,我們將拉出 BluetoothClient 元件,變更名稱為「BT」。

圖 11 變更藍芽名稱為 BT

通訊監聽元件

時鐘元件

首先,如下圖所示,我們在先拉出時鐘元件來當作監聽資料是否傳到的元件,請拉出Clock元件,該元件為不可視元件,所以只會在底端出現該元件的 ICON。

圖 12 拉出 Clock 時間元件

首先,如下圖所示,我們將拉出 Clock 元件,變更名稱為「TT」。

圖 13 變更時鐘元件名稱為 TT

圖形介面開發

本階段我們要進入 APPs 應用程式的介面開發。

Layout 設計

首先,如下圖所示,我們在先拉出 VerticalArrangement 元件。

圖 14 拉出 VerticalArrangement 元件

如下圖所示,我們變更拉出第一個 VerticalArrangement 元件的寬度為 98 %。

圖 15 變更寬度為 98 %

如下圖所示,我們在拉出第一個 HorizontalArrangement 元件。

圖 16 拉出第一個 HorizontalArrangement 元件

如下圖所示,我們在變更第一個 HorizontalArrangement 元件寬度為 95%。

圖 17 變更第一個 HorizontalArrangement 元件寬度

如下圖所示,我們在變更第一個 HorizontalArrangement 元件名稱為「BTControl」。

圖 18 變更第一個 HorizontalArrangement 元件名稱

如下圖所示,我們在拉出第二個 VerticalArrangement 元件。

圖 19 拉出第二個 VerticalArrangement 元件

如下圖所示,我們變更第二個 VerticalArrangement 元件寬度為 95%

圖 20 變更第二個 VerticalArrangement 元件寬度

如下圖所示,我們變更第二個 VerticalArrangement 元件名稱為「MainControl」。

圖 21 變更第二個 VerticalArrangement 元件名稱

如下圖所示,我們拉出顯示區第一個 HorizontalArrangement 元件

圖 22 拉出顯示區第一個 HorizontalArrangement 元件

如下圖所示,我們變更顯示區第一個 HorizontalArrangement 元件寬度

圖 23 變更顯示區第一個 HorizontalArrangement 元件寬度

如下圖所示,我們拉出顯示區第二個 HorizontalArrangement 元件

圖 24 拉出顯示區第二個 HorizontalArrangement 元件

如下圖所示,我們變更顯示區第二個 HorizontalArrangement 元件寬度

圖 25 變更顯示區第二個 HorizontalArrangement 元件寬度

如下圖所示,我們拉出顯示區第三個 HorizontalArrangement 元件。

圖 26 拉出顯示區第三個 HorizontalArrangement 元件

如下圖所示,我們變更顯示區第三個 HorizontalArrangement 元件寬度

圖 27 變更顯示區第三個 HorizontalArrangement 元件寬度

連接藍芽元件設計

如下圖所示,我們拉出 ListPicker 元件,來當為連接藍芽裝置的控制端。

圖 28 拉出 ListPicker 元件

如下圖所示,我們變更 ListPicker 元件顯示文字改為「選擇藍芽」。

圖 29 變更 ListPicker 元件顯示文字

如下圖所示,我們變更 ListPicker 元件名字改為「BTSelect」。

圖 30 變更 ListPicker 元件名字

溫溼度顯示元件設計

如下圖所示,我們拉出第一個顯示傳輸內容標示之 Label 元件。

圖 31 拉出第一個顯示傳輸內容標示之 Label 元件

如下圖所示,我們修改第一個顯示傳輸內容標示之 LABEL 元件的顯示屬性(Text)改為「溫度」。

圖 32 修改第一個顯示傳輸內容標示之 LABEL 元件的顯示屬性

如下圖所示,我們拉出第一個顯示傳輸內容之 Label 元件。

圖 33 拉出第一個顯示傳輸內容之 Label 元件

如下圖所示,我們修改第一個顯示傳輸內容之 LABEL 元件的顯示屬性(Text)改為「0」。

圖 34 修改第一個顯示傳輸內容之 LABEL 元件的顯示屬性

如下圖所示,我們修改第一個顯示傳輸內容之 LABEL 元件的名稱改為「T_Value」。

圖 35 修改第一個顯示傳輸內容之 LABEL 元件的名稱

如下圖所示,我們拉出第二個顯示傳輸內容標示之 Label 元件。

圖 36 拉出第二個顯示傳輸內容標示之 Label 元件

如下圖所示,我們修改第二個顯示傳輸內容標示之 LABEL 元件的顯示屬性(Text)改為「濕度」。

圖 37 修改第二個顯示傳輸內容標示之 LABEL 元件的顯示屬性

如下圖所示,我們拉出第二個顯示傳輸內容之 Label 元件。

圖 38 拉出第二個顯示傳輸內容之 Label 元件

如下圖所示,我們修改第二個顯示傳輸內容之 LABEL 元件的顯示屬性(Text)改為「0」。

圖 39 修改第二個顯示傳輸內容之 LABEL 元件的顯示屬性

如下圖所示,我們修改第二個顯示傳輸內容之 LABEL 元件的名稱改為「H_Value」。

圖 40 修改第二個顯示傳輸內容之 LABEL 元件的名稱

使用者控制元件設計

如下圖所示,我們拉出控制第一個按鈕元件。

圖 41 拉出控制第一個按鈕元件

如下圖所示,我們修改控制第一個按鈕元件的顯示屬性(Text)改為「更新溫溼度」。

圖 42 修改控制第一個按鈕元件的顯示屬性

如下圖所示,我們拉出控制第二個按鈕元件。

圖 43 拉出控制第二個按鈕元件

如下圖所示,我們修改控制第二個按鈕元件的顯示屬性(Text)改為「離開系統」。

圖 44 修改控制第二個按鈕元件的顯示屬性

控制程式開發

切換程式設計視窗

如下圖所示,我們為了編修程式,請點選如下圖所示之紅框區「Blocks」按鈕。

圖 45 切換程式設計模式

如下圖所示,下圖所示為 App Inventor 2 的程式編輯區。

圖 46 程式設計模式主畫面

控制程式開發-系統初始化

如下圖所示,我們在 App Inventor 2 的程式編輯區,建立系統初始化 initialize 函數區塊。

圖 47 拉出 initialize 函數區塊

如下圖所示,我們在 App Inventor 2 的程式編輯區,建立打開藍芽控制介面的程式。

圖 48 初始化-打開藍芽控制介面

如下圖所示,我們在 App Inventor 2 的程式編輯區,建立關閉主控區控制介面的程式。

圖 49 初始化-關閉主控區控制介面

如下圖所示,我們在 App Inventor 2 的程式編輯區,建立關閉監聽 Clock(TT)元件控制的程式。

圖 50 初始化-關閉時鐘元件

控制程式開發-初始化變數

如下圖所示,我們在 App Inventor 2 的程式編輯區,建立初始化變數。

圖 51 建立初始化變數

控制程式開發-使用者函式設計

使用者函式設計

如下圖所示,我們在 App Inventor 2 的程式編輯區,建立 RequestHumidity 函式。

圖 52 建立 RequestHumidity 函式

如下圖所示,我們在 App Inventor 2 的程式編輯區,建立 RequestTemperature 函式。

圖 53 建立 RequestTemperature 函式

控制程式開發-藍芽控制

藍芽設計

首先,在點選藍芽裝置「BTSelect :ListPicker1」下,如下圖所示,我們拉 BTSelect.BeforePicking 程式區塊。

圖 54 拉 BTSelect.BeforePicking 程式區塊

首先,在點選藍芽裝置「BTSelect」下,如下圖所示,我們在拉 BTSelect.BeforePicking 程式區塊內建立 BTSelect.ElementFromString 敘述。

圖 55 拉出填入藍芽資料之變數

首先,在點選藍芽裝置「BT」下,如下圖所示,我們在 BT.AddressAndName 元件,拉入 BTSelect.ElementFromString 元件之後之敘述。

圖 56 拉出填入藍芽元件取出之藍芽裝置

首先,在點選藍芽裝置「BTSelect」下,攥寫「判斷選到藍芽裝置後連接選取藍芽裝置」,如下圖所示,我們在 BTSelect.AfterPicking 建立下列敘述。

圖 57 判斷選到藍芽裝置後連接選取藍芽裝置

首先,在點選藍芽裝置「BTSelect :ListPicker」下,攥寫「判斷選到藍芽裝置後連接選取藍芽裝置」,如下圖所示,我們在 BTSelect.AfterPicking 建立 if 判斷的元件。

圖 58 加入 BTSelect.AfterPicking 判斷式

首先,在點選藍芽裝置「BTSelect :ListPicker」下,攥寫「判斷選到藍芽裝置後連接選取藍芽裝置」,如下圖所示,我們在 BTSelect.AfterPicking 建立 Call(BT).connect 元件。

圖 59 判斷是否連接藍芽

首先,在點選藍芽裝置「BTSelect :ListPicker」下,攥寫「判斷選到藍芽裝置後連接選取藍芽裝置」,如下圖所示,我們在 BTSelect.AfterPicking 建立下列敘述:在 Call(BT).connect 元件後面接上 BTSelect.Selection 元件。

圖 60 判斷是否連接藍芽裝置到所選到的藍芽設備

首先,在點選藍芽裝置「BTSelect:ListPicker」下,再判斷選到藍芽裝置後,如下圖所示,我們在 BTSelect.AfterPicking 建立下列敘述:將 BTSelect 關閉,MainControl 打開。

圖 61 加入開啟顯示介面

首先,在點選藍芽裝置「BTSelect:ListPicker」下,再判斷選到藍芽裝置後,如下圖所示,我們在 BTSelect.AfterPicking 建立下列敘述:將監聽元件 TT:Clock 元件打開。

圖 62 開啟時鐘元件 TT 的功能

控制程式開發-讀取溫溼度資料

接下來我們就要進行讀取溫濕度的主要程式,這個部分需要前文〈【家居物聯網】使用智慧行動裝置監控家居溫溼度(中篇)〉(曹永忠, 許智誠, et al., 2017c)文章中,介紹如何將溫溼度資訊進行編碼,再透過藍芽通訊方式,將資訊傳送到連接藍芽模組的另一端裝置。

並了解前文〈【家居物聯網】使用智慧行動裝置監控家居溫溼度(下篇之藍芽開發篇)〉(曹永忠, 許智誠, et al., 2017b, 2017c)文章中,藍芽通訊功能的程式。

我們只要單純的將要求傳送溫溼度的命令碼:

  • 定義傳輸溫度使用「@T」代表要求傳輸溫度
  • 定義傳輸濕度使用「@H」代表要求傳輸濕度

一一傳出到藍芽裝置,等待 Ameba RTL8195AM 開發板端回應後,將溫濕度感測模組所讀到的溫溼度資料回傳就可以了。

按下按鈕讀取溫溼度資料

如下圖所示,當按下 Button1.Click 事件後,我們呼叫 RequestTemperature 函式與 RequestHumidity 函式就可以了。

圖 63 按下按鈕讀取溫溼度資料

監聽傳送之溫溼度資料

接下來我們就要進行讀取溫濕度的主要程式,這個部分需要前文〈【家居物聯網】使用智慧行動裝置監控家居溫溼度(中篇)〉(曹永忠, 許智誠, et al., 2017c)文章中,介紹如何將溫溼度資訊進行編碼,再透過藍芽通訊方式,將資訊傳送到連接藍芽模組的另一端裝置。

並了解前文〈【家居物聯網】使用智慧行動裝置監控家居溫溼度(下篇之藍芽開發篇)〉(曹永忠, 許智誠, et al., 2017b, 2017c)文章中,藍芽通訊功能的程式。

我們只要將回送溫溼度的命令碼:

  • 定義傳輸溫度使用「#T溫度內容*」代表要求回傳溫度
  • 定義傳輸濕度使用「#H濕度內容*」代表要求回傳濕度

一一傳出到藍芽裝置,等待 Ameba RTL8195AM 開發板端回應後,將溫濕度感測模組所讀到的溫溼度資料回傳資料進行解譯就可以了。

如下圖所示,我們在監聽元件 TT(Clock元件)攥寫下列的控制程式。

圖 64 監聽傳送之溫溼度資料

解譯溫溼度資料之數值

由於我們只要將回送溫溼度的命令碼:

  • 定義傳輸溫度使用「#T溫度內容*」代表要求回傳溫度
  • 定義傳輸濕度使用「#H濕度內容*」代表要求回傳濕度

之前已解譯 #T 與 #H,我們攥寫 ReadBTValue 函式來解譯「#T溫度內容*」、「#H濕度內容*」之溫溼度內容的數值資料。

如下圖所示,我們攥寫 ReadBTValue 函式控制程式。

圖 65 解譯溫溼度資料之數值

到此,我們已完成整個手機 APPs 應用程式的開發,接下來我們就要進行測試。

系統測試-啟動 AICompanion

手機測試

首先,如下圖所示,我們在 App Inventor 2 程式模塊編輯畫面之中,在「Connect」的選單下,選取 AICompanion(曹永忠, 吳佳駿, 許智誠, & 蔡英德, 2017a, 2017b; 曹永忠, 許智誠, & 蔡英德, 2014a, 2014b; 曹永忠, 許智誠, et al., 2017a, 2017b, 2017c)。

圖 66 啟動手機測試功能

掃描 QR Code

如下圖所示,系統會出現一個 QR Code 的畫面。

圖 67 手機 QRCODE

如下圖所示,我們在使用Android 的手機、平板,執行已安裝好的「MIT App Inventor 2 Companion」,點選之後進入如下圖。

圖 68 啟動 MIT_AI2_Companion

如下圖所示,我們在選擇 scan QR code,點選之後進入如下圖。

圖 69 掃描 QRCode

如下圖所示,手機會啟動掃描 QR code 的程式功能,這時後只要將手機、平板的 Camera 鏡頭描準畫面的 QR Code 就可以了。

圖 70 掃描 QRCodeing

如下圖所示,如果手機會啟動掃描 QR code 成功的話,系統會回傳 QR Code 碼到如下圖所示的紅框之中。

圖 71 取得 QR 程式碼

如下圖所示,我們點選如下圖所示的紅框之中的「connect with code」,就可以進入測試程式區。

圖 72 執行程式

系統測試-進入系統

如下圖所示,如果程式沒有問題,我們就可以成功進入測試程式的主畫面。

圖 73 執行程式主畫面

 

選擇通訊藍芽裝置

如下圖所示,我們先選擇『選擇藍芽』按鈕來選擇藍芽裝置。

圖 74 選藍芽裝置

如下圖所示,會出現手機、平板中已經配對好的藍芽裝置。

圖 75 顯示藍芽裝置

如下圖所示,我們可以選擇 Ameba RTL8195AM 開發板端所連接的藍芽裝置名稱,本文為「BR03」,請讀者注意,要依據讀者自己的環境所使用的藍芽裝置名稱,不可以用本文的藍芽裝置名稱,請讀者注意。

圖 76 選取藍芽裝置

系統測試

如下圖所示,如果藍芽配對成功,可以正確連接您選擇的藍芽裝置,則會進入控制溫濕度感測應用程式的主畫面。

圖 77 溫濕度感測應用程式系統主畫面

如下圖所示,我們進行讀取溫溼度資料,看看系統回應如何,所以請讀者按下「讀取資料」的按鈕。

圖 78 讀取資料

如下圖所示,我們可以看到 Ameba RTL8195AM 開發板端收到讀取溫溼度資料模組的命令之後,進行讀取溫溼度資料後,並透過藍芽裝置,回傳溫溼度資料,手機端應用程式在收到資料進行解譯後,我們在下圖可以看到正確的溫溼度資料。

圖 79 回應讀取溫溼度資料

結束系統測試

如下圖所示,如果我們要離開系統,按下下圖所示之『離開系統』之按鈕,便可以離開系統。

圖 80 按下離開按鈕

後續

本篇是「物聯網」系列中〈使用智慧行動裝置監控家居溫溼度(下篇之手機系統開發篇)〉,主要告訴讀者,在家居物聯網開發中,我們使用 App Inventor 2 開發行動裝置端,來讀取每一個感測裝置(本文用 Ameba RTL 8195 AM 開發板來讀取溫溼度為例),讀者可以透過這四篇文章,了解如何設計家居物聯網各種感測裝置的開發,並使用行動裝置來輕鬆了解家居中各種感測裝置的回報資訊。

後續筆者還會繼續發表「物聯網」系列的文章,在未來我們可以創造出更優質,更具未來性的物聯網(Internet of Thing:IOT)產品開發相關技術。

敬請期待更多的文章。

 

作者介紹

曹永忠 (Yung-Chung Tsao) ,目前為自由作家暨專業 Maker,專研於軟體工程、軟體開發與設計、物件導向程式設計,商品攝影及人像攝影。長期投入創客運動、資訊系統設計與開發、企業應用系統開發、軟體工程、新產品開發管理、商品及人像攝影等領域,並持續發表作品及相關專業著作。Email:prgbruce@gmail.com、Line ID:dr.brucetsao
作者網頁臉書社群(Arduino.Taiwan)Github 網站Youtube

許智誠(Chih-Cheng Hsu),美國加州大學洛杉磯分校(UCLA)資訊工程系博士,曾任職於美國 IBM 等軟體公司多年,現任教於中央大學資訊管理學系專任副教授,主要研究為軟體工程、設計流程與自動化、數位教學、雲端裝置、多層式網頁系統、系統整合。
Email: khsu@mgt.ncu.edu.tw

蔡英德(Yin-Te Tsai),國立清華大學資訊科學系博士,目前是靜宜大學資訊傳播工程學系教授、靜宜大學計算機及通訊中心主任,主要研究為演算法設計與分析、生物資訊、軟體開發、視障輔具設計與開發。
Email:yttsai@pu.edu.tw

參考文獻

曹永忠. (2016). 智慧家庭:PM2.5 空氣感測器(感測器篇). 智慧家庭.  Retrieved 2016/2/26, from https://vmaker.tw/archives/3812

曹永忠. (2017a). 如何使用Linkit 7697建立智慧溫度監控平台(上).   Retrieved 2017/7/3, from http://makerpro.cc/2017/07/make-a-smart-temperature-monitor-platform-by-linkit7697-part-one/

曹永忠. (2017b). 如何使用LinkIt 7697建立智慧溫度監控平台(下).   Retrieved 2017/8/2, from http://makerpro.cc/2017/08/make-a-smart-temperature-monitor-platform-by-linkit7697-part-two/

曹永忠, 吳佳駿, 許智誠, & 蔡英德. (2017a). 藍芽氣氛燈程式開發(智慧家庭篇) (Using Nano to Develop a Bluetooth-Control Hue Light Bulb (Smart Home Series)) (初版 ed.). 台湾、彰化: 渥瑪數位有限公司.

曹永忠, 吳佳駿, 許智誠, & 蔡英德. (2017b). 蓝芽气氛灯程序开发(智能家庭篇) (Using Nano to Develop a Bluetooth-Control Hue Light Bulb (Smart Home Series)) (初版 ed.). 台湾、彰化: 渥瑪數位有限公司.

曹永忠, 許智誠, & 蔡英德. (2014a). Arduino 互動跳舞兔設計: The Interaction Design of a Dancing Rabbit by Arduino Technology (初版 ed.). 台灣、彰化: 渥瑪數位有限公司.

曹永忠, 許智誠, & 蔡英德. (2014b). Arduino 手機互動跳舞機設計: The Development of an Interaction Dancing Pad with a Mobile Phone Game by Arduino Technology (初版 ed.). 台灣、彰化: 渥瑪數位有限公司.

曹永忠, 許智誠, & 蔡英德. (2016a). Arduino程式教學(溫溼度模組篇):Arduino Programming (Temperature& Humidity Modules) (初版 ed.). 台湾、彰化: 渥瑪數位有限公司.

曹永忠, 許智誠, & 蔡英德. (2016b). Arduino程序教学(温湿度模块篇):Arduino Programming (Temperature& Humidity Modules) (初版 ed.). 台湾、彰化: 渥瑪數位有限公司.

曹永忠, 許智誠, & 蔡英德. (2017a). 【家居物聯網】使用智慧行動裝置監控家居溫溼度(上篇). 智慧家庭.  Retrieved 2017/11/23, from https://vmaker.tw/archives/21957

曹永忠, 許智誠, & 蔡英德. (2017b). 【家居物聯網】使用智慧行動裝置監控家居溫溼度(下篇之藍芽開發篇). 智慧家庭.  Retrieved 2017/12/14, from https://vmaker.tw/archives/22477

曹永忠, 許智誠, & 蔡英德. (2017c). 【家居物聯網】使用智慧行動裝置監控家居溫溼度(中篇). 智慧家庭.  Retrieved 2017/11/28, from https://vmaker.tw/archives/22262

 

 

分享到社群

曹永忠

曹永忠 (Yung-Chung Tsao) ,目前為自由作家暨專業Maker,專研於軟體工程、軟體開發與設計、物件導向程式設計,商品攝影及人像攝影。長期投入創客運動、資訊系統設計與開發、企業應用系統開發、軟體工程、新產品開發管理、商品及人像攝影等領域,並持續發表作品及相關專業著作。
Email:prgbruce@gmail.com
Line ID:dr.brucetsao
作者網站:https://www.cs.pu.edu.tw/~yctsao/
臉書社群(Arduino.Taiwan):https://www.facebook.com/groups/Arduino.Taiwan/
Github網站:https://github.com/brucetsao/
Youtube:https://www.youtube.com/channel/UCcYG2yY_u0m1aotcA4hrRgQ