免許合宿の空き時間を利用して、ラズパイのラジコンのコントロール画面を作成してきましたが、一区切りついたのでまとめます。
ラズパイどうのこうのより、画面をつくるほうが大変だった！
つくったもの
コントロールする画面
画面のレイアウトに関してはBootstrap4.xを使用しました。
CSSの基礎は、使わないとすぐに忘れちゃいます。
今回は、スマホで見ることも意識して、レスポンシブを多少意識することにしました。
PC画面
スマホ画面(実際に映像をつけているところ)
コントロール画面でできることは、
- カメラモジュールの映像を見る
- レゴカーの前進、後退
- 右折・左折(ただし、直進は実装していないというポンコツっぷり)
- レゴカーのクレーンを動かすことによるカメラの視点変更
- ラズパイと同じネットワーク内で使用する場合と、外部のネットワークから使用する場合の切り替え
になります。
ラズパイを外部のネットワークから参照するには、以下を参考にさせていただきました。
qiita.com
ssh接続自体は、秘密鍵が必要なのでまだいいのですが、Webサーバーには普通にアクセスできてしまうのが現状なので、勉強がてらログインページでも作成しようと思っています。
動くもの
こちらは、以前に紹介したレゴカー第２弾のものになります。
www.tohuandkonsome.site
レゴカー
前回と比較して、
- ステアリングを実装するためのサーボモータをもう少しパワーのあるものにした
- レゴカーそのものをパーツを外して軽量化した
- カメラモジュールの延長ケーブルを購入して、レゴカーのクレーン部分につけた
などの変更を加えました。
カメラモジュール
コントローラー画面からクレーンを左右に操作することで、周囲の映像を見ることが可能になりました。
クレーンが動いているところ
技術的なこと
こちらも、以前書いたことがありますが、改めて整理します。
www.tohuandkonsome.site
なんとなくの全体図
- 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
