豆腐とコンソメ

豆腐とコンソメ

ラズパイ工作ともろもろのプログラム勉強記録

RaspBerryPiでラジコンをつくる(13):コントロール画面が完成した

免許合宿の空き時間を利用して、ラズパイのラジコンのコントロール画面を作成してきましたが、一区切りついたのでまとめます。

ラズパイどうのこうのより、画面をつくるほうが大変だった!

つくったもの

コントロールする画面

画面のレイアウトに関してはBootstrap4.xを使用しました。
CSSの基礎は、使わないとすぐに忘れちゃいます。

今回は、スマホで見ることも意識して、レスポンシブを多少意識することにしました。

PC画面
f:id:konoemario:20170807223712p:plain:w500


スマホ画面(実際に映像をつけているところ)
f:id:konoemario:20170807223610p:plain:w500

コントロール画面でできることは、

  • カメラモジュールの映像を見る
  • レゴカーの前進、後退
  • 右折・左折(ただし、直進は実装していないというポンコツっぷり)
  • レゴカーのクレーンを動かすことによるカメラの視点変更
  • ラズパイと同じネットワーク内で使用する場合と、外部のネットワークから使用する場合の切り替え

になります。

ラズパイを外部のネットワークから参照するには、以下を参考にさせていただきました。

qiita.com

ssh接続自体は、秘密鍵が必要なのでまだいいのですが、Webサーバーには普通にアクセスできてしまうのが現状なので、勉強がてらログインページでも作成しようと思っています。

動くもの

こちらは、以前に紹介したレゴカー第2弾のものになります。

www.tohuandkonsome.site

レゴカー

f:id:konoemario:20170808222546j:plain:w500


前回と比較して、

  • ステアリングを実装するためのサーボモータをもう少しパワーのあるものにした
  • レゴカーそのものをパーツを外して軽量化した
  • カメラモジュールの延長ケーブルを購入して、レゴカーのクレーン部分につけた

などの変更を加えました。

カメラモジュール
f:id:konoemario:20170808223844j:plain:w500

コントローラー画面からクレーンを左右に操作することで、周囲の映像を見ることが可能になりました。

クレーンが動いているところ
f:id:konoemario:20170808224101g:plain

技術的なこと

こちらも、以前書いたことがありますが、改めて整理します。

www.tohuandkonsome.site

なんとなくの全体図 f:id:konoemario:20170719083402j:plain:w500

  • node.jsでコントロール画面を作成
  • コントロール画面からsocket.ioでFlaskのWebサーバーに接続し、前進・後退等の命令を送信
  • FlaskのWebサーバーがwiringpiでラズパイのGPIOをコントロール
  • ラズパイに「mjpg-streamer」をインストールして、カメラモジュールの映像をコントロール画面表示

コントロール画面:node.js

コントロールする画面は、node.jsを使いました。

node.jsにした理由は、socket.ioを使いたかったからです。

また、node.jsをそのまま使ってももちろんよかったのですが、なんとなくフレームワークのexpressを使うことにしました。

expressを使うことで、テンプレートエンジンという言葉にぶつかり、せっかくなのでjade(pug)を使うことにしました。

express、jadeに関しては、以下で触れました。

www.tohuandkonsome.site

www.tohuandkonsome.site

ただ、socket.ioに関してはPythonのFlaskでも普通に使えるみたいなので、コントロールする画面含め、全てFlaskで作ってもよかったです。

コントロールする画面に関しては、以下のリポジトリに管理しています。

github.com

自分のためにも、READMEはこれから更新します。

ラズパイのGPIOを制御する機能:Flask

こちらに関しても、以前触れたことがあるのであまり書くことがありません。

www.tohuandkonsome.site

機会があればDjangoでsocket.ioを使ってみたいです。

リポジトリは以下で管理しています。

こちらも、READMEを更新します。

github.com