iPhoneを使ってM5BALAを操作する（Blynk-BLE編）

#概要

iPhone を使って M5BALA を操作する、の３回目、iPhone のアプリ Blynk を使いBLE経由で M5BALA を操作します。iPhone側はアプリ、M5Stack側はサンプルプログラムが用意されており、iPhone を使って M5BALA を操作する方法としては最も簡単な方法かもしれません。今回は Blynk の Joystick および Accelerometer を使って操作してみました。

##環境

- M5BALA+M5GO
- [Blynk v2.23.0](https://www.blynk.cc)
- iPhone6 iOS 12.0.1
- [Arduino 1.8.7](https://www.arduino.cc/en/Main/Software) 以下のライブラリを使用（Arduino IDEの「ライブラリを管理」からインストール可）
 - M5Stack - https://github.com/m5stack/M5Stack
 - MPU6050_tockn - https://github.com/tockn/MPU6050_tockn
 - NeoPixelBus - https://github.com/Makuna/NeoPixelBus
 - Blynk - https://github.com/blynkkk/blynk-library

##実行例

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">iPhoneのアプリBlynkとサンプルプログラムBlynk_BLE.inoでのM5BALAの操作方法についてまとめました。<br>「iPhoneを使ってM5BALAを操作する（Blynk-BLE編）」<a href="https://t.co/ugNoXmMs4b">https://t.co/ugNoXmMs4b</a><a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/M5BALA?src=hash&amp;ref_src=twsrc%5Etfw">#M5BALA</a> <a href="https://t.co/4NF10gQcod">pic.twitter.com/4NF10gQcod</a></p>&mdash; 稲澤祐一 (@inasawa) <a href="https://twitter.com/inasawa/status/1059417228649492480?ref_src=twsrc%5Etfw">2018年11月5日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

#BlynkのJoystickでM5BALAを操作する

BlynkのJoystickを使用し、Joystickの動きによってM5BALAを操作します。

##M5BALA制御用プログラム（Joystick用）

以下のサンプルプログラムを一部修正して使用します。

- スケッチ
https://github.com/m5stack/M5Bala/tree/master/examples/Blynk_BLE
Blynk_BLE.ino

- ライブラリ
https://github.com/m5stack/M5Bala/tree/master/src
M5Bala.cpp
M5Bala.h

Blynk_BLE.ino 内の変数 auth の値として、後述の操作で Blynk のプロジェクト作成時にメールで送付される32桁のAuth Tokenを転記します。

```cpp:Blynk_BLE.ino
    :    :    :
char auth[] = "...メールで送付されたAuth Tokenを転記...";
    :    :    :
```

Blynkのジョイスティックの値を受け取る処理は以下のようになっています。これに合わせてBlynkのジョイスティックの設定を行います。

```cpp:Blynk_BLE.ino
    :    :    :
BLYNK_WRITE(V0) {
	int16_t joystick_X = param[0].asInt();
	int16_t joystick_Y = param[1].asInt();

	m5bala.move(joystick_Y);
	m5bala.turn(joystick_X);
    :    :    :
}
```

##ジャイロオフセットのチューニング

ジャイロからの取得値は静止時でも０にならないため、取得値から差し引くためのオフセット値を設定することでM5BALAの動きを安定させることができます。制御用のプログラムでは、M5StackのボタンCを押して起動することでジャイロの値を3000回取得し、平均値をオフセット値として設定するようになっています。これを行うと以下のように取得されたオフセット値が表示されます。

![IMG_0126.jpeg](https://qiita-image-store.s3.amazonaws.com/0/133064/4f09e6ce-cf23-52b0-9d66-98c16898c830.jpeg)

##Blynkアプリ設定（初期設定及びJoystick/BLEの設定）

- iPhone に Blynk アプリをインストールし起動するとアカウントの作成を求められます。以下は「Create New Account」を選択した例です。選択するとアカウントで使用するメールアドレスとパスワードの入力を求められます。
- 「New Project」を選択し、以下の入力を行います。
 - プロジェクト名（ここでは「M5BALA」を入力）
 - Choose Device（ESP32 Dev Boardを選択）
 - Connection Type（BLEを選択（ただし、ここでの選択が反映されないようなので、後で設定し直します））

![IMG_1843.png](https://qiita-image-store.s3.amazonaws.com/0/133064/46fd4c7b-f778-f0d4-c33a-4c66ac414058.png) ![IMG_1844.png](https://qiita-image-store.s3.amazonaws.com/0/133064/d17534a2-4a2e-d0e3-b810-31f8903cdd70.png) ![IMG_1850.png](https://qiita-image-store.s3.amazonaws.com/0/133064/25591533-86df-21ae-1db3-066d6dd0c370.png) ![IMG_1846.png](https://qiita-image-store.s3.amazonaws.com/0/133064/ab66475a-205f-a09b-1474-d07a52ca45f9.png)

- プロジェクトを作成すると、アカウント作成時に入力したメールアドレスにAuth Tokenが送られてきます。この値を前述の Arduino のスケッチ Blynk_BLE.ino に転記します。
- ここで改めて「Project Setting」でデバイスの設定を行います。

![IMG_1847-1.png](https://qiita-image-store.s3.amazonaws.com/0/133064/639bf29e-ba4b-acd3-03dd-df3830ce12a7.png) ![IMG_1848-1.png](https://qiita-image-store.s3.amazonaws.com/0/133064/1b9167a4-2525-5120-7cdd-554d922544f9.png) ![IMG_1866-2.png](https://qiita-image-store.s3.amazonaws.com/0/133064/caec08ba-eb55-728a-e6db-7af6521c87c4.png) ![IMG_1867-1.png](https://qiita-image-store.s3.amazonaws.com/0/133064/21d3839b-e348-8389-8a9b-25e07d4aa9b9.png)

- この時点ではプロジェクト作成時の設定が反映されず「Connection Type」が「WiFi」になっていると思いますので「BLE」に変更します。

![IMG_1868-2.png](https://qiita-image-store.s3.amazonaws.com/0/133064/a3c616a6-edab-c50d-3f79-97ce2d091d02.png) ![IMG_1869-2.png](https://qiita-image-store.s3.amazonaws.com/0/133064/3df6c020-6f10-5433-f338-704addfc4647.png) ![IMG_1870-1.png](https://qiita-image-store.s3.amazonaws.com/0/133064/df2eb7bb-05fe-5990-6c87-cd061a7dd857.png) ![IMG_1848.png](https://qiita-image-store.s3.amazonaws.com/0/133064/6cb46e63-ff24-522b-6cf9-3a88178f5bba.png)

- 何も無いキャンバスをタップするとウィジェットの選択画面になるので「Joystick」を選択します。
- キャンバスに配置された「Joystick」をタップし設定画面で、制御プログラム側の処理に合わせて以下のように設定します。
 - 「SPLIT/MERGE」は「MERGE」を選択
 - 「PIN」は「V0」を選択
 - [0]と[1]の最小値〜最大値を -100〜100 に設定（最終的にはM5BALAの反応に合わせて要調整）

![IMG_1852.png](https://qiita-image-store.s3.amazonaws.com/0/133064/b63a2454-6116-17c9-b0ad-a6093a3be54d.png) ![IMG_1859.png](https://qiita-image-store.s3.amazonaws.com/0/133064/fada5409-64b7-9d8c-2d67-53ced25a3c80.png) ![IMG_1801.png](https://qiita-image-store.s3.amazonaws.com/0/133064/98207dad-3d32-9c34-7c71-62dc353d7efb.png)

- BLEのウィジェットを追加

![IMG_1853.png](https://qiita-image-store.s3.amazonaws.com/0/133064/5da1b0ff-ff2b-60fd-4f93-8f08b90561e0.png) ![IMG_1865.png](https://qiita-image-store.s3.amazonaws.com/0/133064/0fd628d0-fc64-ca78-8f9f-f0722f8e8313.png)

- この時点でM5BALA側を動かしておきます。
- BLEのウィジェットをタップして接続対象を選択。
- サンプルの Blynk_BLE.ino では「M5BOT Blynk」に設定されています。

![IMG_1861.png](https://qiita-image-store.s3.amazonaws.com/0/133064/4cc46ad9-b613-0c44-2c61-466485de2f8d.png) ![IMG_1863-1.png](https://qiita-image-store.s3.amazonaws.com/0/133064/20d5f9a9-0789-40e0-196a-9863f194543d.png) ![IMG_1864.png](https://qiita-image-store.s3.amazonaws.com/0/133064/d5f5cd78-2949-b8be-57b8-9f199e1b785c.png)

- 実行ボタンをタップしてプロジェクトを実行します。
- Joystick を動かすと M5BALA を操作することができます。

![IMG_1865-1.png](https://qiita-image-store.s3.amazonaws.com/0/133064/46609176-01aa-998d-8c45-6cba365d1ca0.png) ![IMG_1871.png](https://qiita-image-store.s3.amazonaws.com/0/133064/8b898140-1084-07cc-bad1-06abac02b7e8.png)


#BlynkのAccelerometerでM5BALAを操作する

BlynkのAccelerometer（XYZ軸の加速度を取得）を使用し、iPhoneの前後左右の傾きによってM5BALAを操作します。

##M5BALA制御用プログラム（Accelerometer用）

Blynk_BLE.ino に以下の処理を追加します。

```cpp:Blynk_BLE.ino
    :    :    :
BLYNK_WRITE(V1) {
  // XYZ軸の加速度を取得
  float x = param[0].asFloat();
  float y = param[1].asFloat();
  float z = param[2].asFloat();

  // 加速度の値からXY方向の傾きを算出
  // (2018/11/07 - angle_X と angle_Y が逆だったので修正)
  float angle_X = atan2(x, -z + abs(y)) * 180.0 / PI;
  float angle_Y = atan2(y, -z + abs(x)) * 180.0 / PI;

  // -60度〜60度の傾きを -100〜100 として前後左右の動きとする
  int16_t move = max(-100, min(100, int(angle_Y / 60 * 100)));
  int16_t turn = max(-100, min(100, int(angle_X / 60 * 100)));
    
  m5bala.move(move);
  m5bala.turn(turn);
}
```

##Blynkアプリ設定（Accelerometerの設定）

- ウィジェットの選択画面で「Accelerometer」を選択します。
- キャンバスに配置された「Accelerometer」をタップし設定画面で、以下のように設定します。
 - 「PIN」は「V1」を選択
 - 「Write Interval」を 500ms に設定（間隔が短いとM5BALAが暴れたのでこの程度にしました）
- BLEを接続し実行ボタンをタップしてプロジェクトを実行します。
- iPhoneの傾きによって M5BALA を操作することができます。
- Joystickのウィジェットは操作しなければ値が送信されないため、配置したままにしています。逆に、Accelerometerは継続して値を送信するので、Joystickを使用する場合はAccelerometerを削除、あるいは「PIN」の設定変更などで値が送信されないようにします。

![IMG_1877.png](https://qiita-image-store.s3.amazonaws.com/0/133064/c954a087-19ff-7499-426b-6fc6ff6eb7ef.png) ![IMG_1879.png](https://qiita-image-store.s3.amazonaws.com/0/133064/7470103b-e8cb-d9f5-6bd7-e9f1a0a8354f.png) ![IMG_1879-1.png](https://qiita-image-store.s3.amazonaws.com/0/133064/a2c087b8-6905-b6d8-41e7-6ddee31c9364.png) ![IMG_1880.png](https://qiita-image-store.s3.amazonaws.com/0/133064/63a054c2-df59-db25-5cbe-20c8b44f2623.png)