Hi Shaymaa, I believe not all plugins work in the Ionic View app (like the camera plugin). Can you try again following exactly the instructions on the descriptions page. If you still have problems, let me know. All the best, Philipp

i follow exactly the instructions on the descriptions page. and every time I click the AR-view button crashes the App

Hello Shaymaa, did it crash on Android or iOS. I just tested it again on Android and it works just like expected. In Android, you have to accept 2 permissions (camera, location) the first time you open the AR view. What OS version does your phone have? Here is my ionic info: Cordova CLI: 6.3.1 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.13 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.45 ios-deploy version: 1.9.0 ios-sim version: 5.0.8 OS: OS X El Capitan Node Version: v4.6.0 Xcode version: Xcode 8.1 Build version 8B62

Hello Kyle, I think I know what your problem is: Instead of: WikitudePlugin.captureScreen( function(absoluteFilePath) { console.log("snapshot stored at:\n" + absoluteFilePath); // this an example of how to call a function in the Wikitude SDK (Ionic2 app --> Wikitude SDK) WikitudePlugin.callJavaScript("World.testFunction('Screenshot saved at: " + absoluteFilePath +"');"); }, function (errorMessage) { console.log(errorMessage); }, true, null ); use: WikitudePlugin.captureScreen( (absoluteFilePath) => { console.log("snapshot stored at:\n" + absoluteFilePath); // this an example of how to call a function in the Wikitude SDK (Ionic2 app --> Wikitude SDK) WikitudePlugin.callJavaScript("World.testFunction('Screenshot saved at: " + absoluteFilePath +"');"); }, (errorMessage) => { console.log(errorMessage); }, true, null ); Instead of function(myvar) you use the "arrow function syntax" which is => (myvar) The advantage is, that with the arrow function notation you have access to "this" even within the function you are passing. See: http://learnangular2.com/es6/arrow-functions Let me know if it works. Cheers, Philipp

Hi Philipp, Thank you for the quick reply. I tried using the fat arrow functions and I get the same error message. I made a codepen demo showing my problem. http://codepen.io/whodey335/pen/rjBXxw?editors=0010 On line 91 I made a function called getPicture that will do something with the filepath url. This function is called on line 47 inside of the captureScreen success callback. I'm just not sure why I cannot access this.getPicture(). Thanks again for the help. -Kyle

In your codepen sniplet, I dont see yet the fat arrow function syntax. You need to use it at setOnUrlInvokeCallback and captureScreen, such that you have access to "this". Alternatively you can use var _this = this; setTimeout(function() { console.log(_this.name); }); See http://learnangular2.com/es6/arrow-functions Hope this helps. Philipp

Thank you, I got it working by also using the fat arrow function syntax on the setOnUrlInvokeCallback. I updated the codepen also. Thanks again!!!

By the way, the Wikitude Ionic 2 Starter App is now updated to Ionic RC.4. It also includes the arrow notation change from above.

Hi, Phillip. Is there any way in your starter app to use the Delegate save mode for captureScreen, instead of BundleDirectory or PhotoLibrary? Or is this something that has to be modified in the wikitude Obj C code? I was hoping I would be able to pass in a different parameter into the last captureScreen function parameter instead of null or a file path. Thanks, Kyle

Facing issue in using captureScreen function, I was using Arrow Notation as mentioned by @Schneeweis.Technology but when I press snapshot console says "Failed to load ARchitect World!" Globe is showing in App but shapshot is not working Please help

Hello Alan, sorry for my late reply. In src/assets/3_3dModels_6_3dModelAtGeoLocation/js/3dmodelatgeolocation.js in line 19 it says: var location = new AR.RelativeLocation(null, 5, 0, 2); This creates a "relative location" from 5 meters north and 0 meters east, and 2 meters up. This location is later assigned to the globe GeoObject (line 42). Instead of Relative Location, you need to use a GeoLocation. var location = new AR.GeoLocation(47.77317, 13.069929); See http://www.wikitude.com/external/doc/documentation/latest/Reference/JavaScript%20API/classes/GeoLocation.html http://www.wikitude.com/external/doc/documentation/latest/Reference/JavaScript%20API/classes/RelativeLocation.html All the best, Philipo

Hello Afeez, yes, 3D tracking also works: Please check out the following documentation: http://www.wikitude.com/external/doc/documentation/latest/android/instanttracking.html#instant-tracking Cheers, Philipp

Hi Philip, Thanks for the answer. I would like to try Wikitude and using your starter template. I compiled and built for iOS but it went to blank screen so I used ionic serve. This is the error that I received: Runtime Error Uncaught (in promise): ReferenceError: WikitudePlugin is not defined

Did you follow the instructions step-by-step?

The error "ReferenceError: WikitudePlugin is not defined" happens because you're running the Starter App in the browser. There is no plugin for the browser. It just runs on Android or iOS. As for the blank screen, I recommend trying it again and really follow every step of the tutorial. Philipp

Hello Afeez, also, Thank you for pointing this out the blank screen error: There was a changed in ionic 2.3.0 with ionic native... this has been fixed in Version 1.4 of this plugin.. please try again with version 1.4. Also, if you look at the instructions Nr. 8 was added (for iOS). Best, Philipp

Hi Philip, I tried with Version1.4 but the screen is still empty/blank.

Hi Philip, I have solved this. I think due to the Ionic version 3.0.0, we need to import and add BrowserModule in app.module.ts for this work. This is just a minor fix. :)

1) for this case, calling a function in the your Ionic sources from the AR context, see the plugin description where it says "snapshot" and "capturescreen". 2) For this case openInBrowser is not the right function. Look at the Wikitude SDK sample sources (this is not within the Wikitude Cordova Plugin, this example is in the Wikitude SDK for iOS and Android, look on the Wikitude Website in the Download section): /Users/pbreuss/Downloads/WikitudeSDK_Android_6-0-0_2017-01-24_20-27-20.zip\ Folder/Examples/SDKExamples/wikitude-sdk-samples/src/main/java/com/wikitude/samples/MainSamplesListActivity.java This is the part in the Sample App where you can open various AR worlds. I guess this is what you want to do. Correct? (In iOS it's done similar.)

Thank you very much the reply. For the first case I already tried calling a function (like the one in snapshot and capturescreen) but it didn't work. In my ionic page I put this code inside the constructor WikitudePlugin.setOnUrlInvokeCallback(function(url) { if (url.indexOf('captureScreen') > -1) {( navCtrl.push(AnotherPage)) .... } , but when I click to snapshot button it simply wont do anything , it doesn't change the page. Note that the capturescreen (taking a photo and saving it ) works perfectly, but for changing the page wont do. Is there any other way or I did something wrong ? For the second page I can't seem to find the example that you suggested. However my code is in Ionic(javascript) , I dont understand how the native android code / and ios would be integrated inside my code ? Thank you for your time.

Hi Philip. As for the first case I resolved it. I had to close the architect view at first ( WikitudePlugin.close() ).

In the first case you need to use the "arrow notation" otherwise you lose the scope: Instead of WikitudePlugin.setOnUrlInvokeCallback(function(url) {... use WikitudePlugin.setOnUrlInvokeCallback((url) => { ... In the code, of the starter app, look at src/app/app.component.ts - I'm doing it this way for the same reason. Second case: I was a bit wrong here - the Wikitude Sample I suggested is native Android code, thats why it's not a good suggestion. Still, in this example you click a link in Android, and open a new AR View. With Ionic you would do something similar. You have different "html webview of wikitude" as you call it, see in the starter app src/assets/3_3dModels_1_3dModelOnTarget and sec/assets/3_3dModels_6_3dModelAtGeoLocation and then in ar_view.ts you would load a different html webvie of Wikitude with WikitudePlugin.loadARchitectWorld. I think this should be it.

Hello Mihai, Thank you for pointing this out. There was a changed in ionic 2.3.0 with ionic native... this has been fixed in Version 1.4 of this plugin.. please try again with version 1.4. Also, if you look at the instructions Nr. 8 was added (for iOS). Best, Philipp

I'm getting the same issue - how can I tell if I'm on version 1.4 of the plugin?

With the latest version of ionic (3.0.0), you need to import and add BrowserModule in app.module.ts. I'll update the starter app momentarily. Tx Afeez Aziz for this fix. Regarding the version of the plugin: its not possible to check the version number of the starter app at this point. I can add this with the next update. Check the log and it should say, "Wikitude Starter App version 1.5"

Sorry, my bad. Edited the Info.plist file you mentioned in your instructions and it works! Only thing now is that when I take a snapshot the app crashes. Any idea why?

Forgot to mention I'm using the geolocation world.

Hello Engelbrecht, Thank you you for pointing this out. You need to add "NSPhotoLibraryUsageDescription" to your pList file. I updated the instructions accordingly - see step 8.

Sorry - the link was broken .. it's now repaired ...

Hi Philipp, I am still getting the not found error. Here is the link https://dl.dropboxusercontent.com/u/1684105/schneeweis.technology/android-debug.apk

Sorry .. there has been a change at Dropbox. Now here is the link: https://www.dropbox.com/s/mbscyf64f9b9egb/android-debug.apk?dl=0

Thankyou for updating the link I am able to download the debug apk now. Also on version 5.0.0 app crashes when I tap the AR View tab. and when I try to build my own apk , on device it shows file not found in assets/www/index.html. I tried running npm run build but to no success . My www folder is still empty. Cordova CLI: 6.1.0 (cordova-lib@undefined) Ionic Framework Version: 2.3.0 Ionic CLI Version: 2.1.1 Ionic App Lib Version: 2.1.1 Ionic App Scripts Version: 1.2.2 OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.4 LTS Node Version: v4.0.0

Once I get to the AR view - I see the correct message ARchitect World loaded successfully - the camera start - but from then how it will recognize my image?

Solved: Just changed this line in config.xml: <preference name="android-minSdkVersion" value="19" />

Got it working. I needed to update my package.json "dependencies" "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/core": "4.1.0", "@ionic-native/device": "^4.2.0", "@ionic-native/splash-screen": "4.1.0", "@ionic-native/status-bar": "4.1.0", "@ionic/storage": "2.0.1",

Hi Rodrigo, As said, you run "ionic serve" and it works? It is impossible because there is not a Wikitudeplugin for browser. Could you confirm, please? Thanks in advance.