Raspberry Pi をThingWorx につなげる（後編その２）

#後編その2： ThingWorx でIoT アプリを開発します

[前編はこちら](https://qiita.com/akiranishi/items/55182da6e5f9be300bd8)
[中編はこちら](https://qiita.com/akiranishi/items/98dfb380815df64f3edd)
[後編その１はこちら](https://qiita.com/akiranishi/items/22cdb80478d5a8be41e8)
引き続きThingWorx にアップされたデータを可視化するIoT アプリを作成します。

##手順
1. LED 操作パネル作成
2. 時系列データを表示
3. 完成：マッシュアップを実行

##1. LED操作パネル作成
###ウィジット追加
1. Radio Button ウィジットを配置します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/02e8c5b7-0beb-9aaf-8e87-103c0eebf766.png)

2. ButtonStates を”LED_state”に設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/7537a56f-57cd-e00a-bdc8-73cb171999be.png)

###サービス追加
1. Things_raspPiThing_1 の右側の”+” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/4b104b28-fcf3-2abc-e430-cee0ba0fb24d.png)

2. SetProperties を選択し"→" をクリック
3. Mashup Loaded？にチェックが入っていないことを確認して“Done”をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/eba6269e-5382-9d1f-22a9-f6ac4efe684c.png)

###サービスとウィジットの紐付け
1. Radio Button ウィジットの左上にカーソルをあててSelectedValueをドラッグしたまま<br>SetPropertiesのProp_LED_number でドロップ
2. 同じくウィジットからSelectionChangedをドラッグしたままSetProperties でドロップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/74d97708-b650-cc83-3ca1-c4b75d443bf6.png)

3. SetProperties をクリックすると右図のようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/9319eefd-2e7a-c222-46c4-f6e41d6432f3.png)

###マッシュアップ画面の実行
1. “Save” をクリック
2. “View Mashup”で画面を実行
3. ボタンの操作でLEDが点灯・消灯することを確認しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/6a183e64-b8b4-59d1-4fb7-30dda380036f.png)

##2.  時系列データを表示
###時系列データ保存のためValue Stream を作成
1. フォルダアイコンをクリック<br>DATA STORAGE のValue Streams 右にある”+” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/675ded49-c4f5-638d-ce41-9850ce148ac0.png)

2. ValueStream を選択してOK をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/81c0febb-0b2e-b78e-be02-e3aefd4b2a55.png)

3. 名前に”raspPi_VS” を設定
4. “Save” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/ab160038-1441-caae-1860-cf8dc3510d6d.png)

###Value Stream にThing のデータを保存する設定
1. Resent リストからraspPiThing_1 を選択
2. “General Information”の画面を開く
3. Value Stream の項目にraspPi_VS を設定
4. ”Save”をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/bb383285-643a-1f0d-5a76-0a806d43fe29.png)

6. “Properties and Alerts” に切り替え
7. Prop_Humidity を選択
8. 右側の”Logged”をチェック
9. 画面右端のチェックマークをクリック（隣はキャンセル）
10. 同様にProp_Temperature もLogged をチェックし保存
11. “Save”をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/f99f4825-22ac-c564-82ca-22f1ca578444.png)


- 設定作業が正しければ、以下の表示になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/74080cec-901e-b78f-3e82-dad52ef79b86.png)

###マッシュアップ画面への時系列データの表示追加
1. raspPi_Mashup を選択し編集画面を開く
2. Time Series Chart ウィジットを下段に配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/efbef6c7-5ba4-c281-0e1f-46bcbf28f2f2.png)

3． Things_raspPiThing_1 の右側の"+" をクリック
4. QueryPropertyHistory の"→" をクリック
5. Mashup Loaded? にチェックをいれて“Done” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/d347c1bd-fedc-694a-231c-83b29ca1915a.png)

6. QueryPropertyHistory のReturned Date 下の“All Data” アイテムをドラッグしたまま<br>Time Series Chart ウィジットでドロップ
7. バインド先は”Data” を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/72d369ae-6b01-a475-29dd-443546bbbe19.png)

###ウィジットの設定
1. 配置したTime Series Chart ウィジットを選択
2. 左下のPropertyリストにて以下の項目を設定
 NumberOfSeries: 2
 XAxisField: timestamp
 DataField1: Prop_Temperature
 DataField2: Prop_Humidity 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/63a3f930-fff8-09ee-8313-6a151a801eca.png)

3. Auto Refresh ウィジットのRefresh イベントを<br>QueryPropertyHistory にドラッグ＆ドロップで紐付ける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/d33883d2-5af7-3cbd-4a25-8b9d957b20e4.png)

4. “Save”をクリック

##3. 完成です
お疲れ様でした。マッシュアップを実行しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/1d4739bd-e73f-3837-39f8-db2e4cf58d1f.png)