Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?