Skip to main content
O
O.R.Natale10-Marble
10-Marble
June 27, 2023
Question

2D Image Widget Refresh

  • June 27, 2023
  • 1 reply
  • 1082 views

Good morning,

 

In a Vuforia Studio mobile application, I would like to link the source of an 2D Image Widget to an external http(s) source which handles a picture to display.

The picture served back at the http request is not constant, as it changes at each http request. I would like to periodically call the server and display the corresponding picture.

 

Here is what I managed to do so far:

 

 

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

$scope.streamSourceSet = function(){
 $scope.view.wdg['testImage']['imgsrc'] = "http://10.1.27.14:5000/get_image"
 $scope.$applyAsync()
}


// Set the timer
$scope.periodicCall = function(){
 setInterval($scope.streamSourceSet, 500);
}

// Call the localize function at view start-up
angular.element(document).ready($scope.periodicCall);

 

 

This code produces a single picture for the Image Widget, but it does not get updated every 500 ms as desired.

 

The question is: how do I force the Image Widget to make another http(s) call?

Is there another way to make a http(s) call and pass the result (the picture) to the Image widget?

 

Many thanks,

Riccardo

 

1 reply

R
RolandRaytchev21-Topaz I
21-Topaz I
June 30, 2023

Hi @O.R.Natale ,

possibly you this will not request the data because there is no change in the URL. So , possibly you can try to set it to another url and and back. Or try to download the data via  fetch

 

 

fetch("https://<someWeb-page>/get_image", requestOptions)
 .then(response => response.text())

 

or xmlhttp request e.g.:

 

//===============================
$scope.app.getVideoFile=function(url){
$scope.$applyAsync();
 var resp = null
var req = new XMLHttpRequest();
req.open("GET", decodeURIComponent(url), true);
req.onload = function (event) {
};
var blob = new Blob(['demo'], {type: 'text/plain'});
//------------------------------------------------------------------------
req.onload = function () {
 var blob_uri = URL.createObjectURL(this.response);
 $scope.setWidgetProp('3DVideoMainVideo','src' ,blob_uri);
 $timeout( ()=> { 
 $scope.app.fn.triggerWidgetService("3DVideoMainVideo","play"); 
 console.warn('$scope.app.fn.triggerWidgetService(\"3DVideoMainVideo\",\"play\"); ')
 },2000);
};
req.responseType = "blob";
 req.send(blob);
}//end of getListObjet
//======================================================

 

 

O
O.R.Natale10-MarbleAuthor
10-Marble
June 30, 2023

Hello @RolandRaytchev ,

 

Thank you for your reply.

 

possibly you this will not request the data because there is no change in the URL. So , possibly you can try to set it to another url and and back. Or try to download the data via  fetch

 Yes, after trying a bit I discovered that changing the URL could trigger the image update. So what I did was to add a random parameter to the url which was ignored on the server side, as follows:

 

// Identifier of the image widget parameter
$scope.imageWidgetId = 'targetImage'
// Refresh rate expressed in milliseconds
$scope.refreshRate = 100 

$scope.streamSourceSet = function() {
 // Generate a random integer number between 1 and 1000 to be used as dummy get parameter
 randomDummmyParameter = Math.floor(Math.random() * 1000) + 1;
 $scope.view.wdg[$scope.imageWidgetId]['imgsrc'] = "http://x.x.x.x:5000/get_image?arg=" + randomDummmyParameter.toString();
 
 // Refresh image widget
 $scope.$applyAsync();
}

// Set the timer
$scope.periodicCaller = function(){
 console.debug('Id of the image widget = ' + $scope.imageWidgetId)
 setInterval($scope.streamSourceSet, $scope.refreshRate);
}

// Call the localize function at view start-up
angular.element(document).ready($scope.periodicCaller);

 

All the best,

Riccardo.

Terms & ConditionsCookie settingsAccessibility statement