[ MediaTek ] 使用 App Inventor 經由 BLE 控制 LinkIt 7697 LED 教學

聯發科於 2017 年 5 月推出 LinkIt 7697, 它是一片高度整合的系統單晶片的物聯網應用開發板,特色包含一個 Cortex-M4 微控制器、低功耗 1T1R 802.11b/g/n 2.4GHz Wi-Fi 子系統、低功耗藍牙子系統,以及 PMU,本文描述如何透過 App Inventor 來控制 LED 燈。


情境

Android 手機用戶可透過 MIT App Inventor 的圖型化編程來撰寫 Android App 的應用程式,本情境透過 App Inventor 撰寫控制聯發科 LinkIt 7697 開發板的 LED 應用程式。


執行步驟


App Inventor 完成程式


學習目標

  • Arduino BLE 程式設定
  • 透過 App Inventor 經由 BLE 控制 LED

前置準備作業

  1. 一台電腦

  2. LinkIt 7697 開發板

  3. 一台 Android 手機或平板並開啟藍牙功能

  4. Micro-USB Cable

  5. 將 LinkIt 7697 透過 Micro-USB Cable 連接至電腦

  6. 電腦端相關設定 - 請參考 LinkIt 7697 起手式基礎教學 文章

  7. Google 帳號


連接圖

感謝 【 Anker Taiwan 】 提供拉不斷的 Micro USB Cable


LinkIt 7697 端 - 下方範例使用 macOS Sierra

Step 1. 開啟 Arduino IDE


Step 2. 開啟範例程式

❖ 2.1  點選上方的【 檔案 】 ➙ 【 範例 】 ➙ 【 LBLE 】 ➙ 【 SimplePeripheral 】


Step 3. 開啟序列埠監控視窗

❖ 3.1  點選上方的【 工具 】 ➙ 【 序列埠監控視窗 】

♖ 開啟後畫面


Step 4. 燒錄程式

❖ 4.1  點選 【 草稿碼 】 ➙ 【 上傳 】

♖ 燒錄成功畫面

♖ 序列埠監控視窗畫面


App Inventor 端 - 下方範例使用 Chrome

Step 1. 下載 App Inventor 樣版

❖ 1.1  請到下方連結下載 【 LinkIt_7697.aia 】 檔案
       https://github.com/ArcherHuang/LinkIt_7697/tree/master/AppInventor/Base


Step 2. 登入到 App Inventor 網頁

❖ 2.1  ①  開啟 Chrome 瀏覽器
       ② 到下方網址
          http://ai2.appinventor.mit.edu/
       ③  使用 Google 帳號登入


Step 3. 匯入 【 LinkIt_7697.aia 】

❖ 3.1  ①  點選上方 【 Projects 】
       ②  點選 【 Import project (.aia) from my computer ...  】


❖ 3.2  ①  點選 【 選擇檔案 】
       ②  匯入剛下載的 【 LinkIt_7697.aia 】 檔案
       ③  點選 【 OK 】


Step 4. 建立 BLE 連結按鈕

❖ 4.1  點選 【 USER Interface 】 中的 【 Button 】 元件


❖ 4.2  將 【 Button 】元件拉到 【 Viewer 】 區域的 【 Screen1 】


❖ 4.3  修改元件顯示文字
       ◎ 將右側的 【 Properties 】 下拉至 【 Text 】並修改顯示文字
         e.g., 將欄位中的 【 Text for Button1 】 修改成 【 Connect? 】

♖ 修改元件顯示文字完成畫面


❖ 4.4  修改元件名稱
       ◎ 點選右側的 【 Components 】 ➙ 【 Screen1 】 ➙ 【 Button1 】
       ◎ 點選【 Rename 】
         e.g., 將 【 Button1 】 更名為 【 BTN_Connect 】

♖ 更名完成畫面


Step 5. 建立開啟 LED 按鈕

❖ 5.1  點選 【 USER Interface 】 中的 【 Button 】 元件


❖ 5.2  將 【 Button 】元件拉到 【 Viewer 】 區域的 【 Screen1 】


❖ 5.3  修改元件顯示文字
       ◎ 將右側的 【 Properties 】 下拉至 【 Text 】並修改顯示文字
         e.g., 將欄位中的 【 Text for Button1 】 修改成 【 On 】

♖ 修改元件顯示文字完成畫面


❖ 5.4  修改元件名稱
       ◎ 點選右側的 【 Components 】 ➙ 【 Screen1 】 ➙ 【 Button1 】
       ◎ 點選【 Rename 】
         e.g., 將 【 Button1 】 更名為 【 BTN_On 】

♖ 更名完成畫面


Step 6. 建立關閉 LED 按鈕

❖ 6.1  點選 【 USER Interface 】 中的 【 Button 】 元件


❖ 6.2  將 【 Button 】元件拉到 【 Viewer 】 區域的 【 Screen1 】


❖ 6.3  修改元件顯示文字
       ◎ 將右側的 【 Properties 】 下拉至 【 Text 】並修改顯示文字
         e.g., 將欄位中的 【 Text for Button1 】 修改成 【 Off 】

♖ 修改元件顯示文字完成畫面


❖ 6.4  修改元件名稱
       ◎ 點選右側的 【 Components 】 ➙ 【 Screen1 】 ➙ 【 Button1 】
       ◎ 點選【 Rename 】
         e.g., 將 【 Button1 】 更名為 【 BTN_Off 】

♖ 更名完成畫面


Step 7. 建立 BLE 元件

❖ 7.1  點選左側 【 Palette 】 中 【 Extension 】 的 【 BluetoothLE 】 元件


❖ 7.2  將 【 BluetoothLE 】元件拉到 【 Viewer 】 區域的 【 Screen1 】


Step 8. 切換 App Inventor 程式撰寫模式

❖ 8.1  點選畫面右上角的 【 Blocks 】


Step 9. 建立 LinkIt 7697 的 Device Address 變數

❖ 9.1  點選左側的 【 Variables 】 


❖ 9.2  選擇 【 initialize global name to 】 元件再拉到 【 Viewer 】 區


❖ 9.3  點選左側的 【 Text 】 


❖ 9.4  ①  選擇 【 " " 】 元件
       ②  拉到 【 Viewer 】 區
       ③  將 【 " " 】 元件接到 【 initialize global name to 】 元件後方


❖ 9.5  ①  在 【 " " 】 元件中輸入 LinkIt 7697 的 Device Address

㊟ Device Address 位於 Arduino IDE 中的序列埠監控視窗


Step 10. App 畫面初始化

❖ 10.1  點選左側 【 Blocks 】 中的 【 Screen1 】


❖ 10.2  將 【 when Screen1 .Initialize 】 元件拉到 【 Viewer 】 區域


❖ 10.3  點選左側 【 Blocks 】 中的 【 BluetoothLE1 】


❖ 10.4  將 【 call BluetoothLE1 .StartScanning 】 元件拉到 【 Viewer 】 區域中的 【 when Screen1 .Initialize 】 元件中


❖ 10.5  點選左側 【 Blocks 】 中的 【 BTN_On 】 


❖ 10.6  將 【 set BTN_On .Enabled to 】 元件拉到 【 Viewer 】 區域中的 【 when Screen1 .Initialize 】 元件中


❖ 10.7  點選左側的 【 Logic 】 


❖ 10.8  ①  選擇 【 false 】 元件
        ②  拉到 【 Viewer 】 區
        ③  將 【 false 】 元件接到 【 set BTN_On .Enabled to 】 元件後方


❖ 10.9  點選左側 【 Blocks 】 中的 【 BTN_Off 】 


❖ 10.10  將 【 set BTN_Off .Enabled to 】 元件拉到 【 Viewer 】 區域中的 【 when Screen1 .Initialize 】 元件中


❖ 10.11  點選左側的 【 Logic 】 


❖ 10.12  ①  選擇 【 false 】 元件
         ②  拉到 【 Viewer 】 區
         ③  將 【 false 】 元件接到 【 set BTN_Off .Enabled to 】 元件後方


Step 11. 設定 BTN_Connect 按鈕

❖ 11.1  點選左側 【 Blocks 】 中的 【 BTN_Connect 】


❖ 11.2  將 【 when BTN_Connect .Click 】 元件拉到 【 Viewer 】 區域


❖ 11.3  點選左側 【 Blocks 】 中的 【 Control 】


❖ 11.4  將 【 if then 】 元件拉到 【 Viewer 】 區域中的 【 when BTN_Connect .Click 】 元件內


❖ 11.5   點選 【 if then 】 元件左上角的齒輪


❖ 11.6   將 【 else 】 元件拉到 【 if 】 元件中


❖ 11.7   點選左側 【 Blocks 】 中的 【 Logic 】


❖ 11.8   將 【 = 】 元件拉到 【 Viewer 】 區域中的 【 if 】 後方


❖ 11.9   點選左側 【 Blocks 】 中的 【 BTN_Connect 】


❖ 11.10   將 【 BTN_Connect.Text 】 元件拉到 【 Viewer 】 區域中的 【 = 】 左方


❖ 11.11   點選左側 【 Blocks 】 中的 【 Text 】


❖ 11.12   將 【 " " 】 元件拉到 【 Viewer 】 區域中的 【 = 】 右方


❖ 11.13   將 【 " " 】 元件填入 【 Connect? 】文字


❖ 11.14   點選左側 【 Blocks 】 中的 【 BluetoothLE1 】


❖ 11.15   將 【 call BluetoothLE1.ConnectWithAddress address 】 元件拉到 【 Viewer 】 區域中的 【 then 】 右方


❖ 11.16   點選左側 【 Blocks 】 中的 【 Variables 】


❖ 11.17   將 【 get 】 元件拉到 【 Viewer 】 區域中的 【 call BluetoothLE1.ConnectWithAddress address 】 右方


❖ 11.18   點開 【 get 】 元件的下拉式選單並點選 【 global name 】


❖ 11.19  點選左側 【 Blocks 】 中的 【 BluetoothLE1 】


❖ 11.20  將 【 call BluetoothLE1.DisconnectWithAddress address 】 元件拉到 【 Viewer 】 區域中的 【 else 】 右方


❖ 11.21  點選左側 【 Blocks 】 中的 【 Variables 】


❖ 11.22  將 【 get 】 元件拉到 【 Viewer 】 區域中的 【 call BluetoothLE1.DisconnectWithAddress address 】 右方


❖ 11.23  點開 【 get 】 元件的下拉式選單並點選 【 global name 】


❖ 11.24  點選左側 【 Blocks 】 中的 【 BTN_Connect 】


❖ 11.25  將 【 set BTN_Connect .Text to 】 元件拉到 【 Viewer 】 區域中的 【 else 】 元件中


❖ 11.26   點選左側 【 Blocks 】 中的 【 Text 】


❖ 11.27   將 【 " " 】 元件拉到 【 Viewer 】 區域中的 【 set BTN_Connect .Text 】 右方


❖ 11.28   將 【 " " 】 元件填入 【 Connect? 】文字


❖ 11.29  點選左側 【 Blocks 】 中的 【 BTN_Connect 】


❖ 11.30  將 【 set BTN_Connect .Enabled to 】 元件拉到 【 Viewer 】 區域中的 【 else 】 元件中


❖ 11.31  點選左側 【 Blocks 】 中的 【 Logic 】


❖ 11.32  將 【 true 】 元件拉到 【 Viewer 】 區域中的 【 set BTN_Connect .Enabled to 】 元件中


❖ 11.33  點選 【 Viewer 】 中的 【 set BTN_Connect .Enabled to 】元件


❖ 11.34  滑鼠右鍵點選 【 Duplicate 】


❖ 11.35  將複製出來的元件移到 【 else 】


❖ 11.36  將複製出來元件中的 【 BTN_Connect 】 更改成 【 BTN_On 】


❖ 11.37  將複製出來元件中的 【 true 】 更改成 【 false 】


❖ 11.38  點選 【 Viewer 】 中的 【 set BTN_On .Enabled to 】元件


❖ 11.39  滑鼠右鍵點選 【 Duplicate 】


❖ 11.40  將複製出來的元件移到 【 else 】


❖ 11.41  將複製出來元件中的 【 BTN_On 】 更改成 【 BTN_Off 】


Step 12. 設定 BLE 已連線狀態按鈕

❖ 12.1   點選左側 【 Blocks 】 中的 【 BluetoothLE1 】


❖ 12.2   將 【 when BluetoothLE1.Connected do 】 元件拉到 【 Viewer 】 區域


❖ 12.3   點選左側 【 Blocks 】 中的 【 BTN_Connect 】


❖ 12.4   將 【 set BTN_Connect.Text 】 元件拉到 【 Viewer 】 區域中的 【 when BluetoothLE1.Connected do 】 元件中


❖ 12.5   點選左側 【 Blocks 】 中的 【 Text 】


❖ 12.6   將 【 " " 】 元件拉到 【 Viewer 】 區域中的 【 set BTN_Connect .Text 】 右方


❖ 12.7   將 【 " " 】 元件填入 【 Connected 】文字


❖ 12.8  點選左側 【 Blocks 】 中的 【 BTN_On 】


❖ 12.9  將 【 set BTN_On .Enabled to 】 元件拉到 【 Viewer 】 區域中的 【 when BluetoothLE1.Connected do 】 元件中


❖ 12.10  點選左側 【 Blocks 】 中的 【 Logic 】


❖ 12.11  將 【 true 】 元件拉到 【 Viewer 】 區域中的 【 set BTN_On .Enabled to 】 元件中


❖ 12.12  點選 【 Viewer 】 中的 【 set BTN_On .Enabled to 】元件


❖ 12.13  滑鼠右鍵點選 【 Duplicate 】


❖ 12.14  將複製出來的元件移到 【 when BluetoothLE1.Connected do 】


❖ 12.15  將複製出來元件中的 【 BTN_On 】 更改成 【 BTN_Off 】


Step 13. 設定 BTN_On 按鈕

❖ 13.1   點選左側 【 Blocks 】 中的 【 BTN_On 】


❖ 13.2   將 【 when BTN_On.Click 】 元件拉到 【 Viewer 】 區域


❖ 13.3   點選左側 【 Blocks 】 中的 【 BluetoothLE1 】


❖ 13.4   將 【 call BluetoothLE1.WriteIntValue  ...... 】 元件拉到 【 Viewer 】 區域中的 【 when BTN_On.Click 】 元件中


❖ 13.5   點選左側 【 Blocks 】 中的 【 Text 】


❖ 13.6   將 【 " " 】 元件拉到 【 Viewer 】 區域中的 【 service_uuid 】 元件中


❖ 13.7   將 【 " " 】 元件填入 【 Arduino 程式中 LBLEService ledService 】後面的文字

㊟ Arduino 程式中 LBLEService ledService


❖ 13.8   點選左側 【 Blocks 】 中的 【 Text 】


❖ 13.9   將 【 " " 】 元件拉到 【 Viewer 】 區域中的 【 characteristic_uuid 】 元件中


❖ 13.10   將 【 " " 】 元件填入 【 Arduino 程式中 LBLECharacteristicInt switchCharacteristic 】後面的文字

㊟ Arduino 程式中 LBLECharacteristicInt switchCharacteristic


❖ 13.11   點選左側 【 Blocks 】 中的 【 Math 】


❖ 13.12   將 【 0 】 元件拉到 【 Viewer 】 區域中的 【 value 】 元件中


❖ 13.13   將 【 0 】 元件值修改成 【 1 】


❖ 13.14   點選左側 【 Blocks 】 中的 【 Math 】


❖ 13.15   將 【 0 】 元件拉到 【 Viewer 】 區域中的 【 offset 】 元件中


❖ 13.16   點選左側 【 Blocks 】 中的 【 BTN_On 】


❖ 13.17   將 【 set BTN_On.Enabled to 】 元件拉到 【 Viewer 】 區域中的 【 when BTN_On.Click 】 元件中


❖ 13.18   點選左側 【 Blocks 】 中的 【 Logic 】


❖ 13.19   將 【 false 】 元件拉到 【 Viewer 】 區域中的 【 set BTN_On .Enabled to 】 元件中


❖ 13.20   點選左側 【 Blocks 】 中的 【 BTN_Off 】


❖ 13.21   將 【 set BTN_Off.Enabled to 】 元件拉到 【 Viewer 】 區域中的 【 when BTN_On.Click 】 元件中


❖ 13.22   點選左側 【 Blocks 】 中的 【 Logic 】


❖ 13.23   將 【 true 】 元件拉到 【 Viewer 】 區域中的 【 set BTN_On .Enabled to 】 元件中


Step 14. 設定 BTN_Off 按鈕

❖ 14.1   點選 Viewer 中的 【 when BTN_On.Click 】


❖ 14.2   滑鼠右鍵 【 Duplicate 】


❖ 14.3   修改將剛才複製出來的 【 when BTN_On.Click 】 變為 【 when BTN_Off.Click 】


❖ 14.4   修改 【 when BTN_Off.Click 】 中的 【 value 】 的值從 【 1 】 更改為 【 0 】


❖ 14.5   修改 【 when BTN_Off.Click 】 中的 【 set BTN_On.Enabled to 】 後的值從 【 false 】 更改為 【 true 】


❖ 14.6   修改 【 when BTN_Off.Click 】 中的 【 set BTN_Off.Enabled to 】 後的值從 【 true 】 更改為 【 false 】


Step 15. Android 手機或平板下載 【 MIT AI2 Companion 】


Step 16. 將剛才的 App 安裝於 Android

❖ 16.1   回到 App Inventor 畫面


❖ 16.2  點選 【 Build 】 中的 【 App(provide QR code for .apk) 】 


Step 17. 在 Android 中開啟剛下載的 【 MIT AI2 Companion 】

❖ 17.1  點選 【 scan QR code 】


❖ 17.2  掃描 App Inventor 上的 QR Code


❖ 17.3  點選 【 安裝 】


❖ 17.4  點選 【 開啟 】 


❖ 17.4  點選 【 Connect? 】 


❖ 17.5  點選 【 On 】

♕ LinkIt 7697 上的 LED 開啟


❖ 17.6  點選 【 Off 】

♕ LinkIt 7697 上的 LED 關閉


Step 18. 操作影片

https://youtu.be/-tGjNWLkm4o


Step 19. 完整程式碼

https://github.com/ArcherHuang/LinkIt_7697/tree/master/AppInventor/BLETurnOnOffLED


Reference
GitHub
List of blogs
感謝
ALL RIGHTS RESERVED. COPYRIGHT © 2016. Designed and Coded by Makee.io