LoginSignup
1
1

More than 3 years have passed since last update.

@akiranishi(Nishi Akira)

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

Last updated at Posted at 2019-10-08

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

前編はこちら
中編はこちら
ThingWorx にアップされたデータを可視化するIoT アプリを作成します。

手順

  1. 事前準備
  2. Thing 作成とエージェントアプリと接続
  3. マッシュアップ画面作成

1. サンプル用ファイルの読み込み

  1. ソースコードのあるgithub のこちら からraspHOW_entity.xml を入手します。

  2. ThingWorx Composer 画面上部の“Import/Export”をクリック
    image.png

  3. raspHOW_entity.xmlをFile Nameに設定して“Import”をクリック
    image.png

2. Thing 作成とエージェントアプリと接続

Thing の作成

  1. Thingを作成します

    フォルダアイコンをクリックしMODELINGメニュー → Thingsの右にある”+”をクリック
    image.png

  2. 名前は” raspPiThing_1”とします
    ※大文字小文字も合わせてください

  3. Base Thing Template は“RemoteThing”を指定します
    image.png

  4. “Save”をクリック

エージェントアプリと接続

  1. Raspberry Pi 上のエージェントアプリが動作していることを確認
  2. 先の手順で作成した"raspPiThing_1" Thing の編集画面で“Properties and Alerts” に切り替えます

  3. “Manage Bindings” をクリック
    image.png

  4. “Add all properties”をクリック３つの変数が右側のリストに追加されたことを確認

  5. “Done” -> ”Save”
    image.png

  6. Refresh ボタンをクリックするとProp_Humidity （湿度）とProp_Temperature （温度）の値が更新されます
    image.png

3. マッシュアップ画面の作成

マッシュアップ画面の新規作成

  1. フォルダアイコンをクリックVISUALIZATIONメニューから“Mashups” の右の”+” をクリック
    image.png

  2. デフォルトのまま”OK”をクリック
    image.png

参考情報

  • “Responsive”はブラウザの画面サイズにあわせて表示
  • “Static”は設定した画面サイズで固定して表示
  1. 名前を”raspPi_Mashup” に設定して”Save” をクリック image.png

4.“Design” をクリック
image.png

  1. 画面左側の仕切りにある「左矢印」をクリックして作業スペースを広げます image.png

Layout ウィジットを配置

  1. Layout ウィジットを配置します image.png

2.“Vertical” を選択しRows は２のままで”Done” をクリックします
image.png

各種ウィジットを配置

  1. 以下のウィジットを上段に配置します
  • Auto Refresh
  • LED Display x 2

image.png

  1. 配置の際に以下の表示が出たら“Yes”をクリック image.png

作成したThing を登録

  1. 画面右側の”+” をクリック
    image.png

  2. 右上セレクタ”All” を”Things” にして”raspPiThing_1“ を選択
    image.png

  3. “GetProperties” を選択し“→” をクリック

  4. Mashup Loaded？ をチェックして”Done” をクリックします
    image.png

サービスとウィジットを紐付け

  1. GetPropertiesの左にある”+”をクリック
  2. “Prop_Temperature”をドラッグしたまま左側のLED Displayでドロップ

  3. “Select Binding Target”は”Data”を選択
    image.png

  4. 同じように”Prop_Humidity” をもう一つのLED Display に紐付け

  5. GetProperties のバー（赤色）をクリックすると下図のようになります
    image.png

Auto Refresh ウィジットの紐付け

  1. Auto Refresh ウィジットの左上にカーソルを当てます
    image.png

  2. Refresh イベントをドラッグしたままGetProperties のバーか変数リストの上にドラッグ
    image.png

  3. GetProperties のバー（赤色）をクリックすると右図のようになります
    image.png

各ウィジットの調整

1．Auto Refresh ウィジットを選択し、左下のProperty リストからRefreshInterval を5に変更してEnter を押す
image.png
image.png

２． 同様にLED DisplayのLabel をそれぞれ「おんど」「しつど」にしてみましょう
※もちろん、漢字でもOKですが、画面上で「温度」と「湿度」の区別がつきにくいです
image.png

マッシュアップの実行

  1. “Save” をクリック

  2. “View Mashup” をクリック
    ※ブラウザで表示されない場合はポップアップブロックを解除してください
    image.png

  3. 以下のように表示されればOK です
    image.png

長くなってしまいましたので、後編その2 に続きます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1