> For the complete documentation index, see [llms.txt](https://cavedu.gitbook.io/linkit-7697/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cavedu.gitbook.io/linkit-7697/linkit-7697-blocklyduino-shi-yong-zhi-nan/shi-zuo-fan-li-jiao-xue/e01.-yao-kong-qi-an-niu-kong-zhi-led.md).

# E01. 遙控器: 按鈕控制 LED

### 專案說明 <a href="#e01.-yao-kong-qi-an-niu-kong-zhi-led-zhuan-an-shui-ming" id="e01.-yao-kong-qi-an-niu-kong-zhi-led-zhuan-an-shui-ming"></a>

設計一個簡單的遙控器介面，按下按鈕可點亮開發板上的 LED

LinkIt Remote 是一個讓開發者輕鬆設計手機操作介面來控制LinkIt 7697 開發板的一個功能。

{% hint style="info" %}
開發者只要在 BlockyDuino 上設計好操作介面，使用 LinkIte Remote 這個 App，就可以透過藍芽將 7697 上設計好的操作介面下載到手機端來操作

<img src="https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2F4gvIomxKFdUPjX2YTCL5%2Fimage-182.jpeg?alt=media&amp;token=a3084209-c303-47e3-8d54-92d322686b7f" alt="" data-size="original"><img src="https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FXKCvUCk8QQ4Ds6yj6cEo%2Fimage-183.png?alt=media&amp;token=66873be8-725f-4695-a61b-6748c74eb910" alt="" data-size="original">
{% endhint %}

### 手機軟體 <a href="#e01.-yao-kong-qi-an-niu-kong-zhi-led-shou-ji-ruan-ti" id="e01.-yao-kong-qi-an-niu-kong-zhi-led-shou-ji-ruan-ti"></a>

請先下在手機上的 App

[![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FAqo3E9xe8VD0ANxkKxeD%2Fimage-184.png?alt=media\&token=11e2201a-6dea-4ccb-85d5-d6564176cb8e)](https://apps.apple.com/us/app/linkit-remote/id1276900625) [![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FhZntn9ZWirQvn2ZjSYGC%2Fimage-185.png?alt=media\&token=71f437dc-bd01-417b-b580-8a69cc7dbabc)](https://play.google.com/store/apps/details?id=com.mediatek.labs.linkitremote)

舉Android的下載介面為例

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2Fwk9Xbi1kbtb4I2KohkCv%2Fimage.png?alt=media\&token=49cec44e-dcf6-41d3-83e3-6d962ff30958)

### 積木畫布 <a href="#e01.-yao-kong-qi-an-niu-kong-zhi-led-ji-mu-hua-bu" id="e01.-yao-kong-qi-an-niu-kong-zhi-led-ji-mu-hua-bu"></a>

**初始化**

* 創建一個直立式的遙控器，寬度為 3，高度為 5
* 取個獨特的名字，之後在手機上的 App 才找的到自己的開發板
* 新增想要加上去的控制元件，此範例在 (0,0) 的位置加了一個文字標籤，在(0,2) 的位置加了一個方形按鈕
* 建議可以先在紙上上畫出自己想要的遙控器模樣和擺放位置，在依照設計拉出積木

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FKfTuJmr1xu3sNxwvmJbc%2Fimage-186.jpeg?alt=media\&token=6a96f915-9edf-4491-a228-ecb5e35d593e)

**重複執行**

* 在最上面放入"處理手機程式指令"積木，每一次重複執行時，就會和 App 去互相更信最新狀態
* 判斷是否按鈕狀態有改變，若壓下擇點亮板子上的 LED, 若放開則關掉 LED<br>

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FiOJl8eDjCyswPJ8KgLzr%2Fimage-187.jpeg?alt=media\&token=e74d2963-6311-4a3f-9b34-1286a8526f9c)

產生的 Arduino 程式如下

```
#include <LRemote.h>

LRemoteLabel label1;
LRemoteButton button1;

void setup()
{
  LRemote.setName("My Remote");
  LRemote.setOrientation(RC_PORTRAIT);
  LRemote.setGrid(3, 5);
  label1.setPos(0, 0);
  label1.setText("按鈕測試");
  label1.setSize(3, 1);
  label1.setColor(RC_ORANGE);
  LRemote.addControl(label1);

  button1.setPos(0, 2);
  button1.setText("按下點亮");
  button1.setSize(3, 2);
  button1.setColor(RC_BLUE);
  LRemote.addControl(button1);
  LRemote.begin();
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop()
{
  LRemote.process();
  if (button1.isValueChanged()) {
    if (button1.getValue() == 1) {
      digitalWrite(LED_BUILTIN, HIGH);

    } else {
      digitalWrite(LED_BUILTIN, LOW);
    }
  }
  delay(100);
}
```

### 操作步驟 :  <a href="#e01.-yao-kong-qi-an-niu-kong-zhi-led-cao-zuo-bu-zhou" id="e01.-yao-kong-qi-an-niu-kong-zhi-led-cao-zuo-bu-zhou"></a>

▼打開 LinkIt Remote App，找到你的裝置名稱。有時更改名稱因為手機作業系統會有暫存，不會馬上更新，可以點選右上方的刷新來更新

![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2F7G2fWJsR6z0YAVxH0BBr%2Fimage-188.jpeg?alt=media\&token=a8404d2b-060a-4f0d-9826-290ec88f9a25)

\
▼進入你設計的遙控器介面，按下藍色按鈕，就可以看到開發板上的 LED 會亮起\
&#x20;![](https://3972650740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY4gduUSLWOCI23CXUWej%2Fuploads%2FzQxbpgECAbXVJHIo80Gz%2Fimage-189.jpeg?alt=media\&token=cbf92986-5a5a-4314-8aea-bfcd5857a9e4)
