Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
layarmmo-poi [2012/05/14 11:49]
matthewleach Content moved here from basic layer page
layarmmo-poi [2012/11/07 17:00]
matthewleach Tidying the section on rotating an image.
Line 1: Line 1:
-Add a hotspot/​Point of Interest+===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 [[http://​www.layar.com/​documentation/​browser/​api/​getpois-response/​hotspots/​|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.
  
 <code php> <code php>
Line 8: Line 10:
     "​hotspots":​ [     "​hotspots":​ [
         {         {
-            "​id":​ "28",+            "​id":​ "01",
             "​anchor":​{             "​anchor":​{
      },      },
Line 22: Line 24:
 </​code>​ </​code>​
  
-Positioning in space+===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 [[http://​en.wikipedia.org/​wiki/​Decimal_degrees|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. 
  
 <code php> <code php>
 <?php <?php
  
-$latitude = $_GET['​lat'​] + 0.00001;+$latitude = $_GET['​lat'​] + 0.00003;
 $longitude = $_GET['​lon'​];​ $longitude = $_GET['​lon'​];​
  
Line 53: Line 61:
 </​code>​ </​code>​
  
-Full layer with an image+===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 [[http://​www.layar.com/​documentation/​browser/​api/​getpois-response/​hotspots/​|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 [[http://​layar.com/​documentation/​browser/​howtos/​2d-and-3d-objects/​|here]].
  
 <code php> <code php>
Line 89: Line 101:
 </​code>​ </​code>​
  
-Add the transformation ​to make it always ​face you.+===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).
  
 <​code>​ <​code>​
 "​object":​{ "​object":​{
     "​contentType":​ "​image/​png",​     "​contentType":​ "​image/​png",​
-    "​url":​ "​http://​www.thoughtfulmonkey.com/layar/​gilt/​Banker.png",+    "​url":​ "​http://​www.wheretheimageis/imagename.png",
     "​size":​ 1.8     "​size":​ 1.8
 }, },
 "​transform":​{ "​transform":​{
     "​rotate":​ {      "​rotate":​ { 
-    ​"​axis":​ {  +        ​"​axis":​ {  
- "​x":​ 0,  +     ​"​x":​ 0,  
- "​y":​ 0,  +     ​"​y":​ 0,  
- "​z":​ 1 +     ​"​z":​ 1 
-    }, +        }, 
     "​angle":​ 0,      "​angle":​ 0, 
     "​rel":​ true      "​rel":​ true 
 } }
 </​code>​ </​code>​
 +
 +===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.