Freeboardのウィジェットまとめ


最近[Node-RED](http://nodered.org/)にはまっていて
数日前Node-RED用のnodeに[Freeboard](https://freeboard.io/)というデータを可視化するnodeがあることを知りました。
 
[node-red用freeboard](https://www.npmjs.com/package/node-red-contrib-freeboard)
 
試してみるとなかなか可視化されるのは楽しかったものの
まだ自分がいまいちウィジェットの使いドコロがピンと来ていない部分もあるので

まずは使いこなすために、それぞれどのようなウィジェットがあり
どのような値を入れるとどう作用するかという部分をまとめておきたいと思います。


## 標準ウィジェット一覧
* Text
* Gauge
* Sparkline
* Pointer
* Picture
* Indicator Light
* Google Map
* HTML

## Text

### INCLUDE SPARKLINE無し版

#### 設定

![text1.png](https://qiita-image-store.s3.amazonaws.com/0/37192/4be8d8c6-35bb-5a41-43c5-324ec6ff075a.png)

#### ウィジェット表示

value値にunit部分の単位をつけて表示

![text2.png](https://qiita-image-store.s3.amazonaws.com/0/37192/74640bb0-efcb-7637-3d79-0dec8a7783e3.png)

### INCLUDE SPARKLINE有り版

#### 設定

![text3.png](https://qiita-image-store.s3.amazonaws.com/0/37192/fb2e4119-cdda-bffc-e0ab-8b8248e37d9a.png)

#### ウィジェット表示

value値が変動すると下にグラフも表示してくれる

![text4.png](https://qiita-image-store.s3.amazonaws.com/0/37192/f7c47ded-78d2-0579-02e2-7c88a2e3630d.png)

## Gauge

### 設定

![gauge1.png](https://qiita-image-store.s3.amazonaws.com/0/37192/254e5639-c257-836d-9e90-fa5420bf5fd8.png)

### ウィジェット表示

minとmaxに対してのvalue値をメーター表示して
真ん中に現在のvlaueをunit部分の単位で表示

![gauge2.png](https://qiita-image-store.s3.amazonaws.com/0/37192/1feeb60c-2ac2-86dc-603b-22885825e882.png)

## Sparkline

### INCLUDE LEGEND無し版

#### 設定

![sparkline1.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/23d8651c-640f-9361-729c-5ac2712f34de.png)

#### ウィジェット表示

valueを複数入れた場合はLEGENDで項目名を,（カンマ）区切りで入れると表示される
![sparkline2.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/d80ac056-cf72-cc4b-0d6f-e5fd7963b448.png)

### INCLUDE LEGEND有り版

#### 設定

![sparkline3.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/c53622d5-e42e-fb5b-358c-1a4a1df7891a.png)

#### ウィジェット表示

項目名の下に若干の領域が増えるが表示上
なにが変わるのか現時点で不明。。。
![sparkline4.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/1a55121f-a2e6-2b02-d402-5e45861f5186.png)

## Pointer

### 設定
![pointer1.png](https://qiita-image-store.s3.amazonaws.com/0/37192/1dcf2925-6095-17c5-00ce-4d6a95048e2f.png)

### ウィジェット表示
DIRECTION部分がポインタの角度180で真下
0で真上
90で右となる

VALUE TEXTは真ん中にunitの単位と一緒に表示されている数字で
整数？である必要がある様子
![pointer2.png](https://qiita-image-store.s3.amazonaws.com/0/37192/096f1693-e9cb-9704-c1e6-0d5c19955e2e.png)

## Picture

### 設定

![picture1.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/5c98ba25-833c-e45f-4c12-3221597b4010.png)

### ウィジェット表示

image urlに指定した画像のURL等にREFRESH EVERYの間隔で更新する
Webカメラの定点画像のURL等で使うと便利そう
![picture2.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/8dd9b9e0-7b3a-862d-45e2-043b6755a6dc.png)

## Indicator Light

### Off表示

#### 設定

![indicator1.png](https://qiita-image-store.s3.amazonaws.com/0/37192/a5827911-c7ed-8312-dcde-fde8d04bf8eb.png)

#### ウィジェット表示

0を入れるとOFF判定される様子
![indicator2.png](https://qiita-image-store.s3.amazonaws.com/0/37192/c590cd62-d174-5e6c-7737-917b68272ac1.png)

### On表示

#### 設定

![indicator3.png](https://qiita-image-store.s3.amazonaws.com/0/37192/7aeb7d2b-7590-3a8a-07cc-2b7a0bb5655c.png)

#### ウィジェット表示

0以外の数字を入れるとON判定される様子
![indicator4.png](https://qiita-image-store.s3.amazonaws.com/0/37192/305613e8-754e-b105-d760-e1215f5f3bb1.png)


## Google Map

### 設定

![googlemap1.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/00dc1d23-01a0-cfcb-14f8-a409c3314fd6.png)

### ウィジェット表示

LATITUDE：緯度
LONGIGUDE:経度
で指定した位置をGoogle Mapで表示してくれる
![googlemap2.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/4eddfb3b-0ec5-7ccc-14a0-3aeb84da622a.png)

## HTML

### 設定画面
![html1.png](https://qiita-image-store.s3.amazonaws.com/0/37192/35c5ded2-1842-3a13-0670-63293a5d6778.png)

### ウィジェット表示
![html2.png](https://qiita-image-store.s3.amazonaws.com/0/37192/4d35764d-aa72-ef26-c4e2-ec6fd0f423cd.png)

## まとめ
* 標準のウィジェットだけでも工夫次第で色々な可視化が出来そう
* 今回手動でvalueに値を入れた部分は基本的にはデータソースを設定する事で動的表示が可能なのでダッシュボード表示に最適