参考：enebular、CANDY RED上の設定

ここでは、MotionBoardへの接続に必要なノードとその設定について解説します。
enebularもしくはCANDY REDでMotionBoardノードを配置し、プロパティを設定します。

Nodeは、__node-red-contrib-motionboard 1.0.1__を使用してください。

プロパティの設定項目と内容

MotionBoardでボードアイテムを作成

参考：MotionBoardによる取得データの可視化手順

センサーから送信されたデータをMotionBoardが受け取って格納します。
MotionBoard上で格納されたセンサーデータを折れ線グラフなど（チャートと言います）で表現します。

チャートを作成し、アイテムウィザードを開きます。
アイテムウィザード画面の接続先で「DataStorage」を選択します。

表示されるDataStorageを展開すると、保存先として指定したテーブルのリストが表示されます。

テーブルを選択すると、取得・保存したセンサーのデータをプレビューできます。

チャート作成画面で、各項目を行列/集計項目に配置し、時系列や項目ごとのデータ推移・変化などを可視化します。

最後に、データの可視化に適したチャート（折れ線グラフやシングルデジタルなど）を選択し、ボード上に配置します。

ハンズオン：「温度モニタ」ボードをもっと触ってみる

ここでは、IoT ハッカソン enebular - MotionBoard Cloud 設定手順で作成した「温度モニタ」ボードに追加や編集を加えてみます。

ボードをコピーする

バックアップも兼ねて、ボードをコピーしておきます。
「スタートナビ」→「すべて」を選択すると、フォルダーツリーとボードのサムネイルが表示される初期画面に戻ります。

「温度モニタ」ボードのサムネイルを右クリックし、「ボードコピー」を選択します。

背景の黒いエリアで右クリックし、「ボード貼り付け」を選びます。

ボードがコピーされました。どちらかのサムネイルをクリックして、ボードを開きます。

ボードを編集する

右上の「管理」－「ボード編集」を選び、編集モードに移行します。

シングルデジタルで温度を表示してみる

シングルデジタルは、単一のデータに対して数値のみをデジタル表示するチャートです。リアルタイムで変化する最新の値を表示したり、結果を大きく見せたりしたい場合に使います。

ボード下のツールバーにある「チャート」アイコンをクリックします。

チャートを配置するエリアを作成します。
カーソルが各アイテムのエリアに入ると、のアイコンが表示されます。
このアイコンにカーソルを合わせ、アイコンをクリックすることで、配置済みアイテムのエリアを分割してチャートを配置することができます。配置するエリアはピンク色で表示されています。

チャートの新規作成画面で、データソースに「tmpr_ds」を選びます。
利用するチャートは、チャートアイテムリストの中から[シングルデジタル]を選んで、「OK」を押します。

温度の値がシングルデジタルで表示されました。

シングルデジタル作成時に選択したデータソース「tmpr_ds」はリアルタイム分析の設定が行われているので、センサーの取得温度が変わるとデジタルの数値も変化します。
チャート左クリック→「データソース編集」→「分析」－「リアルタイム分析」で確認することができます。

表示される温度値の精度を上げたり、温度とわかるように℃を付けたりしてみます。
シングルデジタルエリアの上部にカーソルを持っていくとメニューが表示されますので、「設定」－「集計項目のフォーマット」を選択します。

集計項目のフォーマットでは、以下の設定を行います。

項目	設定値
小数点以下桁数	2
後付け文字	℃

シングルデジタルの表示が小数点第2位までとなり、後ろに℃がついて表示される値が温度だとわかるようになりました。

シングルシグナルで温度を視覚的に表現する

シングルシグナルは、特定の値に対し、しきい値を基にシグナルで表示します。温度の場合は寒い・暖かい・暑いなどを直感的に把握できます。

チャートアイコンをクリックします。先ほど作成したシングルシグナルの下半分に配置するよう、エリアを選択してクリックします。

チャートの新規作成画面で、[シングルシグナル]を選び「OK」を押します。

シグナルが表示されますが、点灯していません。

これは、実際の値とシグナルで表現するしきい値が一致していない、もしくはしきい値の範囲を超えているためです。
これから、シグナルが点灯するしきい値を設定していきます。

シグナルを左クリックして表示されるメニューから「チャート編集」を選択します。

チャートエディタ画面で、各シグナルを表示する基準値を設定していきます。
今回はセンサーが取得する温度になるので、以下のように寒い・暖かい・暑いの体感的な数値を指定してみます。

指定する値の例：表示数が「3」の場合

設定が終わったら、「OK」を押します。温度に応じたシグナルが点灯します。

明細表で格納された値を確認する

明細表は、データソースの明細データを表示します。集計前のデータを見たい場合や、集計結果がどのような明細データで構成されているのかを確認したい場合、チャートやGEOアイテムで表示される元データを見たい場合などに作成します。
作成できる明細表アイテムの表示形式には、明細形式、一覧形式、カード形式があり、用途に応じて選べます。
ここでは、最もよく使われる「一覧形式」でセンサーの実データを表示してみます。

チャートアイコンの右にある、「明細表アイコン」をクリックします。
明細票アイテムの表示形式を選択するアイコンが表示されますので、一番左の「一覧形式」をクリックします。

場所は、GEOアイテムの下半分を分割してそこに配置します。

「明細表新規作成」画面では、データソースに「tmpr_ds」を選択します。
下の「利用する明細表の表示スタイルを～」では、「一覧形式」を選択して「OK」を押します。

センサーから受け取ったデータを格納しているデータソース「tmpr_ds」の明細が表示されます。

データソース「tmpr_ds」はリアルタイム連携になっており、データの更新とチャート反映が自動的に行われます。
追加されたデータが一番上に来るよう「DATETIME」項目のデータをソートして、新しいデータから表示されるようにします。
また、センサーが取得する温度が表の右側にいってしまい、すぐに値を確認することができません。
温度の項目「tmpr_c」を「DATETIME」の右に持ってきてすぐに温度がわかるよう、項目の並び順を変更します。

明細表アイテムをクリックし、表示されるメニューから「データソース編集」を選んでクリックします。

データソースエディタ画面で、「DATETIME」項目を以下のように設定します。

設定項目	設定
ソート	降順
ソート順序	1
DATETIME項目の日時をキーとして、各レコードのデータが新しいものから並んでいることをプレビューで確認します。
次に温度（tmpr_c）項目を「DATETIME」項目の右に移動します。
明細表項目の「tmpr_c」をクリックしてドラッグし、「DATETIME」と「MILLS」の間に持っていきます。
「DATETIME」と「MILLS」の間に線が表示されたら「tmpr_c」をドロップします
プレビューで並び順が変わったことを確認します。
最後に「OK」を押して、データソースエディタを閉じます。

リレーションで絞り込みをする

リレーションとは、アイテム間の動作を連携する機能です。チャートアイテムや明細表アイテムなどの間でリレーションを作成し、リレーション元のデータポイントをマウス操作すると、リレーション先でそのデータポイントの情報だけ絞り込んで表示できます。
GEOアイテムで表示した地図上のポイントをクリックすると、その情報を別のアイテムに表示することもできます。

今回は、温度の折れ線グラフで任意のポイントを選択すると、明細表でその日時のデータを表示します。
リレーションは複数作成できます。同じように、折れ線グラフで選択したポイント（日時）の温度をシングルシグナルやシングルデジタルで表示することもできます。

リレーションを作成する

リレーションを作成するには元のアイテムにカーソルを持っていき、上下左右に表示される青い三角
をドラッグして、絞り込み表示したいアイテムにまで持っていきドロップします。
折れ線チャートにカーソルを持っていくと、上下左右に青い三角が表示されます。

どれかの矢印を選んで、左の明細表アイテムまでドラッグしてドロップします。

「リレーション設定」画面で、「ID」と「tmpr_c」の__チェックを外し__ます。
「DATETIME」項目の情報で絞り込みを行うよう設定して、「OK」を押します。

折れ線の任意のポイントをクリックします。
クリックした箇所の明細データが左側の明細表で表示されるようになります。

同じように、今度は折れ線チャートでクリックした箇所の温度をシングルデジタルで表示します。
折れ線チャートに表示される青い三角をドラッグして、シングルデジタルに持っていきドロップします。

「リレーション設定」画面で、「ID」と「tmpr_c」のチェックを外し、「OK」を押します。
クリックした箇所の温度がシングルデジタルでも表示されるようになります。

リレーションの絞り込みをクリアする

リレーションによる絞り込みをクリアするには、リレーション元アイテムで任意の箇所をクリックします。
折れ線チャートで、折れ線以外の任意の場所をクリックしてみてください。

明細表の絞り込みなどがクリアされました。

リレーションを編集、削除する

リレーションの編集、削除は、元アイテムをクリックしてリレーションを表示し、対象のリレーションを選んで行います。
折れ線チャートを左クリックすると、明細表とシングルデジタルへのリレーションが表示されます。

シングルデジタルへ伸びる矢印をクリックします。矢印が緑色になり、アイコンが表示されます。

一度作ったリレーションを編集する場合は、鉛筆アイコンをクリックしてリレーション設定画面を開きます。
リレーションを解除する場合は、ゴミ箱アイコンをクリックしてリレーションを削除します。

ここではゴミ箱アイコンをクリックして、シングルデジタルへのリレーションを解除してみます。

確認メッセージが表示されるので「OK」を押し、リレーションを削除します。

折れ線チャートとシングルデジタルのリレーションが解除され、クリックしても連動しなくなりました。

参考情報

MotionBoard Cloudマニュアル
https://mbc-manual.motionboard.jp/motionboard/manual/mbcloud/

MotionBoard Cloudマニュアル
　－リアルタイム連携
https://mbc-manual.motionboard.jp/motionboard/manual/mbcloud/#111609175.html

MotionBoardの基礎知識
MotionBoard を初めて触る際、よく使われる言葉の定義と名称についてまとめてみました。
http://navi.wingarc.com/motionboard/mbwords.html