Wikitude

loading world with studio template

I used wikitude studio to add an image for recognition and some text fields.

Tested it with the preview app and it worked.

I added the phonegap plugin to cordova and the WikitudePlugin.js to my index.html (do I really need the WikitudePlugin.js?)

Then I downloaded the target collection template. It contains the following files:

Folder: augmention contains my image

Folder: js contains ade.js, compatibility.js, content_mini.js, converter.js

Folder: wtc contains targetcollections_3.x.wtc, targetcollections_4.0.x.wtc, targetcollections_4.1.x.wtc

and the index.html

 

I read the documentation but it is not clear to me what to do next.

Do I have to load the wtc with AR.ClientTracker or the index.html with wikitudePlugin.loadARchitectWorld?

I´m using the Ionic Framework with Angular.js by the way.

Thanks!


 

Hi Nico,
You don't need to add the file 'WikitudePlugin.js' to your cordova index.html. This is done by an internal cordova mechanism when you add the WikitudePlugin to your project.

You also don't need to create a AR.ClientTracker yourself, this is done in the .js scripts that are included in the js folder of your Wikitude Studio export.

What you need to do is to package the folder structure that you got from Wikitude Studio into your cordova application. You can have a look at our Wikitude PhoneGap example application how this can be done.
Once you have the folder structure in your project, use the wikitudePlugin.loadArchitectWorldFromUrl and pass the local file url which points to the Wikitude Studio index.html to load the content that you created in Wikitude Studio.

 

I hope this was helpfull for you

Best regards

Andreas

Hi Andreas,

thanks for the clarification but I still have questions :)

Ok, so I removed the WikitudePlugin.js and my folder structure looks like the attached screenshot.

Are you sure it´s wikitudePlugin.loadArchitectWorldFromUrl  ?

I couldn't find this in the JavaScript API docs and in the Wikitude Plugin Reference wikitudePlugin.loadARchitectWorld is used.

And do I need to load var wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin"); ?

The code would then look like:

var wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");

wikitudePlugin.loadARchitectWorld("path/to/world.html"); or wikitudePlugin.loadArchitectWorldFromUrl("path/to/world.html");

 

Thanks!

Sure you need var wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin"); to instantiate a Wikitude PhoneGap Plugin object. 

Yes, it is loadArchitectWorld. The other method name is used in the iOS SDK - my mistake, sorry.

wikitudePlugin.loadARchitectWorld("path/to/world.html");

 

Please refer to the Wikitude PhoneGap example application on how the Wiktiude PhoneGap plugin has to be used within a PhoneGap application.

 

Best regards

Andreas

Hi!

It`s still not working :-/

I read the documentation and several times the examples. 

But the examples are not perfect to get startet... my setup if different and not everything is commented.

This is now my code (some of it is from THIS example):

 

document.addEventListener('deviceready', function() {

console.log('deviceready');

//initialize plugin
var wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");

//check if device supports AR
wikitudePlugin.isDeviceSupported(function(){

console.log("Device is Supported");

//config object
var world = {
"path": "ar/world.html",
"requiredFeatures": ,
"startupConfiguration": {
"camera_position": "back"
}
};

//load the AR view
wikitudePlugin.loadARchitectWorld(function successFn() {

console.log("world loaded");
}, function errorFn(error) {
alert('Loading AR web view failed: ' + error);
}, world.path, world.requiredFeatures, world.startupConfiguration);
}, function(errorMessage) {
console.log("Device is not supported !!! err " + errorMessage);
});
}, false);


I dont have any JS files from the SDK included.
Only the phonegap plugin is added.

When I start and debug the app on a real device (iPad) I can see the deviceready output and thats it.
So even console.log("Device is Supported"); does not get called.

Do I need to load anything else?
Currently I have no idea what I could test or try next...

I really need this to work! Any help would be appreciated!

THANKS!



 

EDIT: 

When I console.log(JSON.stringify(wikitudePlugin) I get:

{"_sdkKey":"ENTER-YOUR-KEY-HERE","FeatureGeo":"geo","Feature2DTracking":"2d_tracking","CameraPositionUndefined":0,"CameraPositionFront":1,"CameraPositionBack":2,"CameraFocusRangeNone":0,"CameraFocusRangeNear":1,"CameraFocusRangeFar":2} 

.... i did not include the WikitudePlugin.js, so where is this ENTER-YOUR-KEY-HERE coming from?

Ok, I got a bit further...

This is my code now:

 

var app = {

onDeviceReady: function() {

console.log("device ready");

// create a Wikitude Plugin instance
app.wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");

var world = {
"path": "ar/world.html",
"requiredFeatures": ,
"startupConfiguration": {
"camera_position": "back"
}
};

// check if the current device is able to launch augmented reality experiences
app.wikitudePlugin.isDeviceSupported(app.onDeviceSupported(world), app.onDeviceNotSupported, world.requiredFeatures);

},
onDeviceSupported: function(world) {
console.log("device supported! world: " + JSON.stringify(world));

app.wikitudePlugin.loadARchitectWorld(function() {
/* Respond to successful world loading if you need to */
console.log("world loaded!");
}, function(error) {
console.log("world NOT loaded!");
alert('Loading AR web view failed: ' + error);
},
"ar/world.html"
);

},
onDeviceNotSupported: function() {
// ... code that is executed if the device is not supported ...
console.log("device not supported!");
alert("device not supported!");

}
};

The console output is:

device supported! world:  {"path":"ar/world.html","requiredFeatures":,"startupConfiguration":{"camera_position":"back"}} 

But thats it. Nothing happens :(
Is there something wrong with the app.wikitudePlugin.loadARchitectWorld function?


Thanks!

 

In the last snippet you posted, you don't specify any requiredFeatures or startup configuration. Please pass World.path, World.requiredFeatures and World.startupConfiguration as third, fourth and fifth parameter to loadARchitectWorld.

Best regards

Andreas

Hi!

Thanks for pointing that out but I already tried it like this:

 

var world = {
"path": "ar/world.html",
"requiredFeatures": ,
"startupConfiguration": {
"camera_position": "back"
}
};

app.wikitudePlugin.loadARchitectWorld(function successFn() {
/* Respond to successful world loading if you need to */
console.log("world loaded!");
}, function errorFn(error) {
console.log("world NOT loaded!");
},
world.path, world.requiredFeatures, world.startupConfiguration
);

 

On which device do you test? Android, iOS? Version?

Have you checked the log output from your IDE?

Best regards

Andreas

can you verify that the relative path is correct? Please compare your relative path with the ones we use in the Wikitude PhoneGap exmaple application.

Best regards

Andreas

I wasn't sure about the path but I tried a lot of combinations... is it realtive to the www directory or to the js file in which it is included?

If you like, I packed a Ionic starter project with my code here: https://www.wetransfer.com/downloads/ea2daad68c9b570e4165322c5ee69c3720150430011918/8909abafa1c7086af0245737b5e9263820150430011918/06783e (100mb zipped, ~300mb unzipped).

But I dont think its the path.

On cordova I see that the isDeviceSupported get fired and then nothing.

When I build it with phonegap I see:

"An error occured: null" which comes from this function:

 

app.wikitudePlugin.setErrorHandler(function(err) {
console.log("an error ocurred: " + err);
});

 

I tested only on real devices, an iPad3 and an iPhone 6 both on iOS8. 

The project files from wikitude studio should also be ok, the sample iOS project works...