cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Your Friends List is a way to easily have access to the community members that you interact with the most! X

Visualize Vuforia studio capture image and text input in ThingWorx.

Jay_9621
7-Bedrock

Visualize Vuforia studio capture image and text input in ThingWorx.

is there any solution for achieving following requirement:
 
1. The user will capture the screen in Vuforia view and also add comments along with image(using text input widget).
      The required text input from Vuforia Studio:     A) Username
                                                      B) User Comment
 
2. that captured data will be stored in ThingWorx in tabular form.
     Following data will be stored in tabular form:      A) Username
                                            B) Captured Snap
                                           C) User Comment

 

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @Jay_9621 ,

1.) currently you can capture , so far I know,  only the screen with 3d augmentations. This could be done  with some code like this:

 

  
})
//=================
$scope.takePicture= ()=>{ 
//---------------------------------------------------------------------------------------
var callbackfnc = function (pngBase64String, args) {
 $scope.setWidgetProp('3DImage-1','src',pngBase64String)
 $scope.$applyAsync();
};
//---------------------------------------------------------------------------------------
$scope.screenShotPar = function(augmentation) {
let params = { dataURL:true, withAugmentation:augmentation }
  tml3dRenderer.takeScreenshot(params, callbackfnc, null);
  $scope.$applyAsync();
}
//--------------------------------------------------------------------------
$scope.screenShotPar($scope.app.params['Augementation'])
}
//the app parameter Augementation is true or false

 

This function will create a snapshot of the device screen and will set the picture src - property  of the 3DImage Widget - to display the picture in the project. In your case you need to save this picture to TWX , point 2 below.

The Augmentation parameter is true then it will capture also information of the 3D augmentations , if false only the picture of the camera. Please, pay attention that it could not capture the 2D augmentations. So that means that whole information (Augmentations, 3dModels, inputs, user name etc.)  you need to capture should be displayed on 3D Widget e.g. 3D Image, Labels ,model gauges, Example:

2023-06-22_15-30-01.jpg

2.) regarding to the user name - and other information you want to save to Thingworx -> So to save a picture to TWX repository you can use SaveImage service of the repository to save the picture. You have to add the service of the Thing repository where you want to save e.g. myFR

2023-06-22_15-38-55.jpg

and use some js code like this:

 

$scope.test=function() {
//generate dynamic randon name to save
let randNumb= Math.floor(Math.random() * 10000000) + Math.floor(Math.random() * 10000000);
  $scope.SaveImageToTwxRepository('/pictures/X'+randNumb.toString()+'.jpg',  $scope.view.wdg['camera-1']['image'] );  
$scope.$applyAsync();
}
//=================================================
$scope.SaveImageToTwxRepository = function(path, content) {
 $scope.$applyAsync(function() {
     $scope.app.runMyTWXService ('myFR','SaveImage',{"content": content, "path":path} )
               }   ,500 );          
  console.log( "Called -$scope.SaveImageToTwxRepository");
};

 

Here the picture is taken from  a camera widget - image property but you can use any sorce - e.g. the sourc of 3DImage widget in 1.)

Regarding to get the information about user or user group - you can use the Thingworx methods :

CurrentSessionInfo.GetCurrentUser()

CurrentSessionInfo.GetCurrentUserGroups()

View solution in original post

1 REPLY 1

Hi @Jay_9621 ,

1.) currently you can capture , so far I know,  only the screen with 3d augmentations. This could be done  with some code like this:

 

  
})
//=================
$scope.takePicture= ()=>{ 
//---------------------------------------------------------------------------------------
var callbackfnc = function (pngBase64String, args) {
 $scope.setWidgetProp('3DImage-1','src',pngBase64String)
 $scope.$applyAsync();
};
//---------------------------------------------------------------------------------------
$scope.screenShotPar = function(augmentation) {
let params = { dataURL:true, withAugmentation:augmentation }
  tml3dRenderer.takeScreenshot(params, callbackfnc, null);
  $scope.$applyAsync();
}
//--------------------------------------------------------------------------
$scope.screenShotPar($scope.app.params['Augementation'])
}
//the app parameter Augementation is true or false

 

This function will create a snapshot of the device screen and will set the picture src - property  of the 3DImage Widget - to display the picture in the project. In your case you need to save this picture to TWX , point 2 below.

The Augmentation parameter is true then it will capture also information of the 3D augmentations , if false only the picture of the camera. Please, pay attention that it could not capture the 2D augmentations. So that means that whole information (Augmentations, 3dModels, inputs, user name etc.)  you need to capture should be displayed on 3D Widget e.g. 3D Image, Labels ,model gauges, Example:

2023-06-22_15-30-01.jpg

2.) regarding to the user name - and other information you want to save to Thingworx -> So to save a picture to TWX repository you can use SaveImage service of the repository to save the picture. You have to add the service of the Thing repository where you want to save e.g. myFR

2023-06-22_15-38-55.jpg

and use some js code like this:

 

$scope.test=function() {
//generate dynamic randon name to save
let randNumb= Math.floor(Math.random() * 10000000) + Math.floor(Math.random() * 10000000);
  $scope.SaveImageToTwxRepository('/pictures/X'+randNumb.toString()+'.jpg',  $scope.view.wdg['camera-1']['image'] );  
$scope.$applyAsync();
}
//=================================================
$scope.SaveImageToTwxRepository = function(path, content) {
 $scope.$applyAsync(function() {
     $scope.app.runMyTWXService ('myFR','SaveImage',{"content": content, "path":path} )
               }   ,500 );          
  console.log( "Called -$scope.SaveImageToTwxRepository");
};

 

Here the picture is taken from  a camera widget - image property but you can use any sorce - e.g. the sourc of 3DImage widget in 1.)

Regarding to get the information about user or user group - you can use the Thingworx methods :

CurrentSessionInfo.GetCurrentUser()

CurrentSessionInfo.GetCurrentUserGroups()

Top Tags