3. チュートリアル1B: 自分でダッシュボードを作ってみよう
2つめのチュートリアルでは、Data Visualizer上でビジュアルパーツの配置とデータのバインドを行い、オリジナルのダッシュボードを構築します。
3.1. アップロードするCSVファイルの中身を確認する
まず始めに、可視化したいCSVファイルの中身のフォーマットを確認します。 本チュートリアルでは、 チュートリアル1A で使用したCSVファイルと同じファイルを使用します。 ファイルの中身については、 アップロードするCSVファイルの中身を確認する をご覧ください。
3.1.1. アップロード可能なCSVファイルのフォーマット
intdashにアップロードされるCSVファイルは、以下の条件を満たす必要があります。
第1行（ヘッダー行）は、各列に格納するデータの名称を文字列で格納していること
第1列（タイムスタンプ列）は、タイムスタンプを格納していること
ヘッダー行におけるタイムスタンプ列の名称は
timeであることタイムスタンプのフォーマットはRFC 3339に従っていること
第2行以降かつ第2列以降の領域（データ領域）には、データを格納していること
データ領域には、数値または文字列の形式でデータを格納していること
3.1.2. サンプルCSVファイルの内容
サンプルのCSVファイルは、第2列に sp_ACCX という数値データ、第3列に sp_ACCY という数値データが格納され、
以降第7列まで、合計6種の時系列データが格納されています。
図 12 CSVファイルの中身
3.2. データ設定を作成する
次に、CSVファイルの内容に合わせたデータ設定を作成します。
3.2.1. CSVファイルのintdashへの格納のされ方を理解する
データ設定を作成する前に、CSVファイルのアップロードによって、CSVファイル内のデータがどのようにintdashに格納されるかについて解説します。
CSVファイルのデータ領域にある各セルのデータは、それぞれデータ名称とタイムスタンプが付与され、1つのデータポイントとしてintdashに格納されます。 例えば、以下のようなCSVファイルの場合は、3種のデータが4つのタイムスタンプにおいて存在するため、合計で12個のデータポイントとしてintdashに格納されます。
図 13 12個のデータポイントを格納したCSVファイルの例
それぞれのデータポイントには、格納したデータのデータ型に応じて、型情報が付与されます。 例えば、CSVファイルに整数で記載されたデータは整数型、小数値で記載されたデータは浮動小数点数型、 文字列で記載されたデータは文字列型という型情報が付与されます。
intdashは、上記の情報以外にもチャンネル番号と呼ばれる識別番号を付与しますが、 本チュートリアルで使用するCSVアップロード機能では、チャンネル番号には自動的に1が割り当てられます。
Data Visualizerがintdashからデータを取得する際には、タイムスタンプ以外3つの情報（データ名称、データ型、チャンネル）と、 タイムスタンプの範囲を指定してデータをリクエストします。
データ設定では、データを特定するために、タイムスタンプ以外の3つの情報（データ名称、データ型、チャンネル）を指定する必要があります。
図 14 Meas HubでのCSVデータアップロード
図 15 Data Visualizerでのデータ表示
以降の節で、サンプルCSVファイルの各列に対応したデータ定義を追加していきます。
3.2.2. データ設定のグループを追加する
画面左の[Data Settings]（ 
）をクリックしてデータ設定の管理ウィンドウを開いてください。
本ウィンドウでは、複数のデータ設定をまとめて、グループとして取り扱います。
まずは[Add Group]をクリックして、グループを作成してください。
ボタンをクリックすると、「New Data Group」という名称の空のグループが追加されます。
図 16 グループの追加
3.2.3. データ型とパースの種類を指定する
本チュートリアルで使用するCSVファイルには6つの列が存在しますが、以降では、 sp_ACCX の列を例として、手順を解説します。
New Data Groupで、
をクリックして展開し、 [Add Data]をクリックします。
図 17 データの追加
以下のように設定します。
Data Name:
acc_sensor_xDisplay Name:
ACC (x-axis)Target Data:
Data Type:
FloatData ID:
sp_ACCXChannel:
1
Conversion Settings:
Conversion Type:
No Conversion (As Number)
Display Settings:
Display Type:
NumberRange:
-5≦ Value ≦5No. of Digits after Decimal Point:
2
図 18 sp_ACCX用のデータ設定
これで、 sp_ACCX 列に対するデータ設定が完了しました。
その他の5列についても、同様にデータ設定を登録してください。
このとき、Data IDにはCSVの列名（ sp_ACCY 、 sp_ACCZ 、 sp_Yaw 、 sp_Pitch 、 sp_Roll ）を指定してください。
Data Name、Display Nameには任意の名前を設定できます。
注釈
CSVファイルには文字列または数値しか記載できないため、本チュートリアルで使用するCSVアップロード機能では、文字列型または整数、浮動小数点数型のデータしか取り扱うことができません。 しかし、intdash自体はこの3種類の型のデータ以外にも、CAN（Controller Area Network）やMAVLinkといった、バイナリフォーマットのメッセージも取り扱うことができます。
バイナリフォーマットのメッセージに格納された値をData Visualizerで可視化するためには、メッセージをパースしなければなりません。 [No Conversion]以外のConversion Typeは、このようなメッセージデータのパースのために使用します。 詳しい使用方法については、 Data Visualizer操作マニュアル を参照してください。
3.3. ビジュアルパーツを配置する
次に、ビジュアルパーツを配置して、ダッシュボードを構築します。
3.3.1. ダッシュボードを新規に作成する
まずは、空のダッシュボードを用意します。画面下部の[Screen list]（ 
）ボタンをクリックし、表示されたボックス内にある[Add New]をクリックしてください。これにより、新しいダッシュボードが作成されます。
図 19 Screenメニュー
図 20 [Add New]ボタン
3.3.2. ビジュアルパーツ用の領域を確保する
次に、作成されたダッシュボードの中に存在する任意の枠をクリックし、「2 x 2」と表示されたボタンをクリックしてください。こうすることで、2x2マス分の領域が、1つのビジュアルパーツ用に確保されます。また、パーツ用の領域が確保されると同時に、画面左側に[Panel Settings]タブが開きます。このウィンドウはパーツの設定に使用します。
図 21 [2 x 2]ボタン
3.3.3. 可視化方法を設定する
パーツ用の領域を確保したら、続いて可視化の方法を指定します。
3.3.4. ビジュアルパーツにデータをバインドする
最後に、可視化したいデータを データ設定を作成する で定義したデータリストの中から選択して、ビジュアルパーツにバインドします。
ビジュアルパーツを右クリックし、再度[Panel Settings]タブを表示してください。「Data Binding」の見出しの下にあるボタンをクリックすると、更にウィンドウが開き、事前に定義したデータリストが表示されます。
このウィンドウで、上から順に設定していきます。
[Select Edge]をクリックし、データの送信元エッジを選択します。 後の手順でCSVファイルをアップロードする際、
edge1のデータとしてCSVファイルをアップロードしますので、edge1を選択します。バインドしたいデータをデータリストの中から選択します。本チュートリアルではX軸方向の加速度の値をバインドします。データリストの中から
sp_ACCXを選択してください。
図 24 [Panel Settings]ウィンドウと、データバインド用ウィンドウ
3.3.5. ビジュアルパーツに複数のデータをバインドする
パーツによっては、1つのビジュアルパーツに複数のデータをバインドすることができます。本チュートリアルで使用している「Line Graph」も複数のデータをバインドすることができるので、Y軸とZ軸の加速度値を追加でバインドしてみます。
複数のデータをバインドできるビジュアルパーツを使用する場合は、「Data Binding」に、[Add New Data]ボタンが表示されます。これをクリックし、あとは前節と同じ要領で、Y軸とZ軸の加速度値のデータをバインドしてください。
図 25 [Add New Data]ボタン
3.3.6. ビジュアルパーツの位置とサイズを変更する
ここまで、2x2のサイズでビジュアルパーツを設定してきました。Line Graphは横軸が時間軸であるため、横長で表示したほうがデータは見やすくなります。そこで、パーツの位置とサイズを変更してみましょう。
ビジュアルパーツを移動するには、パーツをドラッグ&ドロップします。
図 26 ビジュアルパーツをドラッグ＆ドロップして移動
パーツのサイズを変更するには、パーツにフォーカスしたときに枠に表示される、小さな丸をドラッグ&ドロップします。
図 27 ビジュアルパーツのサイズを変更
これらの操作を使えば、作成したビジュアルパーツを自由な大きさと形で配置することができます。
3.4. CSVファイルをアップロードする
CSVファイルをアップロードしてデータをintdashに格納します。CSVファイルのアップロード方法については、前のチュートリアルの CSVファイルをアップロードする と同一のため、ここでは説明を省略します。
事前に チュートリアル1A: サンプルデータを可視化してみよう を実施済みの方は、intdashのサーバー上に、以前のチュートリアルでアップロードしたデータが存在するため、このまま次の手順に進んで構いません。
3.5. アップロードしたデータをダッシュボードで可視化する
作成したダッシュボードを用いて、アップロードしたデータを可視化してみます。本手順も前のチュートリアルの アップロードしたデータをダッシュボードで可視化する と同一のため、ここでは説明を省略します。