Vuforia Studio with Thingworx

Aditya1702 · ‎May 25, 2025

Hi Everyone,

Good Morning,

I have a use case in which the user uses model target and inspects a part. The inspection involves various checkpoints. For each check point the user clicks Pass/Fail button and on click of the button the screenshot is taken and the image is send to thingworx along with other details and after that the system moves on next checkpoint and the process follows.

Issue:

The below code works fine in preview all the images are sent along with the details but when previewed through View app on iPad the images are sent randomly example out of 50 images only 38 are sent or sometimes 45 are sent.

Can anyone help me out in figuring out what's wrong

Code:

// $scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover services are available

//console.log($scope.app)

//Start Time

$scope.timeStart = function(){

$scope.app.params.startTime = new Date();

}

//End Time

$scope.timeEnd = function(){

$scope.app.params.endTime = new Date();

}

//Add Inspection Data

$scope.addEmployeeData = function() {

var TWXmodelID = 'SKH-M.SKH-M-AR.VuforiaConfiguration_TH';

var serviceName = 'AddInspectionData';

var parameters = {'GUID':$scope.app.params.uniqueID, 'PartNumber': $scope.view.wdg['labelPartNumber'].text, 'EmployeeID': $scope.app.params.userName, 'CycleStartTime' : $scope.app.params.startTime, 'Experience':$scope.view.wdg['programName'].text, 'Revision':$scope.view.wdg['revisionName'].text}; //'Bin':$scope.view.wdg['textInputBinName'].text

//console.log("Starting UPLOAD using image size " + width);

twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', serviceName, parameters);

//$timeout(function(){

//twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', 'AddInspectionData', parameters);

//},100);

}

//Employee Name

$scope.employeeName = function(){

const empID = Number($scope.app.params.employeeID);

const employeeList = $scope.view.wdg['selectEmployee'].list;

const idToFind = empID; // Change this to the ID you're looking for

const person = employeeList.find(p => p.ID === idToFind);

$scope.app.params.userName = person.Name

$timeout(function(){

$scope.timeStart();

$scope.addEmployeeData();

},500)

}

//Defect Reason

$scope.defectName = function(){

$scope.app.params.defectID = $scope.view.wdg['selectDefect'].value;

const defID = Number($scope.app.params.defectID);

const defectList = $scope.view.wdg['selectDefect'].list;

const idToFind = defID; // Change this to the ID you're looking for

const defect = defectList.find(p => p.ID === idToFind);

$scope.app.params.defectName = defect.Reason

}

//Setting Zone:

$scope.setZone = function(){

var TWXmodelID = 'SKH-M.SKH-M-AR.VuforiaConfiguration_TH';

var serviceName1 = 'GetStepExperienceData';

var serviceName2 = 'GetReasonList';

var parameters = {'Zone':1};

twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', serviceName1, parameters);

//twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', 'GetStepExperienceData', parameters);

twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', serviceName2, parameters);

//twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', 'GetReasonList', parameters);

}

//Blink UI

$scope.blinkUI = function(){

$scope.view.wdg['imagePassBtn'].visible = false;

$scope.view.wdg['imageFailBtn'].visible = false;

$timeout(function(){

$scope.view.wdg['imagePassBtn'].visible = true;

$scope.view.wdg['imageFailBtn'].visible = true;

},900)

}

$scope.firstImage = function(){

//$scope.view.wdg['imageRef'].imgsrc='app/Resources/Uploaded/P10_Bkt.png';

//$scope.timeStart();

//$scope.createFolder();

//$scope.app.params.stepImgName = "P10_Bkt";

//$timeout(function(){

//$scope.addEmployeeData();

//},200);

$scope.view.wdg['image_bottom_image_001'].visible = true;

$scope.view.wdg['imageModelTarget'].visible = false;

$scope.app.params.current_Step = 1;

}

///////////////////////////////////////

/// Thingworx interaction functions START

///////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////// ThingWorx Code to transfer Data////////////////////////////

//ThingWorx:

// *****************************************************************************************************************

// Globals indicated by uppercase naming

// // **************************************************************************************************************

// Globals

////

var LOG_MESSAGE_FAILURE = 'A failure occured';

var LOG_MESSAGE_CONNECTION_FAILURE = 'This action initially tries to connect to Windchill if there is a failure please check the windchill server is up and running';

var WIDTH_USED ;

var UPLOAD_IMAGE_AS_IS;

var NUMBER_OF_HISTORY_IMAGES = 5;

var IMAGE_BORDER = 15;

var IMAGE_BORDER_COLOR = '#FFF832';

// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

// *****************************************************************************************************************

//

// Local functions

// These functions can not be used directly with studio

// The are help function to make the main $scope visible function be more readable

//

// *****************************************************************************************************************

// draw image to a canvas to reduce size

// *****************************************************************************************************************

////

drawImageToCanvas = function (imageToDraw , imageWidth) {

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

var image = new Image();

image.src=imageToDraw ;

var aspect_width = imageWidth;

var aspect_height = parseInt( (image.height / image.width ) * imageWidth );

canvas.width = aspect_width; // target width

canvas.height =aspect_height; // target height

ctx.drawImage(image,

0, 0, image.width, image.height,

0, 0, aspect_width, aspect_height

);

ctx.beginPath();

//ctx.strokeStyle = IMAGE_BORDER_COLOR; // some color/style

//ctx.lineWidth = IMAGE_BORDER; // thickness

ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);

return canvas

}

//Take Screenshot

var callback = function (pngBase64String, args) {

$scope.view.wdg['currentPhoto'].imgsrc='data&colon;image/png;base64,' + pngBase64String;

console.log("args");

console.log(args);

console.log("pngBase64String");

console.log(pngBase64String);

$scope.view.wdg["textArea_args"].text = args;

$scope.$applyAsync();

};

// params = { dataURL:bool, withAugmentation: bool, imgFormat: string, imgWidth: number, imgHeight:number}

$scope.screenShot = function() {

var params = {withAugmentation: true};

tml3dRenderer.takeScreenshot(params, callback, null);

$scope.blinkUI();

}

//////////////////////////////////////////////////////////////////////////////

/// filter input service data and display gauges based on step number START

//////////////////////////////////////////////////////////////////////////////

$scope.filterBasedOnStepNumber = function(inputStepNumber){

// First set all CheckPoint_xxxx Widgets back to invisible again

$scope.setAllCheckpointsVisibility(false);

// determine the dataTableLength to see the number of cycles to go through

var dataTableListLength = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data.length;

//// if needed activate the console.log to see the data result of the 'My_GetDataTableEntries' Thingworx Service

//console.log($scope.app.mdl['data_table_inspection_point_data'].svc['My_GetDataTableEntries'].data);

//(re-)set the CheckPoint counter cp back to 0

var cp = 0;

// go through all rows of the service data to see if they match the inputStepNumber input and then place/change the CheckPoint widgets

for(var i = 0 ; i < dataTableListLength; i++) {

try{

var rowStepNumber = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data[i].Step;

console.log ("i: " + i + ", Step: " + rowStepNumber);

if (rowStepNumber == inputStepNumber){

try{

cp = cp + 1;

console.log ("tried cp: " + cp);

var checkpointName = "CheckPoint_" + (900000 + (cp));

console.log("CheckPoint Name: " + checkpointName);

var buffer_X_Coordinate = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data[i].CAD_X_Coordinate;

var buffer_Y_Coordinate = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data[i].CAD_Y_Coordinate;

var buffer_Z_Coordinate = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data[i].CAD_Z_Coordinate;

var buffer_Pin_Text = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data[i].Pin_Text;

var buffer_Pin_Size_Factor = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data[i].Pin_Size_Factor;

var buffer_Bottom_Label = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data[i].Bottom_Label;

var buffer_Info_Image_Name = $scope.app.mdl['SKH-M.SKH-M-AR.VuforiaConfiguration_TH'].svc['GetStepExperienceData'].data[i].Info_Image_Name;

///Trigger the function 'setIndividualCheckPoint_Position'

console.log('buffer_X_Coordinate: ' + buffer_X_Coordinate);

console.log('buffer_Y_Coordinate: ' + buffer_Y_Coordinate);

console.log('buffer_Z_Coordinate: ' + buffer_Z_Coordinate);

$scope.setIndividualCheckPoint_Position(checkpointName, buffer_X_Coordinate, buffer_Y_Coordinate, buffer_Z_Coordinate, buffer_Pin_Text, buffer_Pin_Size_Factor);

$scope.view.wdg[checkpointName].visible = true;

//for each row in the table set the text in the bottom label and help picture

$scope.view.wdg['label_bottom_label'].text = buffer_Bottom_Label;

console.log("buffer_Info_Image_Name: " + buffer_Info_Image_Name);

console.log("app/resources/Uploaded/" + buffer_Info_Image_Name);

$scope.view.wdg['image_bottom_image_001'].imgsrc='app/resources/Uploaded/'+buffer_Info_Image_Name;

}

catch(err){

console.log ("error on cp: " + cp);

}

//var checkpointName = "CheckPoint_" + (900000 + i);

//console.log(checkpointName);

//$scope.view.wdg[checkpointName].visible = arg;

}

catch(err){

console.log ("error on: " + i);

}

//////////////////////////////////////////////////////////////////////////////

/// filter input service data and display gauges based on step number END

//////////////////////////////////////////////////////////////////////////////

//var imageCounter = Number($scope.app.params.current_Step)-1;

//Upload Image

$scope.TriggerUpload = function (width) {

//let num1 = $scope.app.params.current_Step - 1;

let numStep = $scope.app.params.current_Step;

$timeout(function(){

if (width != null && width != "") {

UPLOAD_IMAGE_AS_IS = false;

canvas = drawImageToCanvas($scope.view.wdg["currentPhoto"].imgsrc , width );

contextArray = canvas.toDataURL().split(",");

var TWXmodelID = 'SKH-M.SKH-M-AR.VuforiaConfiguration_TH';

var serviceName = 'UploadImageIntoRepo';

var parameters = {'GUID':$scope.app.params.uniqueID, 'ImageName': 'Z1_S'+numStep+'_'+$scope.app.params.imageName+'.png', 'Content' : contextArray[1] };

twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', serviceName, parameters);

//twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', 'UploadImageIntoRepo', parameters);

//$scope.$applyAsync();

}

},500)//600

}

//This is the function increase or decrease the current_Step application parameter value and then update the display of CheckPoints

$scope.changeCurrentStep = function(delta)

{

$scope.TriggerUpload(480);

//$timeout(function(){

var current_step_buffer = parseInt($scope.app.params['current_Step']);

var current_step_changed = parseInt(current_step_buffer) + parseInt(delta);

if (current_step_changed <= 1){

current_step_changed = 1;

}

else{

}

console.log (current_step_changed);

$scope.app.params['current_Step'] = current_step_changed;

//once the application parameter has been changed run the 'filterBasedOnStepNumber-function

$scope.filterBasedOnStepNumber($scope.app.params['current_Step']);

//$scope.$applyAsync();

//},900)

}

////This is a function to set the visibility of all placeholder CheckPoint_90000X widgets in one go (the maximum is currently set to 10 but can be changed)

$scope.setAllCheckpointsVisibility = function(arg)

{

for(var i = 1 ; i < 11; i++) {

try{

var checkpointName = "CheckPoint_" + (900000 + i);

console.log ("set visibility of checkpoint =" + checkpointName);

$scope.view.wdg[checkpointName].visible = arg;

}

catch(err){

console.log ("error on: " + i);

}

////This is the function to manipulate an individual CheckPoint's position and content

$scope.setIndividualCheckPoint_Position = function(cpid, x, y, z, pintext, scale){

console.log("Widget '" + cpid +"' placed.");

$scope.view.wdg[cpid].text=pintext;

$scope.view.wdg[cpid].scale=scale;

$scope.view.wdg[cpid].x=x/1000;

$scope.view.wdg[cpid].y=y/1000;

$scope.view.wdg[cpid].z=z/1000;

$scope.view.wdg[cpid].visible=true;

}

///////////////////////////////////////

/// Thingworx interaction functions START

///////////////////////////////////////

/// Function to programmatically trigger the TWX service My_GetDataTableEntries if required

$scope.GetDataTableEntries = function() {

var TWXmodelID = 'SKH-M.SKH-M-AR.VuforiaConfiguration_TH'; //'Test_Experience_Th';

var serviceName = 'GetStepExperienceData';//'GetDataByStepNumber';

var parameters = {}; 

twx.app.fn.triggerDataService(TWXmodelID, serviceName, parameters);

}

// what to do automatically after the My_GetDataTableEntriesp TWX Service has been completed

$scope.$on('GetStepExperienceData.serviceInvokeComplete', function(evt, arg)

{

var buffer_stepNumber = parseInt($scope.app.params['current_Step']);

$scope.filterBasedOnStepNumber(buffer_stepNumber);

});

//Inspection Complete Popup //$scope.app.params.last_Step $scope.app.params.current_Step

$scope.inspectionComplete = function(){

$timeout(function(){

//if($scope.app.params.current_Step==numLastStep1){

$scope.view.wdg["popupExperienceDetails"].visible = true;

$scope.view.wdg["gridLayoutBottomButtons"].visible = false;

$scope.view.wdg["imageRef"].visible = false;

//}

},1000)//1200

}

//Zone Navigation

$scope.navigateToZone = function(n){

$timeout(function(){

$scope.app.fn.navigate('Zone'+n);

//$scope.app.params.current_Step = 1;

},1000)

}

//Multiple Zones

$scope.trial = function(){

var n = Number($scope.app.params.numberOfZones);

var numLastStep1 = Number($scope.app.params.lastStepZone1); //+ Number($scope.app.params.stepIncrement);

var numLastStep2 = Number($scope.app.params.lastStepZone2); //+ Number($scope.app.params.stepIncrement);

var numLastStep3 = Number($scope.app.params.lastStepZone3); //+ Number($scope.app.params.stepIncrement);

var numLastStep4 = Number($scope.app.params.lastStepZone4); //+ Number($scope.app.params.stepIncrement);

var numLastStep5 = Number($scope.app.params.lastStepZone5);

var numLastStep6 = Number($scope.app.params.lastStepZone6);

if(n==1){

if($scope.app.params.current_Step==numLastStep1){

$scope.inspectionComplete();

}

else if(n==2){

if($scope.app.params.current_Step==numLastStep1){

$scope.navigateToZone(2);

}

/*if($scope.app.params.current_Step==numLastStep2){

$scope.inspectionComplete();

}*/

}

else if(n==3){

if($scope.app.params.current_Step==numLastStep1){

$scope.navigateToZone(2);

}

/*if($scope.app.params.current_Step==numLastStep2){

$scope.navigateToZone(3);

}

if($scope.app.params.current_Step==numLastStep3){

$scope.inspectionComplete();

}*/

}

else if(n==4){

if($scope.app.params.current_Step==numLastStep1){

$scope.navigateToZone(2);

}

/*if($scope.app.params.current_Step==numLastStep2){

$scope.navigateToZone(3);

}

if($scope.app.params.current_Step==numLastStep3){

$scope.navigateToZone(4);

}

if($scope.app.params.current_Step==numLastStep4){

$scope.inspectionComplete();

}*/

}

else if(n==5){

if($scope.app.params.current_Step==numLastStep1){

$scope.navigateToZone(2);

}

/*if($scope.app.params.current_Step==numLastStep2){

$scope.navigateToZone(3);

}

if($scope.app.params.current_Step==numLastStep3){

$scope.navigateToZone(4);

}

if($scope.app.params.current_Step==numLastStep4){

$scope.navigateToZone(5);

}

if($scope.app.params.current_Step==numLastStep5){

$scope.inspectionComplete();

}*/

}

else if(n==6){

if($scope.app.params.current_Step==numLastStep1){

$scope.navigateToZone(2);

}

/*if($scope.app.params.current_Step==numLastStep2){

$scope.navigateToZone(3);

}

if($scope.app.params.current_Step==numLastStep3){

$scope.navigateToZone(4);

}

if($scope.app.params.current_Step==numLastStep4){

$scope.navigateToZone(5);

}

if($scope.app.params.current_Step==numLastStep5){

$scope.navigateToZone(6);

}

if($scope.app.params.current_Step==numLastStep6){

$scope.inspectionComplete();

}*/

}

//Add Inspection Image

$scope.addImagePass = function() {

//let num1 = $scope.app.params.current_Step - 1;

let numStep = $scope.app.params.current_Step;

var TWXmodelID = 'SKH-M.SKH-M-AR.VuforiaConfiguration_TH';

var serviceName = 'AddInspectionImage';

var parameters = {'GUID':$scope.app.params.uniqueID, 'EmployeeID': $scope.app.params.userName, 'StepNumber' : 'Step-' + numStep, 'FailureReason' : null, 'StepStatus' : true, 'ImageName': 'Z1_S'+numStep+'_'+$scope.app.params.imageName+'.png', 'ImageDisplayName': 'Z1_S'+numStep+'_'+$scope.app.params.imageName+'.png', 'Zone': 1};

twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', serviceName, parameters);

//twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', 'AddInspectionImage', parameters);

$scope.TriggerUpload(480);

//$scope.inspectionComplete();

$scope.trial();

$timeout(function(){

$scope.changeCurrentStep(1);

},900)

}

$scope.addImageFail = function() {

$scope.defectName();

//let num1 = $scope.app.params.current_Step - 1;

let numStep = $scope.app.params.current_Step;

var TWXmodelID = 'SKH-M.SKH-M-AR.VuforiaConfiguration_TH';

var serviceName = 'AddInspectionImage';

var parameters = {'GUID':$scope.app.params.uniqueID, 'EmployeeID': $scope.app.params.userName, 'StepNumber' : 'Step-' + numStep, 'FailureReason' : $scope.app.params.defectName, 'StepStatus' : false, 'ImageName': 'Z1_S'+numStep+'_'+$scope.app.params.imageName+'.png', 'ImageDisplayName': 'Z1_S'+numStep+'_'+$scope.app.params.imageName+'.png', 'Zone': 1};

twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', serviceName, parameters);

//twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', 'AddInspectionImage', parameters);

$scope.TriggerUpload(480);

//$scope.inspectionComplete();

$scope.trial();

$timeout(function(){

$scope.changeCurrentStep(1);

},900)

}

//Cycle Completed

$scope.cycleCompleted = function () {

var TWXmodelID = 'SKH-M.SKH-M-AR.VuforiaConfiguration_TH';

var serviceName = 'CompleteInspection';

var parameters = {'GUID':$scope.app.params.uniqueID, 'CycleStartTime' : $scope.app.params.startTime, 'CycleEndTime' : $scope.app.params.endTime, 'Bin': $scope.view.wdg['textInputBinName'].text};

//twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', serviceName, parameters);

$timeout(function(){

twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', serviceName, parameters);

//twx.app.fn.triggerDataService('SKH-M.SKH-M-AR.VuforiaConfiguration_TH', 'CompleteInspection', parameters);

//$scope.app.params.current_Step = 1;

//window.location="https://view.vuforia.com/command/view-experience?url=http%3A%2F%2F172.26.1.89%3A2019%2FExperienceService%2Fcontent%2Fprojects%2Fskhproject_inspection-wip%2Findex.html%3FexpId%3D1";

window.location = $scope.app.params.expURL;

},910)

}

//Show Hide Model

$scope.showModel = function(){

$scope.view.wdg["model-1"].opacity = 0.7;

}

$scope.hideModel = function(){

$scope.view.wdg["model-1"].opacity = 0.01;

}

Thanks and Best Regards,

Aditya Gupta.

Aditya1702 · ‎May 26, 2025

The code has been pasted twice by mistake