横沢電鉄LED発車標シミュレータ

1992年式(藤沢地上)用

1行目　
2行目　

　　運行状況　のりば
1本目　　
2本目　　
3本目　　

　　　　　列車　　　号数　　　行先　　　　時刻　　運行状況　空席状況
1本目　　号　　　　
　　　　
2本目　　号　　　　
　　　　

＿

このシミュレータについて

・前作のLED方向幕シミュレータを発展させて、LED表現の集大成として作ったものです。
・画像生成は前作よりも効率化し、スクロール表現についてはイチから開発しました。
・一種類の筺体では飽き足らず、複数の筺体、フォント、文字色を用意しましたので、ぜひ最新式から往年のタイプまで、横沢電鉄の発車標をお楽しみください

2024.6.20　Ver. 1.0公開

遊び方

①操作盤左上「ランダムにセット」
②操作盤右上「下記内容で実行」
あとは、各自さわって試してみてください

＿

技術メモ

1.フォント

前回は画像だったフォント情報をテキストに変更した。詳細は以下の通り

↑「黒なら0」「白なら1」で二値化し8ビットごとに16進数に変換。

24*24dotなら1文字につき144桁の文字列となる

この文字列を幅情報や高さ情報と一緒にcsvに統合。csv化によってフォントデータが増えても管理がしやすくなった

フォントのソースは下記の通り。漢字はjis第一水準まで対応

24ドットフォント（ゴシック）	Noto Sansの字形をベースにエンゼシアが作成／左記に収録されていない漢字のみNoto Sans Mediumを24dotで二値化したもの
24ドットフォント（明朝）	Noto Serifの字形をベースにエンゼシアが作成／左記に収録されていない漢字のみJFドットjiskan24h（全角文字はパブリックドメイン）
16ドットフォント	JFドット東雲ゴシック16（パブリックドメイン）

2-1.スクロール表現

前回の方向幕シミュレータでは、スクロールがある場合毎フレーム描画を行っていたが、当然のように重い処理となり致命的な問題となっていた

今回は抜本的対策を行いcssアニメーションにて実現した。例えば幅200pxのエリアでスクロールを行いたい場合、下記のような画像を生成する。

これを200pxを超える部分は隠した上で横にスライドすることで、スクロールしているように見せることができる。前回の方式と比べると描画処理が一回で済み、スクロールがカクつくことはなくなった

実際のcss（1行目備考欄）

@keyframes scrollAnime1{
　　0% { transform: translateX(0)}
　100% { transform: translateX(-100%)} /*変更部分１*/
}
#rmks1ja img{
　　display : inline-block;
　　margin : 0;
　　animation : scrollAnime1 5s linear infinite; /*変更部分２*/
}

このままではうまく動作しない。単にアニメーション範囲を0%から100%にすると、画像が完全に見切れる（画像右端が描画範囲左端まで達する）までスライドしてしまう。うまく動作しているように見せるためには、画像右端が描画範囲右端に達した時点でアニメーションをとめるようにしなければならない
つまり、上記cssの/*変更部分１*/をjavascriptで動的に計算する必要がある

//全体幅を100%として無表示部分（左）＋文章部分の割合を求める
let ratio = Math.floor((tmpcan2.width + signal[15]) / tmpcan.width * 100);
//cssを変更する
let myRules = document.styleSheets[2].cssRules;
myRules[line * 2].deleteRule(‘100%’);
myRules[line * 2].appendRule(‘100% {transform: translateX(-‘ + ratio + ‘%);}’);

次にアニメーション時間を変更する（/*変更部分２*/）

//無表示部分（左）＋文章部分を1秒あたりのスクロール量で割る
let second = (tmpcan2.width + signal[15]) / signal[16];
//cssを変更する
let myRules = document.styleSheets[2].cssRules;
myRules[line * 2 + 1].style.animation = “scrollAnime” + lineone + ” ” + second + “s linear infinite”;

2-2.javascriptからcssを変更の補足

さて、javascriptからcssを変更したいときは、個別のhtml要素の.styleプロパティからアクセスすることが普通だが、今回変更したいのはキーフレームである。個別のhtml要素からアクセスすることはできない。どうするか？javascriptから”直接” “地の”cssを変更していく。

そのためにdocument.styleSheetsやcssRulesといったプロパティがあるのだが、これが曲者かつ不便で、スタイルシートやその中のcssルールを指定する方法が”順番”しかない。
cssルールは上から数えていけば分かるが、スタイルシートの順番というのが分からない。

MDN webdocsによれば、document.styleSheetsは次の順でリストが返されるとある。

ということらしい。とりあえずこれで目的のスタイルシートを探すことができる。分からなくても、0から順番に試していけばいい。
しかし、これはつまり、何かあれば簡単に順番が変わってしまうということでもある。

例えば<head>内の<link>を増やせば、<body>内の<style>の順番は後ろになるし、ローカル環境からwordpress等の環境に上げればプラグイン等の<link>が増え、順番が変わる。

このことからdocument.styleSheetsやcssRulesを使うときの注意↓
・スタイルシートの場合は、読み込まれるスタイルシートの数が変わるときはエラーが起きないか確認を行う
・cssルールの場合は、予め順番で指定されることを予想して書く。操作したいルールは上の方に置き、順番を固定する

3.自由入力とプルダウン入力の両立

前回のled方向幕シミュレータに引き続き、今回のシミュレータの表示画像は動的に生成される。そのために入力エリアはできるだけ自由に入力できるようにしたい（例<input type=”text”>）。しかし反対に決まった内容を入力したいときは自由すぎる入力は不便・面倒であり、選択肢があった方がよい（例<form><select>）。今回は<input type=”text”>ベースとし、(＋)メニューから予め用意したテキストを追加できるようにした

4.色タグ

今回独自に色タグ（㈹赤など）を実装した。本当はxml的なタグにしたかったが断念し簡易的な実装である
1文字分の描画を行う関数内の最初で文字判定が実行される。㈹/㈵が来れば描画を中断し、次の文字（赤/青/黄…）を解釈する。その次の文字から描画が再開される。
つまり㈹/㈵がトリガーであり、㈹/㈵が付かない赤/青/黄…は普通の文字として描画される。
コピペするのも面倒なので追加ボタンを設置した。青枠のテキストボックスのカーソル位置を取得し、文章中に挿入できるようにした。

5.canvasでインセットシャドウをやる

今回、筐体の描画もcanvasでプログラム的に行っている。
筐体の描画で特別難しいことはしていないが、時計部分の影のインセット（凹んでいる表現）だけはネット上に情報がなかったのでメモしておく
canvasではドロップシャドウを付けることができるが、おそらく影のインセットを行うオプションがない。なので、回りくどい方法でインセットに見えるような画像を作っていく

まずメインキャンバスの他に別途作業キャンバスを用意する。作業キャンバスのギリギリ外でストロークを描き、それにドロップシャドウを付ける。この作業キャンバスを、メインキャンパスにdrawImageで貼り付ける
線の太さを意識して座標を考えるのが面倒である。デメリットとして、角Rをつけていると角にストロークの色がついてしまう。ストロークの色を透明にすれば良いと思ってしまうが、そうすると、そもそもシャドウが付かない。今のところ改善策なし

＿

LED部詳細オプション(開発用)

＜注意＞設定によっては描画負荷が大きくなります

ベースカラー	透過次の色で描画　 #
電球サイズ	inputイベントで値を表示px
電球間隔	inputイベントで値を表示px
電球ガンマ補正	inputイベントで値を表示
フレアガンマ補正	inputイベントで値を表示
フレア強さ	inputイベントで値を表示
枠の太さ	inputイベントで値を表示px
枠の色	#
消灯されたLED (#000000)の対応	描画を行わない次の色で描画　 #
#000001の対応	描画を行わない次の色で描画　 #
スクロール速度	inputイベントで値を表示px/s
文字間隔

＿

横沢電鉄発車標シミュレータ

筐体タイプ

フォント

カラーモード

色変更タグ

筐体印字

現在時刻

1行目

2行目

3行目

4行目

接近表示