ESP32-CAMコントローラ（Android）のマニュアル

# 概要
以下の記事で紹介したESP32-CAMを操作するためのコントローラのマニュアルになります。

https://qiita.com/KinMugi/items/18120b6a41a559f95e93

Androidアプリになります。
以下のURLよりアプリのインストールが可能です。

https://drive.google.com/file/d/161trorWNLgpV-fCoSwoF_ivmlJb8nCxR/view?usp=sharing

スマホからダウンロードする場合は、以下のQRコードをご利用ください。
![QR_ESP32-CAM_Controller.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1852162/7ecb9538-c4f3-8c70-146b-d1b83b680fcc.png)


主な機能は以下の通りです。
* Webビューによるカメラ映像の表示
* UDPによるコマンドの送信
* ボタンクリックによるコマンドの送信
* 各種ボタンへの任意のコマンドの設定
* 変数及び数式を用いたコマンド値の生成
* ボタンクリックによる変数値の変更

:::::note warn
UDP受信機能、およびHUD（ヘッドアップディスプレイ）はオミットしています。実装後にアップグレードします。
また、個人で趣味で作成したアプリのため、動作は保証しません。
:::::

# 画面構成
##### メイン画面
![メイン画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1852162/b0059bd2-af89-3c24-dbe9-12f5a2f5ec41.png)
ESP32-CAMを操作するための画面になります。
左右にあるボタン及び画面右のスイッチSW1、SW2にてコマンドを送信します。
画面中央にWebビューがあります。
画面左には各変数の値が表示されます。
画面右のIgnitionスイッチをONにすることで、コマンド送信を開始します。
~~HUD（ヘッドアップディスプレイ）スイッチをONにすることで、予め設定した画像をWebビューに重ねて表示します。
画面下に押下したボタンと送信するコマンドが表示されます。~~
右上のメニューにある設定を押下すると、設定画面を開きます。

##### 設定画面
![設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1852162/3f7f5b28-7d47-d73e-5654-fcedfe20533b.png)
各種設定値の変更を行うための画面です。
ESP32-CAMがCAMERA_MODEL_AI_THINKERにて動作することを想定しています。
設定項目は以下の通り。

<table>
<caption>接続設定</caption>
<tr><th>項目名</th><th>説明</th></tr>
<tr><td>ドメイン or IPアドレス</td><td>ESP32−CAMのIPアドレスを指定</td>
<tr><td>カメラ ポート番号</td><td>Streamで出力されるカメラ映像のポート番号を指定<br>通常は81</td>
<tr><td>カメラPath</td><td>Stream出力のパスを指定<br>通常はstreamを指定</td>
<tr><td>カメラ画角</td><td>表示されるWebビューを回転させる</td>
<tr><td>UDP送信 ポート番号</td><td>ESP32のコマンド送信用の宛先ポート番号</td>
<tr><td>
UDP受信 ポート番号
</td><td>
ESP32のデータ受信用の宛先ポート番号
</td>
<tr><td>UDP通信間隔（ms）</td><td>入力したコマンドを送信する間隔<br>ミリ秒単位</td>
</table>
<table>
<caption>コマンド設定</caption>
<tr><th>項目名</th><th>説明</th></tr>
<tr><td>DEFAULT</td><td>何もボタンを押していない場合に送信されるコマンド</td>
<tr><td>L_PUSH</td><td>画面左側の↑ボタン押下時に送信されるコマンド</td>
<tr><td>L_PULL</td><td>画面左側の↓ボタン押下時に送信されるコマンド</td>
<tr><td>L_LEFT</td><td>画面左側の←ボタン押下時に送信されるコマンド</td>
<tr><td>L_RIGHT</td><td>画面左側の→ボタン押下時に送信されるコマンド</td>
<tr><td>R_PUSH</td><td>画面右側の↑ボタン押下時に送信されるコマンド</td>
<tr><td>R_PULL</td><td>画面右側の↓ボタン押下時に送信されるコマンド</td>
<tr><td>R_LEFT</td><td>画面右側の←ボタン押下時に送信されるコマンド</td>
<tr><td>R_RIGHT</td><td>画面右側の→ボタン押下時に送信されるコマンド</td>
<tr><td>Switch1_ON</td><td>Switch1をオンにした際に送信されるコマンド</td>
<tr><td>Switch1_OFF</td><td>Switch1をオフにした際に送信されるコマンド</td>
<tr><td>Switch2_ON</td><td>Switch2をオンにした際に送信されるコマンド</td>
<tr><td>Switch2_OFF</td><td>Switch2をオフにした際に送信されるコマンド</td>
</table>
<table>
<caption>変数設定</caption>
<tr><th>項目名</th><th>説明</th></tr>
<tr><td>s1 ～ s10</td><td>任意の値を保存できる変数</td>
</table>

# コマンド送信について
画面にある左右の十字キーと中央のスイッチを操作することで、ESP32−CAMにコマンドを送信します。
十字キーには、操作しなかった場合（ボタンを押していない場合）に送信するDEFAULTコマンドがあります。
スイッチは、ON/OFFそれぞれに変更した際に送信するコマンドが用意されています。

# 変数及び数式によるコマンド値の生成
各コマンドには、変数及び数式を用いることができます。
コマンド内で変数を呼び出したい場合は、呼び出したい変数を{}（波括弧）で囲みます。
また、四則演算や()を用いた数式を変数と合わせて定義することもできます。
数式を計算した結果がコマンドとして送信されます。
以下は、GPIO14に変数s3に50を足した値を、GPIO15に変数s4に50を引いた値を送信する例です。

~~~text:コマンド値の生成例
[14:{s3}+50,15:{s4}-50]
~~~

# ボタンクリックによる変数値の変更
コマンドを送信せず、変数値を変更するコマンドを作成することができます。
コマンドにset関数を設定することで定義します。
値を変更したい変数に対する代入式を記述します。カンマで区切ることで、複数の変数に対する設定を行うことができます。
変数に設定する値は、送信するコマンドと同様に変数及び数式にて設定できます。
以下は、変数s3にs3+5の値を、変数s4にs4-5の値を設定する例です。
~~~text:set関数による変数値の変更
set(s3={s3}+5,s4={s4}-5)
~~~