Online Meter Gauge Drawer - 素材・ツール | BVE Workshop

Online Meter Gauge Drawer

公開

概要 / Outline

"Online Meter Gauge Drawer"は速度計、タコメーター、電流計、圧力計といった円形計器画像を作成可能なアプリです。こちらはブラウザ上で動作するWebアプリとなっております。まずはページ下部の「 使い方」をご覧ください。

"Online Meter Gauge Drawer" is designed for drawing round-shaped gauges (or meters) such as speedometers, tachometers, ammeters, pressure gauges, and so on, on your browser. See the " Usages" section at first.

計器キャンバス / Gauge Canvas

  • 設定コピー / Copy configuration
  • 設定貼り付け / Paste configuration
  • 設定クリア / Clear configuration

  • 全て描画 / Draw all
  • 全て隠す / Hide all

  • 全て展開 / Expand all
  • 全てたたむ / Collapse all
  • 他をたたむ / Collapse the others
(実験的 / Experimental)

解説

更新履歴

2017-12-24 初版公開

動作ブラウザ

Google Chrome 63, Firefox ESR 52, Firefox Developer Edition 58, Internet Explorer 11で動作を確認しています。

ライセンス

Online Meter Gauge Drawer自身には MITライセンスを適用します。一方、生成された計器画像データの著作権はその制作者に属し、その使用に一切の制限はありません。

使い方

基本的な使い方

計器形状をプリセット(Gauge Presets)から選びます。

計器キャンバス中の各設定値を変えて計器形状を変更します。各図形は設定項目の配置順にしたがって(レイヤーで例えるなら最上部の図形が最下層相当)描画されることに留意してください。

編集が終わったら"Download Image as SVG"ボタンから計器画像を保存します。保存形式はベクタ形式(SVG)となります。もしラスタ画像(PNG形式やBMP形式など)が必用な場合は、別途 Inkscapeなどのベクタ画像を扱える画像編集ソフトで変換を行ってください。

言語切替

設定領域の言語は設定領域上端より切り替えられます。

色設定

当アプリにおいては、図形の色は3桁もしくは6桁の16進数文字列で定義します。 ウェブカラーとは少し異なり、頭の「#」は不要です。また、 X11の色名称で定義されている単語を入力しても無視されます。

目盛間隔

ここには目盛間隔のカスタマイズに使用する、入力値と指示角度の関係を Real Analog Gaugeと同様の形式(一列目が値、二列目が角度)で複数記述します。角度は運転台パネルファイルと同様に、12時の位置を原点とし時計回りが正となる度数法単位で表します。計器描画のためには最低二つの組の定義を必要とします。

以下に「HITACHI 1kA」の計器プリセットに含まれている上記の関係をグラフ化して示します。

Online Meter Gauge Drawer Scale Profile Sample

データ形式はCSV(カンマ区切り)とTSV(タブ区切り)への両対応です。したがって、表計算ソフトから直接データをコピー&ペーストすることが可能です。これらの形式は入力時に区切り文字の出現数比較により自動判別されます。

三つ以上の組を指定して目盛間隔の不等な計器を作成した場合、BVEで正確な指示値を指すためには拙作ATSプラグイン Real Analog Gaugeが必要になります。

右クリックメニュー

Online Meter Gauge Drawer Context Menu

設定コピー

図形設定をコピーします。

設定貼り付け

コピーした図形設定を適用します。

設定クリア

図形設定を初期化します。

全て描画

図形グループの図形すべてに「描画」チェックを入れます。

全て隠す

図形グループの図形すべての「描画」チェックを外します。

すべて展開

全ての図形設定欄を表示します。

全てたたむ

全ての図形設定欄を非表示にします。

他をたたむ

現在の図形グループ以外の設定欄を非表示にします。

画像のラスタ化

当アプリはベクタ形式でしか画像出力が行えないため、PNG形式やBMP形式に代表されるラスタ画像が必要な場合は他アプリで変換しなくてはなりません。以下にフリーウェアの Inkscapeを利用したラスタ画像化手順を紹介します。

Inkscapeでベクタ画像を開き、「メニュー > ファイル(F) > PNG画像にエクスポート(E)」をクリックします。

InkscapeのPNG画像にエクスポートを選択

一部の図形だけ出力したいときはレイヤー一覧を表示させた後に、不要な図形が含まれるレイヤーを非表示にします。

Inkscapeで不要なレイヤーを無効化する

「PNG画像にエクスポート」設定中でエクスポート領域に「ページ(P)」を選択し、また「画像サイズ」と「ファイル名(F)」を必要に応じて変更した後、「エクスポート(E)」ボタンを押すと画像がラスタ形式で保存されます。

Inkscapeでラスタ画像出力

計器形状データの保存

「Download Profile as JSON」ボタンより編集した計器形状データを保存することができます。ただし、現時点ではプリセット以外の任意の計器形状データの読み込みには非対応となっております。これは将来のアップデートにて修正の予定です。

Instructions

History

2017-12-24 First release

What Browsers This App Runs on

I confirmed that this app can work on these browsers: Google Chrome 63, Firefox ESR 52, Firefox Developer Edition 58, and Internet Explorer 11.

License

I apply the MIT License to "Online Meter Gauge Drawer" itself. On the other hand, you do have copyright of the generated image from it, therefore you are free to use your generated one.

Usages

Getting Started

Choose a preset from "Gauge Presets". Let's learn from its configurations how gauge shapes are modified.

Modify shape of the shown gauge by changing values in the " Gauge Canvas" section. Note the shapes are drawn in order of their configurer arrangement.

When the editing has done, you can get the image as SVG(Scalable Vector Graphics) from the "Download Image as SVG" button. If you need a rasterized images, use other vector image friendly graphics editors such as Inkscape, to rasterize.

Change Language

You can toggle language of the configuration area from its top.

Color Setting

In this app, color of each shape is defined by three-digit or six-digit hexadecimal form. Note it is a little different from Web Colors: a leading number sign is not needed, and also, when a word defined in X11 Color Names is input, it is ignored.

Scale Profile

"Scale Profile" is used for scale division customization. Set relationships between input value and pointing angle, which is the same as gauge configurations in Real Analog Gauge. Values are described to the first column, angles to the second. The angular value is measured clockwise from 12 o'clock, and the unit is degree; this definition is equal to what is used in Bvets Instrument panel file. At least two pairs of the relationship are necessary to define gauges.

Here is chart of the relationships used in "HITACHI 1kA" preset.

Online Meter Gauge Drawer Scale Profile Sample

You can input the profile by two forms: CSV(Comma Separated Values) and TSV(Tab Separated Values). Therefore, you can directly input data copied from spreadsheets. The format is automatically selected by separator count comparison.

Bve Trainsim primarily can point to scales at regular intervals. If you set over two pairs there, the interval of generated scale is not even; therefore if you want to use the image for Bve Trainsim add-ons, I recommend you to include my ATS plugin " Real Analog Gauge" in your add-ons.

Context Menu

Online Meter Gauge Drawer Context Menu

Copy configuration

Copy the shape configuration.

Paste configuration

Apply the copied configuration to the shape.

Clear configuration

Initialize the shape configuration.

Draw all

Check all "Draw" checkboxes which belong to the shape group.

Hide all

Uncheck all "Draw" checkboxes which belong to the shape group.

Expand all

Expand all shape configuration inputs.

Collapse all

Collapse all shape configuration inputs.

Collapse the others

Collapse all expect the clicked shape group.

Image Rasterization

Unfortunately, this app only exports a vector image, so you need to use other apps if you want the rasterized one. The instruction of rasterizing images by Inkscape which is a freeware is shown below.

Open the image by Inkscape and click "Export PNG Image..." from "Menu Bar > File".

Select Export PNG in Inkscape

If you want to export a part of elements in the image, disable or delete needless layers from the layers list.

Disable Needless Layers in Inkscape

Push "Page" button, and set "Image size" and "Filename" in "Export area" according to your preference. Then, press "Export" button to save the rasterized image.

Export Rasterized Image by Inkscape

Save Gauge Shape Configuration

You can download edited gauge shape configuration data from "Download Profile as JSON" button. However, currently you can't apply your own shape data to the app. I'm going to fix it in the future.