More than 3 years have passed since last update.

Harmoware-VIS Control component リファレンス

Last updated at 2021-12-09Posted at 2021-12-09

#前提
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 リファレンス」をご覧ください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up