nativescript-wikitude

Provides nativescript access to Wikitude AR.

Versioning is as follows ${wikitude-version}-${plugin-version}example : 7.2.1-1.1.0 is Wikitude Version 7.2.1, Plugin version 1.1.0.

Screen shots

Core	Angular	Vue

Prerequisites / Requirements

Permissions

before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

Running the Demo

WE include a very basic AR Sample in the Demo app,

but if you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

and then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

Installation

to install for your project you can use :

tns plugin add nativescript-wikitude

for Nativescript Angular Projects you will need to import the Element in your app.component.ts

import { Wikitude } from 'nativescript-wikitude';
    // ...snip....
    registerElement('Wikitude', () => Wikitude);

and then in your ar.component.html :

<Wikitude [url]="WikitudeURL" 
              (WorldLoaded)="onWorldLoaded($event)" 
              (JSONReceived)="onJSON($event)">
    </Wikitude>

and in your ar.component.ts:

import { Wikitude } from 'nativescript-wikitude';

    // ...snip...

    WikitudeInstance: Wikitude;
    WikitudeURL: string = "~/wikitude_world/index.html";

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
    }

    onJSON($event) {
        console.log(JSON.stringify($event.data));
    }

    // ...snip...

and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

(global as any).wikitudeLicense: string = "YOUR_LICENSE_KEY_HERE"

And Voila! you have Wikitude AR working in your Nativescript Application!

Usage

using your own location provider

by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        this.WikitudeInstance.disableLocationProvider();
    }

Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });

this is useful if you want a single location state.

once you have disabled it you can re-enable it with the following :

this.WikitudeInstance.enableLocationProvider();

TODO

• Plugins API Exposure, not sure how to go about this, Wikitude allows Plugins, built in CPP to be used, and linked using their Plugin's API (an Example of a plugin would be face recognition). I'm unsure how to go about allowing users to do this. any advice would be appreciated...
• Detecting if Device needs Calibration: Currently being held back by Android causing a crash when i try to listen to this event.
• Camera Events: Could be useful for the Developer to check for the Camera Open, Closed, and any Crashes.
• a better way to set the Wikitude LicenseKey and Required Features.

API

Properties

Functions

Events

all can be imported from the index.d.ts.

License

Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

Apache License Version 2.0, January 2004