2D Image Widget Refresh

[O.R.Natale]

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

[RolandRaytchev]

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.R.Natale]

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.