HOME >> 鉄道模型工作室 > モニタ式の操作盤を作ろう スライダを改良する
ラズパイのWebIOPi アプリを使って卓上レイアウトを遠隔操作するプロジェクトを進めてきた。 そして、実際の卓上レイアウトにてその機能を確認した。 このままでも充分に使用できますが、速度調整のスライダが、そっけない感じでイマイチ不満です。
.
■ スライダのデザイン
.
鉄道模型のコントローラを作ろうとしていますので、速度制御用のスライダは、マスコンなどを想定しますよね。 ところが、先回作成した画面のスライダ(左の図)は何の工夫もありません。 このスライダは、jQuery と言う JavaScript のライブラリを使用しており、ボタンの部分の図柄を変えたいと思っても、何処をどの様にいじれば良いのかさっぱりわかりませんし、スライダの溝の部分も不満です。 そこで、この既成のスライダを止めて、独自のスライダを作る事にしました。
**********************************************************************
そこで、右に示すようなイラストをデザインすることから始めました。 スライダ部を背景画とし、ハンドル画像をその上に載せて、上下にスライドさせようと考えたのです。 下に動かせば加速し、上に動かせばブレーキとなるワンハンドル方式です。
画像を重ねる方法はいろいろな手法があると思います。 <div> </div>のタグを使って画像位置を指定する方法があるようですが、自分の知力では自信がないため、テーブル方式で実行することにした。 テーブルのセルの中に背景として描き、その中にハンドルの絵を配置し、そのハンドルの図を動かそうと目論みました。
.
イラストの作成まではスイスイでしたが、ハンドル部分の動かし方がイマイチ分かりません。 そこで、10年以上も前に勉強した教則本(左の写真)を引っ張り出してきて、画像を動かす方法を探しました。 HTMLファイルの記述方法、スタイルシートの記述方法、さらにJavaScript の記述方法などを探しましたが、どうも上手く行きません。 そこで、さらにはネットにいろいろ紹介されている方法を試しましたが、すんなりとは行きませんでした。
ハンドルが左右にずれないためには、Y方向だけを変化させればよいのですが、背景図の枠外からの飛び出しも防止しなければなりません。 これは、Y座標の値を制限すれば解決できると読んでいたのですが、この座標値をどうやって把握するのかが一苦労でした。
あるサイトの例では上手くいったのですが、ハンドルを離す時の処理で問題が生じてしまいました。 ハンドル以外の場所でクリックすると、ハンドルが離れてくれませんでいた。 こうなると、画面をリセットするしか、対応できまえんでした。
いろいろ試して見たのですが、サイトで説明されていたコマンドは、昔の本には書いてありませんでした。 辞書のような本でさえも書いてありません・・・・・・!。
10年以上も経過すると、これらの記述方法やコマンドも進化して、昔の知識では対応できないと悟りました。 基本は同じとしても、記述方法は進化しているのだ。
そして、ハンドルをつまんで動かす方法は、我が技量では対応できないと考えて、スライダ方式を諦めました。
■ メータ方式での挑戦
.
そこでスライダ方式に代えて、メーター方式に変更しました。 電車の運転台のイマージからは外れてしまいますが、アップとダウンのボタンを押すと速度が調整でき、その時の状態を計器上に赤いポインタで示そうとするものです。 操作するボタンの位置は変わらないので、ハンドルの位置を読み取る必要はありません。 内部で計算する変数に従って、ポインタを表示すれば簡単であろうと考えたからです。
しかし、画像位置を指定することはできたものの、ボタンとポインタの連携が出来ませんでした。 どこかの記述方法が間違えていたり、最新式にマッチしていないと判断し、日付の新しい説明サイトやコメントを探しました。 そして、やっと分かりよいサイトを見つけました。
YAHOO!知恵袋の「JavaScriptを利用して画像の移動をさせたい」でした。 2012年の情報でしたが、自分の疑問にピッタリでした。
.
このアドバイスに従って実行すると、ポインタは見事に動くようになりました。 こうして作成したモニタ画面を右に示す。
次に この記述内容の要点を説明しましょう。
● HTMLの記述内容
メータ部分を表示する ”行” の部分だけ取出しました。
<td height="40">
<img name="img7" src="up.jpg" width="60" height="40" onClick="change5()"></td> <td height="40" background="keiki.jpg">
<img id="img9" src="pointer.gif" width="11" height="12"
style="position:absolute;top:220px;left:83px;"></td> <td height="40">
<img name="img8" src="down.jpg" width="60" height="40" onClick="change6()"></td>
● スタイルシートの記述内容
スタイルシートは操作画面の背景色とタイトル部の文字の設定しているのみで、メータ部の記述には関係していません。
● JavaScript の記述
今回苦労した部分です。 関係する部分を抜き出して説明します。
var x = 92; var pointer_v = document.getElementById("img9"); style="position: relative;" ; pointer_v.style.left = x +"px";
function change5(){ if (250 <= x ){ x = x ; pointer_v.style.left = x +"px"; var ratio = (x - 82)/168; webiopi().pulseRatio(18, ratio); } else { x = x +5 ; pointer_v.style.left = x +"px"; var ratio = (x - 82)/168; webiopi().pulseRatio(18, ratio); } }
今までのスライダに関する記述部分は必要なくなったので、jQuery に関する記述は削除しました。 不明な部分はそのままにしています。 この三つのファイルについて、今回もテキスト形式の拡張子に書き換えて紹介しておきます。
また、JavaScript 側のラズパイに対する出力コマンドは、何も変更していませんので、ラズパイ側は何も変更する必要は無いと判断し、そのまま修正無しで実行する事にしました。
●作業中に会得したノウハウ
今回の作業中に気が付いたことをメモしておきます。 今回、戸惑ったことにひとつに、文法ミスに対する警告が無いので、記述が正しいのか間違っているのかが分から無かった事です。 どこが悪いのか、間違っているのかを知る事が改善の一歩なのですが・・・・・・・。
今回自分が実施した方法は、まず、今まで問題のなかったファイルを基にして、記述を少しずつ加えたり変更していきました。 そのたびに、ブラウザに表示させ、今まで作動してしていた部分、例えばポイントを操作するクリックが動くかどうかをチェックしていました。
どこか、一ヶ所でも間違いがあると、正常であった部分も動かなくなるので、記述のOKか、NGかをその場で確認出来ました。 ちなみに作業に使っていたアプリは、メモ帳や古いWeb 編集ソフトです。
どちらも 2004年リリースの古いアプリですが、使い易いので今でも愛用しています。 幸い、Windows10 でも問題なく作動しています。 ホビーで使用するだけなので、高い費用をかけて新しいソフトに買い換えるニーズは全くありません。
■ 卓上レイアウトでの作動確認
新しいバージョンをラズパイにセットして、卓上レイアウトで新しい操作画面の機能確認を実施しました。
心配した給電コントロールはスムースに実行出来、何のトラブルもありませんでした。 このことは、関係コマンドが正常に作動していると判断しました。
やったー! 合格です!
でも、ひとつだけ気になる点は、心配していた赤いポインタの位置が少し高くなっている事でした。 そこで、ブラウザによる違いを検証してみました。 作業していたパソコン上には、Google のChrome と Microsoft の Edge がありましたので、同じファイルにアクセスして表示される画面の違いを比較してみました。
やはり、違いがありますね。 また、斜体文字に指定したタイトル文字もEdge には反映されていません。 自分で使用するアプリなので、それに合わせておけば充分なのです。 よってこれらの違いは問題ないことにしておきましょう。
**********************************************************************************
今後の改良点として、必要に応じて制御するポイントの数とか、給電ポイントの増設などが考えられます。 しかし、これらの増設は操作画面のデザインの問題で、記述部分はただ同じ様に追加するだけなので、問題なく対応できると考えています。
このため、今回のプロジェクト、ここで完成した事にしましょう。
追伸: 先日、大学1年生のR君が来てくれました。 さすが若い人はすぐに使いこなしていました。 彼は今 Python を勉強しているとの事でしたので、こっちも負けないように頑張るつもりです。 昔は まずFortran からでしたが、今は時代が変わりましたね。
2021/8/21 作成