Wikitude

IR Sample app don't load Architect World

Hi,

 

I try to create my own Sample IR app with Phonegap-Cordova under the next environment:

 

Mobile Device: Sony Xperia U

Android Version: 4.0.4

Os: windows 7 x64

Wikitude SDK 3.2.1

 

I follow the next blog http://ianreah.com/blog/page2/, but i keep  the sdk example folder structure (i work with a "www/world" folder).

I compile my project from Command Prompt with the next command:

 

project/path cordova run android

 

After, my device open the camera view and show the wikitude logotype, But when the target is focused the 'X' label is not show.

 

Here is the code of the "www/js/index.js"

 



var app = {

 

    isDeviceSupported: false,

 

    // Application Constructor

    initialize: function() {

        this.bindEvents();

    },

    // Bind Event Listeners

    //

    // Bind any events that are required on startup. Common events are:

    // 'load', 'deviceready', 'offline', and 'online'.

    bindEvents: function() {

        document.addEventListener('deviceready', this.onDeviceReady, false);

    },

 

    //--- Wikitude Plugin ---

 

    // Succes callback

    onDeviceSupportedCallback: function() {

        app.isDeviceSupported = true;

 

        if (app.isDeviceSupported) {

            WikitudePlugin.loadARchitectWorld("world/watermol.html");

        } else {

            alert("Device is not supported");

        }

    },

 

    // Error callback

    onDeviceNotSupportedCallback: function() {

        app.receivedEvent('Unable to launch ARchitect World on this device');

    },

 

    // --- End Wikitude Plugin ---

    // deviceready Event Handler

    //

    // The scope of 'this' is the event. In order to call the 'receivedEvent'

    // function, we must explicity call 'app.receivedEvent(...);'

    onDeviceReady: function() {

        app.receivedEvent('deviceready');

 

        // check if the device is ready

        WikitudePlugin.isDeviceSupported(app.onDeviceSupportedCallback, app.onDeviceNotSupportedCallback);

 

    },

    // Update DOM on a Received Event

    receivedEvent: function(id) {

        var parentElement = document.getElementById(id);

        var listeningElement = parentElement.querySelector('.listening');

        var receivedElement = parentElement.querySelector('.received');

 

        listeningElement.setAttribute('style', 'display:none;');

        receivedElement.setAttribute('style', 'display:block;');

 

        console.log('Received Event: ' + id);

    }

};

 

 

and here the code of the "www/world/js/watermol.js"

 



var World = {

loaded: false,

 

init: function initFn() {

AR.context.services.sensors = false;

this.createOverlays();

},

 

createOverlays: function createOverlaysFn() {

// Initialize Tracker

this.tracker = new AR.Tracker("assets/watermol.wtc");

 

 

//Create overlay with label

var overlay = new AR.Label("X", 1);

var watermol = new AR.Trackable2DObject(this.tracker, "watermol", {drawables:{cam: overlay}});

},

 

worldLoaded: function worldLoadedFn(){

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

document.getElementById('loadingMessage').innerHTML =

"<div" + cssDiv + ">Scan target (watermol) </div>";

}

};

 

World.init();

 

I wait for an answer.

Thanks.

Hi Sergio!

Could you please check out the SDK sample application provided on github first?

https://github.com/Wikitude/wikitude-phonegap-samples

The blog was not written by us, please check out the official phonegap plugin docu too

http://developer.wikitude.com/documentation/phonegap

Kind regards,
Andreas