irBoardからM5StickCなどに接続できるライブラリーを作りました

# irBoardとは

[irBoard](https://irboard.itosoft.com/)はiPadを[PLC](https://ja.wikipedia.org/wiki/プログラマブルロジックコントローラ)向けの、タッチパネルディスプレイとして利用できるiOSアプリケーションです。
生産ラインなどの装置の操作やモニターをする事を想定したアプリです。

<img width="208" alt="irBoardとは" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/a050ac50-533e-e5f4-a8ff-8f24a4e18a5a.png">

今回はM5StickCなどのESP32デバイスと接続し操作やモニター、設定ツールとして使える様にArduino IDE向けのライブラリーを作成しました。

M5StackとM5StickC、M5Atom用のスケッチ例を用意しています。

# ライブラリーのインストール

前提として使用するデバイスに合わせてArduino IDEでM5StackまたはM5StickCまたはM5Atomの開発ができる環境が整えられているとします。
まだの場合は、こちらが参考になると思います。

[M5Stack Library](https://github.com/m5stack/M5Stack/blob/master/docs/getting_started_ja.md)
[M5StickCを動かしてみる - Qiita](https://qiita.com/itiB_S144/items/7a232c1a31151fcb5e5b)
[ATOM Matrixを触ってみた - Qiita](https://qiita.com/jksoft/items/fa92281f90bcbc32929c)

ライブラリーはGithubに公開しています。
[https://github.com/ito-soft-design/irboard_esp32](https://github.com/ito-soft-design/irboard_esp32)

このページにアクセスしCloneボタンからDownload ZIPを選択しダウンロードします。

<img width="384" alt="Download library" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/cec78569-adac-1068-6778-4ab84a29d2b2.png">

スケッチメニューからライブラリをインクルード > .ZIP形式のライブラリをインストール... を選択し、

<img width="566" alt="ZIP形式のライブラリをインストール" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/9e528561-7e3b-f02e-f812-e76117c1a07a.png">

ダウンロードしたirboard_esp32-master.zipを選択します。

<img width="229" alt="irboard_esp32-master.zip" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/dcc033fb-6a1b-11d7-3e3a-1e90e7a674e2.png">

# スケッチの作成

## 作成から実行

ファイルメニューから スケッチ例 > irBoard Library for ESP32 を選択し接続しているデバイスに合わせて選択するとスケッチが作成されます。

<img width="459" alt="irboard_m5stickcかirboard_m5atomを選択" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/27e802c6-f533-ae50-2de9-c4b3ad6221b9.png">

ssidとpasswordの行を接続先のWiFiに合わせて書き換えます。

```
const char *ssid = "ssid";
const char *password = "password";
```

デバイスを接続しプログラムを書き込み実行します。
WiFiに接続すると割り当てられたIPアドレスがM5StackとM5StickCではLCDに表示され、M5Atomではターミナルに出力されます。
irBoardから接続する際に必要になりますので控えておきます。

![M5StackとM5StickCの場合はLCDにもIPアドレスが表示されます](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/85a2a426-9cb7-b0e6-8185-c054b347d182.jpeg)

この先はirBoardと接続しないと変化がありませんので、先に進んでから確認しましょう。


## このスケッチでやろうとしている事

irBoardではPLCにある入出力デバイスやメモリデバイスの値を読み書きしています。
これらのデバイスは種類によって名称が決まっていて、irBoardではどのデバイスに対して読み書きするかを指定しています。
M5StackやM5StickC、M5AtomにはPLCにある入出力デバイスやメモリデバイスに該当するデバイスがありませんので、デバイス名を指定して内部的なバッファに読み書きする様に実装しています。

この例ではデバイスを次の様に割り当てています。

|デバイス名|型|役割|M5Stackの場合|M5StickCの場合|M5Atomの場合|
|:--|:-:|:--|:--|:--|:--|
|X0|bool|irBoard上のボタンの押下状況|LEDを点灯| - |
|Y0|bool|irBoard上のボタンを点灯させる|M5Stackのボタン押下状況をセット|X0の値をそのままセット|M5Atomのボタン押下状況をセット|
|D0|short|irBoard上で設定された値|値をLCDに表示|値をLCDに表示| - |
|D1|short|irBoard上のスライダーの値|背景色 赤成分|背景色 赤成分|LED 赤成分|
|D2|short|irBoard上のスライダーの値|背景色 緑成分|背景色 緑成分|LED 緑成分|
|D3|short|irBoard上のスライダーの値|背景色 青成分|背景色 青成分|LED 青成分

irBoardの画面を作っていくとイメージできると思いますが、ここでは以下の事を行うためのプログラムになっています。

### M5Stackの場合

- M5Stackのボタン(A、B、Cいずれも)を押すとirBoard画面のボタンが点灯(Y0)する。
- irBoard画面で数値(D0)を変更するとM5Stackに値が表示される。(A:0の所が変化)
- irBoard画面でスライダー(D1,D2,D3)をスライドするとM5Stackの背景色が変化する

### M5StickCの場合

- irBoard画面のボタン(X0)を押すとM5StickCのLEDが点灯。
    - 折り返されてirBoard画面のボタンも点灯(Y0)する。
- irBoard画面で数値(D0)を変更するとM5StickCに値が表示される。(A:0の所が変化)
- irBoard画面でスライダー(D1,D2,D3)をスライドするとM5StickCの背景色が変化する

### M5Atomの場合

- M5Atomのボタンを押すとirBoard画面のボタンが点灯(Y0)する。
- irBoard画面でスライダー(D1,D2,D3)をスライドするとM5AtomのLEDの色が変化する

## Irboardクラスの説明

IrboardクラスがirBoardとの接続に関することを行っています。

まずはインスタンス化します。

```
Irboard irboard = Irboard();
```

値を読み出すにはデバイスの型に合わせてboolValue()やshortValue()にデバイス名を与えて取得します。

```
short value_a;
.
.
bool x0 = irboard.boolValue("X0");
value_a = irboard.shortValue("D0");
```

書き込む場合もデバイスの型に合わせてsetBoolValue(,)やsetShortValue(,)を用います。

```
irboard.setBoolValue("Y0", x0);
irboard.setShortValue("D4", 1234); // スケッチ例では使用していません
```

update()で通信処理を行っています。
isChanged()で値の変化があったか判別できる様になっていて、変化があったときだけ画面を更新する様な事ができます。

```
irboard.update();
if (irboard.isChanged()) {
    display_info();
}
```

## APモードでの動作

APモードでも動作できる様になっています。
APモードで動作するとiPadと直接接続できる様になります。

ACTS_AS_AP_MODEの定義がコメントになっていますが、コメントを外すだけです。

```
// コメントを外します
#define ACTS_AS_AP_MODE
```

ssidとpasswordの行で設定した内容がiPadの接続先のWiFiになります。
iPadのWiFi設定で設定したssidに接続します。

*※ irBoard Library for ESP32をバージョン0.1.1以上に更新してから行ってください*

# irBoard Liteを使ってみよう

irBoardには無料のirBoard LiteがありますのでこちらをiPadにダウンロードします。

[‎「irBoard Lite」をApp Storeで](https://itunes.apple.com/us/app/irboard-lite/id432058811?l=ja&ls=1&mt=8)

制限事項はありますが今回の様な使用ではほとんど支障なく使えます。

## プロジェクト作成

irBoard Liteを起動したら左上にある + ボタンを押しLadderDriveを選択します。

![メーカー選択でLadder Driveを選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/eb7ebe6e-09b5-84cb-af07-d8e9998120ce.png)

モデル選択でもLadderDriveを選択します。

![モデル選択でLadderDriveを選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/159b04ae-6c68-e87f-e4bb-c05b67579310.png)

プロジェクトが作成されると編集画面が表示されます。

![IMG_0071.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/ffd85f7e-8f3a-729d-32aa-2635eb68a11a.png)

Ladder DriveはPCやRaspberry PIなどを仮想的なPLCとして扱えるRuby gemです。
今回作成したLibraryはその仮想的なPLCとみなせる様に作っていますのでLadderDriveを選択しています。

[GitHub - ito-soft-design/ladder_drive](https://github.com/ito-soft-design/ladder_drive)

## 通信設定

画面左下のプロジェクト設定タブを選択しIPまたはホスト名にM5StickCやM5Atomに割り当てられていたIPアドレスを入力します。

![IMG_0072.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/5ee7ad50-30af-0324-a59a-888b8d6ea1c9.png)

## 画面作成

画面に部品を配置するには + ボタンを押し追加したい部品を選びます。

![IMG_0073.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/c49e13be-d2c7-b42c-c5fd-131c34569a63.png)

追加された部品はドラックすると位置を移動することができます。
選択枠の丸いノブをドラックするとサイズを変更できます。
適当に位置やサイズを変更してください。

### ボタン部品配置

- + ボタンからボタンを選びます。
- 画面左下のインスペクタータブを選択します
- スイッチセクションのデバイスにX0を入力
- ランプセクションのデバイスにY0を入力
- ボタンスタイルセクションのスタイルで四角を選択します

![ボタン部品配置](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/0b8fb4d5-fcfe-12b8-df0a-8e5d6ca337d6.png)

### 値部品配置

- + ボタンから値を選びます。
- 画面左下のインスペクタータブを選択します
- デバイスセクションの名称にD0を入力します
- 表現セクションの編集可をONにします

![値部品配置](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/2c223636-789a-9eb0-19a1-866c8b8c0999.png)

### スライダー部品配置

- + ボタンからスライダーを選びます。
- 画面左下のインスペクタータブを選択します
- デバイスセクションの名称にD1を入力します
- 範囲の最小値に0、最大値に255を入力します。

![色の赤成分のスライダー部品配置](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/88a69246-9044-be92-f870-fe561e2ccee6.png)

これは色の赤成分になりますので、同様に緑、青の分としてもう2つ追加します。
デバイス名称はそれぞれD2、D3とします。

![色の赤緑青成分三つのスライダー部品配置後](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/bad0d047-7532-b5fb-a4d9-c73114e2c249.png)

## 実行

右上の実行ボタンで実行します。

![実行ボタン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/82a2fc56-d7d2-b1d3-b559-2d6e7e2577e0.png)

実行画面でナビゲーションバーを表示させる方法についての説明がでます。次回も表示するかどうかで適当な方を選択してください。
実行画面でナビゲーションバーを表示するには2本指でダブルタップします。ナビゲーションバーが表示されたら×ボタンで編集画面に戻れます。
(※ [以前は2本指ではなく3本指で、その場合ダブルタップが効かない場合があることが分かりましたので回避方法を最後に追記してます。](#実行画面から編集画面へ戻る回避方法))

![実行画面から編集画面へ戻る操作](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/46a545ac-3f36-299c-0dc1-75975dd4b13c.png)

ボタンを押したり値を入力したりスライダーを変化させると、M5StickCやM5Atomに反映されるのが確認できます。


LEDが点灯したり、A:表示の値や背景色が変わります。

![M5StickCに反映](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/5e6e16cc-e78d-68db-caed-565ca15ceb7e.png)

下の画像をクリックするとYouTubeの動画が見れます。

[![操作中動画](http://img.youtube.com/vi/QGJ11FsG5xM/0.jpg)](http://www.youtube.com/watch?v=QGJ11FsG5xM)

# 終わりに

irBoard LiteはiPadで動作しますが、iPhone 6/7/8のPlusタイプのデバイスでも同様に動作させることができます。

他のiPhoneの機種でも実行はできますが、画面の編集はできないためiPadで作成したプロジェクトデータを転送することで実行できる様になりますが、インポート機能を有効にするにはアイテムの購入が必要になります。

# 実行画面から編集画面へ戻る回避方法


3本指でダブルタップが効かない場合があることが分かりましたので回避方法を追記します。(6/26)
(irBoard バージョン1.8.1では2本指に変更になっていますので不要です。)

3本指でダブルタップした時にテキストの編集用メニューが表示されてナビゲーションバーが表示できない場合があります。

![3本指でダブルタップが効かない場合](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/f224d8b7-9b0c-16ca-bd91-7a610ed6cd57.png)

値部品で入力した後にこの現象がでます。
値部品に使っているビューに[編集用のジェスチャーが新たに加わっていた](https://arigato-ipod.com/2019/10/knowledge-ios-ipados-13-three-fingers-text-editing-gestures.html)様です。(iOSの機能です)
それが丁度3本指で行うようになっていたため、重複してしまいiOSの機能の方が優先されてナビゲーションバーが表示されないという現象の様です。

アプリのバージョンアップ時に修正しますが、現状では次のいずれかの方法で回避してください。
3本指だと色々不都合があるため2本指に変更する予定です。

1. アプリを強制終了し再起動する。
2. ダミーページを追加しダミーページで操作する。

1は分かるかと思いますので(分からない場合は検索してください)、2の対応について説明します。

- 右上に + ボタンがあり押してページを追加します。これがダミーページになります
- 画面左下のインスペクタータブを選択します
- フリックによりページ移動セクションの左ページを選択します。画面一覧が表示されますので0の方を選択します。

![ダミーページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/b09edb2a-24cd-a49b-72c7-aef0e90e6009.png)

実行後2本指で左にスライドするとダミーページが表示されます。

![実行後2本指で左にスライド](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/e39498c5-e3d5-5ae5-47d4-c44863f3c6c1.jpeg)

ダミーページで3本指でダブルタップするとナビゲーションバーが表示されます。
×ボタンで編集画面に戻ることができます。

![91bc2db95c082f44377eba9079ee3f32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8941/edce66e2-fafe-1459-7604-e4c55536f11a.jpeg)