徒然なるままな想い書き

日々の『思わぬ発見、気付き』をつれづれに。

MENU

【Raspberry Pi 2】Webベースの遠隔操作ラジコンをつくる！（2. WebUI編）

ソフトウェア
f:id:tsurzur:20160326133854j:plain

はい、前回からだいぶ時間が経っちゃいましたが、ラズパイのラジコンの第２回です。前回でシステム構成とモータ駆動について書いたので、今回は遠隔操作のUIとなるWebUIについて書いていきたいと思います。

 

 

UIの位置づけ

f:id:tsurzur:20160412214031j:plain

はじめにUIの位置づけを確認します。前回のシステム構成の図で言うと、今回は下のところにある「タブレット：WebUI(HTML+JavaScript)」に当たります。このWebUIでは大きく３つのことをします。

 

  1. ラズパイラジコンに搭載したカメラ映像をストリーミングで映す
  2. HTMLでUI（カメラ映像、操作ボタン）をレイアウトする
  3. JavaScriptのSocket.ioを使ってラズパイ <-> WebUIでラジコンの速度・ハンドリングの情報を双方向通信する

 

３をもう少し詳しく書くと、WebUIからラジコンの速度・ハンドリングをコントロールしつつ、ラジコンから実際の速度・ハンドリング情報をフィードバックとして受け取るということです。

 

１．カメラのストリーミング

LOGICOOL ウェブカム HD画質 120万画素 C270

LOGICOOL ウェブカム HD画質 120万画素 C270

 

カメラはLOGICOOLのC270を使用します。基本的に最近のUSBカメラは使えますが、LOGICOOL製のものはお手軽な値段ですし、安定のカメラです。 

 

カメラのストリーミングは構成図にもあるように、MJPG-streamerというストリーミングソフトを利用します。本流のものではないみたいですが、使えたのでこれを使います。これを、下の流れに沿ってダウンロード、インストールしていきます。

sudo apt-get update
sudo apt-get install libjpeg62-dev cmake
# 任意の場所で
git clone https://github.com/jacksonliam/mjpg-streamer
cd mjpg-streamer/mjpg-streamer-experimental
make
# usbカメラを挿した状態で
./start.sh

 

f:id:tsurzur:20160413223415j:plain

これで「ラズパイのIPアドレス :8080」にアクセスしてMJPG-streamerのWEBページが表示されれば、カメラのストリーミングが正しくできていることが確認できます。このWEBページにはいろいろなサンプルが載っていますが、今回は単純にストリーミングの映像が欲しいだけなので、ブラウザからソースを覗いてみると、以下の記述が見つかるかと思います。

 

<img src="/?action=stream" alt="" />

 

ここから、ローカルのHTMLでimgのsrcを指し示しているので、遠隔のWebUIからは、

 

<img src="ラズパイのIPアドレス/?action=stream" alt="" />

 

とすればWebUIからもラズパイからのストリーミング映像を見ることができます。これを次のHTMLに貼っつけます。

 

２．HTMLでWebUI（カメラ映像、操作ボタン）をレイアウトする

ここでは、HTMLでWebUIをレイアウトしていきます。ここで正確な話をしておくと、今回ラズパイ側のサーバーサイドとしてNode.jsを利用したので、実際にはこのHTMLはNode.jsのejsに読み込ませるためのコードとなります。ここで、コードをそのまま貼り付けようと思ったのですが、表示がうまくいきそうになかったので、GitHubにリポジトリを作っちゃいました笑。

 

github.com

 

<index.ejs>

 

ソースを公開したので、あとは皆様の解読に任せますが、ざっくり機能だけ言うと、

  • カメラ映像は前述したストリーミング映像を取得
  • ラジコンの操作UIは矢印ボタンとドラッグアイコンの2種類用意（ドラッグアイコンについてはjQuery UI Touch Punchを利用）。
  • 基本的にドラッグアイコンを使用するので、矢印ボタンはチェックボタンで切り替え可能に（トグルスイッチにしとけば良かった・・・）
  • ラジコンの方向と速度をメータ表示（Visualization: Gaugeを利用）
  • ラジコンの方向と速度のやり取りにはsocket.ioを使用

です。タブレット上でドラッグアイコンのUIを使うと、ラジコンのアイコンを前後にドラッグすることで速度が、左右にドラッグすることで左右方向が調節できるので、ラジコンを直感的に操作することができます。ソース上ではカメラのIPアドレスはローカルアドレスとなっていますが、前回記事で書いたVPNを使えば、ローカルの自分の家だけに限らず、外出先などでもラジコンを操作することができるようになります。また、Webベースなので、ブラウザを持つすべてのデバイスで操作が可能となっています。

 

見た目は、ドラッグアイコンのみの場合は、こんな感じで、

f:id:tsurzur:20160413222841j:plain

 矢印ボタンをつけると、こんな感じです。

f:id:tsurzur:20160413222713j:plain

 

次回

これでWebUIは完成です。だいぶ最後は端折ったのでご要望があれば追記することにして、次回は最後の仕上げ、ラズパイ側の制御サーバについて書きたいと思います。こちらはNode.jsで書いているため、今回紹介したHTMLがindex.ejsとなっていたわけです。もうリポジトリを公開してしまったので気になる方はリポジトリ内のjsを先に読んでしまってても構いません。手探りで勉強しながら作ったシステムなので、フィードバックはどしどしお待ちしております笑

 

 

ではでは。