Skip to main content
7-Bedrock
May 13, 2021
Solved

Javascript async functionality execute code step-by-step

  • May 13, 2021
  • 2 replies
  • 3084 views

Hello everybody!

 

Is there a way to sequentially execute javascript code in vuforia?

 

I have a function in which I need to perform a series of actions in a clear order:
1) Call the service and get the data
2) Analyze data from the service
3) Depending on the data analysis, show or hide some elements of the vuforia interface

 

If i write the code like this:

 

// Call service
$scope.ServiceCall = function () {
 twx.app.fn.triggerDataService("VuforiaThing", "Service");
};

// Anylaze data
$scope.DataAnalyze = function () {
 if ($scope.app.mdl['VuforiaThing'].svc['Service'].data.current['OperationStatus'] == "status"){
 $scope.app.params.testparam = true;
 } else {
 $scope.app.params.testparam = false;
 }
};

//Manipulate UI
$scope.ManipulateUI = function () {
 if ($scope.app.params.testparam == "true"){
 $scope.view.wdg['WidgetID']['visible'] = true;
 } else {
 $scope.view.wdg['WidgetID']['visible'] = false;
 }
};

// Execute code after view entry
$scope.$on('$ionicView.afterEnter', function() {
 $scope.ServiceCall();
 $scope.DataAnalyze();
 $scope.ManipulateUI();
});

 

 

sometimes it turns out that step 2 is performed earlier than 1 and then an incorrect analysis occurs, since there is no data and, accordingly, at step 3, I perform erroneous actions on the interface elements.

 

If i try to use "async function" vuforia say

 

 

! 'async function' is only available in ES8 (use 'esversion: 8').

 

 

I find some solutions like this

2021-05-13 181547.png2021-05-13 181724.png

but it does not working in Vuforia.

 

Best answer by KanivetsAV

Hello everybody!

 

Seems i found solution.

First of all we need on our "screen.js" paste such code comment:

/*jshint esversion: 8 */

After that manipulation vuforia studio don't alert async js functions.

 

example1:

$scope.$root.$on('SomeTwxService-end', async function(evt, arg) {
 await $scope.Func1();
 await $scope.ManipulateUI(); 
 ...
 await $scope.Func1();
 await $scope.Func2();
 await $scope.Func3();
});

example2:

$scope.OpCntrlStateChangedCheck = function () { 
 var step1_value;
 var step2_value;
 var step3_value;
 	var p1 = new Promise((resolve, reject) => {
 	step1_value= angular.element(document.querySelectorAll('twx-widget[widget-id=\"SomeID1\"] twx-widget-content div label input'));
 	resolve();
 });
 var p2 = new Promise((resolve, reject) => {
 	step2_value= angular.element(document.querySelectorAll('twx-widget[widget-id=\"SomeID2\"] twx-widget-content div label input'));
 	resolve();
 });
 var p3 = new Promise((resolve, reject) => {
 	step3_value= angular.element(document.querySelectorAll('twx-widget[widget-id=\"SomeID3\"]'));
 	resolve();
 });

	Promise.all([p1, p2, p3]).then(value => {
	 if (SomeValue == "learn") {
 		for (var x0=0; x0 < $scope.view.wdg['repeater-2']['data'].length; x0++) {
				Step1_value[x0].disabled = true;
 }
 } else {
 		for (var x1=0; x1 < $scope.view.wdg['repeater-2']['data'].length; x1++) {
				Step1_value[x1].disabled = false;
 } 
 } 

 for (var x2=0; x2 < $scope.view.wdg['repeater-2']['data'].length; x2++) {
 if (step1_value[x2].checked == step2_value[x2].checked) {
 step3_value[x2].className = "ControlValueCheckbox checkbox-balanced";
 } else if (step1_value[x2].checked != step2_value[x2].checked) {
 step3_value[x2].className = "ControlValueCheckbox checkbox-assertive";
 }
 }
	}); 	
};

 

I tested functionality in the vuforia studio and on mobile vuforia view application seems to work fine.

 

It may be useful for other community members.

2 replies

14-Alexandrite
May 14, 2021

Have you tried to listen on serviceInvokeComplete?

Like this example.

 

$scope.$on('getModelURL.serviceInvokeComplete', function() {

$scope.view.wdg['model-4']['src'] = $scope.app.mdl['remoteDesignShareUtils'].svc['getModelURL'].data.current['result'];

$scope.app.mdl['remoteDesignShareUtils'].svc['copyRep2FileRepowJSON'].data.current['result'];*/

});

KanivetsAV7-BedrockAuthorAnswer
7-Bedrock
October 4, 2021

Hello everybody!

 

Seems i found solution.

First of all we need on our "screen.js" paste such code comment:

/*jshint esversion: 8 */

After that manipulation vuforia studio don't alert async js functions.

 

example1:

$scope.$root.$on('SomeTwxService-end', async function(evt, arg) {
 await $scope.Func1();
 await $scope.ManipulateUI(); 
 ...
 await $scope.Func1();
 await $scope.Func2();
 await $scope.Func3();
});

example2:

$scope.OpCntrlStateChangedCheck = function () { 
 var step1_value;
 var step2_value;
 var step3_value;
 	var p1 = new Promise((resolve, reject) => {
 	step1_value= angular.element(document.querySelectorAll('twx-widget[widget-id=\"SomeID1\"] twx-widget-content div label input'));
 	resolve();
 });
 var p2 = new Promise((resolve, reject) => {
 	step2_value= angular.element(document.querySelectorAll('twx-widget[widget-id=\"SomeID2\"] twx-widget-content div label input'));
 	resolve();
 });
 var p3 = new Promise((resolve, reject) => {
 	step3_value= angular.element(document.querySelectorAll('twx-widget[widget-id=\"SomeID3\"]'));
 	resolve();
 });

	Promise.all([p1, p2, p3]).then(value => {
	 if (SomeValue == "learn") {
 		for (var x0=0; x0 < $scope.view.wdg['repeater-2']['data'].length; x0++) {
				Step1_value[x0].disabled = true;
 }
 } else {
 		for (var x1=0; x1 < $scope.view.wdg['repeater-2']['data'].length; x1++) {
				Step1_value[x1].disabled = false;
 } 
 } 

 for (var x2=0; x2 < $scope.view.wdg['repeater-2']['data'].length; x2++) {
 if (step1_value[x2].checked == step2_value[x2].checked) {
 step3_value[x2].className = "ControlValueCheckbox checkbox-balanced";
 } else if (step1_value[x2].checked != step2_value[x2].checked) {
 step3_value[x2].className = "ControlValueCheckbox checkbox-assertive";
 }
 }
	}); 	
};

 

I tested functionality in the vuforia studio and on mobile vuforia view application seems to work fine.

 

It may be useful for other community members.