Community Tip - You can subscribe to a forum, label or individual post and receive email notifications when someone posts a new topic or reply. Learn more! X
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
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
//======================================================
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.