Start a new topic

OutSystems - other ways to load Architect.js?

I'm currently building a wikitude app using OutSystems and the cordova plugin.
However OutSystems doesn't allow me to add the Architect.js directly into the page.

I've tried adding it dynamically with javascript but I get an
"Cannot set property 'onPlatformAssistedTrackingAvailabilityChanged' of undefined" error. What makes me thing it didn't load Architect.js properly.
So is there any other way I can call on Architect.js?

Is there anyone here that can point me in the right direction?


Hi Eric,



that looks indeed like the architect.js file is not loaded. May I ask how you tried to load it dynamically from Javascript?


A request to https://www.wikitude.com/libs/architect.js needs to be sent to web view the JavaScript part of the Wikitude SDK is running in. We intercept this exact request and provide the actual data from locally stored data. How this request reaches the web view, seems to me, to be irrelevant. Having said that, I have never seen it done other than with a static script in the index.html file, nor am I an expert in web technologies.


Maybe something like this would work.



- Daniel


Hi Daniel,

 The javascript we are using is the following.

It was based on the code you linked to

var script_src = 'https://www.wikitude.com/libs/architect.js';

jQuery.loadScript = function (url, callback) {
    jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: false
    });
}

if (typeof someObject == 'undefined') $.loadScript(script_src, function(){
    console.log('wikitude loaded')
});

 

also used:

   

var head = document.getElementsByTagName("head")[0],
    body = document.getElementsByTagName("body")[0];
    
var architect_script_src = {name:"architect.js", url:"https://www.wikitude.com/libs/architect.js", element:head},
    ade_script_src = {name:"Ade.js", url:$parameters.ade_src, element:body},
    wikitude_script_src = {name:"simpleinstanttracking.js", url:$parameters.SceneSrc, element:body};
 
 
function loadScript(src) {
        console.log('loading '+ src.name);
        
        var script = document.createElement('script');
        script.src = src.url;
        script.type = "text/javascript";
        script.name = src.name;
        script.async = false;
        src.element.appendChild(script);
}

[ architect_script_src,
  ade_script_src,
  wikitude_script_src
].forEach( function(src) {
    loadScript(src)
});    

   
Maybe there is a function I can call from the retrieved architect script to get it initiated? 
Or a way to check that it's loaded so can call the ade.js and the my simpleinstanttracking.js only when it's loaded?

Hi,
here is one solution to integrate with Wikitude plugin done with the Github samples and the original Github repository, only the plugin will add +-10MB to you apk.

Disclaimer
- All of the content (wtc files produced from Wikitude studio, index.html for the overlay, ade.js and the js for the experience [not the initialization in the plugin] need to be in resources, the other way is to change the ios and android code of the plugin to accept url for example
- The demo has multiple resources see the target directory for them, that is important for the demo work

the action Wikitude_InitWorld in the core initiates the world (camera and so on) for the Wikitude plugin the input URLOverlayPage is the absolute path for the index file that will be used in your experience for the overlay see the input in the demo, that is important as said in the disclaimer

this is just an example of implementation, you can change the core as you like but for best practices please leave the plugin in a module itself. You may need to change some code in the init world JS to improve your experience, this plugin is difficult to make as a standard for everyone because the code will change for every different experience.
You just install that demo and generate the apk (only tested in android), and test it with this examples

https://www.wikitude.com/external/doc/documentation/latest/phonegap/images/magazine_page_one.jpeg - for the image on target

https://www.wikitude.com/external/doc/documentation/latest/phonegap/images/solar_system.jpg - for the solar system with animation


I hope this can help you


oap
Login or Signup to post a comment