# Surface Gyro and Marker Tracking

## Introduction  <a href="#h_01fy93y95wr0ym81t9ea8xc6f0" id="h_01fy93y95wr0ym81t9ea8xc6f0"></a>

This article is a quick start guide providing instructions and guidelines to create a surface (select surface) or gyro (select around you) tracking experience using Blippbuilder Mobile.

Refer below links:

* [Procedure](#h_01fy93yn02tkj15crz8699f1a5)
* [Stage](#stage)
* [Design](#h_01fy93yv9abfgwx4a6gpk0emp2)
* [Actions on Objects](#process)
* [Preview and Publish](#preview-and-publish)

## Procedure <a href="#h_01fy93yn02tkj15crz8699f1a5" id="h_01fy93yn02tkj15crz8699f1a5"></a>

* Login to Blippbuilder Mobile.
* Choose the option **'Created on Mobile'** as shown below and click **'Create a New Project'** to start creating your AR experience.

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F63n0oOsI5nymTLs6URO7%2FScreenshot_20240607-070814.png?alt=media&#x26;token=bc2471ac-207f-4bd4-a986-939986128aa4" alt="" width="375"><figcaption><p>Blippbuilder Mobile HUB</p></figcaption></figure>

* Provide a suitable name for the project and click **'Continue'.**

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FYF2ZWpTHjW36HgfcPiD7%2FScreenshot%202024-01-05%20at%205.15.06%20PM.png?alt=media&#x26;token=592244e7-9a68-4140-980c-b6a5ee81baf9" alt=""><figcaption><p>Name Your Project</p></figcaption></figure>

* Click 'Select surface' for 'Surface tracking' or 'Select Around You' for 'Gyro Tracking' as the type of experience. For this example, surface tracking is selected. The functionalities remain same for gyro tracking.&#x20;

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F5JmmOPKkA2en4DtznyxO%2FScreenshot_20240607-073448.png?alt=media&#x26;token=98473be5-0ad3-4f68-a7b1-5f82a6989741" alt="" width="375"><figcaption><p>Surface Tracking</p></figcaption></figure>

* You will be re-directed to the Blippbuilder Mobile Design Canvas.

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2Fv9MIeEftcdnGKZIt5p6c%2FScreenshot%202024-01-05%20at%205.16.26%20PM.png?alt=media&#x26;token=7e65cb5e-c3d3-4606-ae9f-ebc7ebd1c8b1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The Design Canvas functionalities are the same for any kind of project. Refer below section for information on utilizing various design canvas elements to create a surface, marker or gyro tracking experience.
{% endhint %}

## Process

The following section provides information on how to utilize various design canvas elements to create, preview and publish a project.&#x20;

## Stage

The Blippbuilder Mobile Stage has the following functionalities:

* **'Zoom In' and 'Zoom Out'**: Move the zoom radio button towards '+' to zoom in towards the surface and '-' to 'zoom out' from the surface.&#x20;
* **360 degree view**: Use the gear icon on the bottom-right of the screen to get a 360 degree view of the Design Canvas.&#x20;

## Design  <a href="#h_01fy93yv9abfgwx4a6gpk0emp2" id="h_01fy93yv9abfgwx4a6gpk0emp2"></a>

Choose from a variety of designing capabilities and easily create WebAr experience using your mobile device.  Click on any circle to add various design elements. The following are the various design capabilities:

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FAsjtlhv4TcwZSXFIbbPj%2FScreenshot%202024-01-05%20at%205.20.45%20PM.png?alt=media&#x26;token=d510bf80-4f0a-462d-aea2-46886953df29" alt=""><figcaption></figcaption></figure>

**3D Library**

Click the 3D library icon  to access various in-built 3D object shapes which can be utilised to create the experience as shown below:

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F5S9EmnIZVoWnTEY9Q4K4%2FScreenshot%202024-01-05%20at%205.22.30%20PM.png?alt=media&#x26;token=659802f3-28d5-4a80-bcd6-7e5d65bd168d" alt=""><figcaption></figcaption></figure>

* Select the object and click the 'tick' icon on the bottom of the screen to add the object to the project. You can also choose 'Sketchfab' to access a plethora of free 3D models from the Blippbuilder Mobile platform.

**Video Library**

* Click the Video Library icon to upload videos. You can also access already imported videos from this section. Click the '+' icon to upload videos from your system or you can alternatively choose 'Pixabay' and access a range of free videos to add to the project.&#x20;

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F0hSiXwrP8yAAvwMYqWon%2FScreenshot%202024-01-05%20at%205.36.26%20PM.png?alt=media&#x26;token=fb0606e0-52f0-400e-8fde-a9110a9f1afa" alt=""><figcaption></figcaption></figure>

* Select a video and click 'import' to add the video to the project as shown below:

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FihyGTQsK9DyEuJZkgVmf%2FScreenshot%202024-01-05%20at%205.36.39%20PM.png?alt=media&#x26;token=711e372c-2189-43dd-a5f7-cb9a175d9643" alt=""><figcaption></figcaption></figure>

**Photo Library**

* Click the Photo Library icon to upload images. You can also access already imported videos from this section. &#x20;
* Click the '+' icon to upload videos from your system or you can alternatively choose 'Pixabay' and access a range of free images to add to the project.&#x20;
* Select an image and click 'import' to add the image to the project.

**Pixabay Image Library**

Click the Pixabay Image Library icon to access a range of free images to add to the project.&#x20;

**Image Scribble Pad**

Click the Image Scribble icon  to access a scribble pad which can be used to drag any image of your choice as shown below:

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FDrJqozDrNRUe1AxehtNB%2FScreenshot%202024-01-05%20at%205.40.01%20PM.png?alt=media&#x26;token=c9e696e4-69dc-47f8-a360-24cf37bb14a2" alt=""><figcaption></figcaption></figure>

The following are the various functionalities of the Scribble Pad:

* Add Image: Click 'Add Image' to add a photo to the scribble pad and customize the same by using the pad.
* Draw: Click the 'Dot' icon and you can start scribbling on the pad.&#x20;
* Bold Stroke: Click the Bold Stroke icon  to get bold stroke to scribble on the pad
* Eraser: Click the eraser icon to modify or erase any scribble on the pad.
* Delete: Click the bin icon  to delete the image
* Soft Edge: Enable Soft edges  to get soft stroke to scribble on the pad.
* Colour: Click the Colour icon  to modify the colour of the scribble stroke and you can choose from a range of colour options.

**Text**&#x20;

Click the Text icon to add a text element into the project and you will be redirected to the 'Text Screen'. You can modify the size, alignment, font and colour of the text. Click the 'tick' icon to add the text to the project

## Actions on Objects

Let us take an example of a cone object added to the Blippbuilder Design Canvas. The following are the various actions or modifications you can apply on the object:

### **Rotate Objects**

Add a 3D object and use the gear icon to adjust the rotation as shown below:

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FjwZq8ig7HdVKHsWFxmFl%2Frotate.gif?alt=media&#x26;token=8e3d47d1-46bc-4abe-a680-0798f177698e" alt=""><figcaption></figcaption></figure>

### Resize Objects <a href="#h_01fy93z1b6v0wxt93g5r5xff9s" id="h_01fy93z1b6v0wxt93g5r5xff9s"></a>

Add a 3D object and use the resizing option to increase of decrease the size of the object as shown below:

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2Fzi4x15VxXQNVjbWrlMuj%2Fresize%20objects%20in%20bbm%20(1).gif?alt=media&#x26;token=a68c5d92-4357-478b-89da-0c846d759c21" alt=""><figcaption></figcaption></figure>

### Modify objects <a href="#h_01fy93z1b6v0wxt93g5r5xff9s" id="h_01fy93z1b6v0wxt93g5r5xff9s"></a>

You can apply various modifications to the objects such as swap, transform, duplicate, actions, style etc. Select the object icon from the bottom left of the screen to choose required modifications:

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2FKVQC9iMa7uLagZPicF2D%2Fmodify%20objects%20bbm%20(1).gif?alt=media&#x26;token=609576d5-a822-4f1b-b836-646bdf10c99f" alt=""><figcaption></figcaption></figure>

### Transform

To adjust position, rotation and scale, select Transform.

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F6BR8UsVr118qon3lckco%2Ftransform.png?alt=media&#x26;token=ce7ccb19-10f3-4130-b814-ec8ee2bdb122" alt=""><figcaption><p>Tranform</p></figcaption></figure>

### Action on Touch

Click the actions icon to activate various actions on touch such as 'Go to Website', 'Playvideo', Call Number etc

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F9y1NfjYeNZrnrHxCU4Gv%2FScreenshot%202024-01-05%20at%205.46.25%20PM.png?alt=media&#x26;token=3f89f47b-de1f-433c-ada0-48ef03ff6674" alt=""><figcaption></figcaption></figure>

## Preview and Publish

You can create a test link by using the 'Preview' option or you can 'Publish' a project and generate a live project QR code.&#x20;

### Preview

* To create a test link, click on the **'Play'** icon from the top right of the screen.
* Choose the option 'Preview
* Click 'View Preview' and the experience will launch on your mobile screen.
* You can verify your project created and the test code expires within 5 minutes of generation

### Publish

* To publish a project, click the 'Play' icon and choose  the option to 'Publish'.
* You cannot edit a project after it is published and the project is active or live for 24 hours.

<figure><img src="https://749348736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQE63O5x3zPZ7UyVORwnh%2Fuploads%2F0LtA73OwjUeSWYuxWOY5%2FScreenshot%202024-01-05%20at%205.48.45%20PM.png?alt=media&#x26;token=f9ea3c54-6f06-4a2c-8467-f43607507353" alt=""><figcaption></figcaption></figure>

* Click  'Share' and choose desired share option from your mobile screen.&#x20;
* You can alternatively 'Copy Link' of the project or 'View Project' on your mobile screen.
