Start a new topic

Integrate AR into phonegap/cordova

Integrate AR into phonegap/cordova

Hi there,

I want to integrate the Wikitude AR functionality into an existing phonegap
project for Android and iOS. I use Cordova 2.8.1 for Android and 2.9.0 for iOS.

My plan was to use an empty cordova environment (all libraries existing)
with the Wikitude example "4_Obtain$Poi$Data_1_From$Webservice".

I tested my environment with a little index file for "deviceready" etc. All was ok.
Then I remove this index test file and copied the Wikitude example in my
assets/www folder (index.html), js files (poisFromWebservice.js, WikitudePlugin.js)
in my js folder and the css file (default.css) in my css folder.
For the grafics I did the same.
That means I had to do little path modifications in the index.html and no
changes in poisFromWebservice.js.
When I start this project I get no errors but only a white and empty screen
with the orange ADE marker in right corner. The same behaviour on both platforms.

I did the following steps for Android:
minSdkVersion > 8

- Copy in src/com/wikitude/phonegap
- config.xml: <plugin name="WikitudePlugin" value="com.wikitude.phonegap.WikitudePlugin"/>
- WikitudePlugin.js im my js folder
- copy wikitudesdk.jar into libs-folder
- add it to project's build path

For iOS:
- copy WTWikitudePlugin and WTARViewController into project folder Plugins/Wikitude
- modify the config.xml
- add following frameworks/libs: Wikitude SDK,
- check link options (you write -ObjC. With this linker flag I get errors. With -Obj -C no errors???)
- whitelist changes in config.xml

I use no media player.

Here is the index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
    <!--  basic meta information -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Type" content="application/json; charset=utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width = device-width, user-scalable = 0,  minimum-scale=1.0, maximum-scale=1.0" />
    <title>My ARchitect World</title>
    <link rel="stylesheet" href="css/main.css" id="tooltipStyle">
    <script src="architect://architect.js"></script>
    <script type="text/javascript" src="js/marker.js"></script>
    <script type="text/javascript" src="js/ade.js"></script>
    <script type="text/javascript" src="js/jquery-1.5.js"></script>

        <!-- status element showing app progress -->
        <div id="statusElement" class="status">
        <!-- main JS code of this scene -->
        <script src="js/poisFromWebservice.js"></script>

The poisFromWebservice.js has no changes. Starting this eample I can see only "Initialization..."

For my better understanding:
Your example has functions like "deviceready". Is this correct?
Your example has no include for WikitudePlugin.js. Why? Do you have this include at a different position in the example section?

For Android you write:
"You will mainly work with the WikitudePlugin where all you have to do is to call Wikitude.isDeviceReady(successCallback,
errorCallback) and in your successCallback, you can callWikitudePlugin.loadARchitectWorld(successCallback, errorCallback, "path/to/your/world")`."

If I have an existing phonegap app I have to rewrite my DeviceReady functions when I want to use AR as a part of the app?
Why does the camera view don't start in my example. Is this a deviceready-problem?
Is it possible to get the hotel world your are using your app with "path/to/your/world"?

Is it possible to use all your examples in a phonegap app to demonstrate Wikitude feature?
In this case I have to delete some examples and change labels respectively the language.
What is the best way to do that?

I know a lot of questions. Please help.

Kind regards

Hi there,

I made progress :-)

The integration of Helloworld in IOS and POI from Webservice for Android works. Now I have a little bit of understanding how

to initialize the app. I will try to integrate more Wikitude samples...

Kind regards.


Login or Signup to post a comment