# XREAL Markers

## Introduction

Introducing XREAL Markers, a novel set of 'interactive' image tracking cards designed to facilitate virtual and real-world interaction. By manipulating the magnetic sliders on the cards, users can engage in dynamic gameplay experiences. The cards are available in three distinct colors: green for bidirectional functionality, blue for tridirectional, and orange for six-directional capabilities. Developers are encouraged to leverage the cards' interactive features to innovate and enhance both new and existing applications. Additionally, we invite you to explore the sample application '[Spatial Life](https://nreal-public.nreal.ai/download/Application/spatiallife0619.apk),' thoughtfully crafted by the XREAL design team.

<figure><img src="https://3927673004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyXoV7SMVFQhr75lOIoQv%2Fuploads%2F72u2BCymCsDwuo4rstZW%2Fmarker.jpeg?alt=media&#x26;token=469a1904-f103-4bbf-a2d7-6876483b1655" alt=""><figcaption></figcaption></figure>

## Requirement <a href="#developerguide" id="developerguide"></a>

> To ensure optimal performance and compatibility when using the Spatial Life application, the following hardware and software specifications must be met:

* Android phones listed in[ Device Compatibility](../../nrsdk-fundamentals/xreal-devices/compatibility) or Beam Pro.
* XREAL Air 2 Ultra
* [Nebula 3.8.0](https://play.google.com/store/apps/details?id=ai.nreal.nebula.universal\&hl=en_US\&gl=US)
* XREAL Markers&#x20;

> For developers interested in creating applications akin to Spatial Life, with feature coaster image tracking, additional resource is required:

<details>

<summary>NRSDKForUnity Experimental </summary>

2024.06.19

Regular updates released with the normal version.

* [NRSDKForUnity\_Experimental\_Release\_2.2.1.unitypackage](https://nreal-public.nreal.ai/download/NRSDKForUnity_2.2.1_Release_20240619/NRSDKForUnityAndroid_Experimental_2.2.1.unitypackage)&#x20;

2024.04.18&#x20;

Fixed: The problem of not being recognized after switching back from the background.

* [NRSDKForUnity\_Experimental\_Release\_2.2.1.unitypackage](https://nreal-public.nreal.ai/download/NRSDKForUnity_2.2.0_Release_20240418/NRSDKForUnityAndroid_Experimental_2.2.1.unitypackage)    &#x20;

2024.03.29&#x20;

* [NRSDKForUnity\_Experimental\_Release\_2.2.0.unitypackage](https://nreal-public.nreal.ai/download/NRSDKForUnity_2.2.0_Release_20240329/NRSDKForUnityAndroid_Experimental_2.2.0.unitypackage)    &#x20;

</details>

> Developers who don’t have Marker cards can download and print this PDF file for use.

{% file src="https://3927673004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyXoV7SMVFQhr75lOIoQv%2Fuploads%2FCwUcJpCbHvyIhtkAhp5h%2FXREAL%20Markers%20Print.pdf?alt=media&token=e9a0c86d-eddf-424a-a04a-a7ece8c482ea" %}

Usage Instructions:

* Please print the Marker images on matte A4 paper in color to ensure accurate output size.
* When printing, do not enlarge the image; print at 100% scale.
* Cut out the Marker along the black border and attach it to a rigid cardboard.
* Within the camera’s recognition range, only one card of the same color should appear.

## Developer Guide <a href="#developerguide" id="developerguide"></a>

> Developers who don’t have Marker cards can download and print this PDF file for use.

{% file src="https://3927673004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyXoV7SMVFQhr75lOIoQv%2Fuploads%2FyaHLyPKt6tB1XkblGCJ9%2FXREAL%20Markers%20Print.pdf?alt=media&token=5986a3a3-d311-43a6-b341-c0ce9e5da030" %}

Usage Instructions:

* Please print the Marker images on matte A4 paper in color to ensure accurate output size.
* When printing, do not enlarge the image; print at 100% scale.
* Cut out the Marker along the black border and attach it to a rigid cardboard.
* Within the camera’s recognition range, only one card of the same color should appear.

## Developer Guide <a href="#developerguide" id="developerguide"></a>

Learn how to use the Coasters Image Tracking feature in your own apps.

* Create a new project in Unity.&#x20;

> Need help setting up? Try [Getting Started with NRSDK](../../nrsdk-fundamentals/quickstart-for-android) first

* Click NRSDK -> CoastersTrackingModule -> Install

<figure><img src="https://3927673004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyXoV7SMVFQhr75lOIoQv%2Fuploads%2F2DS7RnBhOur5zqlfWInT%2Fimage.png?alt=media&#x26;token=a7d24636-f285-45c5-97c1-fdc81dba74d6" alt=""><figcaption></figcaption></figure>

> Note that the coasters image tracking is not compatible with the original image tracking. If you want to use the old version SDK, click uninstall.

* Open scene **`CoastersimageTracking`**

<figure><img src="https://3927673004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyXoV7SMVFQhr75lOIoQv%2Fuploads%2F8o0JCLC5V3dMByLSphG0%2Fimage.png?alt=media&#x26;token=ac0bc058-8265-4cb6-b52b-1fd5e54d63d6" alt=""><figcaption></figcaption></figure>

*   Modify your application logic as needed. The editor includes a simulator for image tracking, demonstrated in the screenshot below. This simulator provides 11 buttons, each corresponding to one of the 11 images. By clicking these buttons, you can simulate the tracking effect for the respective image.

    <figure><img src="https://3927673004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyXoV7SMVFQhr75lOIoQv%2Fuploads%2FB9SXWtWoXmhIlRYTiYXR%2Fimage.png?alt=media&#x26;token=7095a69c-e27b-4fa4-9bb1-26255ad6d4ae" alt=""><figcaption></figcaption></figure>
* The Marker feature uses a trained data sample. The sample resource address is shown in the figure below. It needs to be specified in the SessionConfig resource.

<figure><img src="https://3927673004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyXoV7SMVFQhr75lOIoQv%2Fuploads%2FeaNlKYLU6xH7w7gobOYx%2Fimage.png?alt=media&#x26;token=fd0435f1-506a-42c8-85e0-f60343b1ec27" alt=""><figcaption></figcaption></figure>

* Set the ImageTrackingMode to enable.

<figure><img src="https://3927673004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyXoV7SMVFQhr75lOIoQv%2Fuploads%2FeAoOt6bKtdAbUJVnu317%2Fimage.png?alt=media&#x26;token=d00f53db-d3c9-426c-b165-ba04280f3158" alt=""><figcaption></figcaption></figure>

* Before building an APK, please add the following lines inside the `<application>` element of your `AndroidManifest.xml`

{% code overflow="wrap" %}
```xml
<uses-library android:name="libOpenCL.so" android:required="false"/>
<uses-library android:name="libcdsprpc.so" android:required="false"/>
```
{% endcode %}

## Usage

### Get the current tracked Image list.

{% code overflow="wrap" %}
```csharp
NRFrame.GetTrackables<NRTrackableImage>(m_TempTrackingImages, NRTrackableQueryFilter.All);
```
{% endcode %}

### Get the tracking status of Image

> In Marker, the `GetTrackingState` method will only return two states: **Tracking** and **Paused**.

{% code overflow="wrap" %}
```csharp
NRTrackableImage.GetTrackingState() 

    /// <summary> Device Tracking State. </summary>
    public enum TrackingState
    {
        /// <summary>
        /// TRACKING means the object is being tracked and its state is valid.
        /// </summary>
        Tracking = 0,

        /// <summary>
        /// PAUSED indicates that NRSDK has paused tracking, 
        /// and the related data is not accurate.  
        /// </summary>
        Paused = 1,

        /// <summary>
        /// STOPPED means that NRSDK has stopped tracking, and will never resume tracking. 
        /// </summary>
        Stopped = 2
    }
```
{% endcode %}

### Get the ID of the Image

> In Marker, the value range of ID is \[0,10], corresponding to different states of Marker cards.

```csharp
NRTrackableImage.GetCoastersDataBaseIndex()
```

### Get image pose and size information

```csharp
// The length in the X direction of the image
NRTrackableImage.ExtentX
// The length in the Z direction of the image
NRTrackableImage.ExtentZ
// Get the pose of the center of the image
NRTrackableImage.GetCenterPose
```

### Enable and disable ImageTracking functionality

{% code overflow="wrap" %}
```csharp
/// <summary> Enables the image tracking. </summary>
public void EnableImageTracking()
{
    var config = NRSessionManager.Instance.NRSessionBehaviour.SessionConfig;
    config.ImageTrackingMode = TrackableImageFindingMode.ENABLE;
    NRSessionManager.Instance.SetConfiguration(config);
}

/// <summary> Disables the image tracking. </summary>
public void DisableImageTracking()
{
    var config = NRSessionManager.Instance.NRSessionBehaviour.SessionConfig;
    config.ImageTrackingMode = TrackableImageFindingMode.DISABLE;
    NRSessionManager.Instance.SetConfiguration(config);
}
```
{% endcode %}

