| 作者/攝影 | 曾吉弘 |
| 時間 | 3小時 |
| 成本 |
|
| 難度 | * * * |
| 材料表 |
|
本文要介紹聯發科技實驗室推出的LinkIt Remote iOS小程式，透過BLE來與 7697開發板互動，特色在於可以輕鬆設計各種簡易的控制界面喔！
LinkIt Remote iOS app
LinkIt Remote 是一個用來產生app介面的iOS小程式，是以 BLE 與 LinkIt 7697開發板搭配使用。只要在7697端設定好，就可以在兩者連線之後產生對應的介面。您需要做兩件事：
- Arduino IDE 的 7697 SDK需要升級到9.5，才可使用最新LRemote 函式庫與本文的範例。
- 找一隻 iphone 安裝 LinkIt Remote iOS app，可用於掃描鄰近的 7697 開發板（需執行類似於本文的程式），並彼此溝通。
重點就是這一句：
寫Arduino code 可以自動生成 app 介面！
1.請開啟 File > Examples > LRemote > RemoteControl 範例，並上傳至您的 7697開發板。
2.下載 LinkIt Remote 到您的 iphone上，目前版本需要 iOS 10。
3.啟動 LinkIt Remote app，會看到 中的 7697 顯示在畫面的裝置清單中。
4.點選這個 LinkIt 7697。item, the app connects to LinkIt 7697 and display the following remote UI control: （如果範圍裡有多台的話，就會看到多個項目，後續程式碼中的#25 LRemote.setName(“LinkIt 7697”); 可以修改開發板所顯示的名稱）
5.請點選畫面中的 USR LED 搖頭開關，就會觸發 7697 的 USR LED （P7腳位）亮起。
6.請開啟 Arduino 的Serial Monitor，並拖拉畫面中的 Value Slider 滑桿，就可以在Serial Monitor中看到數值的變化，我們後續可以拿這個數值來控制LED亮度（analogWrite）、伺服機角度等等都可以喔。
完工了，開始玩吧~
7697程式碼
最後是7697的程式碼，路徑是 File/Exmaples/LRemote/RemoteControl
由此可以看到如何編寫Arduino code 去定義畫面上的元件
[pastacode lang=”java” manual=”%20%20%2F%2F%E8%A8%AD%E5%AE%9A%20app%20%E7%AB%AF%E4%BB%8B%E9%9D%A2%20UI%20canvas%0A%20%20LRemote.setName(%22LinkIt%207697%22)%3B%0A%20%20LRemote.setOrientation(RC_PORTRAIT)%3B%0A%20%20LRemote.setGrid(3%2C%205)%3B%20%20%20%20%20%20%20%20%20%2F%2F%E8%A8%AD%E5%AE%9A%E8%9E%A2%E5%B9%95%E6%A3%8B%E7%9B%A4%E6%A0%BC%E6%95%B8%203%E8%A1%8C5%E5%88%97%0A%0A%20%20%2F%2F%E5%8A%A0%E5%85%A5%E6%8C%89%E9%88%95%0A%20%20button.setText(%22Press%20Me%22)%3B%20%20%20%2F%2F%E5%8A%A0%E5%85%A5%E6%96%87%E5%AD%97%0A%20%20button.setPos(1%2C%201)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E8%A8%AD%E5%AE%9A%E4%BD%8D%E7%BD%AE%0A%20%20button.setSize(2%2C%201)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E8%A8%AD%E5%AE%9A%E5%85%83%E4%BB%B6%E5%B0%BA%E5%AF%B8%0A%20%20button.setColor(RC_PINK)%3B%20%20%20%2F%2F%E8%A8%AD%E5%AE%9A%E4%BD%8D%E7%BD%AE%0A%20%20LRemote.addControl(button)%3B%20%2F%2F%E5%8A%A0%E5%85%A5%E6%8C%89%E9%88%95%0A%0A%20%20%2F%2F%E5%8A%A0%E5%85%A5%E5%A4%A7%E5%9E%8B%E5%9C%93%E5%BD%A2%E6%8C%89%E9%88%95%0A%20%20bigButton.setText(%22!BIG!%22)%3B%0A%20%20bigButton.setPos(0%2C%203)%3B%0A%20%20bigButton.setSize(3%2C%202)%3B%0A%20%20bigButton.setColor(RC_GREEN)%3B%0A%20%20LRemote.addControl(bigButton)%3B%0A%0A%20%20%2F%2F%E5%8A%A0%E5%85%A5%E6%BB%91%E6%A1%BF%0A%20%20slider.setText(%22Value%20Slider(-100%20~%201024)%22)%3B%20%20%20%20%0A%20%20slider.setPos(0%2C%202)%3B%0A%20%20slider.setSize(3%2C%201)%3B%0A%20%20slider.setColor(RC_ORANGE)%3B%0A%20%20slider.setValueRange(-100%2C%201024%2C%200)%3B%20%20%20%2F%2F%E8%A8%AD%E5%AE%9A%E6%BB%91%E6%A1%BF%E7%AF%84%E5%9C%8D%0A%20%20LRemote.addControl(slider)%3B%0A%0A%20%20%2F%2F%E5%8A%A0%E5%85%A5%E6%96%87%E5%AD%97%E6%A8%99%E7%B1%A4%0A%20%20label.setText(%22Remote%20Test%22)%3B%0A%20%20label.setPos(0%2C%200)%3B%0A%20%20label.setSize(3%2C%201)%3B%0A%20%20label.setColor(RC_GREY)%3B%0A%20%20LRemote.addControl(label)%3B%0A%0A%20%20%2F%2F%E5%8A%A0%E5%85%A5on%2Foff%E6%90%96%E9%A0%AD%E9%96%8B%E9%97%9C%0A%20%20switchButton.setText(%22USR%20LED%22)%3B%0A%20%20switchButton.setPos(0%2C%201)%3B%0A%20%20switchButton.setSize(1%2C%201)%3B%0A%20%20switchButton.setColor(RC_BLUE)%3B%0A%20%20LRemote.addControl(switchButton)%3B%0A” message=”” highlight=”” provider=”manual”/]
完整程式碼如下：
[pastacode lang=”java” manual=”%2F*%0A%20%20This%20example%20configures%20LinkIt%207697%20to%20a%20reciver%20of%20the%20iOS%20LinkIt%20Remote%20App%0A%0A%20%20created%20Aug%202017%0A*%2F%0A%23include%20%3CLRemote.h%3E%0A%0ALRemoteButton%20button%3B%0ALRemoteSlider%20slider%3B%0ALRemoteLabel%20label%3B%0ALRemoteSwitch%20switchButton%3B%0ALRemoteCircleButton%20bigButton%3B%0A%0Avoid%20setup()%20%7B%0A%20%20%2F%2FInitialize%20serial%20and%20wait%20for%20port%20to%20open%3A%0A%20%20Serial.begin(9600)%3B%0A%0A%20%20Serial.println(%22Start%20configuring%20remote%22)%3B%0A%0A%20%20%2F%2F%20Initialize%20GPIO%0A%20%20pinMode(LED_BUILTIN%2C%20OUTPUT)%3B%0A%20%20digitalWrite(LED_BUILTIN%2C%200)%3B%0A%0A%20%20%2F%2F%20Setup%20the%20Remote%20Control’s%20UI%20canvas%0A%20%20LRemote.setName(%22LinkIt%207697%22)%3B%0A%20%20LRemote.setOrientation(RC_PORTRAIT)%3B%0A%20%20LRemote.setGrid(3%2C%205)%3B%0A%0A%20%20%2F%2F%20Add%20a%20push%20button%0A%20%20button.setText(%22Press%20Me%22)%3B%0A%20%20button.setPos(1%2C%201)%3B%0A%20%20button.setSize(2%2C%201)%3B%0A%20%20button.setColor(RC_PINK)%3B%0A%20%20LRemote.addControl(button)%3B%0A%0A%20%20%2F%2F%20Add%20a%20big%2C%20round%20button%0A%20%20bigButton.setText(%22!BIG!%22)%3B%0A%20%20bigButton.setPos(0%2C%203)%3B%0A%20%20bigButton.setSize(3%2C%202)%3B%0A%20%20bigButton.setColor(RC_GREEN)%3B%0A%20%20LRemote.addControl(bigButton)%3B%0A%0A%20%20%2F%2F%20Add%20a%20slider%0A%20%20slider.setText(%22Value%20Slider(-100%20~%201024)%22)%3B%0A%20%20slider.setPos(0%2C%202)%3B%0A%20%20slider.setSize(3%2C%201)%3B%0A%20%20slider.setColor(RC_ORANGE)%3B%0A%20%20slider.setValueRange(-100%2C%201024%2C%200)%3B%0A%20%20LRemote.addControl(slider)%3B%0A%0A%20%20%2F%2F%20Add%20a%20simple%20text%20label%0A%20%20label.setText(%22Remote%20Test%22)%3B%0A%20%20label.setPos(0%2C%200)%3B%0A%20%20label.setSize(3%2C%201)%3B%0A%20%20label.setColor(RC_GREY)%3B%0A%20%20LRemote.addControl(label)%3B%0A%0A%20%20%2F%2F%20Add%20an%20on%2Foff%20switch%0A%20%20switchButton.setText(%22USR%20LED%22)%3B%0A%20%20switchButton.setPos(0%2C%201)%3B%0A%20%20switchButton.setSize(1%2C%201)%3B%0A%20%20switchButton.setColor(RC_BLUE)%3B%0A%20%20LRemote.addControl(switchButton)%3B%0A%0A%20%20%2F%2F%20Start%20broadcasting%20our%20remote%20contoller%0A%20%20%2F%2F%20This%20method%20implicitly%20initialized%20underlying%20BLE%20subsystem%0A%20%20%2F%2F%20to%20create%20a%20BLE%20peripheral%2C%20and%20then%20start%20advertisement%20on%20it.%0A%20%20LRemote.begin()%3B%0A%20%20Serial.println(%22begin()%20returned%22)%3B%0A%7D%0A%0Avoid%20loop()%20%7B%0A%0A%20%20%2F%2F%20check%20if%20we%20are%20connect%20by%20some%20BLE%20central%20device%2C%20e.g.%20an%20mobile%20app%0A%20%20if(!LRemote.connected())%20%7B%0A%20%20%20%20Serial.println(%22waiting%20for%20connection%22)%3B%0A%20%20%20%20delay(1000)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20delay(100)%3B%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20Process%20the%20incoming%20BLE%20write%20request%0A%20%20%2F%2F%20and%20translate%20them%20to%20control%20events%0A%20%20LRemote.process()%3B%0A%0A%20%20%2F%2F%20Now%20we%20poll%20each%20control’s%20status%0A%20%20%0A%20%20if(button.isValueChanged())%7B%0A%20%20%20%20Serial.print(%22button%20new%20value%20%3D%22)%3B%0A%20%20%20%20Serial.println(button.getValue())%3B%0A%20%20%7D%0A%0A%20%20if(bigButton.isValueChanged())%7B%0A%20%20%20%20Serial.print(%22big%20button%20new%20value%20%3D%22)%3B%0A%20%20%20%20Serial.println(bigButton.getValue())%3B%0A%20%20%7D%0A%0A%20%20if(switchButton.isValueChanged())%7B%0A%20%20%20%20digitalWrite(LED_BUILTIN%2C%20switchButton.getValue())%3B%0A%20%20%7D%0A%0A%20%20if(slider.isValueChanged())%7B%0A%20%20%20%20Serial.print(%22slider%20to%20new%20value%20%3D%20%22)%3B%0A%20%20%20%20Serial.println(slider.getValue())%3B%0A%20%20%20%20analogWrite(7%2C%20map(slider.getValue()%2C-100%2C%201024%2C%200%20%2C%20255))%3B%20%0A%20%20%20%20%2F%2F%E5%B0%87slider%E7%9A%84%E6%95%B8%E5%80%BC%E8%BD%89%E6%8F%9B%E4%B9%8B%E5%BE%8C%E7%94%A8%E4%BE%86%E6%8E%A7%E5%88%B6LED%0A%20%20%7D%0A%7D%0A” message=”” highlight=”” provider=”manual”/]
相關文章：
