Wikitude

Ionic starter App not working

Hi!

I have problems getting wikitude to work with an Ionic App (see the thread HERE).

Now I generated an bootstrap Ionic app and just added the wikitude plugin, my "world files" in www/ar and some sample code in www/js/app.js

Would be really awesome if someone could look into it to find the problem here.

I uploaded all the project files here:

https://www.wetransfer.com/downloads/ea2daad68c9b570e4165322c5ee69c3720150430011918/8909abafa1c7086af0245737b5e9263820150430011918/06783e

The problem is that nothing happens. The isDeviceSupported callback get called but the world/camera is not opening.

Hope that someone can give me a hint...

I tried it with an iPhone6 and iPad2 in iOS8/7 with cordova 4.3.0 and phonegap 4.2.0-0.25.0.

Maybe you have to run npm install if you want to build it again...

 

Thanks!

I fixed your broken project.

You made two mistakes that caused your problems.

Here is a working implementation of your app object

    var app = {

 

      onDeviceReady: function() {

 

        console.log("device ready");

        // create a Wikitude Plugin instance

 

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

 

        console.log("plugin: " + JSON.stringify(app.wikitudePlugin));

 

        var world = {

          "path": "ar/index.html",

          "requiredFeatures": ,

          "startupConfiguration": {

            "camera_position": "back"

          }

        };

 

        // check if the current device is able to launch augmented reality experiences

       app.wikitudePlugin.isDeviceSupported(function() {

            console.log("device supported! world:  " + JSON.stringify(world));

 

            // setting callback functions that are called when the ARchitect World finished launching or failed.

            app.wikitudePlugin._onARchitectWorldLaunchedCallback = app.onARchitectWorldLaunched; // <- THEY DON'T EXIST ANYMORE

            app.wikitudePlugin._onARchitectWorldFailedLaunchingCallback = app.onARchitectWorldFailedLaunching; // <- THEY DON'T EXIST ANYMORE

 

            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

            );

 

            app.wikitudePlugin.setErrorHandler(function(err) {

               console.log("an error ocurred: " + err);

            });

 

            }, function() {

                // ... code that is executed if the device is not supported ...

                console.log("device not supported!");

                alert("device not supported!");

 

            }, world.requiredFeatures);

 

      },

      onARchitectWorldLaunched: function() { // <- REMOVE THIS CODE -> WILL NOT BE CALLED EVER!

        console.log("WORLD loaded!");

      },

      onARchitectWorldFailedLaunching: function(err) { // <- REMOVE THIS CODE -> WILL NOT BE CALLED EVER!

        console.log("world NOT loaded!");

        console.log("world NOT loaded! err: " + err);

      }

    };

 

Your first mistake was the way you invoked the isDeviceSupported function. You didn't passed a function pointer but called the success handler directly. This happened because you were passing the world parameter to the success handler. This changed a function pointer to a function call, so isDeviceSupported was evaluated after you tried to load the world. Trying to load a world without checking the device support status fails.
Fixing this issue caused the loadArchitectWorld error handler to fire.

The second mistake was the relative URL to your Architect World. If you would have compared this with the relative paths we use in our Wikitude PhoneGap application, you would have noticed that the path starts with the 'www' folder and not after it.

Another 'mistake' you made: you used code that is not included in the current WikitudePlugin.js file. Please don't blindly copy code from another thread or project into your own without verifying that is still valid. I marked the sections in the snippet above.

 

Please read carefully over the snippet I attached and understand the changes I made.

Also please don't open two different threads with the same question at once!

 

Best regards

Andreas

Hi!

THANKS! I will try it out immediately!

But to my defense... then the official documentation HERE is totally outdated!

All my code came from the documentation and the samples.

And samples are great but they don't replace good and up-to-date documentation.

 

Anyway... thanks for your help! I will try it out and if there is another more up-to-date documentation, please let me know. 

OK it´s working now!

Just one more question for today:

I obtained a trial license key.

The documentation states:

"To use the Wikitude Cordova Plugin with a certain license key, use the this._sdkKey property defined in WikitudePlugin.js line 12. Please make sure that the license key is set in the appropriate WikitudePlugin.js file since Cordova is duplicating this particular file in both www folder."

I have no WikitudePlugin.js in my project. Should I just add it?

And what is the purpose of that file?

 

Again, thanks! You made my day! (but the documentation should still be updated ;)

I'm sorry about the broken documentation link. We will fix that asap.

Your project does contain a WikitudePlugin.js, otherwise the Wikitude Plugin would not work at all. Please use eiter Xcode to search for the file in your project, Finder to search on the file system or the find command in Terminal to locate WikitudePlugin.js in your project.

Hint: normally you find it here: *PROJECT_RROT*/platforms/ios/www/plugins/com.wikitude.phonegap.WikitudePlugin/www/WikitudePlugin.js

Best regards

Andreas

Hi Nico,

I am also trying to implement the wikitude plugin with a newly created ionic project but so far things are not really working out. The steps i took to get it going are the following:


create a new ionic project

installed ngCordova

added the iOS and android platform

did a build of them both

installed the Wikitdue Cordova plugin

added my license key to the following file WikitudePlugin.js

added index.js to the main index.html file in the www folder

created in www a folder called views and in there I created another folder called camera

in the camera folder I created a js folder and place the js files (marker.js & fromwebservice.js), this folder also contains the following files: cameraview.html and poidetail.html


In the cameraview.html file I call upon the wikitude architect like so:

<ion-view view-title="Pub Stop">
<ion-content class="background">
<a href="javascript:app.loadARchitectWorld();">Camera</a>
</ion-content>
</ion-view>


And in the poidetail.html I place the following code:

<ion-view view-title="Detail">
<ion-content class="background">

<h1>test</h1>

</ion-content>
</ion-view>


When I run it on the phone via Ionic View nothing happens, so I run it in the browser and I get the following error:

Uncaught TypeError: Cannot read property 'isDeviceSupported' of undefined (coming from my index.js file on line 43)

I was hoping you could help me out or share your start up code or your setup how you did things. Thanks in advance

 

Hi Nico,

i have trie a lot of a lot of a lot time to make a very basi application with ionic, i make my routing but i dont understand why nothing work... Can you send me just a little part of your experience to hep me please.

Hi i made a ngCordova wrapper for the plugin you can download it from here https://gist.github.com/yailPeralta/d86126fe96a0a43f441e11a1cb3bb80e saludos.

Hi,
I'm sorry but we don't have any official support/documentation for Ionic so far. Those kind of questions need to be answered from the community.

Best regards,

Andreas