Vuforia web services api: how to add target in vuforia cloud database?

Vuforia web services API is used to query vuforia cloud database, that is to perform functions such as add, edit or delete image target and it’s associated metadata. Metadata is the file that is stored against each target. It consists of a url to 3d model or video, or any custom requirements to like scale of model.

In this tutorial we will use vuforia web services API to upload target with metadata in vuforia cloud database.

Download Vuforia Web Services Sample Code

Visit https://developer.vuforia.com/downloads/samples, scroll down and at bottom of page you will see Vuforia Web Services heading, download the sdk for php. Upload the folder in your hosting and I renamed the folder to “vuforia” for easy access. You need to upload HTTP and Net to for web requests. Download them from here: http://free.zeanex.com/HTTP.zip, and extract them in same folder.

Download Free Admin Panel Theme

In this tutorial my major concern is to teach you the use vuforia web services API, instead of developing bootstrap theme, so i am uploading a theme you can use that or you can create your own theme. It’s a free theme i downloaded from https://startbootstrap.com/themes/sb-admin-2/, and i edited it according to our requirements you can download edited theme here: https://free.zeanex.com/vuforiaTheme.zip, and upload this in same folder where our vuforia, HTTP, and Net folders are stored.

Get Vuforia Development Key

Go to https://developer.vuforia.com/, create account or login. Then after clicking on develop menu item, click on get development key.

Get Vuforia Development Key

Enter License name, accept terms and click confirm.

Create Vuforia Cloud Database

Click on Target Manager, then click on Add Database, Enter Database name, Select “Cloud” as database type. Select newly created license key.

Add Vuforia Database

Create form

If you downloaded my theme then there is add-target.php file open it. Add these attributes to <form> tag. 

action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post"

We need target name, image and associated model form user as input. So we need to have one input field to accept text, and two file upload fields. All these are already present in add-target.php file. There is also javascript and php code to upload files in hosting. Make sure to have name attribute in all input fields as shown in screenshot

name attribute is must, we will use this to get values in php

Now Copy and paste this code at bottom of your page to get values from form and pass them to PostNewTarget.php file, that we will edit now.

<?php
$targetName = $imageLocation = $itemLocation = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if(isset($_POST['upload_object'])){
        $targetName = test_input($_POST["targetname"]);
        $imageLocation = "images/".test_input($_POST["file1"]);
        $itemLocation = test_input($_POST['file2']);
        require_once 'vuforia/php/PostNewTarget.php';
        $instance = new PostNewTarget($targetName, $imageLocation, $itemLocation);
    }
}
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

Post new target in vuforia cloud database

Now we have to edit PostNewTarget.php file that we get in vuforia samples. It is stored in your hosting at vuforia/php/PostNewTarget.php. We have to edit this to get values from our form.

Access Key and Secret Key

We have to copy access key and secret key from vuforia developer portal. In previous step we created vuforia cloud database. Now go back to vuforia developer portal and click on that database name. Then click on database access keys. Now Copy Server side keys.

Vuforia Database server access keys

We have to paste these keys in our PostNewTarget.php file.

PostNewTarget.php file before pasting keys.
PostNewTarget.php file after pasting keys.

Access form values

In our add-target.php file we are passing parameters to PostNewTarget.php file, but for now PostNewTarget. php file has no parameters in it’s function, so what we have to do is delete few things from file and edit few things.

Delete these:

private $targetName 	= "[ name ]";
private $imageLocation 	= "[ /path/file.ext ]";

Add these parameters in PostNewTarget()

$targetName, $imageLocation, $itemLocation

Replace $this->targetName with $targetName, replace “Vuforia test metadata” with $itemLocation replcae $this->getImageAsBase64() with $this->getImageAsBase64($imageLocation).

Add this parameter in getImageAsBase64()

$imageLocation

Replace $this->imageLocation with $imageLocation.

PostNewTarget.php file before making these changes
PostNewTarget.php file after making these changes

Now if we go to https://domain.com/add-target.php file and submit the form we will be able to store data in cloud database. So our major task is done, but we also want to store this data in mySQL database too. For that we have to do few more things.

Store data in mySQL database

To easily maintain and manage our data, we may want to store in our hosting database too. For that pass these parameters to execPostNewTarget() function.

$targetName, $imageLocation, $itemLocation

We will store data in database if data is successfully stored in vuforia cloud database. For that copy and paste this code under if() statement that checks status code is 200 or 201. 

$json = json_decode($response->getBody(), true);
$result_code=$json['result_code'];
include 'connection.php';
$vuforiaId= $json['target_id'];
$sql = "INSERT INTO objects(vuforiaId,targetName,imageLocation,itemLocation) VALUES ('$vuforiaId','$targetName','$imageLocation','$itemLocation')";
if (mysqli_multi_query($conn, $sql)) {
   echo "<script>
   window.location.href = 'target-manager.php';
   </script>";
}
Final PostNewTarget.php file

Create MySQL database

In previous step you have seen we have written code to enter data in MySQL database, but we have not created a MySQL database yet. So lets create it. In Your CPanel go to MySQL database

Enter database name and click create. We have to add user too to our database to access, means add, edit delete data in MySQL database.

Create User

Scroll down in same page find the section MySQL users, Add New User, fill username and password and click on create user.

Assign user to database

Now again scroll down to the section add user to database, select username and database name. Click on Add and then assign all Privileges and click on make changes.

Make Connection with database

In the last code we entered in PostNewTarget.php file you can see that we included a file connection.php, that is because this file will make connection with database. So create a file connection.php in main folder where we have all files.

Paste following code in it

<?php
$servername = "localhost";
$username = "write username here";
$password = "write password here";
$dbname = "write database name here";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

Replace the values with your own.

phpMyAdmin

Now we have created our database and make a connection with it too. But we still have to create table in database. For that go to phpMyAdmin. Click on the database name and create exactly same table as shown in screenshot because we are using the same names in our PostNewTarget.php file in SQL statement, or download and import the following sql file in your database: https://free.zeanex.com/objects.sql

That’s all, now when you submit the form data will get stored in phpMyAdmin database after it got successfully uploaded in Vuforia Cloud Database. Thank You!

If you want you can buy our complete Vufoira Cloud Recognition with Vuforia Web Services API at: https://www.zeanex.com/product/vuforia-cloud-recognition-app-with-web-panel/