iPad（ブラウザ）とRaspberry Pi 3+Webカメラで遠隔操作するタミヤのタンクを作る ③プログラム編

[iPad（ブラウザ）とRaspberry Pi 3+Webカメラで遠隔操作するタミヤのタンクを作る ①材料編](http://qiita.com/weizenbock/items/0f1a01e8af8394a882ac)
[iPad（ブラウザ）とRaspberry Pi 3+Webカメラで遠隔操作するタミヤのタンクを作る ②組み立て編](http://qiita.com/weizenbock/items/b137587cb2b7a8802a0a)
iPad（ブラウザ）とRaspberry Pi 3+Webカメラで遠隔操作するタミヤのタンクを作る ③プログラム編

- - -

さて、今回はほぼ全てソフトウェアの話になります。

まず最初に全体像を説明すると、だいたい以下のような構成になっています。

- Raspberry PiにRaspbian (Jessie)を入れる
- OpenCVを入れる
- Python (Flask) でWebサーバーを立てる
- OpenCVを通した取得したUSBのカメラの画像を、multipart/x-mixed-replaceを使ってページ内にJPEG動画として送る
- jQueryで制御用ボタンの入力をサーバー（Raspberry Pi）へ送る
- 受け取った制御コードを元にモーターを動かす

操作用のWebページはiPad miniなどで見ると、ちょうどよい大きさです。
異なる画面サイズの端末で操作する場合は、適宜CSS等のサイズを調整してください。

単に映像を送るだけならOpenCVを入れなくてもよいのですが、OpenCVを通した形にしておくと、顔認識などの高度な画像処理機能を簡単に載せられるようになるので、最初のセットアップはちょっと大変ですが、OpenCVを通すやり方をおすすめします。

また、WiFiのセットアップでは、自宅のネットワークルーターでローカルの固定IPを振り出せるようにしておくとよいです。そうすることで、毎回同じURLで操作用ページに入ることができます。

# Raspberry Piのセットアップ/Raspbianのインストール

ここはすでにたくさん記事が出ているのと、バージョンアップによって細かな手順がちょくちょく変わるので、公式サイト（英語）を当たるか、日本語のわかりやすい記事なら都度なるべく最新のものを検索して参考にするとよいと思います。

そのときポイントになる項目としては

```
sudo raspi-config
```

で入れる管理画面で、以下の設定を行っておいてください。

- <strong>Interfacing Options で、I2C、SPI、Serialの3つを有効化しておく</strong>  
※今回全部使うわけではないですが、電子工作ではよく使うものたちです
- <strong>Advanced Options で、Memory Split=256 にしておく</strong>  

また、WiFiについては

- <strong>ネットワークルーターで振り出された固定IPを使用する</strong>

ように設定してください。
固定IPにする方法も多くの記事が出ているので都度最新のものを参考にしてください。

vim, git, pyenv/virtualenvなどはお好みでお願いします。

# OpenCVをインストールする

今回最も難しいのがここだと思います。
Macなどではanaconda/minicondaから簡単に入れられる印象がありますが、Raspberry Pi3(ARMv8)は現時点で対応しておらず、ソースコードをダウンロードしてきてコンパイルする必要があります。

参考までにセットアップ用のコマンドを以下に記載しておきます。
うまくいかない場合は、残念ながら一概にこうすればうまくいくと言えるものではなく、都度エラーメッセージを見ながら調べるしかありません。

ただ、最近はRaspberry Piも3になってOpenCVを入れるケースがかなり増えてきたので、参考になる記事もだいぶ見つけやすくなってきたと思います。

```
# Raspbian
#   https://www.raspberrypi.org/downloads/raspbian/
#   Version:April 2017
#   Release date:2017-04-10
#   Kernel version:4.4
#
# Python
#   3.6
#
# OpenCV
#   3.2

# 各種ライブラリのインストール
sudo apt-get install build-essential cmake pkg-config
sudo apt-get install libjpeg-dev libtiff5-dev libjasper-dev libpng12-dev
sudo apt-get install libavcodec-dev libavformat-dev libswscale-dev libv4l-dev
sudo apt-get install libxvidcore-dev libx264-dev
sudo apt-get install libgtk2.0-dev
sudo apt-get install libatlas-base-dev gfortran
sudo apt-get install python2.7-dev python3-dev
pip install numpy matplotlib

# OpenCVのダウンロードとコンパイル
mkdir opencv
cd opencv
wget -O opencv.zip https://github.com/opencv/opencv/archive/3.2.0.zip
unzip opencv.zip
wget -O opencv_contrib.zip https://github.com/opencv/opencv_contrib/archive/3.2.0.zip
unzip opencv_contrib.zip
cd opencv-3.2.0
mkdir build
cd build
# pyenv/virtualenvを使っていなければシステムPythonのパスに変更してください
PREFIX_MAIN=`pyenv virtualenv-prefix`
PREFIX=`pyenv prefix`
cmake -D CMAKE_BUILD_TYPE=RELEASE \
-D CMAKE_INSTALL_PREFIX=/usr/local \
-D INSTALL_PYTHON_EXAMPLES=ON \
-D BUILD_EXAMPLES=ON \
-D CMAKE_INSTALL_PREFIX="$PREFIX" \
-D PYTHON3_EXECUTABLE="$PREFIX"/bin/python3 \
-D PYTHON3_PACKAGES_PATH="$PREFIX"/lib/python3.6/site-packages \
-D PYTHON3_LIBRARY="$PREFIX_MAIN"/lib/libpython3.6m.a \
-D PYTHON3_INCLUDE_DIR="$PREFIX_MAIN"/include/python3.6m \
-D PYTHON3_NUMPY_INCLUDE_DIRS="$PREFIX"/lib/python3.6/site-packages/numpy/core/include \
-D BUILD_opencv_python3=ON \
-D INSTALL_NAME_DIR=${CMAKE_INSTALL_PREFIX}/lib \
-D OPENCV_EXTRA_MODULES_PATH=~/opencv/opencv_contrib-3.2.0/modules ..

```

ここで以下のような結果が出ていることを確認してください。

![python3.png](https://qiita-image-store.s3.amazonaws.com/0/195133/855dcb25-db9e-f97a-bead-3cd5ff15d6de.png)

きちんとパスが表示されていない場合は、必要なモジュールやパッケージを見つけられていない可能性があります。

```
make -j4
# ここは1時間ほどかかります（※RPi2のときは2～3時間かかりました）

sudo make install

python  # 対話型シェルに入って以下を実行
>>> import cv2
>>> cv2.__version__

```

これで<code>'3.2.0'</code>が表示されれば、無事インストール完了です！

# Webサーバーをセットアップする

最低限のコードをGithubにおいたので、こちらを適当なディレクトリにgit cloneしてください。
https://github.com/oshiemon/Tank

ホームディレクトリにおいた場合は、以下のように起動します。

```
python /home/pi/Tank/server/app.py
```

pyenv/virtualenvを使用した場合は、OpenCVを使えるようにしたPythonを使用するようにしてください。

```
* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
```

のように表示されれば起動成功です。
なお、この`0.0.0.0`の部分はRaspberry Piのローカルアドレスが入るので、先の手順でルーターで振り出した固定IPで置き換えます。

固定IPが`192.168.0.2`であれば、ブラウザで

```
http://192.168.0.2:5000/
```

のようにアクセスします。
「Video Streaming」の文字とともに、左側に映像が、右側に操作ボタンが表示されれば接続成功です。

操作は、右のボタンでも可能ですが、PCから操作する場合は、PCゲームでおなじみの「W（前進）S（後退）D（右旋回）A（左旋回）」も可能です。
iPadなどのタブレット端末から操作する場合は、右手でボタンをタップするとよいでしょう。

さて、この時点で全てうまくいっていれば、操作ボタンを推した瞬間にモーターが回転したかと思います。もし動かない場合は、ここからデバッグ作業の開始です！

ソフトウェアに閉じた世界と違って、「よくよく見たら充電池と線つながってないじゃん！」のようなことが往々にしてありますが、そうしたケースではエラーメッセージが出たりはしないので、自分でひとつひとつ手順を確認するしかありません。

面倒ですが、ハードとソフトを組み合わせた工作の醍醐味でもあるので、根気強くデバックしましょう。そのうち機械の気持ちがわかるようになるでしょう。

# モーターの回転方向を調整する

モーターが回転した方、おめでとうございます。
あとは正しい方向に回転するように調整するだけです。

Webページから操作できる状態にした上で「前進」をしてみてください。
左右の車輪が同じ方向（カメラの方向）に向かって進むように回転していますか？

逆方向に回転しているモーターがあれば、そのモーターとブレッドボードを接続している2本のケーブルを逆に差し替えてください。これで向きが逆になるはずです。

モーターの回転方向が正しくなったら、いよいよキャタピラを取り付けましょう。

また、Raspberry Piの電源をコンセントから取っている場合は、一度シャットダウンした上で、電源をマウントしたモバイルルーターに切り替えてください。

再起動が完了したら、先ほどと同様にブラウザから操作パネルにアクセスし、自由に操作できる様になっているはずです！

# まとめ

お疲れ様でした！ここまで随分長かったと思います。
うまく行かず、詰まった箇所もたくさんあったのではないでしょうか。

先程のリポジトリにあるソースコードをちょっと覗いていただくと、実は（jQueryを除き）全てのファイルが100行未満であることがわかると思います。

OpenCVを入れるところだけまだ複雑ですが、これもそのうち簡単にインストールできるようになると思います。

プログラム自体はとてもシンプルに作られています。

`app.py`の7行目に

```
pin_status_led = 17
```

という行があるのに気づかれたでしょうか？
実はGIPI17にLEDをつなぐと、Webサーバー起動時に点灯するようになっています。

Raspberry PiやOpenCVの使い方はまだまだたくさんあるので、例えば

- 電源を入れたら自動的にWebサーバーが起動するようにする
- Webサーバーが起動したらLEDを点灯させてわかるようにする
- 超音波距離センサーをつけて前方の障害物を検出する
- 前方の障害物との距離を映像に表示させる
- 障害物を自動的に回避するように行動させる
- OpenCVを使って、特定の物体や色を追いかけるようにする

などなど今後の拡張の余地は無限にあります。

また、ハードウェアの面でも

- モーターをよりパワフルなものに変えて爆速にする（本当にパワフルなものはモーターだけでなく電源やモータードライバとセットで考えないとうまくいかないかもしれません）
- 車高や重心を低くする設計にして障害物を乗り越えるときでも倒れにくくする
- カメラにサーボマウントをつけて、向きを遠隔で変えられるようにする

など改造してみたくなるパーツはたくさんあるでしょう。

せっかくここまできたので、ぜひ自分だけのオリジナル最強タンクを作ってみてください！