使い方
-
初期化ボタンを押します。
このボタンを押すと、フォントファイルを含んだWebAssemblyファイルがダウンロードされます。
WebAssemblyファイルは約2MB程度とかなり大きくなっています。WiFiに接続していない状態での押下には十分注意してください。
-
各種パラメータを設定します。
以下は各種パラメータの説明です。
-
基本設定
- 幅: 方向幕データの幅サイズを指定します。実車の場合は32の倍数になっていることが多いです。
- 背景色: 方向幕データの背景色を指定します。
- 文字色: 方向幕データの文字色を指定します。
- 英字色上書き: 方向幕データの英字部分に適用する文字色を指定します。チェックを外すと日本語部分と同様になります。
- 縁取り: 方向幕データの文字に対して縁取りを行うかどうか、また縁取りの色を指定します。
-
行先設定
- 行先(日本語): 日本語で表示する内容を指定します。24pxゴシック体で表示されます。
- 字間: 行先(日本語)で指定した文章の字間を指定します。
- 行先(英語): 英語で表示する内容を指定します。7pxゴシック体で表示されます。
- 明朝体モード: チェックを入れると日本語部分が明朝体で表示されます。
- プリセット: 背景色/文字色/縁取りのパラメータを簡単に指定することができます。
-
グラデーション
- 背景のグラデーション(試験的): 背景のグラデーションを有効にするかを指定します。チェックをつけると背景色の設定が上書きされます。
- グラデーション方向: グラデーション方向をしています。"横方向"を指定すると左側から右側に、"縦方向"を指定すると上側から下側にグラデーションされます。
- グラデーション設定: グラデーションの位置や色をしています。下記で詳しく解説しています。
-
その他設定
- リアルタイム描画(試験的): 行先設定を変更するとリアルタイムで表示を変更できる機能です。試験的です。
- 日本語表示を圧縮する(試験的): 日本語行先表示がはみ出る場合に自動的に圧縮をかけます。
- ブラーを表示する(試験的): LEDの発光を再現します。
-
画像生成ボタンを押します。
初期化ボタンを押した時点で通信は全て完了しているので、押下に伴い通信が発生することはありません。
※初期化ボタンを押していない状態では画像生成ボタンは押すことができません。
-
使用用途に応じて画像を保存します。
生成された画像はご自由にお使いいただけます。
仕組み
日本語部分にGenBitmapという自家製のフォントを、
英字部分にも自家製のフォントを(現在は公開していません)使用し、SVG画像を生成し、
さらにresvgを使用してPNG画像を生成しています。
GenBitmapで使用できる文字
| 文字種 | 使用可否 |
|---|
| ひらがな | ◎ |
| カタカナ | ◎ |
| 第一水準漢字 | ◎ |
| 第二水準漢字 | △ |
◎: 使用できます。また、全ての字形に対して字形修正作業が終了しています。
△: 使用できますが、一部の字形を除き字形修正作業を実施していません。
その他源ノ角ゴシックに含まれる文字も使用できますが、字形修正作業を実施していません。
グラデーション設定について
初期は下記の通りです。
{位置}; {色} を指定したい色の分だけ記述。
例:
0%; red
100%; blue
位置
色を指定する位置を指定します。
左/上が0%、右/下100%で指定します。
色
色を指定します。
CSSカラー名(red, blueなど)や、RGB値(#fff, #222222など)が使用できます。