1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Harmoware-VIS Control component リファレンス

Last updated at Posted 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を設定(必須)
secperhourmultiplySpeedのどちらかを設定

multiplySpeed(number required)
通常はHarmoware-VISのプロパティのmultiplySpeedを設定(必須)
secperhourmultiplySpeedのどちらかを設定

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を設定(必須)
secperhourmultiplySpeedのどちらかを設定

multiplySpeed(number required)
通常はHarmoware-VISのプロパティのmultiplySpeedを設定(必須)
secperhourmultiplySpeedのどちらかを設定

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?