モニタ式の操作盤を作ろう　ボタンの画像を作る

　　HOME >> 鉄道模型工作室　> 　モニタ式の操作盤を作ろう　ボタンの画像を作る

鉄道模型工作室　　モニタ式の操作盤を作ろう　ボタンの画像を作る

　ラズパイのWebIOPi アプリを使って卓上レイアウトを遠隔操作する事になんとか成功した。　そこで、その操作画面をそれらしく改善することにした。

■　操作画面の改良

　これまでの操作画面は、既成のボタン画面を使用して来たのでイマイチ不満であった。　そこで自作のボタンを作ることにした。　使用したアプリは、Macromedia の Fireworks である。

　進行方向を操作するボタンは、以前使用したことのあるイラスト集から図形を取り出し、クリックがオンされた場合にはランプが点灯したイメージになるように、黄色のボタンとした。、右方向用と左方向用のON/OFFボタンを４個作成した。

　ポイント操作用は、単なるボタンでは面白くないので、手動転轍器のイラストとした。　大まかなイマージがあるものの、よりリアルな形状とするため、ネットで該当する写真をいろいろ検索して参考にした。　そして作成したイラストを右に示す。　転轍器標識は、定位で青の円盤、反位で黄色の矢羽根形であるとのことであった。　また、定位の青い円盤には、よきに白線が引いてあるが、中にはS字マークが記されているものがあり、何を意味するのか最初は分からなかった。　知れべてみるとスプリング式転轍器の場合はS字マークを記すとのことで、知らなったなぁ。　でも今回のイラストには採用しませんでした。

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

　これらのイラストを使って、新しく操作画面を構成した。　昔から愛用している Dremweaver を使って作成した。

　ポイント操作ボタンは左右に配置したが、レイアウトはいろいろ変更かのうである。　右半分はクリックした状態を示している。　この記述は、昔勉強したHTMLの教則本を持ち出し、クリックによって画像を変更する細工を参考にした。

■　HTMLファイルの記述

　最初に、HTMLファイルの記述を紹介する。

　************　　index.html ファイルの主要記述部　　***************************************************************************

 <body>
  <div align="center">
    <table width="300" height="190" border="0" bgcolor="#FFFFFF">
      <tr bgcolor="#006600">
        <td colspan="3"><h3 align="center" class="style1">モニタ式　鉄道模型コントローラ</h3>
        <hr></tr>
      <tr>
        <td><div align="left"><img name="img3" src="point-1.jpg" width="40" height="113" onClick="change3()"></div></td>
        <td height="56">
            <div align="center"><img src="button-2.jpg" name="img2" width="48" height="48" onClick="change2()">
			   　             　<img name="img1" src="button-1.jpg" width="48" height="48" onClick="change1()"></div></td>
        <td><div align="right"><img name="img4" src="point-1.jpg" width="40" height="113" onClick="change4()"></div></td>
      </tr>
      <tr>
        <td height="35" colspan="3"><div id="slider1"></div>
      </tr>
      <tr>
        <td colspan="3"><hr>
        <p>2021/8/12 　　ver.2.4　　　RTMRW</p>
      </tr>
    </table>
  </div>
 </body>

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

　クリックの対象となる画像にそれぞれ名前を付ける。　例　name="img3"　　次に、対応する画像番号を指定する。　例　src="point-1.jpg"　そして、クリックした場合のアクションを記述する。　例　onClick="change3()"　　このコマンドは、JavaScript に引き継がれるのである。

■　JavaScript ファイルの記述

　次に、JavaScript ファイルを記述した。　ここでは、img1 のボタンに対する記述部分だけを紹介しよう。

　************　　javascript.js ファイルの一部　　***************************************************************************

 myImage1=new Image();
 myImage1.src="button-1.jpg";
 myImage4=new Image();
 myImage4.src="button-4.jpg";

 ma=2;
 function change1(){
	if (ma==1){
		document.img1.src=myImage4.src ;
		ma=2;
		webiopi().GPIO.digitalWrite(23,GPIO.HIGH);
	}
	else if (ma==2){
		document.img1.src=myImage1.src ;
		ma=1;
		webiopi().GPIO.digitalWrite(23,GPIO.LOW);
	}
 }

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

　まず、img1 に関係する画像を指定しておく。　通常は button-1.jpg を表示するが、クリックされると button-4.jpg に変更されるので、それを指定しておく。　次に、アクションである change1() を定義していく。

　関数としての定義の前に変数 ma の値を２にしておく。　そして、関数の定義の中では、ma==1であれば、img1 の画像を myImage4.src 、即ち、button-4.jpg に変更して、 ma=2 にするとともに、webiopi().GPIO.digitalWrite(23,GPIO.HIGH) を実行するようにした。　ma が２であればこの逆の作動を実施する。　こうして、画像をクリックする度に、画像を取り換えると同時にGPIOの値を変更するつもりであった。

　　　　つもりであった？　・・・・・・・・・・・・・・・・・・・・・・・・そうです。　後から説明ますが、これは失敗作なのです！

　他の画像についても同様な記述を実施した。　そしてスタイルシートについては、ボタンに関する記述が必要では無くなったので、削除しました。

　なお、スライダー部分についての記述は、どのファイルとも、そっくり残しています。　３つのファイルの詳細を次に紹介します。

　　　HTMLファイル　　⇒　　index.html

　　　JavaScriptファイル　　⇒　　javascript.js

　　　スタイルシート　　⇒　　styles.css

　そして、ラズパイで実行されるPython のファイルについてはそのままとしました。　GPIO に対するアクションは上記のようにJavaScriptファイルで記述済みと考えたからです。　でも、これがNGでしたね。

　なお、上記のファイルは、パソコン上でも作動しますが不完全のままです。　上記の３っつのファイルが同じフォルダ内に存在すると、クリックによって画像が交代する機能は確認できますが、その他の機能は作動しません。　関係する JavaScriptファイルが不足している上に、webiopi アプリが作動している環境ではないからです。

■　テストの実施

　作動テストのため、先々回のようにLED を使って確認することにしました。

　結果は、見事にNG でした。　モニタ上でクリックすると、画像は変更できるものの、LED の反応はダンマリでした。

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

　次回は、この課題をクリアーしていこう。

ページトップへ戻る　.

　2021/8/13　作成

鉄道模型工作室 モニタ式の操作盤を作ろう ボタンの画像を作る

鉄道模型工作室　　モニタ式の操作盤を作ろう　ボタンの画像を作る