Add a hotspot/Point of Interest

Time to add a “hotspot”. This is how you place something in the environment. Each will have its own unique ID, which you set yourself, and various other optional settings. The snippet of code below, shows the mandatory parameters. If you visit the API page, then the structure graph at the top of the page shows mandatory parameters marked with an asterisk. Note that the parameters can be empty - you just need to include them for each hotspot.

<?php
 
echo '{
    "layer": "mmo-demo",
    "hotspots": [
        {
            "id": "01",
            "anchor":{
	    },
	    "text":{
	    }
        }
    ],
    "errorCode": 0,
    "errorString": "ok"
}';
 
?>

Positioning in Space

The code above is missing a very important part of Augmented Reality - the position. At this point I'll briefly introduce the “GetPOIs Request”. Essentially the Layar app tries to send information to your server so that you can load the right thing. If you're familiar with web development, then these parameters are sent as GET variables. Two parameters that are sent are the latitude and longitude (location) of the phone.

Here we add 0.00003 to the latitude to move the hotspot roughly 3.33 metres north of wherever the phone is. Note that this doesn't work for the longitude because of the Earth's shape, but more on that later.

Layar supports two types of anchors - either a geo-location (latitude and longitude), or relative to a reference image. You can no longer mix the two types in the same layer, but we only need geo-locations. We can also add a title in the text section so that our hotspot has a name.

<?php
 
$latitude = $_GET['lat'] + 0.00003;
$longitude = $_GET['lon'];
 
echo '{
    "layer": "mmodemo",
    "hotspots": [
        {
            "id": "01",
            "anchor":{
		"geolocation":{
		    "lat": '.$latitude.',
		    "lon": '.$longitude.'
		}
	    },
	    "text":{
		"title": "Monster"
	    }
        }
    ],
    "errorCode": 0,
    "errorString": "ok"
}';
 
?>

Displaying an Image

If you view the layer above in the Layar app, then you will see an icon floating in space. In some applications that's all you need, but we'll place an image floating in space instead.

For this we'll add an object parameter. Again, from the the API site we can see that if you include an object parameter, you must also provide contentType, url, and size. URL is the location of the image on the Internet (probably you're own server), and size is the real-world height of the object. The contentType parameter is probably the most confusing at first, but basically there is a specific bit of text to say if it is an image, or a 3D model etc. - in this case a png. More information can be found here.

<?php
 
$latitude = $_GET['lat'] + 0.00001;
$longitude = $_GET['lon'];
 
echo '{
    "layer": "mmodemo",
    "hotspots": [
        {
            "id": "01",
            "anchor":{
	        "geolocation":{
		    "lat": '.$latitude.',
		    "lon": '.$longitude.'
		}
	    },
	    "text":{
		"title": "Monster"
	    },
	    "object":{
		"contentType": "image/png",
		"url": "http://www.wheretheimageis/imagename.png",
		"size": 1.8
	    }
        }
    ],
    "errorCode": 0,
    "errorString": "ok"
}';
 
?>

Transformations

Another very useful set of parameters are for transformations. These allow you to reposition and rotate the object (you can just set the scale using the size parameter of the object). Shown below is some code that you can add underneath the object definition in order to rotate the image so that it is always facing the viewer. Otherwise you might sometimes be side-on to the image and not be able to see it.

We are defining an axis of rotation that is pointing straight up (z axis), setting the rotation to zero, and setting it to be relative to the viewer (always zero rotation from where you are looking).

"object":{
    "contentType": "image/png",
    "url": "http://www.wheretheimageis/imagename.png",
    "size": 1.8
},
"transform":{
    "rotate": { 
        "axis": { 
	    "x": 0, 
	    "y": 0, 
	    "z": 1
        }, 
    "angle": 0, 
    "rel": true 
}

Summary

This section shows you how to add an object to your hotspot, and position it in the environment. If you can get an image of a monster, then with this code you can have them appear in front of you.