Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
layarmmo-poi [2012/08/29 11:27]
matthewleach
layarmmo-poi [2012/11/07 17:00]
matthewleach Tidying the section on rotating an image.
Line 30: Line 30:
 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. 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 ​to a geo-location (latitude and longitude), or relative to a reference image. We can also add a title in the text section so that our hotspot has a name. +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>
Line 61: 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 97: 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.