HOME >> 鉄道模型工作室 >  モニタ式の操作盤を作ろう WebIOPi アプリを使う

鉄道模型工作室  モニタ式の操作盤を作ろう WebIOPi アプリを使う

 今まで実施してきた卓上レイアウトの制御について、ラズパイのWebIOPi アプリを使って遠隔操作し、パソコンやタブレットの画面から操作することにした。 このため、以前参考にしたラズパイの操作方法を再度勉強する。

 

■ 再勉強です

 4年前に参考にした「RaspberryPiで学ぶ電子工作」(講談社、ブルーバックス B-1977、2017年2月1日 第2刷)を持ち出し、第9章の WebIOPiを用いたPCやスマートフォンとの連携を、最初から読み直すことにした。

 説明に従ってWebIOPi などのアプリをインストールし、所定の設定を実施した。 そして、デモアプリケーションを実施する。

 デモアプリは、上左の写真のようにGPIOの配置図が表示され、ポートボタンをクリックすることで、ポートのIN/OUTHIGH/LOW が指示できるものでした。 さらに、パソコンからもアクセスすると上右の写真のように、同じ画面が表示できました。 なお、我家のLAN環境は、光回線にてインターネトに繋がり、無線LANルータを使って、家庭内での Wi-Fi 環境を構築しています。 構築といっても線を繋いでいるだけですが・・・・・・・・・・。

 ラズパイの出力部にブレッドボードを使ってLEDを配置し、モニタ画面からのクリックによってLEDが、点灯や消灯するのを確認できました。

  .

 このWebIOPiを用いた方法は上々の結果でしたので、そのアプリの中身を覗いたのですが、部分的には理解出来るものの、これまた複雑怪奇な内容でお手上げの状態でした。 多くのポートを制御する必要があったので、ゴチャゴチャとした記述になっていると考えます。

 そこで、デモアプリではなくて、演習例と示されたサンプルファイルに取り掛かることにしました。 幾つかの例の中から参考としたい例題である、ひとつのボタンを使ったLED点灯制御(例1)や、スライダーを使った明るさ制御(例3)について、その実施例を参考にすることにしました。

 

■ ボタンとスライダーの制御方法のサンプル

 サンプルファイルをもとに教則本の説明文に従って作動させました。 注目したのは、事例1(01フォルダ)の「ブラウザのボタンによるLEDの点灯」と、事例3(03フォルダ)の「ブラウザのスライダの利用〜RGBフルカラーLED」です。 そして、これらのフォルダの中にあった4種類のファイルをプリントアウトして、中身を理解すべく記述内容を追っていきました。 4種類のファイルは、

  1. ウェブページを記述したHTMLファイル ⇒ index.html
  2. スタイルを記述したCSSファイル ⇒ styles,css
  3. 処理を記述したJavaScriptファイル ⇒ javascript.js
  4. ラズパイ内の処理を記述したPythomファイル ⇒ script.py

   .

です。 そして、このフォルダの中には js と言う名のもう一つのフォルダがあり、その中にはJavaScriptファイルが幾つかはいっていたものの、中身はゴチャゴチャで、全く理解できませんでした。 処理に必要なバックヤードと解釈し、探求するのを止めました。

 それぞれのファイルは、A4用紙一枚に印刷できる程度の簡単な内容でしたので、関数名を主体に作動経路を追って行き、何をしているのかをやっと理解する事が出来ました。  @のデコレータ$マークの jQuery のショートカットなどもネットで調べて理解しました。 スライドは jQuery のアプリを使っているようで、始めてこのソフトの存在を知った次第です。 ・・・・・・・・・・・・・・・・・遅れているぞ!

 

■ モータドライバの制御

 上記の内容を少し理解出来たので、ボタンの処理方法やスライダの使い方の例を参考にして、モータドライバを使ったLED制御を実施してみる事にしました。 その回路構成を下の写真に示します。

 何を考えているかお分かりと思います。

 そうです! 給電制御の基本形を作ろうとしているのです。 モータドライバはTB6612 を使用したDual DCモータドライバキット(秋月製)を使用しました。

   *******************************************************************************************

 IN側はGPIOの出力ポートに接続し、出力側の電源はラズパイの5ボルト出力を使用して二つのLEDを点灯させるものです。 ドライバの入力は方向切替用の二つのポートとPWM信号入力用のポートが必要です。

  .

 PWM信号はスライダ操作により発生した値にに従ってヂューティ比を決め、GPIOポートから出力させます。 また、方向切替はボタン操作を使って制御しようと考えました。 ただし、今回はボタンをひとつにし、LEDのON/OFF制御と明るさ調整を実現しようとするものです。

 これは、ボタン操作とスライダー操作の記述と処理方法は異なっているため、単なる追加記述だけでは対応できない事を先回の失敗事例より学びました。 その心配があったので、今回はこの合体方法を検討したかったのです。

 まず、ボタン方式の事例1の場合と、スライダー方式の事例3の共通点と相違点をチェックしました。 その結果、基本的には同じ構成でしたので、まず一安心しました。

 次に、事例1の内容をそっくりコピー・ペーストしてフォルダ21を作りました。 そして事例3の記述内容を見ながら、不足している場合には、その内容を追加して行きました。 勿論、不要と判断した記述は削除して行きました。 例えばスライダの本数を1本にしたことや、コメント行などは削除しました。

 そして、プログラムを走らせた結果、ブラウザに表示された画面を右に示します。

 操作は、パソコンから実施しましたが、タブレットからでも操作出来ました。 ボタンのON/OFF に合わせてLEDが点灯し、かつ、スライダーの操作によって、その明るさを変える事が出来ました。

  .

 ここまで来て、初めて出口が見えた気がしました。 

 給電制御の基本形に目途がついたのです。

 これを参考にして手を加えて行けばどんどん改良できる自信が湧いてきました。

 

         *********************************************************

 

■ ファイルの構成について

 今回のファイルの構成を紹介しておきます。 HTMLファイルの作成や編集は、ホームページを作成しているPC上でしか実施できませんので、関係ファイルはPC上で作成と編集を実施しています。 JavaScriptファイルPythomファイルの記述はテキスト形式なのでメモ帳を使って編集しています。 記述が完了したら、USBを使ってラズパイにコピーして、WEBサーバーを起動させ、その作動をチェックしています。 記述ミスなどはラズパイ上で可能な部分は、勿論、ラズパイ上で実施しました。

 まず、フォルダ21の構成を下に示します。

 ファイル名だけ見ると、どのフォルダも同じにしています。 これは、ファイル名を参照した記述の部分を、いちいち変更したくなかったからです。 変に変更すると関係する記述部分を全て変更しなければならないからです。 フォルダ単位でひとつの構成になるようになっているため、同じファイル名を使用しても問題ないのです。 勿論、フォルダが異なるとファイルの名前は同じでも内容が異なっていますので、注意が必要ですが・・・・・・・・・。

 次に、このフォルダ内にある js というフォルダの中を見てみましょう。

 事例1では require.js と言うファイルだけの構成でした。 事例1と事例3のこのファイルは同じサイズだったので、同一ファイルと判断しました。 あとのファイルは事例3に存在していたファイルなので、スライダー関係のファイルと判断し、そっくりこちらにコピーしました。

   ***********************************************************************

 次回は、これらのファイルの中身や、さらに発展させた フォルダ22 を紹介しましょう。

 

ページトップへ戻る .


 2021/8/9 作成