| 作者/攝影 |
曾吉弘 |
| 時間 |
3小時 |
| 成本 |
|
| 難度 |
* * * |
| 材料表 |
- 個人電腦
- LinkIt 7697 開發板
- iphone
|
本文要介紹聯發科技實驗室推出的LinkIt Remote iOS小程式，透過BLE來與 7697開發板互動，特色在於可以輕鬆設計各種簡易的控制界面喔！
LinkIt Remote iOS app
LinkIt Remote 是一個用來產生app介面的iOS小程式，是以 BLE 與 LinkIt 7697開發板搭配使用。只要在7697端設定好，就可以在兩者連線之後產生對應的介面。您需要做兩件事：
- Arduino IDE 的 7697 SDK需要升級到9.5，才可使用最新LRemote 函式庫與本文的範例。
View post on imgur.com
- 找一隻 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 顯示在畫面的裝置清單中。
View post on imgur.com
4.點選這個 LinkIt 7697。item, the app connects to LinkIt 7697 and display the following remote UI control: （如果範圍裡有多台的話，就會看到多個項目，後續程式碼中的#25 LRemote.setName(“LinkIt 7697”); 可以修改開發板所顯示的名稱）
View post on imgur.com
5.請點選畫面中的 USR LED 搖頭開關，就會觸發 7697 的 USR LED （P7腳位）亮起。
6.請開啟 Arduino 的Serial Monitor，並拖拉畫面中的 Value Slider 滑桿，就可以在Serial Monitor中看到數值的變化，我們後續可以拿這個數值來控制LED亮度（analogWrite）、伺服機角度等等都可以喔。
View post on imgur.com
完工了，開始玩吧~
7697程式碼
最後是7697的程式碼，路徑是 File/Exmaples/LRemote/RemoteControl
由此可以看到如何編寫Arduino code 去定義畫面上的元件
//設定 app 端介面 UI canvas
LRemote.setName("LinkIt 7697");
LRemote.setOrientation(RC_PORTRAIT);
LRemote.setGrid(3, 5); //設定螢幕棋盤格數 3行5列
//加入按鈕
button.setText("Press Me"); //加入文字
button.setPos(1, 1); //設定位置
button.setSize(2, 1); //設定元件尺寸
button.setColor(RC_PINK); //設定位置
LRemote.addControl(button); //加入按鈕
//加入大型圓形按鈕
bigButton.setText("!BIG!");
bigButton.setPos(0, 3);
bigButton.setSize(3, 2);
bigButton.setColor(RC_GREEN);
LRemote.addControl(bigButton);
//加入滑桿
slider.setText("Value Slider(-100 ~ 1024)");
slider.setPos(0, 2);
slider.setSize(3, 1);
slider.setColor(RC_ORANGE);
slider.setValueRange(-100, 1024, 0); //設定滑桿範圍
LRemote.addControl(slider);
//加入文字標籤
label.setText("Remote Test");
label.setPos(0, 0);
label.setSize(3, 1);
label.setColor(RC_GREY);
LRemote.addControl(label);
//加入on/off搖頭開關
switchButton.setText("USR LED");
switchButton.setPos(0, 1);
switchButton.setSize(1, 1);
switchButton.setColor(RC_BLUE);
LRemote.addControl(switchButton);
完整程式碼如下：
/*
This example configures LinkIt 7697 to a reciver of the iOS LinkIt Remote App
created Aug 2017
*/
#include <LRemote.h>
LRemoteButton button;
LRemoteSlider slider;
LRemoteLabel label;
LRemoteSwitch switchButton;
LRemoteCircleButton bigButton;
void setup() {
//Initialize serial and wait for port to open:
Serial.begin(9600);
Serial.println("Start configuring remote");
// Initialize GPIO
pinMode(LED_BUILTIN, OUTPUT);
digitalWrite(LED_BUILTIN, 0);
// Setup the Remote Control's UI canvas
LRemote.setName("LinkIt 7697");
LRemote.setOrientation(RC_PORTRAIT);
LRemote.setGrid(3, 5);
// Add a push button
button.setText("Press Me");
button.setPos(1, 1);
button.setSize(2, 1);
button.setColor(RC_PINK);
LRemote.addControl(button);
// Add a big, round button
bigButton.setText("!BIG!");
bigButton.setPos(0, 3);
bigButton.setSize(3, 2);
bigButton.setColor(RC_GREEN);
LRemote.addControl(bigButton);
// Add a slider
slider.setText("Value Slider(-100 ~ 1024)");
slider.setPos(0, 2);
slider.setSize(3, 1);
slider.setColor(RC_ORANGE);
slider.setValueRange(-100, 1024, 0);
LRemote.addControl(slider);
// Add a simple text label
label.setText("Remote Test");
label.setPos(0, 0);
label.setSize(3, 1);
label.setColor(RC_GREY);
LRemote.addControl(label);
// Add an on/off switch
switchButton.setText("USR LED");
switchButton.setPos(0, 1);
switchButton.setSize(1, 1);
switchButton.setColor(RC_BLUE);
LRemote.addControl(switchButton);
// Start broadcasting our remote contoller
// This method implicitly initialized underlying BLE subsystem
// to create a BLE peripheral, and then start advertisement on it.
LRemote.begin();
Serial.println("begin() returned");
}
void loop() {
// check if we are connect by some BLE central device, e.g. an mobile app
if(!LRemote.connected()) {
Serial.println("waiting for connection");
delay(1000);
} else {
delay(100);
}
// Process the incoming BLE write request
// and translate them to control events
LRemote.process();
// Now we poll each control's status
if(button.isValueChanged()){
Serial.print("button new value =");
Serial.println(button.getValue());
}
if(bigButton.isValueChanged()){
Serial.print("big button new value =");
Serial.println(bigButton.getValue());
}
if(switchButton.isValueChanged()){
digitalWrite(LED_BUILTIN, switchButton.getValue());
}
if(slider.isValueChanged()){
Serial.print("slider to new value = ");
Serial.println(slider.getValue());
analogWrite(7, map(slider.getValue(),-100, 1024, 0 , 255));
//將slider的數值轉換之後用來控制LED
}
}
相關文章：