#前提
Harmoware-VISについては別記事
「Harmoware-VISの紹介」
「Harmoware-VIS はじめに」
「Harmoware-VIS APIリファレンス」
「Harmoware-VIS Layersリファレンス」
をご覧ください。
#Control component リファレンス
Harmoware-VIS の Control component のリファレンスを解説します。
##MovesInput MovesInputでは、[`movesbase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#movesbase-object-array)のファイルを選択するダイアログが表示されます。 ファイルを読み込んだ後、[`bounds`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#bounds-object)、[`timeBegin`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number)、[`timeLength`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timelength-number)、[`movesbase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#movesbase-object-array)をHarmoware-VISのプロパティに設定します。 [`movesbase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#movesbase-object-array)の更新には`actions.setMovesBase`を使用します。 更に[`inputFileName`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#inputfilename-object)プロパティの`movesFileName`に入力ファイルの名前を設定します。
表示サンプル |
---|
Examples.js
<MovesInput actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティのactionsを設定(必須)
- i18n(Object option)
- ・Default :
{formatError: 'データ形式不正'}
フォーマットエラー発生時のアラートキャプションをi18n.formatError
に設定 - id(string option)
- htmlタグの属性ID
- className(Object option)
- htmlタグ属性クラス
- style(Object option)
- htmlタグの属性スタイル
##DepotsInput DepotsInputでは、[`depotsBase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#depotsbase-object-array)のファイルを選択するダイアログが表示されます。 ファイルを読み込んだ後、[`depotsBase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#depotsbase-object-array)をHarmoware-VISのプロパティに設定します。 [`depotsBase`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#depotsbase-object-array)の更新には`actions.setDepotsBase`を使用します。 更に[`inputFileName`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#inputfilename-object)プロパティの`depotsFileName`に入力ファイルの名前を設定します。
表示サンプル |
---|
Examples.js
<DepotsInput actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティのactionsを設定(必須)
- i18n(Object option)
- ・Default :
{formatError: 'データ形式不正'}
フォーマットエラー発生時のアラートキャプションをi18n.formatError
に設定 - id(string option)
- htmlタグの属性ID
- className(Object option)
- htmlタグ属性クラス
- style(Object option)
- htmlタグの属性スタイル
##LinemapInput LinemapInputでは、[`linemapData`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#linemapdata-object)のファイルを選択するダイアログが表示されます。 ファイルを読み込んだ後、[`linemapData`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#linemapdata-object)をHarmoware-VISのプロパティに設定します。 [`linemapData`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#linemapdata-object)の更新には`actions.setLinemapData`を使用します。 更に[`inputFileName`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#inputfilename-object)プロパティの`linemapFileName`に入力ファイルの名前を設定します。
表示サンプル |
---|
Examples.js
<LinemapInput actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティのactionsを設定(必須)
- i18n(Object option)
- ・Default :
{formatError: 'データ形式不正'}
フォーマットエラー発生時のアラートキャプションをi18n.formatError
に設定 - id(string option)
- htmlタグの属性ID
- className(Object option)
- htmlタグ属性クラス
- style(Object option)
- htmlタグの属性スタイル
##LoadingIcon LoadingIconは、プロパティの`loading`がtrueの場合に画面中央に読み込み中のアイコンを表示します。
表示サンプル |
---|
Examples.js
<LoadingIcon loading={this.props.loading} />
- loading(boolean required)
- 通常はHarmoware-VISのプロパティの
loading
を設定(必須) - color(string option)
- ・Default :
'white'
'#XXXXXX'
または'#XXX'
の形式のカラーハッシュを受け付けます。
また、以下のような基本的な色も受け取ることができます。
maroon, red, orange, yellow, olive, green, purple, white, fuchsia, lime, teal, aqua, blue, navy, black, gray, silver
##AddMinutesButton AddMinutesButtonは、プロパティの`addMinutes`に設定された値(分)で、Harmoware-VIS のプロパティの[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)を更新するボタンを表示します。
表示サンプル |
---|
Examples.js
<AddMinutesButton addMinutes={-5} actions={this.props.actions} />
<AddMinutesButton addMinutes={5} actions={this.props.actions} />
- addMinutes(number required)
- ・Default : 10
settime
に加算する値(単位:分)を設定(必須) - actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - children(React.ReactNode option)
- ・Default : (※上記表示サンプルのデータ)
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{minutesCaption: '️min'}
ボタンの単位キャプションをi18n.minutesCaption
に設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
##ElapsedTimeRange ElapsedTimeRangeは、Harmoware-VIS のプロパティの[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)を表示&更新するスライダーを表示します。 表示する値はシミュレーション開始時間([`timeBegin`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number))から経過時間([`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number))を差し引いた秒数です。
表示サンプル |
---|
Examples.js
<ElapsedTimeRange settime={this.props.settime} timeBegin={this.props.timeBegin}
timeLength={this.props.timeLength} actions={this.props.actions} />
- settime(number required)
- 通常はHarmoware-VISのプロパティの
settime
を設定(必須) - timeBegin(number required)
- 通常はHarmoware-VISのプロパティの
timeBegin
を設定(必須) - timeLength(number required)
- 通常はHarmoware-VISのプロパティの
timeLength
を設定(必須) - actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - min(number option)
- ・Default : -100
timeBeginを基準時間(ゼロ)とした場合のスライダー範囲の最小値(秒) - step(number option)
- ・Default : 1
スライダーの更新単位(秒) - id(string option)
- htmlタグの属性ID
- className(Object option)
- ・Default :
'harmovis_input_range'
htmlタグ属性クラス
##ElapsedTimeValue ElapsedTimeValueは、Harmoware-VIS のプロパティの[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)を表示&更新するテキストBOXを表示します。 表示する値はシミュレーション開始時間([`timeBegin`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#timebegin-number))から経過時間([`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number))を差し引いた秒数です。
表示サンプル |
---|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<ElapsedTimeValue settime={this.props.settime} timeBegin={this.props.timeBegin}
timeLength={this.props.timeLength} actions={this.props.actions} />
- settime(number required)
- 通常はHarmoware-VISのプロパティの
settime
を設定(必須) - timeBegin(number required)
- 通常はHarmoware-VISのプロパティの
timeBegin
を設定(必須) - timeLength(number required)
- 通常はHarmoware-VISのプロパティの
timeLength
を設定(必須) - actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - min(number option)
- ・Default : -100
timeBeginを基準時間(ゼロ)とした場合のスライダー範囲の最小値(秒) - id(string option)
- htmlタグの属性ID
- className(Object option)
- ・Default :
'harmovis_input_number'
htmlタグ属性クラス
##PauseButton PauseButtonは、Harmoware-VIS のプロパティの[`animatePause`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#animatepause-boolean)をtrueに更新するボタンを表示します。
表示サンプル |
---|
Examples.js
<PauseButton actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - children(React.ReactNode option)
- ・Default : (※上記表示サンプルのデータ)
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{pauseButtonCaption: 'PAUSE'}
ボタンのキャプションをi18n.pauseButtonCaption
に設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
##PlayButton PlayButtonは、Harmoware-VIS のプロパティの[`animatePause`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#animatepause-boolean)をfalseに更新するボタンを表示します。
表示サンプル |
---|
Examples.js
<PlayButton actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - children(React.ReactNode option)
- ・Default : (※上記表示サンプルのデータ)
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{playButtonCaption: '️PLAY'}
ボタンのキャプションをi18n.playButtonCaption
に設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
##ForwardButton ForwardButtonは、Harmoware-VIS のプロパティの[`animateReverse`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#animatereverse-boolean)をfalseに更新するボタンを表示します。
表示サンプル |
---|
Examples.js
<ForwardButton actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - children(React.ReactNode option)
- ・Default : (※上記表示サンプルのデータ)
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{forwardButtonCaption: '️FORWARD'}
ボタンのキャプションをi18n.forwardButtonCaption
に設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
##ReverseButton ReverseButtonは、Harmoware-VIS のプロパティの[`animateReverse`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#animatereverse-boolean)をtrueに更新するボタンを表示します。
表示サンプル |
---|
Examples.js
<ReverseButton actions={this.props.actions} />
- actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - children(React.ReactNode option)
- ・Default : (※上記表示サンプルのデータ)
buttonタグのchildrenを設定 - i18n(Object option)
- ・Default :
{reverseButtonCaption: '️REVERSE'}
ボタンのキャプションをi18n.reverseButtonCaption
に設定 - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
##NavigationButton NavigationButtonは、Harmoware-VIS のプロパティの[`viewport`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#viewport-object)を更新するボタンを表示します。
表示サンプル |
---|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<NavigationButton buttonType="compass"
actions={this.props.actions} viewport={this.props.viewport} />
<NavigationButton buttonType="zoom-in"
actions={this.props.actions} viewport={this.props.viewport} />
<NavigationButton buttonType="zoom-out"
actions={this.props.actions} viewport={this.props.viewport} />
- buttonType(string required)
- (必須)
buttonType Description 'compass' viewportのzoom値とpitch値をデフォルト値に更新(視点リセット) 'zoom-in' viewportのzoom値を0.5加算して更新(ズームイン) 'zoom-out' viewportのzoom値を0.5減算して更新(ズームアウト) - actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - viewport(Viewport required)
- 通常はHarmoware-VISのプロパティの
viewport
を設定(必須) - className(string option)
- ・Default :
'harmovis_button'
htmlタグ属性クラス - title(string option)
- htmlタグ属性クラス
##SimulationDateTime SimulationDateTimeは、Harmoware-VIS のプロパティの[`settime`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#settime-number)を指定の日付書式で表示テキストBOXを表示します。
表示サンプル |
---|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<SimulationDateTime settime={settime} />
// output example (ja-JP) => 1970/01/01(木) 9:00:00
- settime(number required)
- 通常はHarmoware-VISのプロパティの
settime
を設定(必須) - caption(string option)
- ・Default : ''
書式日付の前方に付加するキャプション - locales(string option)
- ・Default : 'ja-JP'
書式言語ロケール指定
localesとoptionsの詳細はJavascriptの Date.prototype.toLocaleString() のリファレンス を参照 - options(Object option)
- ・Default :
{ year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit',
weekday: 'short' }
書式言語オプション指定
localesとoptionsの詳細はJavascriptの Date.prototype.toLocaleString() のリファレンス を参照 - className(Object option)
- htmlタグ属性クラス
##SpeedRange SpeedRangeは、Harmoware-VIS のプロパティの[`secperhour`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number)又は[`multiplySpeed`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#multiplyspeed-number)を表示&更新するスライダーを表示します。 [`secperhour`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number)表示中の値はMAX値とMIN値を入れ替えた値になります。(既定では 3600 ⇒ 1 又は 1 ⇒ 3600)
表示サンプル |
---|
Examples.js
<SpeedRange secperhour={this.props.secperhour} actions={this.props.actions} />
<SpeedRange multiplySpeed={this.props.multiplySpeed} actions={this.props.actions} />
- secperhour(number required)
- 通常はHarmoware-VISのプロパティの
secperhour
を設定(必須)
※secperhour
かmultiplySpeed
のどちらかを設定 - multiplySpeed(number required)
- 通常はHarmoware-VISのプロパティの
multiplySpeed
を設定(必須)
※secperhour
かmultiplySpeed
のどちらかを設定 - actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - maxsecperhour(number option)
- ・Default : 3600
secperhour
のスライダー範囲の最大値 - maxmultiplySpeed(number option)
- ・Default : 3600
multiplySpeed
のスライダー範囲の最大値 - min(number option)
- ・Default : -100
スライダー範囲の最小値 - step(number option)
- ・Default : 1
スライダーの更新単位 - id(string option)
- htmlタグの属性ID
- className(Object option)
- ・Default :
'harmovis_input_range'
htmlタグ属性クラス
##SpeedValue SpeedValueは、Harmoware-VIS のプロパティの[`secperhour`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number)又は[`multiplySpeed`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#multiplyspeed-number)を表示&更新するテキストBOXを表示します。
表示サンプル |
---|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<SpeedValue secperhour={this.props.secperhour} actions={this.props.actions} />
<SpeedValue multiplySpeed={this.props.multiplySpeed} actions={this.props.actions} />
- secperhour(number required)
- 通常はHarmoware-VISのプロパティの
secperhour
を設定(必須)
※secperhour
かmultiplySpeed
のどちらかを設定 - multiplySpeed(number required)
- 通常はHarmoware-VISのプロパティの
multiplySpeed
を設定(必須)
※secperhour
かmultiplySpeed
のどちらかを設定 - actions(object required)
- 通常はHarmoware-VISのプロパティの
actions
を設定(必須) - maxsecperhour(number option)
- ・Default : 3600
secperhour
のスライダー範囲の最大値 - maxmultiplySpeed(number option)
- ・Default : 3600
multiplySpeed
のスライダー範囲の最大値 - min(number option)
- ・Default : 1
スライダー範囲の最小値 - id(string option)
- htmlタグの属性ID
- className(Object option)
- ・Default :
'harmovis_input_number'
htmlタグ属性クラス
##FpsDisplay FpsDisplayは、FPS情報ウィンドウを表示します。
表示サンプル |
---|
2021年12月分のアップロード上限超えのため後日 |
Examples.js
<FpsDisplay />
- width(number option)
- ・Default : 60
FPS情報ウィンドウの幅 - height(number option)
- ・Default : 40
FPS情報ウィンドウの高さ - colorCode(string option)
- ・Default : '#00FF00'
FPS情報ウィンドウのグラフのバーの色 - className(Object option)
- ・Default :
'harmovis_fpsRate'
htmlタグ属性クラス - UnitCaption(string option)
- ・Default : 'fps'
FPS単位のキャプション
#css リファレンス
Harmoware-VIS の css リファレンスについては別記事「Harmoware-VIS css リファレンス」をご覧ください。