Wikitude

Augmented Reality Blackberry10

Start with the Augmented Reality Blackberry10 SDK

Follow the steps below to get your environment up and running to work with the Wikitude SDK for BlackBerry10.

The Wikitude SDK wraps the ARchitect technology into a reusable package. It offers the following features:

  • Load an ARchitect world
  • Provide data to a loaded ARchitect world
  • Notify an ARchitect world of external events
  • Inject custom location events
  • Get notifications for events occurring inside the ARchitect world
  • Load resources locally (inside App Package) or remote from the web

The Augmented Reality Blackberry10 SDK contains the ArchitectView which is a platform dependent UI component. It allows loading an ARchitect World which has access to the ARchitect API. Additionally it exposes functionality to provide data, notify the ARchitect World, inject location events and register for ARchitect URLs.

The communication between the ARchitect World and the native application happens by executing JavaScript in the context of the ARchitect World. This offers the possibility to provide data and/or to notify the ARchitect World of external events.

To react to events happening in the ARchitect World the developer has the possibility to register a URL listener that is called each time an architectsdk:// URL is requested. By encoding the event into this URL the native App is able to react on the event accordingly (e.g. display a dialog or update data).

Project Setup

Prerequisites:

  • ARchitect library
  • Valid license key (see Section License Key)

Requirements:

  • BB10 NDK 10.0.9
  • BB10 Device (e.g. Dev Alpha Device)

Installation of Wikitude SDK for BlackBerry10

  1. Create Blackberry Cascades C++ Project
    New < Project… < BlackBerry < BlackBerry Cascades C++ Project < Standard Empty Project < Finish
  2. Copy SDK files (ArchitectView.h, ARchitectSDK.lib and ARchitectLibrary.lib) to your project directory
    e.g. copy the contents of/BB10/SDK to the new project folder
  3. Add Wikitude SDK’s library and include files to the .pro file
    Include following lines:

    1
2
3

    # Wikitude SDK
INCLUDEPATH += ../inc
LIBS += -L../lib/ -lARchitectSDK -lARchitectLibrary -lscreen -lEGL -lGLESv2 -limg -lcrypto -lfreet
  4. Add permissions to bar-descriptor.xml
    Required: Camera, GPS Location
    Optional: Internet, Audio
  5. Important: Add following line after the LD_LIBRARY_PATH entry in your bar-descriptor.xml 
    1

    <env var="WEBKIT_DISABLE_DISK_CACHE" value="true"/>
  6. Add ArchitectView to the application’s UI
    Either use QML or C++ to add it to the UI. Both possibilities are described below.

    Using QML
    1
2
3
4
5
6
7
8
9
10

    #inlcude 
import bb.cascades 1.0
import wt.architect 1.0
 
Page {
    content: ArchitectView {
        id: archView
        objectName: "archView"
    }
}

    Register ArchitectView as component in QML before loading the QML document.

    1

    qmlRegisterType("wt.architect", 1, 0, "ArchitectView");

    After the QML document is loaded find the ArchitectView and initialize it with your license key.

    1
2

    ArchitectView* arView = root-&gt;findChild("archView");
arView -&gt;initialize("your license key");
    Using C++
    1
2
3
4
5
6
7
8
9
10
11

    #inlcude 
Container* arContent = Container::create()
.horizontal(HorizontalAlignment::Fill)
.vertical(VerticalAlignment::Fill)
.layout(StackLayout::create());
 
ArchitectView* arView = new ArchitectView();
arView-&gt;setHorizontalAlignment(HorizontalAlignment::Fill);
arView-&gt;setVerticalAlignment(VerticalAlignment::Fill);
arContent-&gt;add(ARview);
arView-&gt;initialize("your license key");
  7. Load the Architect World
    Call load on the ArchitectView object created before. Connect the loadingFailed signal to get notifications on errors during loading.

    1

    arView-&gt;load("url of architect world");

License Key

In order to use the Augmented Reality Blackberry10 SDK you need to obtain a license key that is bound to your application and purchased license block. This key is passed to the ARchitectView via initialize (BB10).

To obtain a license key visit pricing overview or contact us directly. If you don’t yet have a license key and are just evaluating the SDK, passing in an empty string is sufficient.

Hello World

Your first ARchitect World will be a sample called ”Hello World!” which is displayed in the camera view.

  • Put HelloARchitectWorld.html from the SDK folder file onto your webserver or a web based file hosting (e.g. Dropbox public directory) and make sure you remember the URL to the file.
  • With your Android phone, launch ARchitect Mobile Viewer and open this URL
  • Hello World launches and will run in your camera

Now that you have seen Hello World running on your phone, let’s take a closer look how this works:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <!-- Important: Let the viewport cover the whole screen -->
 <meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Hello World</title>
 </head>
 <body>
         <b>Hello World!</b>
 </body>
</html>

It’s just a plain HTML file! Its content will be displayed on top of the camera feed allowing you to create a Head-up Display (HUD). Keep in mind that this is just a starting point, ARchitect will allow you to create rich Augmented Reality scene using standard JavaScript.

Note the meta tag that sets the viewport. This is a common concept for mobile sites to limit the viewport to the actual screen. It is necessary to set this otherwise it might be possible that the HTML content is rendered extremely small on iOS devices. You might change the width of 540 pixel to something that works better for your layout, but be sure to test it on each platform.

Advanced Samples and Tutorials

More samples and tutorials can be found in forum.wikitude.com