항상 신세를지고 있습니다.
마지막으로 여기 메모에서 Vuforia Studio에 Ionic을 사용하여 화면을 장식하는 방법에 대해 썼습니다.
요 전날 Vuforia Studio에서 AR 경험을 만들었을 때, 그 외에도 Ionic의 JAVASCRIPT를 결합하여 화면을 만들었으므로 이번에는 그 내용이됩니다.

소개

사용한 환경은 다음과 같습니다.

Vuforia Studio : Version 8.4.7 (8.4.7.4459)

Vuforia View : Version 8.4.60(1729)

iPad Pro (10.5 inch)

알다시피

Vuforia Studio의 Mobile용 AR 컨텐츠에서는 Ionic framework 1.3.3의 JAVASCRIPT UI Library를 이용해 화면의 표현을 확장할 수 있었습니다.
내가 시도한 것은 Action Sheet, Modal 및 Slide Box이지만 다른 JAVASCRIPT도 마찬가지로 사용할 수 있다고 생각합니다.

절차

모바일에서 자주 있는 아래의 빨간색 프레임과 같은 메뉴는 Vuforia Studio의 VIEW > VIEW 이름.js에 $ionicActionSheet를 추가하는 것으로 이용할 수 있게 됩니다.

//これは後述する手順1の内容
var $ionicActionSheet = $injector.get('$ionicActionSheet');

// ここから下が手順2の内容
 $scope.show = function() {
   // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: '<b>Scan again</b> ' },
       { text: 'Move Next' },
     ],
     destructiveText: 'Delete',
     titleText: 'Select your action',
     cancelText: 'Cancel',
     cancel: function() {
          // add cancel code..
        },
     buttonClicked: function(index) {
       console.log(index);
       if(index ==0){
       // Scan againが押されたら、Vuforia Studioの画面に配置した"scan-1"という名前のScan WidgetのstartScan(スキャン開始)を実行
         twx.app.fn.triggerWidgetService("scan-1", 'startScan');
       }else if (index == 1){
　　　　//Move Nextが押されたらnextpageに遷移する
         twx.app.fn.navigate("nextpage");
       }
       return false;
     }
   });
 };

\$injector를 사용해 $ionicActionSheet를 추가한다

\$ ionicActionSheet의 Usage를 참고로 ActionSheet에 추가하고 싶은 버튼 메뉴를 VIEW 이름 .js 기술한다

ActionSheet를 표시하기 위한 이벤트를 Vuforia Studio측에서 준비한다(일단 여기에서는 버튼의 이벤트에 붙인다··)

요약

Ionic Framework의 라이브러리에 있는 JAVASCRIPT를 Vuforia Studio의 Javascript에 기술하고, Vuforia Studio측의 Event를 사용해 호출하는 것만으로 기능을 이용할 수 있으므로, 편리합니다.

다음은 ionicModal과 ionicSlideBoxDelegate를 사용하여 Modal 표시되는 팝업에 이미지 (step1.jpg ~ step4.jpg)를 슬라이드 표시하는 경우의 샘플입니다.
Vuforia Studio 측에서 Image Widget이나 Button Widget의 Event에서 openModal();을 호출하도록 하면 OK입니다.

var $ionicModal = $injector.get('$ionicModal');
var imagesContent = '<ion-slide><img ng-src="app/resources/Uploaded/steps/step1.jpg" class="fullscreen-image"/></ion-slide><ion-slide><img ng-src="app/resources/Uploaded/steps/step2.jpg" class="fullscreen-image"/></ion-slide><ion-slide><img ng-src="app/resources/Uploaded/steps/step3.jpg" class="fullscreen-image"/></ion-slide><ion-slide><img ng-src="app/resources/Uploaded/steps/step4.jpg" class="fullscreen-image"/></ion-slide>';
$scope.modal = $ionicModal.fromTemplate('<div class="modal image-modal transparent" ng-click="closeModal()"><ion-slide-box show-pager="false">' + imagesContent + '</ion-slide-box></div>', {
    scope: $scope,
    animation: 'slide-in-up'
});
var $ionicSlideBoxDelegate = $injector.get('$ionicSlideBoxDelegate');
$scope.openModal = function() {
    $ionicSlideBoxDelegate.slide(0);
    $scope.modal.show();
};
$scope.closeModal = function() {
    $scope.modal.hide();
};
$scope.$on('$destroy', function() {
    $scope.modal.remove();
});

링크

Ionic framework 문서 링크
h tps // 이오니 cf 라메를 rk. 이 m / cs / v1 / 오 r ゔ ぃ w / # cs s - s