2021/12/15 よりサイトリニューアルしました

Raspberry piで2足歩行ロボットの作成②「webiopiでブラウザからi2c制御してPCA9685でサーボを動かしてみる」

サーボ画面

前回、Adafruit.PCA9685ライブラリを使ってPythonでサーボを動かしてみました。↓

 

今回は次のステップ、「ブラウザでサーボの操作」をしてみようと思います。

ラズパイには「webopi」というWEBサーバーの機能をインストールすることができるので、それを使って、ブラウザからサーボモーターを動かす仕組みを作ります。

モーターの角度はテスト段階なので適当にしていますが、一応こんな感じで、ちゃんとブラウザからi2c制御でサーボモーターが動いています。↓

 

なお、webiopiのインストールについては過去記事でまとめているので、そちらを参考願います。↓

 

はじめに

おおまかな構成

ラズパイ2足歩行ロボ構想

ざくっとした内容ですが、今回は図のような流れでサーボモーターを動かす仕組みを作ります。

①は、ラズパイに立てたWEBサーバー「webopi」になります。これのドキュメントルートに操作画面となるHTMLを作成します。

②は、webiopi独自のライブラリが使えるjavascript(jquery)で、Pythonのマクロを実行させるプログラムを作成します。

③は、PCA9685を制御し、サーボモーターを動作させるプログラムをPythonで作成します。

それでは、順を追ってまとめていきます。

 

HTML

motor.html

ラズパイのGPIOや、その他接続したデバイスの制御(i2cなど)は、最終的にPythonで実行する事になります。

つまり、Pythonにブラウザから発生したイベントの情報を伝えなければいけません。

今回の場合は、javascripからPythonの関数を呼び出す事になります。

通常であれば、呼び出しは困難になりますが、webiopi独自のjavascriptライブラリを利用することで、それが可能になります。API的な役割を果たしてくれるんですね。

したがって、head部では、webiopi独自のjsライブラリwebiopi.jsを読み込んでいます。(このライブラリはwebiopiインストール時に自動で生成されています。)

もう1つのmotor.jsは、そのライブラリを使った「イベント発生プログラム」になります。今回は外部スクリプトとして作成します。

body部に上下左右のボタンを配置し、イベント発生の為にIDを振っておきます。

なお、画面上部にカメラ画像(ストリーミング映像)を反映させる予定なので、カメラのスクリプトを埋め込んでいます。

念のため、cssも書いておきます。

 

CSS

style.css

 

javascript

motor.js

W(){ … } で囲まれていますが、これがwebiopi独自のライブラリを使用しているという事になります。

記述はjqueryになります。

HTMLボタンを押せば、bind関数で前後左右の、押したボタンの情報がwebiopi().callMacro(引数)によってPythonへ引き渡され、引数の名前がPython側で関数として実行されます。

 

Python

macro-pwm.py

先頭でwebiopiのライブラリをインポートしています。これが無いと正常に動作しないので、必須です。

なお、Adafruit.PCA9685のライブラリを使用していませんが、これはwebiopiでは使えないからです。

webiopiでは、PCA9685デバイスを使用する場合、別途専用のライブラリを用意しているので、それをインポートして使います。deviceInstance ですね。

@webiopi.macroの部分が、javascriptからの呼び出し部分になります。

したがって、この部分に前後左右の関数を作成します。サーボモーターを動かしている部分ですね。

Adafruit.PCA9685のライブラリを使用していないので、記述が前回と異なっています。

ちなみにpwmWriteAngleの引数は、第一引数がサーボのチャンネルで、第二引数が角度になります。今回はとりあえず動作テストなので、設定は適当にしています。

deviceInstanceのライブラリを使用しているので、それに見合った記述が必要ですが、webiopiのチュートリアルに詳細が色々載っているので、そこから引用すれば問題ないかと思います。↓

http://webiopi.trouch.com/PCA9685.html

 

その他修正

webiopiは設定が色々面倒で、今回のような場合だと他にもいくつか修正しなければこのままでは使えません。

それでは最後に、修正する部分を順にまとめていきます。

WebIOPi追加設定

WebIOPiのコンテンツは一般ユーザーでは編集できないので、編集が可能になるように、ターミナルでホームディレクトリ配下にWebIOPiのディレクトリを作成します。

インストール済みのWebIOPiのサンプルファイルを先ほど作成したディレクトリへコピー。

次に、html,css,javascript,pythonの先ほど作成したプログラムを格納するディレクトリをwebiopi配下に作ります。名前は自由ですが、今回は「motor」としておきます。(作成後、格納しておいてください。)

ドキュメントルート(公開サーバ)の変更。コンフィグファイルを開きます。※2019年7月以前のOSを利用している場合は「leafpad」で開きます。

#doc-root、、、の記述部分を、以下のように変更します。

マクロを記述したプログラムを読み込ませる必要があるので、【SCRIPTS】セクションに、macro-pwm.pyのプログラム名を以下のように1行付け足します。

最後に、[DEVICES]の項目にある以下の行のコメントアウトをはずします。

これを有効にしておかないと、PCA9685がWebiopiで動作してくれません。

以上です。

動作テスト

ターミナルからwebiopiを立ち上げます。

後はラズパイのwebサーバにブラウザでアクセスします。↓

ラズパイのIP:8000/motor/motor.html

初期パスワードは「webiopi」「raspberry」になります。

問題なければ、下記画面のようになり、操作も可能なはずです。

サーボ画面

※カメラについては、mjpgstreamerを利用していますが、過去記事にてまとめているので、起動のしかたはそちらで確認願います。(カメラモジュール必須です)↓

次回から地獄になりますが、モーションの作成などに取り掛かりたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です