AC51 AC52 AC53 ThingWorx Studio ハンズオン PTC ジャパン株式会社 2018 年 5 月 23 日 本情報の内容 ( 添付文書 リンク先などを含む ) は de:code 2018 開催日 (2018 年 5 月 22~23 日 ) 時点のものであり 予告なく変更さ

ThingWorx

Studio

ハンズオン

PTCジャパン株式会社

2018年5月23日

AC51

AC52

AC53

1. ThingWorx サーバーのインストールとセットアップ

2. ThingWorx Experience Service インストール

4. AR アプリケーションの開発

3. エージェントアプリの開発（オプション）

本日の実施範囲

ThingWorx Studio ハンズオン環境

コンテンツ公開

スキャンした情報

対応する

AR エクスペリエンス

を配信

◼

CADデータをThingWorx Studio に取り込み

◼

AR コンテンツをExperience Serviceにアップロード

◼

ThingWorx ViewアプリにThingMark をかざすとAR コンテンツが配信される

PTCのホスト

AR コンテンツ開発ツール

事前準備：お手持ちのスマートフォンにVIEWアプリをインストール

iOS

(iPhone, iPad) Google Play(Android)

ThingWorx Studioハンズオンの流れ

AR を作る

1

製品情報の表示

2

ARアプリを操作する

3

デバイス情報を表示

4

データ準備

０

• 設計データをアフターサービスで活用する例になります。

製品情報、搭載センサー稼働状況、分解手順の確認が行えます。

（開発内容の①～④までの内容で作成できるアプリ）

Thingworx Studio ハンズオンで作成するARアプリ

◼ この画面は、Previewによる確認に なります。

実施する操作

この章を終えると…

ARを作る

1

1. 右上の緑色 ” ○＋”ボタンをクリックします

ARを作る －プロジェクトの新規作成

1. ProjectName: Bluepump_＊＊(席の番号 01～22) 2. Server：割当てられたサーバーURL URL: https://9xkhridw.studio-trial.thingworx.io

URLは PCのドキュメント以下にある

ExperienceServer.txt ファイルから

コピー＆ペーストしてください

ARを作る －名前とARサーバーの指定

1

画

面

ウ

ィ

ジ

ッ

ト

表示される画面

。

画面に表示

する為の

データ

サービス

イベント領域

。

各種コンポー

ネントの詳細

プロパティ

コンテンツの

全リスト

JavaScript

CSSの定義

ARを作る －ThingWorx Studioの画面構成

右上の緑色 ” ○＋”ボタンをクリックします。 1. 左のウィジェット ボックスから、“ThingMark” ウィジェットを 探します。 2. 中央のキャンバスへ ”ThingMark” ウィジェットを ドラッグ ＆ ドロップします。

①

②

ARを作る －ThingMark Widgetの配置

右上の緑色 ” ○＋”ボタンをクリックします。

1. 右側のPROPETIESの“Marker Width”を0.1に設定。

ARを作る －ThingMark Widgetのスケール変更

右上の緑色 ” ○＋”ボタンをクリックします。1. 左側のPROJECTパネル>RESOURCES>リスト横の“＋”をボタンを_{クリックします。} 2. Add Resource ダイアログで以下のように指定します。

■ファイル指定：Bluepump.pvz

■ Run CAD Optimizerチェックボックスにチェックする 3. “Add”ボタンをクリックする。

①

②

②

③

Bluepump.pvz ファイルは

PCのドキュメント以下に

あります

ARを作る －3D CADデータインポート

1

• リソースに含まれるもの：

– 3Dモデル

– シーケンス

– 画像

• 必要に応じてリソースを

追加／削除する

• プロジェクトペインの

リソースノードに

リソースは表示される

リソースは、自身のエクスペリエンスを構築するためにプロジェクトにインポートするアイテムのライブラリ

リソースの表示

リソースの追加

リソースの追加について

1

“High”の設定

サイズ：5.2Mb

133X圧縮

“Med”の設定

サイズ：2.6Mb

267x圧縮

“Low”の設定

サイズ：1.4Mb

496x圧縮

Creo Parametricのモデルサイズ：695Mb

Creo Viewのデフォルトのデータサイズ： 88Mb

（8x圧縮）

最適化の例

CAD データ取り込み方法 – Creo Illustrate

⚫ さまざまな CAD データを、Creo Illustrate がネットワーク経由での配信に適したサイズ・品質のビューワーデータに変換します

◼

STEP

◼

IGES

◼

VRML

◼

STL

◼

OBJ

◼

DGN

◼

Creo

◼

Autodesk

◼

SolidWorks

◼

Catia V5

◼

JT

◼

I-deas

◼

Siemens NX

◼

PVZ

▪ 回転

▪ ズーム

▪ パン

_Ctrl

Shift

ARを作る －マウスでの3D CANVASの操作について

1

右上の緑色 ” ○＋”ボタンをクリックします。

1. 左のウィジェット ボックスから、“Model” ウィジェットを探し ます

2. 中央のキャンバスへ ”Model” ウィジェットをドラッグ & ドロッ

①

②

ARを作る －3Dモデルの配置 －Model Widget

1. PROPETIESで各プロパティを以下のように設定する ■ Resource ： Bluepump_Low.pvz ■ Scale ：0.5 ■ Sequence ：teardown-demo （ 後のアニメーション再生時に使用します） 2. ３Dモデルを上記画面のようにツールバーコマンドを使用して 位置を調整します。（操作に関しては、次ページを参照）

①

①

①

②

ARを作る －3Dモデルの設定

1

X,Y,Z軸ベースの移動 平面、回転弧 合致：中央ハンドルを 別のサーフェス上にド ラッグする 全体ズーム 選択ズーム 選択コンポーネントの表示 選択コンポーネントの非表示 ３D Canvasのコンポーネントは、軸ベースの移動、ズーム、 表示・非表示などの操作を GUI から行えます また、３D、２D Canvasのアイテムに対して、切取り、コピー、 貼り付け、UNDO/REDOなどの操作を GUI から行えます 切取り _{貼付け Redo ３Dモードへ}

ARを作る Canvasツールバーについて

1. 右側のPOROJECT＞CONFIGURATION＞Experienceをクリックします 2. 上記のように各項目を指定します ■ Title ： ARアプリの公開名 （ThingWorx ViewでThingMarkを認識した際に表示される名前） ■ ThingMark：取得されているコード

②

②

①

ThingMarkのコード

19230:101

19230:102

19230:103

19230:104

19230:105

いずれかです

ARを作る －ThingMarkへのエクスペリエンスの関連付け

1

1. 右側のPOROJECT＞CONFIGURATION＞Infoをクリックします 2. 上記のように各項目を指定します

②

①

パブリック

を選択

ARを作る －エクスペリエンスの情報を編集

1

1. 上部のThingWorx Studio ツールバーの“Save” をクリックします 2. ツールバーの”Publish” をクリックします ①ARアプリの保存中 以下のようにパブリッシュされる過程を確認できます。 ②ARアプリのアップロード中 ③ARアプリのアップロード成功

ログインダイアログが表示されたら

id: decode

password: decode

①

②

ARを作る －ARアプリの公開（パブリッシュ）

1

1. ThingWorx View でThingMarkをスキャンします 2. ARコンテンツ一覧より作成した「Bluepump001」をクリックします

①

ThingMarkを

スキャンする

②

③

ARを作る －ThingWorx Viewによるアプリの確認

実施する操作

この章を終えると…

ARアプリに製品情報の表示

２

1. ” ３D Label” Widgetを、画像を参考にしながら配置します 2. PROPETIESで各プロパティを以下のように設定する ■ Text ： Bluepump ■ Billboardチェックボックス ：チェックする

②

②

①

ARアプリに製品情報の表示 － ウィジェットの配置: 3D Label Widget

• 3Dキャンバスとは異なるウィジェット

• ウィジェットを配置するキャンバスパネルに

ドラッグする

• ThingWorxにある類似なウィジェット名は

同様な使い方をするものが多い

2Dキャンバスを用いることで、表示するボタンや情報のエクスペリエンスをレイアウトすることができる

2Dキャンバスのウィジェット

2Dコントロール

1. CANVASツールバーの“２Dモード”ボタンをクリックします 2. ”Card” Widgetを、画像を参考にしながら配置します

①

②

ARアプリに製品情報の表示－ ウィジェットの配置:Card Widget

1. ”Value Display”（値表示） ウィジェットを 画像を参考にしながら配置します 2. PROPETIESで各プロパティを以下のように設定する １番目のValue Display ■ Label: Name: ■ Value： Bluepump ２番目のValue Display

■ Label: Serial No: ■ Value： 123456

①

②

ARアプリに製品情報の表示 －ウィジェットの配置: Value Display Widget

1. 上部のThingWorx Studio ツールバーの“Save” そのあとでPublish” をクリックします

ARアプリの公開（パブリッシュ）

実施する操作

この章を終えると…

ARアプリを操作する

3

1. CANVASツールバーの“３Dモード”ボタンをクリックします 2. 既にCANVAS内に配置した” BluePump の3D Label” を選択しま

す 3. PROPETIESで各プロパティを以下のように設定する ■ Visible チェックボックス：チェックを外す

①

②

③

ARアプリを操作する － ３Dラベルの非表示設定

3

1. CANVASツールバーの“2Dモード”ボタンをクリックします 2. PROJECTパネル＞VIEWSセクション＞ツリー上 ” card-1” を選択 します 3. PROPETIESで各プロパティを以下のように設定する ■ Visible チェックボックス：チェックを外す

①

②

③

ARアプリを操作する － Cardの非表示設定

3

1. ” Grid Layout” ウィジェットを、画像を参考にしながら ”Bottom Panel”に配置します

ARアプリを操作する － レイアウト決め

35 1. PROJECTパネル＞VIEWSセクション＞ツリー上 ” GridLayout>row-1” を選択しま す 2. PROPETIES>Grid ACTIONS で以下の操作を行います ■ “Add Column”（列を追加）の“＋”ボタンを２回クリックします

①

②

ARアプリを操作する － レイアウト決め

3

ARアプリを操作する － 操作用ウィジットの配置

1. PROJECTパネル＞VIEWSセクション＞ツリー上” GridLayout>row-1>column-1” を選択します。

2. PROPETIES>Alignment（位置揃え）で以下の操作を行います ■ Alignment :“Center”（中央） にする。

3. column-2、column-3 についても同様な設定にします

4. column-3は、“Fixed Column Size”（固定の列サイズ）を250pxに設定します

①

②

④

③

③

ARアプリを操作する － レイアウトの調整

3

◼ Image when Pressedを上記画像に設定 ◼ 以下に設定します。

ARアプリを操作する －各操作ウィジェットの設定 －プロパティ設定

1. CANVAS内の既存トグルボタン：“toggleButton-1”を選択します 2. PROPETIES>“Pressed“の“⇔）”をドラッグし、 PROJECTパネル＞ VIEWSセクション＞ツリー上” 3DLabel-1” でドロップします 3. ダイアログより“Visible”（表示）を選択して “Bind”ボタンをクリックします 4. 同様に、“card-1”についても行います

①

②

③

④

ARアプリを操作する －各操作ウィジェットの設定

3

◼ 選択したコンポーネントにバインドされている 状況を一覧で確認できる

◼ 下部情報ウィンドウボタンをクリック

ARアプリを操作する －バインド一覧について

1. CANVAS内の既存ボタン： “button-1”を選択します 2. PROPETIES>EVEBTS＞“Click”の“←）”をドラッグし、 PROJECTパネル＞VIEWSセクション＞ツリー上” model-1” でドロップします 3. ダイアログより“Play ALL”（すべて再生）を選択し “Bind”ボタンをクリックします

①

②

③

③

ARアプリを操作する －各操作ウィジェットの設定 －アニメ再生

3

1. CANVAS内の既存スライダ：“slider-1”を選択します 2. PROPETIES>EVEBTS＞“Value”の“⇔）”をドラッグし、 PROJECTパネル＞VIEWSセクション＞ツリー上” model-1” でドロッ プします 3. ダイアログより“Scale”（スケール）を選択し “Bind”ボタンをクリックします

①

②

③

ARアプリを操作する －各操作ウィジットの設定 －スケール

3

1. 上部のThingWorx Studio ツールバーの“Save” そのあとで “Publish”をクリックします ◼ この画面は、Previewによる確認に なります。

ARアプリの公開（パブリッシュ）と確認

3

実施する操作

この章を終えると…

ARアプリにデバイス情報を表示

4

コンテンツ公開

対応する

AR エクスペリエンス

を配信

ThingWorx Serverから IoT データ取得

◼ 機器データを

ThingWorx Foundation に取り込み

◼

IoTデータとAR コンテンツを ThingWorx Studio で紐付け

◼

Experience Serviceから AR コンテンツを配信

ARアプリにデバイス情報を表示 －システム概要

1. ” ３D Gauge” ウィジェットを画像を参考にしながら配置します 2. PROPETIESで以下を設定します 1番目3D Gauge ： ■ Resource: “Default/vu_thermometer.svg”を選択 ■ Scale :“0.8” 2番目3D Gauge ：

①

①

②

②

ARアプリにデバイス情報を表示 －ウィジェットの配置

4

1. ” データパネル”を表示します。 2. EXTERNAL DATA (外部データ) の右端“＋”を クリックします 3. （認証ダイアログが開く場合） ログイン、パスワードを入力し ログインします 4. Entitiesで“car1”を入力します。 5. 一覧で“Car1(Thing)”を選択します。 6. PROPETIESで以下の２つのプロパティを選択（該当プ ロパティ右の＋をクリックします）します。 ■ EngineTemp

③

④

⑤

⑤

ARアプリにデバイス情報を表示 －センサー情報の取得

4

1. DATAパネル内の “EngineTemp”の“←）”をドラッグし、 CANVAS内の３D Gaugeの ”ア” にドロップします 2. ダイアログより“Text”を選択し、“Bind”ボタンをクリックします 3. DATAパネル内の “Speed”の“←）”をドラッグし、 CANVAS内の３D Gaugeの ”イ” にドロップします

ア

イ

①

③

②

②

④

④

ARアプリにデバイス情報を表示 －センサー情報のバインド

4

1. 上部のThingWorx Studio ツールバーの“Save” そのあとに “Publish”を クリックします ◼ この画面は、Previewによる確認 になります。

ARアプリの公開（パブリッシュ）と確認

4

ThingWorx Studio フリートライアル（試供版）

https://studio.thingworx.com/

◼

30日間利用可能

◼

ThingWorx Studio の全ての機能を使用可能

◼

AR コンテンツを配信可能

◼

ThingWorx View のダウンロード使用可能

◼

PTC クラウド上の

エクスペリエンスサービスを利用

オンラインでサインアップするだけで、

いますぐ無料で利用できます。