Wikitude

Dynamically loading wtc

Hi, I'm creating a cordova app that, after a login, opens wikitude.

I'm trying to load differents wtc files according to a variable in my cordova js.

This is my js in cordova part:

var app = {
// Application Constructor
requiredFeatures: ,
arExperienceUrl: "www/experience/index.html",
isDeviceSupported: false,
startupConfiguration:
{
"camera_position": "back"
},
initialize: function() {
this.bindEvents();
},

bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
},

receivedEvent: function(id) {
loginZ();
},


//
onDeviceSupported: function() {

// setting callback functions that are called when the ARchitect World finished launching or failed.
app.wikitudePlugin._onARchitectWorldLaunchedCallback = app.onARchitectWorldLaunched;
app.wikitudePlugin._onARchitectWorldFailedLaunchingCallback = app.onARchitectWorldFailedLaunching;

// setting up a callback to communicate from ARchitect into PhoneGap
app.wikitudePlugin.setOnUrlInvokeCallback(app.onURLInvoked);
// setting callback functions that are called when the ARchitect World finished launching or failed.
app.wikitudePlugin.loadARchitectWorld(
app.onARchitectWorldLaunched, // onARExperienceLoadedSuccessful,
app.onARchitectWorldFailedLaunching, //onARExperienceLoadError,
app.arExperienceUrl,
app.requiredFeatures,
app.startupConfiguration
);

},

onARchitectWorldLaunched: function(url) {
app.wikitudePlugin.callJavaScript('passData(7)');
},

onARchitectWorldFailedLaunching: function(err) {
console.log("CONSOLLE: in onARchitectWorldFailedLaunching eseguo callJavaScript" + err);

},

onURLInvoked: function(url) {

alert(url);
}


};

app.initialize();




 

In my world.js I'm trying to read the variable passed with app.wikitudePlugin.callJavaScript('passData(7)');

but it seems it  is available only in  worldLoaded and not in createOverlays where I'm loadin wtc file.

This is my world.js

var aa; //variable passed by app.wikitudePlugin.callJavaScript('passData(7)');
var World = {
loaded: false,

init: function initFn() {
console.log("CONSOLLE: aa" + aa); //undefined
this.createOverlays();

AR.hardware.camera.focusMode = AR.CONST.CAMERA_FOCUS_MODE.CONTINUOUS;
},

createOverlays: function createOverlaysFn() {
//chiamata 3
console.log("CONSOLLE: aa" + aa); //undefined
this.tracker = new AR.ClientTracker("http://cea.yoomee.it/tracks/tracking_" + aa + ".wtc", {
onLoaded: this.worldLoaded
});


var htmlDrawable = new AR.HtmlDrawable({html:"<div id=divDoz>MIO div</div>"
}, 1.25, {
viewportWidth: 320,
viewportHeight: 100,
backgroundColor: "#FFFFFF",
offsetX: +0.36,
offsetY: 0.5,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
clickThroughEnabled: true,
allowDocumentLocationChanges: false,

});

/*
This combines everything by creating an AR.Trackable2DObject with the previously created tracker,
the name of the image target as defined in the target collection and the drawable that should augment the recognized image.
*/
var pageOne = new AR.Trackable2DObject(this.tracker, "*", {

onEnterFieldOfVision : function(nome){
augmentation(nome);
},
onExitFieldOfVision : function(){
// document.getElementById('davideDiv').innerHTML = '';
console.log("CONSOLLE: onExitFieldOfVision");
}
});


},


worldLoaded: function worldLoadedFn() {
console.log("CONSOLLE: aa:" + aa); //here I have the correct value 7
$('#progressDiv').remove();
}
};


function passData(id) {
aa = id;
console.log("CONSOLLE: " + id);
}


 

Thanks a lot for any help

Davide

Hi Davide,

you are calling your passData function to late. Call it in the  onDeviceSupported function before you call app.wikitudePlugin.loadARchitectWorld.

Thank you and best regards,
Simon

Hello, I have a qestion: does it work on iOs? because in my app it works on Android and doesn't work on iOs. Thanks!

Hello Guys,

I have a working phonegap app with Wikitude, but I just cant figure out why my callJavaScript() function is not working.

I would need to call it in my loadAR() function, because the passed parameter has to be able to be changed by the user before the AR world is launched, but I cleaned it up till just putting a Hello to the Console at deviceready, but it still doesnt work...

my javascript in phonegap:

var app = {
   
    .
    .
    .
    onDeviceReady: function() {
        
        app.wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");

        app.wikitudePlugin.callJavaScript('console.log('Helo\')');

    },
    
    loadAR: function(ar) {
        this.loadARchitectWorld(getAR(ar));
    },
    
    loadARchitectWorld: function(worldobj) {

        app.wikitudePlugin.isDeviceSupported(function() {

            app.wikitudePlugin.setOnUrlInvokeCallback(app.onUrlInvoke);
            
            if ( worldobj.requiredExtension === "ObtainPoiDataFromApplicationModel" ) {
                navigator.geolocation.getCurrentPosition(onLocationUpdated, onLocationError);
            }
            
            app.wikitudePlugin.loadARchitectWorld(function successFn(loadedURL) {
                /* Respond to successful world loading if you need to */
            }, function errorFn(error) {
                alert('Loading AR web view failed: ' + error);
            },
            worldobj.path, worldobj.requiredFeatures, worldobj.startupConfiguration
            );
        }, function(errorMessage) {
            alert(errorMessage);
        },
        worldobj.requiredFeatures
        );
    },
    .
    .
    .
}

What am I doing wrong?

Thanks in advance for any idea! :)

cheers,

Marton

ps: Im on Android and I dont get any errors, just don't get the console message either...

Hi Marton,
console.log does not work within an Architect World. You need to use e.g. alerts() to check whenver or not a function is called.

Best regards

Andreas

Hi Andreas,

Thanks for your answer, its good to know that console.log doesn't work in AR world.

My custom function (that is called via calljavascript right before loadArchitectworld on the phonegap side) should set a variable in the AR context.
However, I can only have the correct value of this variable if I check it within worldLoaded() and not in createOverlays().

For now I could finally avoid using calljavascript, however this might be an issue for me later.

Thanks and BR,

Marton

 

Hi Marton,
I just realised that you might have a problem with the order of your function calls. .callJavaScript() only works if the ArchitectWorld is loaded. Calling it before does not have any effect as there is no Architect World JavaScript context until the Architect World .html is fully loaded. It is save to use when the Architect World loaded callback is called.

Maybe this is still helpful for you

Best regards,

Andreas

Yes, finally I also realised the same. :)

Thanks!

(y)