SCADA ウィジェットによるデータ可視化

投稿日 / 投稿者名

2018.8.1 / 竹村直也

はじめに

本レポートは、Things Cloud の利用例をより知っていただくための実利用レポートとして作成したものです。
Things Cloud は極力後方互換性を持つよう開発されていますが、今後のリリースにより、一部画面やコマンド、手順などが変更となったり、利用できない可能性があることをあらかじめご了承ください。

なお、作成にあたり、以下バージョンを用いています。

ver.8.15.8（backend/UI）

難易度 ★★

概要

本レポートでは、SCADA ウィジェットの作成方法についてご紹介します。
SCADA ウィジェットは、任意の画像上に Things Cloud 内で登録したデバイスの情報を表示することが可能なウィジェットです。
本レポートを読むことで、Things Cloud での図を用いたデータの可視化方法を理解することができます。

前提条件

次の言語/フレームワークを扱えること
- HTML5
- CSS
- JavaScript
温度センサのデータを取得するため、以下のどちらかを満たしていること
- Things Cloud に接続済みの温度センサがある
- Things Cloud で温度センサのシミュレーターを利用している

本レポートでは手軽に扱える温度センサのシミュレーターを利用します。
実センサを用いた場合でも SCADA ウィジェットを作成可能です。

TIPS : センサシミュレーターを利用する方法

以下のステップで、Things Cloud 上にシミュレーターを作成することが可能です。
ただし、通常デバイスと同様に課金対象となりますので、ご了承ください。
なお、温度シミュレーターはデフォルトでは -10°C ~ 10°C の値を取ります。

「ADMINISTRATION」 > 「Roles」でシミュレーターを利用可能なロールを作成
「ADMINISTRATION」 > 「Users」で 1. で作成したロールを自身に追加
「DEVICE MANAGEMENT」 > 「DEVICES」 > 「Simulators」で新規シミュレーター作成
(ステータスを変更すること [paused => running])

推奨条件

AngularJS (1.x系)
- AngularJS 1.x系のデータバインディングに関して理解していること。
開発環境に以下をインストールしていること。
- Inkscape(ベクタ画像編集ソフトウェア) ダウンロード先リンク(Ver. 0.92.3)
  - Mac(Homebrew によるインストール) : brew cask install xquartz inkscape

所要時間（目安）

この手順に沿って、「SCADA ウィジェットによるデータの可視化」を実現するまでの所要時間は以下の通りです。
取り組む内容によって所要時間は異なります。

約30分 (本レポートで利用した SVG ファイルから SCADA ウィジェットを作成)
約2時間 (SVG ファイル作成 ~ SCADA ウィジェット作成)

つくるもの

今回は、Things Cloudに接続した温度センサのリアルタイムな状態を可視化する「TEMPERATURE MONITOR」という SCADA ウィジェットの作成を通して、「画像データを表示」する基礎を学びます。

【完成イメージ】

Dashboard に「TEMPERATURE MONITOR」という SCADA ウィジェットが表示されます。
この SCADA ウィジェットは、センサデータの温度によって、リアルタイムに温度計の画像が変化します。

完成イメージ

0ºC 以下	0ºC から 5ºC	5ºC 以上

1. 関係ファイル

本レポートでは，XML ベースの2次元ベクターイメージ用の画像形式である SVG を作成します．

my_temperature.svg

2. SVG 画像の作成

Inkscape を用いて、下図のような SVG を作成します。 Inkscape の詳しい使い方はこちらを参照してください。
また、今回作成した SVG はこちらからダウンロードできます。
こちらのサンプルを利用する場合は 5. SCADA ウィジェットの追加に進んでください。

SVGイメージ	XML構成

続くセクションでは、とくに Things Cloud と関係する部分について取り上げていきます。

3. 図にセンサの値を表示

まず、センサデータを表示するテキストタグを作成します。

{{********}}記法によるデータバインディング

上図中に {{ID662007}} というテキストタグがあります。
これを作成することで、 SVG 上において ID662007 というセンサの値の格納先を用意できます。
5. SCADA ウィジェットの追加において、ID662007 という値と利用するセンサを対応させることで、以下が可能になります。

テキストタグにセンサの値をリアルタイム表示
SVG の他の記述からセンサの値を参照

このデータバインディングでは、センサの値の格納先はユニークである必要があります。
また、数字が先頭の文字列でバインディングを行うとバグが生じる恐れがあります。
本レポートでは上記の問題を回避するため、{{ID<<device_global_ID>>}}のように記述することを推奨します。
デバイスのグローバルIDは、 Things Cloud の次のページで確認できます。

指定の小数桁数で丸め方

また、上図中の {{ID<<device_global_ID>> | number:2}} という AngularJS の記述により、数値を指定の小数桁数で四捨五入できます。
ID<<device_global_ID>> にはセンサの値が展開されるため、灰色の球の中に小数点以下2桁で表示することができます。

4. センサの値に応じて図を変化

次に、温度によって温度計の色や表示部分の長さを変化させる設定をします。

AngularJS のディレクティブについて

AngularJS では ng-**** といったディレクティブと呼ばれるものが存在し、これを追加することで DOM(Document Object Model) に対して機能を追加できます。(AngularJSのディレクティブドキュメント)
今回は ng-style というディレクティブを利用します。

ng-style : 要素の style を変更できる機能

本レポートでの利用

ng-style を利用して図の一部の色を変化させることで、完成イメージの温度計を実現します。
ID<<device_global_ID>> という値に応じて温度計メーターの色が変化するように設定します。
ng-style の中では三項演算子が利用できるため、下図のようにそれぞれ設定します。

ng-style の設定

TIPS : 図の一部を非表示にする方法

今回 {{ID<<device_global_ID>>}} というテキストタグは、SVG で指定範囲外に設置してあるため、表示されません。
しかし、作成する SVG によっては明示的に図を非表示にしたいケースもあります。
その場合は ng-show というディレクティブを利用します。

ng-show : 条件式に応じて、要素の表示/非表示を切り替える機能

ng-show=false というクラスを追加した図は非表示になります。

また、ng-show の右辺では条件式が使えるため、センサデータ値に応じて動的に表示/非表示を切り替えられます。
例えば、ng-show=(ID<<device_global_ID>> >= 5)のように指定することで、センサの値が 5 以上の時に表示される図形を作成できます。

5. SCADA ウィジェットの追加

最後に、作成した SVG を用いて Things Cloud で SCADA ウィジェットを作成します。
このステップで、{{ID<<device_global_ID>>}}とセンサの対応させます。
以下の手順で SCADA ウィジェットを追加します。

(必要に応じて、Group や Dashboard を作成)
SCADA ウィジェット作成するために各項目入力
{{ID<<device_global_ID>>}} と「Last measurement」(センサの最終取得値)の対応付け
「data points」の有効化

以上により、完成イメージの「TEMPERATURE MONITOR」という SCADA ウィジェットの作成は完了です。