HOME >> 鉄道模型工作室 >  新しいモニタ画面を作る その1

鉄道模型工作室  新しいモニタ画面を作る その1

 Processing を使った運転台コントローラを作るため、まず操作するモニタ画面から手を付けた。 最初は、スイッチやレバーの動きの動作確認から取り組んだ。

 

■ モニタ画面のデザイン

 まず、使用するパソコンを中古のノートパソコンとすることにし、この画面をいっぱい使って表示させることにした。 画面サイズは 1280×800 ピクセルとなる。 さらに、配置するスイッチやレバー、あるいは表示する計器などは、移動体の電車の運転台だけでなく、鉄道模型のコントローラとして、ポイントの制御や出発信号機の制御など、固定側となる駅設備の制御も含める必要がある。

 このために、考えたのが下のようなデザインです。 原画のサイズは、 1280×800 ピクセルとしてモニタ画面全体を覆う形になります。

 最初は背景として何も表示していませんでしたが、あまりにも寂しいので、あるサイトから写真をパクッテきて、ぼかしながらその一部を活用させて頂きました。 運転台に相当する部分は右上の枠内に収めるように配置し、ポイントと出発信号機のスイッチは下の方に配置しました。 また、クラクションは運転台側に配置するべきですが、いろいろな車両の音を使うつもりで、右下の部分にボタンを配置しました。

 これらの描画は、Macromedia Fireworks MX 2004 を使っています。 ボタンのエンボス加工とかグラデーション描画などを使って、すこし恰好を付けていますが、でも野暮ったいデザインとなっています。 才能の無いおじんの作品ですので・・・・・・・・・・・・!

 このアプリは、レイヤー構成が可能なため、背景と操作レバーなどは分離しています。 モニタ画面の背景として使用する画像は、移動表示させるレバーなどの画像は在っては意味がありません。 そこで、これらの要素を消し去った画像も用意しました。

 拡大図

 この画像を背景画としてモニタに貼り付け、レバーなどの要素をこの上に描画していく事になります。 このために使用する画像を右にしめします。 手動転轍機の画像は、スマホ用に作った時の画像をそのまま活用しています。

 画像のファイル形式は PNG 形式を使用しています。 一般的な JPG 形式を使用すると、余白部分を透明化することが出来ませんので、背景画に溶け込むことができないからです。

 

■ Processing での記述方法

 最初に懸念したのが、転轍機の画像を取り換える方法です。 ホームページ記述用のHTML方式では、JavaScript を使って容易に画像を取り換えることができたのですが、 Processing ではどうのような方法があるのか探しましたが、参考となるサイトは見つかりませんでした。 諦めて自分で検討することにしました。

 画像類の準備が出来ましたので、今度はノートパソコンでの Processinng での記述作業になります。 その作業を始めて驚いたことに j や k を入力すると数字が表示されるのです。 変だなと思って再起動させたのですが、やはり狂ったままです。 回りの幾つかのキーも同様でした。 キーボードのどこかな回路が切断、あるいは接触不良を起こしたようでした。

 そこで、中古品であるノートパソコンのキーボードの使用を諦め、ラズパイで使用していたこれも中古のキーボードを持ち出して応急処理です。

import processing.serial.*;
PImage panel,tenA,tenB;

void setup() {
  size (1280,800);
  panel=loadImage("controller1.jpg");
  tenA=loadImage("chokusin.png");
  tenB=loadImage("bunki.png");
}

int mox;
int moy;
int ten1= 0;

void draw(){
 image(panel, 0,0);
 
///入力確認
  mox=mouseX;
  moy=mouseY;
  if (mousePressed){
    if (mouseButton==LEFT){
      if (moy>720){
        if (30<mox && mox<90){
          if (ten1 == 0){
             ten1=1;
             delay(100);
          } else {
            ten1=0;
            delay(100);
          }
        }
     }
    }
  }
  
////アクション開始
  if (ten1 == 0){
     image(tenA, 20, 520);
  } else if(ten1==1){
      image(tenB, 20, 520); 
  }
  delay(50);
}

 まず、転轍機の画像を取り換える方法として、右のような構文を考えて記述してみました。 画像の設定方法などは、サンプルプログラムに倣って記述しました。 画像を表示させることは出来ましたが、クリック動作と同時にアニメのように、画像がクルクル変化するのです。

 これは、プログラムの回転サイクルが早いためと判断し、最終行にある遅延命令の値を大ききくすると、今度はクリックして反応が無い場合が多発しました。 クリックのタイミングとプログラムのサイクルがアンマッチなのです。

 アルゴリズムを代える必要があったのかも知れませんが、入力確認サイクルのなかに、delay(100) を挿入する方法を実施しました。 一度クリックが引っかかると、しばらく待たせるその場しのぎの対策です。 プログラムの回転サイクルを待たせると言うことは、後日検討する加速時や減速時の動きに影響することになるのですが、影響は少ないと判断することにしました。

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

 次に、信号機の制御です。

  if (sin1 == 0){           //本線出発信号機作動
    fill(#FF0000);
    ellipse(420,620,30,30);
  } else if(sin1 ==1){
    fill(#00FFCC);
    ellipse(420,670,30,30);
  }

 こちらはボタンの入力処理は同じように実行し、表示結果は、色のついた円形を表示させる処理を行います。

 停止であれば赤色で上のランプの位置に、進行であれば青緑色で下のランプの位置に表示させるのです。 転轍機と同様に、同時に点灯させることの無いように配慮しています。、

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

 厄介なのは、レバーの表示です。 クリックする場所とそれに合わせたレバーの移動が必要なのですが、これも、サンプルプログラムの処理方法を参考にさせていただきました。 手順として、

  1. マウスをクリックした時、マウスの位置を検知するゾーンをチェックする。
  2. その時のマウスのY座標を配列( vol[ ] )に読み込む。
  3. その値をトリミングする。
  4. その値を整数化したり、ゼロ点などの補正し、配列( vol1[ ] )に読み込む。
  5. レバーの表示位置を計算する。
  6. 計算値によって、新たにレバーを表示する。

を実施するように記述しました。 なお、Y座標の初期値は最初に決めておき、あらかじめ配列の初期値として設定しています。 すると、アプリが立ち上がった時にはこの位置にレバー類が表示されます。

 これらの記述に際しては、図形の詳細な座標データが必要です。 これも、先回と同様に、Fireworks を使って図形の大きさや座標値を、ひとつずつ読み取っていきました。

 緊急ボタンも同様に設定していました。 ボタンのクリックを感知すると、マスコンレバーが最大制動位置に来るように記述しました。

 操作の必要な要素類を一通り設定出来ました。 この時のスケッチを下記に紹介します。 前回と同様にProcessing の拡張子がサーバーを通りませんので、txt形式の拡張にしてリンクを貼っております。 実際に使用する場合には、拡張子を pde に変更して使用してください。 この様にしても、ファイルの中身はテキスト形式で記述しているので影響ありません。

     test_54.pde ファイルのテキストファイル ⇒ test_54.txt

 画像データ等は、このページで紹介している画像を上記のファイルと同じフォルダに保存して使用してください。

 

■ 今後の予定

 まずは、自分のデザインによるモニタ式のコントローラの操作画面を作成することが出来ました。 次のステップとして、機器を制御する Arduino へ送信するための、シリアル通信データを検討する必要があります。 入力操作情報をもとに、給電のためのPWM制御用デューティ値をどうやって計算していくか、その処理アルゴリズムを検討することにしましょう。

 そして、その結果を速度計に表示する処理も必要ですね。

ページトップへ戻る .


 2021/9/19 作成