In this tutorial you will learn how to make an Augmented Reality page. Note that Augmented Reality pages are disabled by default. If you want to use Augmented Reality, send us a message through Intercom or by email. 

Augmented Reality pages let users explore an area in an interactive way. By letting users search for a specific image inside, for example, your office. When they find that specific image and scan in with the camera on their phone, a video will pop up. If a users visits this page on a desktop or laptop, only the video will be displayed. 

Define Markers (targets)

Step 1. Go to https://developer.vuforia.com/

Step 2. Click on Register at the top right side of the page.

Step 3. Fill in the fields and create an account.

Step 4. Log in, go to Develop and select Target Manager

Step 5. Click on add database and give it a name, this can be anything you can remember. Make sure you select ‘device’ and click on Create 

Select your newly created database in the list by clicking on the name. This gives the opportunity to create the targets you want to look for with the app:

Step 6. Select your newly created database in the list by clicking on the name. This gives the opportunity to create the targets you want to look for with the app.

Step 7. Press the Add Target button

Step 8. Select an image to upload. This will be the marker that the user will look for, so make it a recognizable image. 

  • width is the number of pixels the image width
  • The name is important, we have to use this one later in step. Don’t add spaces and use only letters and numbers in the name.

You can add multiple targets to a database, which can be reused in the course.

Download Database

 Step 9. To use the set of markers you’ve just created, download the database

The resulting download is a zip file, named after the database name (in this case Tutorial.zip).

Step 10. UNZIP that file (on Mac, double click in Finder on the zipfile) and two files will come up:

  • XML file <databasename>.xml (ie. Tutorial.xml)
  • DAT file  <databasename>.dat (ie. Tutorial.dat)

Import marker into AppicalNow

On your main page in the AppicalNow Editor there is a small menu on the top right. When activated, in this menu “Course Markers” is available.

Step 11. Select this course markers item and create a new course marker on the following page.

In there

  1. Select the name of the course that will use the Augmented Reality marker
  2. upload your XML file (previous paragraph)
  3. upload your DAT file (previous paragraph)

Step 12.  hit the update button

Use Augmented Reality Marker in a Course

Step 13. To use augmented reality in a course you first create a new page with the page type Augmented Reality

In the new page enter the following data:

  • Marker name: corresponds with the name you entered previously (target name)
  • Marker image: the image that users should look for (also uploaded previously)
  • video: what video to show when someone finds the marker

Did this answer your question?