聯發科於 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
前置準備作業
一台電腦
LinkIt 7697 開發板
一台 Android 手機或平板並開啟藍牙功能
Micro-USB Cable
將 LinkIt 7697 透過 Micro-USB Cable 連接至電腦
電腦端相關設定 - 請參考 LinkIt 7697 起手式基礎教學 文章
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. 操作影片
Step 19. 完整程式碼
https://github.com/ArcherHuang/LinkIt_7697/tree/master/AppInventor/BLETurnOnOffLED