Wikitude IONIC 2 Starter App

Wikitude IONIC 2 Starter App

Create awesome Augmented Reality apps!

Free!

(1)
Schneeweis.Technology

Schneeweis.Technology

Member since 2016

Details

Version:
1.5
Size:
2mb
Ionic:
2.x,3.x
Platforms:
iOS, Android
Released:
7 years ago
Updated:
6 years ago
Category:
Starters
Tags:
ar, augmented reality, wikitude, phonegap, cordova, ionic 2, ionic2, ionic, 3d, 3d models, pokemon go, geo based augmented reality, image based augmented reality

Note: This Starter App is deprecated. Please use version 1.6 wikitude-ionic-3-starter-app

Version Information
1.0 Initial creation for Ionic 2 RC.0 - Oct 6, 2016
1.1 Upgrade to Ionic 2 RC.4; added an IR sample world - Jan 12, 2017
1.2 Upgrade to Ionic 2 RC.5 - Jan 16, 2017
1.3 Upgrade to Ionic 2 (2.0.1-final) and Wikitude 6.0 - Jan 26, 2017
1.4 Upgraded to Ionic 2 (2.3.0) - March 25, 2017
1.5 Upgraded to Ionic 3 (3.0.1) - April 25, 2017 (deprecated)

To download the new version, see the Github repository: https://github.com/pbreuss/wikitude-ionic-3-starter-app

This project is maintained by Schneeweis.Technology. If you have questions or suggestions, please send an email to info[at]schneeweis.technology.

Also, please rate and comment on this plugin.
Philipp

Disclaimer: This Starter App is not officially supported and maintained by Wikitude GmbH.

Hey there! You'll need to log in before you can leave a comment here.

Shaymaa

Shaymaa   ·   7 years ago

i do this but i get a white background (on device is Ionic View-App). i think there is a problem with the connection with the camera. can you help me ?

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Shaymaa

Shaymaa   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Kyle Linhardt

Kyle Linhardt   ·   7 years ago

Hi Philipp, Thank you very much for putting this stater together. I am able to load the world inside of my application and the captureScreen successCallback successfully console logs the file path of my image. I am trying to use this file path in a function called getPicture() that uses Ionic Natives File.readAsDataURL(path, file) to get the image in Base64 so I can send it to AWS S3. The getPicture Function is defined on the app.component.ts file. I try to call the getPicture function inside of the successCallback like this: WikitudePlugin.captureScreen( function(absoluteFilePath) { console.log("snapshot stored at:\n" + absoluteFilePath); this.getPicture(absoluteFilePath); } However when I click on "screenshot" I get an error saying: Error in Success callbackId: WikitudePlugin1266884545 : TypeError: null is not an object (evaluating 'this.getPicture') I just want to know if there is a way to include functions defined in the app component in the Wikitude Plugin Scope. When I console.log "this" inside of the WikitudePlugin.captureScreen successCallback I get null. I'm kind of new to Ionic 2 so I am sorry if this is more of a general Angular 2 question. Thanks

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Kyle Linhardt

Kyle Linhardt   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Kyle Linhardt

Kyle Linhardt   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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.

Kyle Linhardt

Kyle Linhardt   ·   7 years ago

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

Ayub Idrees

Ayub Idrees   ·   5 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alan Tavares de Melo

Alan Tavares de Melo   ·   7 years ago

hi Schneeweis.Technology, thanks for this starter, I would like to know how to set latitude and longitude to show an object.

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Afeez Aziz

Afeez Aziz   ·   7 years ago

Hi Philip, I am wondering whether Wikitude and this starter can support 3D tracking(which is in beta)? If yes, then how?

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Afeez Aziz

Afeez Aziz   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

Did you follow the instructions step-by-step?

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Afeez Aziz

Afeez Aziz   ·   7 years ago

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

Afeez Aziz

Afeez Aziz   ·   7 years ago

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. :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

tom

tom   ·   7 years ago

Hello Philip! First of all thank you for this very usefull tutorial. I have an issue that I am trying to resolve but without success until now. I am trying to get from my wikitude ar view html to another page. Let me explain. For example I am currently in a Image Recognition World, I recognize an image , it shows me a button and when I click to the button I want to go back to 1) another Ionic(angular2 ) page and (another case ) 2) to another html webview of wikitude. There is a createButton example function in wikitude which uses AR.context.openInBrowser(url) method. If I change the url to one of my Ionic pages or just another html page inside my app it doesn't work. Is there any way to do this things ? Thank you very much .

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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.)

tom

tom   ·   7 years ago

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.

tom

tom   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Mihai Alexandru Iordache

Mihai Alexandru Iordache   ·   7 years ago

Hi there, I've followed all steps from demo, but on my device when I open the application i get a white blank screen and there is not any other content displayed. I'm using 10.2.1 version of IOS on my IPhone. Do you have any idea of what's going on? Thanks! Mihai

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Tom Murphree

Tom Murphree   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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"

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Engelbrecht

Engelbrecht   ·   7 years ago

Hi, thanks so much for this starter app - really looking forward to playing around with it. The app builds to iphone perfectly but when i tap on the AR View tab I get the following error in xcode: "This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app’s Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data." Do you know how I can fix this? Many thanks.

Engelbrecht

Engelbrecht   ·   7 years ago

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?

Engelbrecht

Engelbrecht   ·   7 years ago

Forgot to mention I'm using the geolocation world.

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

sam

sam   ·   7 years ago

DEMO apk dropbox not found error

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

sam

sam   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

sam

sam   ·   7 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Francesco

Francesco   ·   7 years ago

Thank you man for this app! Can I make a question please? How can I actually test it? How can I actually take a snapshot? What I need is to make an app that will recognize a certain book cover. Nothing more. Is this possible? I have already generated the wtc file But I don't manage to figure out how to actually make it work..

Francesco

Francesco   ·   7 years ago

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?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Shane

Shane   ·   7 years ago

How can I make it so that the ARView displays within the tab view (i.e. not full screen)?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Steffen Stähle

Steffen Stähle   ·   7 years ago

Hey there, thank you for your work. I tried the instructions step by step but when deploying to my Android phone I'm getting the following error: * What went wrong: Execution failed for task ':processDebugManifest'. > Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:wikitudesdk:] D:\WebstormProjects\ionic\ARshowcase\platforms\android\build\intermediates\exploded-aar\wikitudesdk\AndroidManifest.xml Suggestion: use tools:overrideLibrary="com.wikitude.architectandlib" to force usage Can you please tell me what to do?

Steffen Stähle

Steffen Stähle   ·   7 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rodrigo Rubio

Rodrigo Rubio   ·   7 years ago

Hi Guys, I'm getting a blank page too, as previously suggested "BrowserModule" is already include under "app.module.ts". When i run "ionic serve" i get the following error - "Runtime Error webpackJsonp is not defined" Any ideas?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rodrigo Rubio

Rodrigo Rubio   ·   7 years ago

Hi Guys, I'm getting a blank page too, as previously suggested "BrowserModule" is already include under "app.module.ts". When i run "ionic serve" i get the following error - "Runtime Error webpackJsonp is not defined" Any ideas? Ionic Framework: 3.6.0 Ionic App Scripts: 2.1.3 Angular Core: 4.1.3 Angular Compiler CLI: 4.1.3 Node: 8.2.1 OS Platform: macOS Sierra Navigator Platform: MacIntel User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36

Rodrigo Rubio

Rodrigo Rubio   ·   7 years ago

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",

Nguyen

Nguyen   ·   7 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rodrigo Rubio

Rodrigo Rubio   ·   7 years ago

Hi Guys, I'm getting a blank page too, as previously suggested "BrowserModule" is already include under "app.module.ts". When i run "ionic serve" i get the following error - "Runtime Error webpackJsonp is not defined" Any ideas? Ionic Framework: 3.6.0 Ionic App Scripts: 2.1.3 Angular Core: 4.1.3 Angular Compiler CLI: 4.1.3 Node: 8.2.1 OS Platform: macOS Sierra Navigator Platform: MacIntel User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36

Rodrigo Rubio

Rodrigo Rubio   ·   7 years ago

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",

Nguyen

Nguyen   ·   7 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rodrigo Rubio

Rodrigo Rubio   ·   7 years ago

Hi Guys, I'm getting a blank page too, as previously suggested "BrowserModule" is already include under "app.module.ts". When i run "ionic serve" i get the following error - "Runtime Error webpackJsonp is not defined" Any ideas?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Steffen Stähle

Steffen Stähle   ·   7 years ago

Hey there, thank you for your work. I tried the instructions step by step but when deploying to my Android phone I'm getting the following error: * What went wrong: Execution failed for task ':processDebugManifest'. > Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:wikitudesdk:] D:\WebstormProjects\ionic\ARshowcase\platforms\android\build\intermediates\exploded-aar\wikitudesdk\AndroidManifest.xml Suggestion: use tools:overrideLibrary="com.wikitude.architectandlib" to force usage Can you please tell me what to do?

Steffen Stähle

Steffen Stähle   ·   7 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Shane

Shane   ·   7 years ago

How can I make it so that the ARView displays within the tab view (i.e. not full screen)?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Francesco

Francesco   ·   7 years ago

Thank you man for this app! Can I make a question please? How can I actually test it? How can I actually take a snapshot? What I need is to make an app that will recognize a certain book cover. Nothing more. Is this possible? I have already generated the wtc file But I don't manage to figure out how to actually make it work..

Francesco

Francesco   ·   7 years ago

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?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

sam

sam   ·   7 years ago

DEMO apk dropbox not found error

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

sam

sam   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

sam

sam   ·   7 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Kyle Linhardt

Kyle Linhardt   ·   7 years ago

Hi Philipp, Thank you very much for putting this stater together. I am able to load the world inside of my application and the captureScreen successCallback successfully console logs the file path of my image. I am trying to use this file path in a function called getPicture() that uses Ionic Natives File.readAsDataURL(path, file) to get the image in Base64 so I can send it to AWS S3. The getPicture Function is defined on the app.component.ts file. I try to call the getPicture function inside of the successCallback like this: WikitudePlugin.captureScreen( function(absoluteFilePath) { console.log("snapshot stored at:\n" + absoluteFilePath); this.getPicture(absoluteFilePath); } However when I click on "screenshot" I get an error saying: Error in Success callbackId: WikitudePlugin1266884545 : TypeError: null is not an object (evaluating 'this.getPicture') I just want to know if there is a way to include functions defined in the app component in the Wikitude Plugin Scope. When I console.log "this" inside of the WikitudePlugin.captureScreen successCallback I get null. I'm kind of new to Ionic 2 so I am sorry if this is more of a general Angular 2 question. Thanks

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Kyle Linhardt

Kyle Linhardt   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Kyle Linhardt

Kyle Linhardt   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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.

Kyle Linhardt

Kyle Linhardt   ·   7 years ago

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

Ayub Idrees

Ayub Idrees   ·   5 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Mihai Alexandru Iordache

Mihai Alexandru Iordache   ·   7 years ago

Hi there, I've followed all steps from demo, but on my device when I open the application i get a white blank screen and there is not any other content displayed. I'm using 10.2.1 version of IOS on my IPhone. Do you have any idea of what's going on? Thanks! Mihai

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Tom Murphree

Tom Murphree   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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"

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

tom

tom   ·   7 years ago

Hello Philip! First of all thank you for this very usefull tutorial. I have an issue that I am trying to resolve but without success until now. I am trying to get from my wikitude ar view html to another page. Let me explain. For example I am currently in a Image Recognition World, I recognize an image , it shows me a button and when I click to the button I want to go back to 1) another Ionic(angular2 ) page and (another case ) 2) to another html webview of wikitude. There is a createButton example function in wikitude which uses AR.context.openInBrowser(url) method. If I change the url to one of my Ionic pages or just another html page inside my app it doesn't work. Is there any way to do this things ? Thank you very much .

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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.)

tom

tom   ·   7 years ago

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.

tom

tom   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Afeez Aziz

Afeez Aziz   ·   7 years ago

Hi Philip, I am wondering whether Wikitude and this starter can support 3D tracking(which is in beta)? If yes, then how?

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Afeez Aziz

Afeez Aziz   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

Did you follow the instructions step-by-step?

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Afeez Aziz

Afeez Aziz   ·   7 years ago

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

Afeez Aziz

Afeez Aziz   ·   7 years ago

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. :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Alan Tavares de Melo

Alan Tavares de Melo   ·   7 years ago

hi Schneeweis.Technology, thanks for this starter, I would like to know how to set latitude and longitude to show an object.

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Shaymaa

Shaymaa   ·   7 years ago

i do this but i get a white background (on device is Ionic View-App). i think there is a problem with the connection with the camera. can you help me ?

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

Shaymaa

Shaymaa   ·   7 years ago

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

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Engelbrecht

Engelbrecht   ·   7 years ago

Hi, thanks so much for this starter app - really looking forward to playing around with it. The app builds to iphone perfectly but when i tap on the AR View tab I get the following error in xcode: "This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app’s Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data." Do you know how I can fix this? Many thanks.

Engelbrecht

Engelbrecht   ·   7 years ago

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?

Engelbrecht

Engelbrecht   ·   7 years ago

Forgot to mention I'm using the geolocation world.

Schneeweis.Technology

Schneeweis.Technology   ·   7 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in before you can leave a rating here.

Shane   ·     ·   7 years ago

Very helpful!

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Shane    ·     ·   7 years ago

Very helpful!