Start a new topic

Cordova Integration

Cordova Integration

Hello I added the plugin to my application.

I copied and paste the JS code from the image integration (cordova) and I called it on my init()


my init() :




loadar() :

var World = {

loaded: false,


init: function initFn() {




createOverlays: function createOverlaysFn() {

this.tracker = new AR.ClientTracker("assets/", {

onLoaded: this.worldLoaded




/* Create overlay for page one */

var imgOne = new AR.ImageResource("assets/house.jpg");

var overlayOne = new AR.ImageDrawable(imgOne, 1, {

offsetX: -0.15,

offsetY: 0




var pageOne = new AR.Trackable2DObject(this.tracker, "*", {

drawables: {

cam: overlayOne





worldLoaded: function worldLoadedFn() {

var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";

var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";

document.getElementById('loadingMessage').innerHTML =

"<div" + cssDivLeft + ">Scan Target &#35;1 (surfer):</div>" +

"<div" + cssDivRight + "><img src='assets/surfer.png'></img></div>";


// Remove Scan target message after 10 sec.

setTimeout(function() {

var e = document.getElementById('loadingMessage');


}, 10000);








im getting a console error like this:

angular.js:12330 ReferenceError: AR is not defined

    at Object.createOverlaysFn (

    at Object.initFn (

    at n.$scope.test (

    at n.$scope.init (

    at fn (eval at <anonymous> (, <anonymous>:4:203)

    at n.$eval (

    at pre (

    at Y (

    at S (

    at g ( <div show-header="true" show-footer="true" show-top-tabs="true" show-tabs="true" ng-controller="newsView" ng-init="init()" class="aio-empty-screen padding">




Please HELP! 



Hi Ronnel,
Why did you copy the example code into the cordova application? This is wrong and can not work. The cordova application uses the Wikitude plugin to load Architect Worlds. Architect World code has to be written in a seperate .html/js/css file. Cordova applications don't understand AR. objects and that's why you see the errors.

Your application needs to load Architect World as shown in our Cordova example application. Please refer to the mentioned example application on how to write an application for Cordova.

Best regards


Oh okay, do I need the ade.js for it to work on my device though?

Hmmm. can you make a step by step procedure because I really cannot understand how to implement this plugin after adding it on my cordovaplugins.

many thanks!

Hi Ronnel,
ade.js is only needed for debugging Architect Worlds on your desktop computer. It is not required for Architect Worlds running on a device.

Please read through our SDK and Cordova documentation for a detailed step by step guide.

Best regards


Hello I managed to launch the wikitude augmented reality mode, however it does not do anything just a mere camera app with a trial texts on it.

doesn't detect my tracker? or what?


is this correct? :

<li><a href="javascript:app.loadARchitectWorld(getSamplePath(0, 0));">1.1 Image on Target</a></li>


// This file and it's content is automatically generated and should not be altered!

var samples =


function getSamplePath(category, sample) {

return samples;









Anyone please help....

Hi Ronnel,
Simply add a .html+.js file (your architect world) to your application, call the `loadARchitectWorld()` function with an object in the correct json format (see snippet below) and you're good to go. 
I would also recommend you to start from a newly generated project and not from our example. Our example should only be a reference for your own implementation. I guess you are just confused by how the example application loads different examples. Concentrate to understand loadCustomARchitectWorldFromURL and loadARchitectWorld, found in index.js. The url to your Architect World is either relative to your cordovas www folder or a url that points to an Architect World on a server.

loadCustomARchitectWorldFromURL: function(url) {

        var world = {

            "path": url,

            "requiredFeatures": ,

            "startupConfiguration": {

                "camera_position": "back"





Best regards

Login or Signup to post a comment