概要¶
HARK Designer はウェブブラウザベースで ロボット聴覚ソフトウェア 
(HRI-JP Audition for Robots with Kyoto university) の ネットワーク を作成するための GUI です。
Using HARK Designer, you can do the following things:
ロボット聴覚システムのデータフローを表す ネットワーク の構築
従来のGUI flowdesigner で作成された .n ファイルの読み込み
ネットワークの実行
Screen shot of the HARK Designer
最初の一歩¶
依存するソフトウェア¶
HARK Designer は以下のソフトウェアに依存しています。 HARK Designer をインストールする前にこれらをインストールする必要があります。
node.js (アプリケーションサーバとして)
Windowsユーザ: http://nodejs.org/ から最新バージョンをダウンロードしてください。
Ubuntuユーザ
http://nodejs.org/ から最新バージョンをダウンロードしてください。
- Add PPA to your system (see https://launchpad.net/~chris-lea/+archive/node.js/) and apt-get install nodejs.
graphviz (自動並び替えのため)
Windowsユーザ: 最新バージョンを http://www.graphviz.org/ からダウンロードしてインストールしてください。
Ubuntu ユーザ: sudo apt-get install graphviz を実行してください。
- Google Chrome
現時点で、HARK Designer は最新バージョンの Google Chrome をサポートしています。https://www.google.com/chrome からダウンロードしてインストールしてください。
ただし、 HARK Designer は基本的には Firefox と Safari でも動作します。
インストール¶
For Linux users¶
HARKのリポジトリを追加してください。詳しくは http://winnie.kuis.kyoto-u.ac.jp/HARK を参照。
HARK Designer をインストールしてください。 sudo apt-get install hark-designer を実行。
For Windows users¶
- Download HARK installer from http://winnie.kuis.kyoto-u.ac.jp/HARK
インストーラをダブルクリックしてインストールしてください。
ステップ 1: HARK Designer を開く¶
For Linux users¶
On the terminal, run hark_designer. Then, chrome browser will be opened immediately.
For Windows users¶
HARK Designer をインストールしたら、デスクトップに HARK Designer のアイコンが表示されます。それをダブルクリックすると、 (1) node.js のアプリケーションが実行され、 (2) Google Chrome が開いて自動的に http://localhost:3000 にアクセスします。
そして、下図のようなウェブページが表示されます。
ステップ 1: 初期画面
ステップ 2: ノードの追加¶
First, you need to add nodes. In this case, add Constant and InputStream, which are both in General category.
ノードの追加には2種類の方法があります。
画面の左側にある Node list の General をクリックして Constant をクリック、再度 General をクリックして InputStream をクリック。
Node list の上にある入力ボックスに Constant または InputStream を入力するすると、インクリメンタルサーチができます。ノードをクリックするか、矢印キーで選択してからエンターキーを押すと追加できます。
ステップ 2: MAINネットワークに2つのノードが追加された
ステップ 3: ノードの接続¶
次に、ノードを接続します。 Constant ノードの VALUE 端子をドラッグし、 InputStream ノードの INPUT 端子でドロップします。
ステップ 3: 2つのノードを接続
ステップ 4: シートの追加¶
次は、複数のノードを追加できる新たなシートを追加します。”MAIN” タブの隣のシート追加ボタンをクリックしてください (図中の赤丸で表示)。すると、ダイアログが表示されます。シート名を入力し、シートタイプを選択してください。この例の場合は、名前は LOOP0 、タイプは iterator としました。
ステップ 4: 新しいシートを追加するダイアログ
ステップ 5: 新しいシートへのノードの追加と接続¶
ステップ 1 と同様に、5つのノード、 AudioStreamFromMic MultiFFT LocalizeMUSIC SourceTracker DisplayLocalization を追加します。そして、それらを図のように接続します。
ステップ 5: 5つのノードを追加して接続
ステップ 6: 自動整列¶
HARK Designer の機能をいくつか試してみましょう。最初は、自動的にノードを整列する自動整列機能です。図に赤丸で表示されているボタンを繰りくしてください。すると、 HARK Designer はノードを並べ替えます。
ステップ 6: 自動整列機能
ステップ 7: ノードリストを隠す¶
ノード検索ボックスの横にある “Hide list” ボタンをクリックすると、ノードリストが隠されてネットワークを表示するエリアが広がります。
ステップ 7: ノードリストが隠れた状態
ステップ 8: パラメータの設定¶
パラメータを設定するには、まずパラメータダイアログを開きます。方法は2つあって、(1) ノードをダブルクリック、あるいは (2) ノードを右クリックして “Property” を選択します。ダイアログでは、パラメータの型や値を設定して、 OK ボタンをクリックすると変更を反映できます。
ステップ 8: AudioStreamFromWave のパラメータダイアログ
Descriptions of HARK Designer Components¶
This section describes the key components of HARK Designer, Node, Links, Sheet, and Terminal Role. A network, that is a program code in HARK, consists of these components.
ノード¶
概要¶
各 ノード はロボット聴覚の一つの処理を表します。ノードには(通常の) ノードと**動的ノード**の2種類があります。
- 通常のノード
基本的に、通常のノードは、C++で書かれており、多チャンネルのフーリエ変換(MultiFFT)や音源定位(LocalizeMUSIC)、音源分離(GHDSS) などを行います。
- 動的ノード
一方、動的ノードは、通常ノードや動的ノードの集合を表すシートに対応しています。 (動的ノード の詳細については、シートの節を参照してください。)
外観¶
ノードは、いくつかの 端子 を持つ四角い箱で表されます。箱の左側にある端子はノードへの入力を表し、右側の端子は処理の出力を表します。入力と出力はそれぞれ、ノードという関数の引数と戻り値であると考えると理解の助けになるでしょう。
ノードの色は Preference から変更できます。
ノードの設定¶
それぞれのノードはパラメータを持ちます。ユーザは自由にパラメータ、たとえば閾値やFFTの解析長さなどを変化させて、ノードの振る舞いを変化させられます。各パラメータには型を設定できます。たとえば、int, float, bool, subnet_param などです。subnet_param は特別な型で、これ型に選択すると、そのパラメータはそのノードが属するシートに対応する動的ノードのパラメータに割り当てられます。複数のノードのパラメータに対して同じ subnet_param の名前を与えると、そのすべての値を動的ノードのパラメータから設定することができます。
リンク¶
概要¶
リンクは異なるノードの二つの端子を接続します。つまり、リンクはネットワーク内のデータの流れを表します。
リンクは同じ型 (例えば int, float, vector<float> ... ) 同士を接続しなければなりません。もし、異なる型を接続しようとすると、コンソールにエラーが表示されます。
入力端子は複数の出力端子に接続できませんが、一つの出力端子を複数の入力端子に接続することは可能であることに注意してください。
外観¶
デフォルトでは、リンクはベジェ曲線で表示されます。 Preference から折れ線に変更することができます。
シート¶
概要¶
シートはノードとリンクの集合で、通常のプログラミング言語におけるサブルーチンと同様です。シートには、 subnet と iterator の２種類のタイプがあります。 subnet は、ノードとリンクをひとまとめにしたもので、ノードと同様に扱えます。一方、 iterator は、ループを表しており、 iterator に設定されたノードのは “CONDITION” に設定された出力端子が False になるまで繰り返し実行されます。
外観¶
新たなシートを追加すると、新しいタブが表示されます。そのノードを左クリックするとシートを表示でき、右クリックすると名前の変更やシートタイプの変更が可能です。
同時に、そのシートに対応する 動的ノード をサブルーチンのように追加することができます。たとえば、 MainLoopという名前の iterator シートを追加すると、別のシートに MainLoop という名前のノードを置けるようになります。
Operations of HARK Designer¶
ノード¶
ノードに対して行える操作は以下の通りです。
追加
サイドバーに表示されているノードリストから追加するノードを選択できます。
- マウス操作
HARK:Separation などのカテゴリ名をクリックし、次のノード名をクリックしてください。新しいノードが現在のシートに現れます。
- キーボード操作
インクリメンタルサーチがサポートされています。ノード検索ボックスにノード名の部分文字列を入力すると、それにマッチするノードのリストが表示されます。矢印キーでノードを選択して、エンターキーでシートにノードを置けます。
コピー、カット、ペーストもできます。一つ、あるいは複数のノードを選択し、 Ctrl+C または Ctrl+X キーを押すと、それぞれコピーやカットができます。 Ctrl+V を押すとペーストできます。
選択
選択されたノードには影が表示されます。
- マウス操作
ノードをクリックすると一つのノードを選択できます。また、シート上をドラッグすると範囲内のすべてのノードを選択できます。
- キーボード操作
タブキーを押すと順番にノードを選択できます。 Ctrl + A キーは全ノードを選択するショートカットです。
移動
- マウス操作
You can move one node by dragging it. If multiple nodes are selected, they are also dragged.
- キーボード操作
選択された複数のノードはキーボードの矢印キーが使用できます。また、hjklキー(vim風) の操作もできます。
- Delete
ドラッグすることで選択されたノードを移動できます。
- マウス操作
ノードを右クリックして、 “Delete” を選択するとノードを削除できます。
- キーボード操作
Delete キーを押すと選択されたすべてのノードを削除できます。
パラメータ設定
パラメータダイアログを開く
- マウス操作
パラメータダイアログは、 (1) ノードを右クリックして “Property” を選ぶか、(2) ノードをダブルクリックすると開けます。
- キーボード操作
ノードを選択してエンターキーを押すとパラメータダイアログが開きます。
パラメータ編集
ダイアログの各行が一つのパラメータに対応しており、(1) 名前、(2) 型、(3) パラメータの値が表示されています。パラメータの型はドロップダウンリストから選択でき、入力ボックスに値を入力できます。
subnet_param を型として選択すると、そのパラメータの値がパラメータ名になります。そして、そのノードが置かれているシートに対応する動的ノードに、新たなパラメータが追加されます。
file を型として選択すると、すでにアップロードしたファイルから名前を選択できます。
HARK Designer は自動的に入力をチェックします。もし不正な値が入力された場合、例えば int型に 12.5 という値が入っている場合、はエラーを表示します。
端子の追加・削除
ノードへ端子を追加することができます。追加された端子は、ノードの実装が対応している場合にのみ意味を持ちます。この操作はマウスでのみ可能です。
端子を削除するには、削除したい端子を右クリックして Delete this input/output を選択します。
端子の追加・削除
ノードへ端子を追加することができます。追加された端子は、ノードの実装が対応している場合にのみ意味を持ちます。この操作はマウスでのみ可能です。
端子を追加するには、ノードを右クリックして、 Add Input か Add Output を選択してください。端子名を入力すると端子が現れます。
端子を削除するには、削除したい端子を右クリックして Delete this input/output を選択します。
ヘルプ
ノードを右クリックして help を選択すると、そのノードのリファレンスwebページが (存在すれば) 表示されます。
リンク¶
リンクには次の操作が行えます。
リンクの接続
端子(黒い丸)をドラッグし、接続先の端子でドロップすると、それらの端子をリンクで接続できます。リンクを接続できる端子は次の通りです、(1) 入力端子と出力端子を接続する場合。入力同士・出力同士は不可。(2) 同じ型の端子を接続する場合。
ドラッグを開始すると、 HARK Designer は接続可能なリンクを灰色の線で表示します。
リンクの削除
端子を右クリックして、 Delete the link を選択するとリンクを削除できます。
シート¶
シートへは次の操作が可能です。
シートの追加
MAINタブの左側にあるプラスボタンをクリックしてください。シート名と型を指定すると、追加できます。新たにできたタブをクリックするとそのシートを表示できます。
シートの削除
シートの右側のバツ印をクリックすると、そのシートを削除できます。または、タブを右クリックして Delete the sheet をクリックしても削除ができます。
シートの設定
シート名を変更するには、タブを右クリックして、Change the name を選択してください。シートの型を変更するには、タブを右クリックして、 Change to subnet か Change to iterator を選択してください。
動的ノード
新たなシートを追加すると、それと同じ名前をもつ動的ノードがノードリストのDynamicカテゴリに追加されます。
端子設定¶
端子設定については以下の操作が可能です。
端子設定追加
端子を右クリックして、 Set as Input あるいは Set as Output を選択し、端子設定名を入力してください。端子の横側に端子設定名が表示され、動的ノードに設定した入力あるいは出力が追加されます。
端子設定の削除
端子を右クリックして Delete Output あるいは Delete Input を選択すると、端子設定が削除されます。
ボタンとコンソール¶
On the top of the HARK Designer, you will see thee components: buttons, a slider, and a console shown as a black box. This section describes the role of each component.
Execute ボタン¶
このボタンをクリックすると、ネットワークを実行できます。エラーが起こると、エラーメッセージがコンソールに表示されます。ネットワークが保存されるまではこのボタンはクリックできません。
File Manager ボタン¶
Using the File Manager, you can upload and download files, and load a network. Since HARK Designer can find only uploaded files, you need to all file required for your network.
Screen shot of the File Manager
- Uploading
- Click the button next to File: shown as “File upload”. You can upload multiple files.
- File list
Once you have uploaded a file, they will be shown in the dialog. For each file, you can see delete button, file type, file name, download button, and load button.
Delete button is for deleting the file.
File type has four kinds: audio, tf, network, others, and unknown. They are automatically determined by its extension.
- If the extension is ”.wav” or ”.raw”, the type becomes “audio”.
- If the extension is ”.dat” or ”.tff”, the type becomes “tf”.
- If the extension is ”.n”, the type becomes “network”.
- If the extension is anything else, the type becomes “others”.
- If the file is not uploaded through this dialog, the type becomes “unknown”.
Download button is for downloading.
Load button appears only for “network” type. When you click it, the network will be loaded to HARK Designer.
- Refresh
- Although the file list is refreshed for each uploading, you can refresh the list manually
- Path
- The real path is shown in this box. You can access this path to directly access the directory.
Clear ボタン¶
このボタンをクリックすると現在表示しているネットワークがすべて初期化されます。
Preference ボタン¶
見た目の設定やバージョンの確認ができます。
- Package
ノードリストに表示されるパッケージの追加や削除、色の設定ができます。左端のボタンでパッケージの追加や削除を、右端のコンボボックスから色の設定ができます。
- Display
- 1. You can change the line shape. Current options are Bezier curves or polylines. 2. You can change the language. Currently, this option affects the Help button. 3. By default, many buttons shows tooltips when you put a mouse cursor over parts, e.g., buttons. You can deactivate them.
- Version
batchflowという HARKネットワークのインタプリタのバージョンを確認できます。
- All Reset
すべての設定をリセットできます。
- Tutorial
- You can see a description of main features. Press Escape key to finish.
- Environment
You can configure the execution environment.
- ROS:
- If the ROS is installed on your system, you will see the list of ROS versions.
- Environment Variables:
Click “Add new variable”, then, you can set a variable name and its value. Click the minus button on the variable, then, you can remove the variable. Click “Apply” to apply the variable. You can set as many variables as you want.
If the variable name already exists, that value is connected as ”:”. For example, if you add a variable PATH to /my/path and the system already has PATH=/already/set/path, then, the variable will be PATH=/already/set/path:/my/path.
拡大・縮小スライダ¶
スライダを操作すると、ノードの大きさを変更できます。
コンソール¶
コンソールという画面右上の黒い箱は、HARK Designer の現在の状態を表します
Status行
何かエラーがあれば、メッセージが “Status:” 行に表示されますマウスをその上に置くと clear ボタンが表示されます。それをクリックすればメッセージを削除できます。メッセージが長すぎるときは、HARK Designer は自動的に “see more” リンクを生成します。それをクリックすると、完全なログが新しいウィンドウに表示されます。
File Name行
現在のファイル名が “File Name:” に表示されます。もしここが空なら、ファイルを保存していないことを意味するので、ネットワークの実行はできません。
トラブルシューティング¶
ノードが消えてしまった¶
もしノードの位置に関する問題があれば、自動整列機能を使ってみてください。これはすべてのノードの位置を上書きするので、解決する可能性があります。
リセットしたい¶
HARK Designer provides some ways to reset.
ウェブページを再読み込みしてください。HARK Designer を再起動できます。
Preferences をクリックし、 All reset を選んでください。 HARK Designer はすべてのユーザ設定を初期化します。技術的には、このボタンはHTML5で定義されたブラウザ毎の保存機能 localStorage を消去します。
- Clear networks.csv in the path to the HARK Designer to clear files. This is a file database of HARK Designer. (This will be replaced more sophisticated database system in the near future.) Therefore, File Manager Dialog has some error if the file is corrupted. Even if you clear networks.csv, the uploaded files will not be deleted since networks.csv is only a list of files. You can re-create it by uploading them again.
どんなエラーが起こっているのか知りたい¶
現代のブラウザの多くは良いデバッグシステムを持っています。例えば、 Google Chrome の場合は
ブラウザを右クリック。ブラウザのいくつかの場所は通常のコンテキストメニューが出ないので注意。
要素を検証 を選択する。すると新しいウィンドウが出てくる。
Console をクリック。
Console タブでは、エラーメッセージやデバッグメッセージなどが表示されます。問い合わせされる際にこのメッセージも送っていただければ、原因究明がしやすくなります。
Executing through HARK Designer fails¶
If you have a trouble about Execute button, please try to access the file and run without HARK Designer.
ファイルを見つける方法
ファイルのパスは File Managerダイアログから見つけられます。 “Path” の入力ボックスの内容をコピーして、ブラウザからアクセスしてください。
How to run the network without HARK Designer
- Linux open a terminal, cd to the path, and run batchflow your_network.n
- Windows open a Command Prompt, cd to the path, and run batchflow your_network.n