Vuforia - Thingworx 데이터 연계 #
본 포스팅은 Thingworx과 관련된 설정은 포함하지 않습니다.
Thingworx에 대한 기본지식이 있음을 가정합니다.
Vuforia를 처음 사용하시는 분들에게 도움이 되길 바랍니다.
Vuforia 모델 생성 #
Vuforia studio를 실행 시켜 Mobile-default로 새로운 프로젝트를 생성합니다.
생성된 프로젝트를 선택하여 편집상태에 들어갑니다.
Model을 Canvas에 Drag&Drop 합니다.
Gauge 생성 #
데이터를 표시할 Gauge를 Canvas에 그려줍니다.
Gauge의 옵션 중 Billboard를 체크하면 카메라 시점에 맞춰 Gauge가 움직입니다.
Select Box 생성 #
Canvas 영역의 2D를 클릭하여 2D 레이어로 Canvas화면을 전환합니다.
INPUT의 select을 드래그하여 원하는 영역에 끌어다 놓습니다.
Thing 연계 #
ThingTemplate을 사용한 동적 Thing Bind #
Thingworx 데이터 연계를 위해 우측 패널을 펼쳐줍니다.
EXTERNAL DATA의 + 버튼을 눌러줍니다.
동일한 3D형상일 경우 똑같은 Project를 여러개 만드는 건 비효율적입니다. Thingworx의 ThingTemplate로 만들어진 Thing들을 조회하여 Thing의 이름을 사용하여 동적으로 확인하고 싶은 Thing의 데이터를 확인할 수 있도록 Resourse의 SearchFunction을 사용하도록 합니다.
ThingTemplate 기준으로 Thing을 조회할 예정이므로 Service중 SearchThingByTemplate를 선택하고 닫아줍니다.
Thing Bind #
이제 ThingTemplate로 생성된 Thing중 아무거나 하나 선택하고 표시하고 싶은 Data의 propertie를 선택합니다.
데이터 표시를위한 기능 바인드 #
동적으로 Thing의 데이터를 가져오기위한 Thing의 Service는 모두 불러왔습니다.
이제 Service가 실행되서 Data를 화면에 표시할 수 있도록 Bind를 해줍니다.
SearchThingFunction의 SearchThingByTemplate의 Congfiguration을 펼쳐서 Invoke on Startup을 체크해 줍니다.
이제 SearchThingByTemplate서비스는 View를 시작할 때 실행이 되게 설정되었습니다.
ThingTemplate를 입력하지 않으면 data가 나오지 않으니 ThingTemplate의 이름을 Service에 입력해줍니다.
Parameters를 펼쳐주고 ThingTemplate에 ThingTemplate이름을 적어줍시다.
이제 앞서 만들어둔 Select Box에 결과를 연결시켜줍니다.
SerchThingsByTemplate의 All Itmes를 드래그하여 Select Box에 연결합니다. 연결될 Property는 List입니다.
이제 Select Box의 선택결과에 따른 Thing의 데이터가 나오도록 연결합니다.
- Value Field와 Display Field의 값을 name으로 설정합니다. ( Value는 선택된 값, Display는 화면에 표시될 항목)
- Value Field를 APPLICATION PARAMETERS의 Thing에 연결합니다.
- Thing을 ThingTemplate로 생성된 Thing의 Dynamic Entity Name에 연결합니다.
결과확인 #
이제 Preview를 통해 Thingworx의 데이터가 불려오는지, Select Box의 값을 변경했을 때, 데이터가 해당 Thing의 값으로 변경되는지 확인해 봅시다.
마무리 #
Thingworx의 Data를 Vuforia에 연결하는 방법에 대해 알아봤습니다.
이 이외에도 Vuforia에선 3D 모델의 색상을 변경, 카메라의 시점을 변경, 2D에서 사용한 wigdet에 기능 추가 등 다양한 기능이 제공됩니다.
Vuforia에서 사용하는 언어 angularjs에 대해 공부하여 필요한 기능들을 개발해 보시길바랍니다.