Wikitude
How can we help you today?
Angularjs, setOnUrlInvokeCallback function not callback
6 CommentsSorted by Oldest First
When I trigger "document.location = 'architectsdk://action=closeWikitudePlugin'" on ARchitech js ,
but callback function does't call
HERE IS THE CODE:
app.factory('WikitudeFactory', function($q, $ionicPlatform) {
var world = {
"path": SAMPLE_PATH,
"requiredFeatures": ,
"startupConfiguration": {
"camera_position": "back"
}
};
return {
isDeviceSupported: true,
callARView: function() {
$ionicPlatform.ready(function() {
app.wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");
app.wikitudePlugin.isDeviceSupported(function(){
app.wikitudePlugin.loadARchitectWorld(function(loadedURL) {
console.log('load arch success')
}, function errorFn(error) {
console.log('Loading AR web view failed: ' + error);
},world.path, world.requiredFeatures, world.startupConfiguration);
//Callback method
app.wikitudePlugin.setOnUrlInvokeCallback(function(url) {
console.log('url invoked')
app.wikitudePlugin.close();
});
},function errorFn(error) {
console.log('Loading AR web view failed: ' + error);
}, world.requiredFeatures);
});
}
}
})
ps. sorry for my poor english.
Hi there!
The snippet looks fine. Let me just list some bulletpoints I'd check in your project set-up
* Are there any interceptors in place that control urls/page loads (e.g. ui-router or similar)
* Ensure to properly call document.location
(e.g. document.location = 'architectsdk://action=foo';)
* Debug your Android WebView, maybe a JS error occurred in your code.
* Check sample application and plugin documentation
Kind regards,
Andreas
i fixed this issue by adding '$q.defer().resolve(url)' inside setOnUrlInvokeCallback.
TY
Can you show us your sample with angular js? , plz
Using the Wiktiude JS API togehter with Angular works out of the box.
Include the following in your index.html's head:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<script src="architect://architect.js"></script>
<base href="">
and configure your Angular controller the way you want, e.g.
<body ng-controller="MainController" >
....
</body>
Your MainController can then use all the AR namespace, compare Wikitude JS API References.
You may even combine your project with Angular Material but be aware that this only works on Android 4.4+ (learn more).
To ease your development flow I recommend to also have a look at Gulp, Bower, Angular Translate, Lodash and ngMock.
I highly recommend to girst run through some Angular tutorials (e.g. CodeSchool or udemy), using Wikitude's features works in any environment.
Note that you need to always ensure your backgroud is transparent, in case of using e.g. Angular Materia you need to have this CSS in place to make it all work:
*
{
-webkit-highlight: none;
-webkit-touch-callout : none;
-webkit-user-select: none;
}
::-webkit-scrollbar {
display: none;
}
html, body {
background-color: transparent;
background-image:none;
background:rgba(0, 0, 0, 0);
}
Hi I have developed a wikitude plugin for ngCordova that i hope is in process to be added, here is the plugin, for the time been you have to add the module to the dependencies in your main module.
https://gist.github.com/yailPeralta/d86126fe96a0a43f441e11a1cb3bb80e
and here is the initial config needed for the plugin.
https://gist.github.com/yailPeralta/2b968a3f7d3a0c7cf5a7103f7880961f
© 2023 Wikitude, a Qualcomm company
Krailit Pongrujaporn