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
TomasCharvat
Aquamarine

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 

View solution in original post

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 

View solution in original post

Announcements
Join an
AR Working Group!

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection