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 WikitudePlugin.java 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, libc++.dylib, libz.dylib, CoreMotion.framework CoreVideo.framework OpenGLES.framework Security.framework - 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" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- 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>
</head> <body> <!-- status element showing app progress --> <div id="statusElement" class="status"> Initialization... </div> <!-- main JS code of this scene --> <script src="js/poisFromWebservice.js"></script> </body> </html>
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.
over 4 years ago
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...