Help us understand the problem. What is going on with this article?

Raspberry Pi をThingWorx につなげる(後編その1)

後編その1: 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”をクリック3つの変数が右側のリストに追加されたことを確認

  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 は2のままで”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

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

マッシュアップの実行

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした