Wikitude Plugin

Integrate with Wikitude to implement augmented reality apps.

Image Recognition

Use the device's camera to track images and objects in realtime.

Geo AR

Use the device's sensors to track points of interest (POIs) in realtime.

Overview

The plugin supports the JavaScript SDK by Wikitude. The SDK lets you implement augmented reality (AR) apps in HTML and JavaScript. These apps are fully supported by the V-Play plugin.

Add the WikitudeArView item to your QML project and load a Wikitude HTML app from assets or an URL. For information how to implement AR apps in HTML and JavaScript, see the Wikitude SDK homepage.

Use Cases

The Wikitude SDK supports multiple features for different use cases of augmented reality. For a full guide about the SDK's capabilities see the official Wikitude documentation.

Image & Object Tracking

Track 2D images and 3D objects with the mobile device's camera and use this information in your application, for example overlaying information about real objects in realtime.

Geo AR (Point of Interest)

Track objects in the real world based on their absolute or relative position and direction to the mobile device, for example showing the position of the planets of the solar system in realtime.

Wikitude Examples

Example Usage

The WikitudeArView item loads an AR app built for the Wikitude SDK written in HTML and JavaScript. This example shows using the first of the Wikitude SDK examples.

 import VPlayApps 1.0
 import VPlayPlugins 1.0

 App {
   //licenseKey: "<generate one from https://v-play.net/licenseKey>"

   NavigationStack {
     Page {
       title: qsTr("Main Page")

       WikitudeArView {
         anchors.fill: parent

         //trial license key from http://www.wikitude.com/developer/licenses
         licenseKey: "nwGTRqHM7uPUc09MTWrRmzZJcBR7spO+zdcdswJ2fTWOQoZcu9YOy0p4hEh6gzFx/xvprs3Vd/U+1JVWk2vQLxEyzTW0Kb6WrwDk8B41rqqO/7QLkG/XLjvSXRwG8FDWrND41RMbUd+fvIhvS4l/PQ+14jZeilLJ/LphkhYtZWFTYWx0ZWRfXx9TnBOPlGDfNN8/aMGkJiVrRey2FxRp8JeZwGzOzlB73X/nkFWi/uOASo0S5PbCpsHyyNlZ0GwSC+YrVUwqUYve5tOoCht+qLf84o4M43TmGnvxsAuFFmYqDEEbN1qfKidd3pAFvIlHX5MM9/t66cK0hSJLlrGXSF8AQzGi28coRX6PkUq6/vJs4uJEkCIqHWmGg350VUnRL43fvQIHwVoFBRs0LizXexWBec5QhuAL4CJRi+OIjfjjQoCQKE7nbfr0wltZfaaHiJHa7PPIbQytLxhfUEZHvzE/gZ9/y25nx2BdS7y8/Oii/w/6d2E7QDsBv8PP4chQqfNQ2IfRE+O+cS2Zj13YyYhd3ojKaQJRw6k2dHOUS1ng00EJeUw7oUJJbyIfhD6FNSCHlfSYw+KZGkwWr6P5PuQJbnhmnTpG8RW6jnnUOmvzSQTh09s0smXIZC35AEhRAUwrxVFSR/bVpgwyBHn7+1I/UryGUeI+SON62M0i3g8="

         //place the HTML/JS sources in this location:
         arWorldSource: "../assets/samples/01_ImageTracking_1_ImageOnTarget/index.html"
       }
     }

   }
 }

Advanced Configuration

AR apps use the camera to track objects and overlay images in realtime. The WikitudeArView lets you specify details how to use the device's camera(s).

The property cameraPosition lets you choose whether to use a front- or back-facing camera. If the device does not have the a camera on the specified side, the first available one is used.

The property cameraResolution lets you choose the resolution to use for the camera image. You can choose to use SD, HD, Full HD or automatic resolution.

The property cameraFocusMode lets you choose how the camera focuses the image. You can choose to one-time auto-focus, continuous auto-focus or manual focus using cameraManualFocusDistance.

This example shows how to specify these properties:

 import VPlayApps 1.0
 import VPlayPlugins 1.0

 App {
   //licenseKey: "<generate one from https://v-play.net/licenseKey>"

   NavigationStack {
     Page {
       title: qsTr("Main Page")

       WikitudeArView {
         anchors.fill: parent

         cameraPosition: WikitudeArView.BackCamera
         cameraResolution: WikitudeArView.FullHD
         cameraFocusMode: WikitudeArView.ManualFocus
         cameraManualFocusDistance: 0.1

         //trial license key from http://www.wikitude.com/developer/licenses
         licenseKey: "nwGTRqHM7uPUc09MTWrRmzZJcBR7spO+zdcdswJ2fTWOQoZcu9YOy0p4hEh6gzFx/xvprs3Vd/U+1JVWk2vQLxEyzTW0Kb6WrwDk8B41rqqO/7QLkG/XLjvSXRwG8FDWrND41RMbUd+fvIhvS4l/PQ+14jZeilLJ/LphkhYtZWFTYWx0ZWRfXx9TnBOPlGDfNN8/aMGkJiVrRey2FxRp8JeZwGzOzlB73X/nkFWi/uOASo0S5PbCpsHyyNlZ0GwSC+YrVUwqUYve5tOoCht+qLf84o4M43TmGnvxsAuFFmYqDEEbN1qfKidd3pAFvIlHX5MM9/t66cK0hSJLlrGXSF8AQzGi28coRX6PkUq6/vJs4uJEkCIqHWmGg350VUnRL43fvQIHwVoFBRs0LizXexWBec5QhuAL4CJRi+OIjfjjQoCQKE7nbfr0wltZfaaHiJHa7PPIbQytLxhfUEZHvzE/gZ9/y25nx2BdS7y8/Oii/w/6d2E7QDsBv8PP4chQqfNQ2IfRE+O+cS2Zj13YyYhd3ojKaQJRw6k2dHOUS1ng00EJeUw7oUJJbyIfhD6FNSCHlfSYw+KZGkwWr6P5PuQJbnhmnTpG8RW6jnnUOmvzSQTh09s0smXIZC35AEhRAUwrxVFSR/bVpgwyBHn7+1I/UryGUeI+SON62M0i3g8="

         //place the HTML/JS sources in this location:
         arWorldSource: "../assets/samples/01_ImageTracking_1_ImageOnTarget/index.html"
       }
     }

   }
 }

Interaction with the AR World

The AR world of Wikitude applications is written in HTML and JavaScript. Your QML application can interact with it by calling JavaScript functions and by receiving JSON objects. This example shows how to call a function testFunction defined in JavaScript in the AR world and how to receive a result.

 import VPlayApps 1.0
 import VPlayPlugins 1.0

 App {
   //licenseKey: "<generate one from https://v-play.net/licenseKey>"

   NavigationStack {
     Page {
       title: qsTr("Main Page")

       AppButton {
         id: jsCmdInput

         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.margins: dp(12)

         //call testFunction(1234) in the AR world
         onClicked: arView.callJavascript("World.testFunction(1234)")
       }

       WikitudeArView {
         id: arView

         anchors.top: jsCmdInput.bottom
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: parent.right

         //trial license key from http://www.wikitude.com/developer/licenses
         licenseKey: "nwGTRqHM7uPUc09MTWrRmzZJcBR7spO+zdcdswJ2fTWOQoZcu9YOy0p4hEh6gzFx/xvprs3Vd/U+1JVWk2vQLxEyzTW0Kb6WrwDk8B41rqqO/7QLkG/XLjvSXRwG8FDWrND41RMbUd+fvIhvS4l/PQ+14jZeilLJ/LphkhYtZWFTYWx0ZWRfXx9TnBOPlGDfNN8/aMGkJiVrRey2FxRp8JeZwGzOzlB73X/nkFWi/uOASo0S5PbCpsHyyNlZ0GwSC+YrVUwqUYve5tOoCht+qLf84o4M43TmGnvxsAuFFmYqDEEbN1qfKidd3pAFvIlHX5MM9/t66cK0hSJLlrGXSF8AQzGi28coRX6PkUq6/vJs4uJEkCIqHWmGg350VUnRL43fvQIHwVoFBRs0LizXexWBec5QhuAL4CJRi+OIjfjjQoCQKE7nbfr0wltZfaaHiJHa7PPIbQytLxhfUEZHvzE/gZ9/y25nx2BdS7y8/Oii/w/6d2E7QDsBv8PP4chQqfNQ2IfRE+O+cS2Zj13YyYhd3ojKaQJRw6k2dHOUS1ng00EJeUw7oUJJbyIfhD6FNSCHlfSYw+KZGkwWr6P5PuQJbnhmnTpG8RW6jnnUOmvzSQTh09s0smXIZC35AEhRAUwrxVFSR/bVpgwyBHn7+1I/UryGUeI+SON62M0i3g8="

         //place the HTML/JS sources in this location:
         arWorldSource: "../assets/samples/01_ImageTracking_1_ImageOnTarget/index.html"

         onJavascriptCallback: {
           //received the JSON object jsObject from the AR world
           console.log("AR JS callback: " + JSON.stringify(jsObject))
         }
       }
     }

   }
 }

This calls the function testFunction in the AR world with the parameter 1234. This function can be defined in the JavaScript file in assets like this:

 var World = {
   testFunction: function(arg) {
     console.log("testFunction called in AR world")

     //this calls the javascriptCallback signal in QML:
     AR.platform.sendJSONObject({ msg: "Callback from AR world" })
   }
 };

Available QML Items

WikitudeArView

Wikitude item provides AR capabilities of the Wikitude JavaScript SDK

Adding and Activating Plugins

How to Add a V-Play Plugin to your App or Game

When you create a new project, you can choose the Plugin Application template to get your own version of the V-Play Plugin Demo with the plugins you want to include. Open Qt Creator and choose “File / New File or Project”, then select Plugin Application in the V-Play Apps section or Game with Plugins in the V-Play Games section to start the project wizard.

Then select the platforms you want to run your application on. The plugins are available for both iOS & Android. There is a fallback functionality in place on Desktop platforms so your project still works when you call methods of the plugins. This allows you to do the main development on your PC, and for testing the plugin functionality you can run the project on iOS and Android.

After the Kit Selection, you can choose which of the plugins you’d like to add to your project:

Then complete the wizard, your project is now set up with all the correct plugin dependencies for Android & iOS automatically. This includes:

  • Setting up the .gradle file for Android.
  • Setting up the .plist file for iOS.
  • Setting up the .pro file to include the plugin libraries for iOS.

Note: Additional integration steps are still required for most plugins, for example to add the actual plugin libraries for iOS to your project. Please have a look at the integration steps described in the documentation for each of the used plugins.

If you have an existing V-Play application, follow these steps to include a plugin to your app or game:

In Qt Creator, select “File / New File or Project” and choose either V-Play Games or V-Play Apps from Files and Classes. Then select V-Play Plugin and press Choose.

You can now select the plugin you want to add:

The plugin item, which contains the chosen plugin and a short usage example, is now added to your project. To use the item in your project, simply perform these steps:

  • Include the created item (use the name you entered in the template before) in your main.qml file.
  • Modify the .pro file & .plist file for iOS usage. See the iOS integration guide of the chosen plugin for more information.
  • Modify the the .gradle file for Android usage. See the Android integration guide of the chosen plugin for more information.

Note: If you have an existing Qt application, you can also add V-Play Plugins to your app! See here how to do this.

Activating Plugins with a License Key

You can test all plugins as soon as the required integration steps and plugin configuration are completed.

However, the plugins are only available as Trial Versions if they are not activated with a valid license. When you are using unlicensed plugins, a dialog is shown and a watermark overlays your application to notify you about the testing state of the plugin.

All monetization plugins are free to use in all licenses, other plugins are only fully usable if you have purchased the Indie or Enterprise license. To activate plugins and enable their full functionality it is required to create a license key. You can create such a key for your application using the license creation page.

This is how it works:

  • Choose the plugins you want to include in your license key:

  • Click on “Generate License Key” and set the app identifier & version code of your application. You can see that the AdMob plugin was enabled in this license key:

  • Copy the generated licenseKey to your GameWindow or App component.

  • You can now fully use the selected plugins!

Integration

To use the Wikitude plugin you need to add the platform-specific native libraries to your project, described here:

iOS Integration Steps

  1. Download the Wikitude SDK for iOS v7.2.1 from the official server: https://cdn.wikitude.com/sdk/7_2_1/WikitudeSDK_iOS_7-2-1_2018-02-21_14-25-38.zip.
  2. Copy WikitudeSDK.framework from the Framework subfolder to a subfolder called ios within your project directory.
  3. Add the following lines of code to your .pro file:
     ios {
       VPLAY_PLUGINS += wikitude
     }

iOS App Store submissions

When preparing a build for App Store submission, make sure to follow the steps described in the Removing simulator architectures section found here.

Android Integration Steps

  1. Download our PluginDemo from https://github.com/v-play/PluginDemo/archive/master.zip and unzip it.
  2. Copy WikitudeSDK.aar from the android/libs subfolder to a subfolder called android/libs within your project directory.
  3. Open your build.gradle file and add the following lines to the dependencies block:
     dependencies {
       compile 'net.vplay.plugins:plugin-wikitude:2.+'
    
       compile ':WikitudeSDK@aar'
     }
  4. Also in build.gradle, add the following lines inside the android.defaultConfig block:
     android {
       defaultConfig {
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
       }
     }
  5. Also in build.gradle, add the following line inside the allprojects.repositories block:
     allprojects {
         repositories {
             //..current repositories
    
             flatDir { dirs 'libs' }
         }
     }

    Note: If you did not create your project from any of our latest wizards, make sure that your project uses the Gradle Build System like described here.

Used Wikitude SDK Versions

iOS Wikitude iOS SDK 7.2.1
Android Wikitude Android SDK 7.2.1

Note: Other SDK versions higher than the stated ones might also be working but are not actively tested as of now.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support