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

How to capture a screenshot?

SOLVED
Highlighted
Amethyst

How to capture a screenshot?

Hello friends!


Does exist some way in JS which enable me to capture and screenshot of full or part of a screen?

Then I will send created screenshot into the TWX.

 

My Idea is about creating application which will enable me to capture key steps in assembly as a proof of correct procedure.

 

Thank you for every idea.

 

Thomas

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to capture a screenshot?

Hi @TomasCharvat ,

 

I think this problem/question consist of 2 parts

1.) sending of the data to thingworx-> this is possible via the thingworx services of a repository thing -> SaveImage or SaveBinary 

2.) to generate a snapshot - there is no Vuforia general API method. So means the generation of the snapshot image could be delegated by some  third-party API for the specific platforms (HoloLens, IOS, Android, Windows)

So far I know for Android there is a workaround- but currently it does not work 100% and not supported for the customers use therefore I want only to mention it here as additional information. Also, there is an issue which should be fixed soon from the dev team

The code I tested was something:

$scope.checkCamera_rest = function() { 
//https://<Thingworx-Server>:8443/Thingworx/Things/<TWX-Repository-Thing>/ServiceDefinitions/SaveImage
  
 if(!window.twx.app.isPreview())
  tml3dRenderer.getCameraImage(function(jpeg) {
   $scope.AndroidSaveImageRestApi(jpeg,"test_bild_android.jpg")
}) ;
  else console.log("not applicable for preview mode");
};

/////////// $scope.PreviewSaveImageRestApi(IMG_3482.JPG)
/// here it simple will display the snapshoot to an image widget 
//// and then will saved to repository via Rest API call
 $scope.AndroidSaveImageRestApi = function(img_buffer,img_name)
 {
  let img_data ={}; 
 
//https://medium.com/@koteswar.meesala/convert-array-buffer-to-base64-string-to-display-images-in-angular-7-4c443db242cd
   img_data =  arrayBufferToBase64(img_buffer);
   var TYPED_ARRAY = new Uint8Array(img_buffer)
    
   {try{eval(img_data);} catch (dummy_e) {console.log("dummy exception eval="+ dummy_e);}
    var ret_str='data&colon;image/jpeg;base64,'+img_data;
      
   $scope.view.wdg['image-2']['imgsrc']=ret_str; 
   
   }
 
  let path_param ="/Image/"+img_name
  let content_param =  img_data 
  let serviceStr = 'SaveImage'
  var req = {}
  
 req = {
 "method":'POST',
 "url":'/Thingworx/Things/CAD-Files-Repository/Services/'+serviceStr+'?Appkey="xxxxxxx-xxxxx-xxxxx-xxxx-xxxxxxxxxxxxxx" HTTP/1.1',
 "Host": 'myserverabcd.studio-trial.thingworx.io:8443',
  "Content-Type": 'application/json',
  "AppKey": 'xxxxxxx-xxxxx-xxxxx-xxxx-xxxxxxxxxxxxxx',
  "Cache-Control": 'no-cache',
  "headers": {
    "Content-Type": 'application/json',
    "Accept": "application/json",
    "Appkey": 'xxxxxxx-xxxxx-xxxxx-xxxx-xxxxxxxxxxxxxx', //this the appkey to your thingworx
    "cache-control": 'no-cache'
  },
  "processData": false

};
   

Here I want to point that this is no recommendation for usage and the  code was only some thing what I tested and found an issue with the quality of the created picture. But in generally this code could work on android 

2 REPLIES 2

Re: How to capture a screenshot?

@TomasCharvat  Seems similar to the discussion under existing thread.  I believe there is no OOTB feature to do this within the Studio application. 

 https://community.ptc.com/t5/Studio/Create-a-screendump-Access-the-camera-in-Vuforia-Studio/m-p/5831...

Re: How to capture a screenshot?

Hi @TomasCharvat ,

 

I think this problem/question consist of 2 parts

1.) sending of the data to thingworx-> this is possible via the thingworx services of a repository thing -> SaveImage or SaveBinary 

2.) to generate a snapshot - there is no Vuforia general API method. So means the generation of the snapshot image could be delegated by some  third-party API for the specific platforms (HoloLens, IOS, Android, Windows)

So far I know for Android there is a workaround- but currently it does not work 100% and not supported for the customers use therefore I want only to mention it here as additional information. Also, there is an issue which should be fixed soon from the dev team

The code I tested was something:

$scope.checkCamera_rest = function() { 
//https://<Thingworx-Server>:8443/Thingworx/Things/<TWX-Repository-Thing>/ServiceDefinitions/SaveImage
  
 if(!window.twx.app.isPreview())
  tml3dRenderer.getCameraImage(function(jpeg) {
   $scope.AndroidSaveImageRestApi(jpeg,"test_bild_android.jpg")
}) ;
  else console.log("not applicable for preview mode");
};

/////////// $scope.PreviewSaveImageRestApi(IMG_3482.JPG)
/// here it simple will display the snapshoot to an image widget 
//// and then will saved to repository via Rest API call
 $scope.AndroidSaveImageRestApi = function(img_buffer,img_name)
 {
  let img_data ={}; 
 
//https://medium.com/@koteswar.meesala/convert-array-buffer-to-base64-string-to-display-images-in-angular-7-4c443db242cd
   img_data =  arrayBufferToBase64(img_buffer);
   var TYPED_ARRAY = new Uint8Array(img_buffer)
    
   {try{eval(img_data);} catch (dummy_e) {console.log("dummy exception eval="+ dummy_e);}
    var ret_str='data&colon;image/jpeg;base64,'+img_data;
      
   $scope.view.wdg['image-2']['imgsrc']=ret_str; 
   
   }
 
  let path_param ="/Image/"+img_name
  let content_param =  img_data 
  let serviceStr = 'SaveImage'
  var req = {}
  
 req = {
 "method":'POST',
 "url":'/Thingworx/Things/CAD-Files-Repository/Services/'+serviceStr+'?Appkey="xxxxxxx-xxxxx-xxxxx-xxxx-xxxxxxxxxxxxxx" HTTP/1.1',
 "Host": 'myserverabcd.studio-trial.thingworx.io:8443',
  "Content-Type": 'application/json',
  "AppKey": 'xxxxxxx-xxxxx-xxxxx-xxxx-xxxxxxxxxxxxxx',
  "Cache-Control": 'no-cache',
  "headers": {
    "Content-Type": 'application/json',
    "Accept": "application/json",
    "Appkey": 'xxxxxxx-xxxxx-xxxxx-xxxx-xxxxxxxxxxxxxx', //this the appkey to your thingworx
    "cache-control": 'no-cache'
  },
  "processData": false

};
   

Here I want to point that this is no recommendation for usage and the  code was only some thing what I tested and found an issue with the quality of the created picture. But in generally this code could work on android