This is a short tutorial illustrating some of the new features that API 5.0 introduces. The demo layer can be found in the beta client by searching for animation & sharing by Pambo
To show these new posibilities, we have prepared a demo layer which puts a few POIs relative to the user. The POIs are 3D objects which animate when events happen. Every POI’s title mentions when the animation event is triggered and what it does.

In addition the User interaction dialogue features are included, by creating 2 buttons, one for refreshing the POIs, and one for sharing information on Facebook or Twitter.
(More technical details about the API structure can be found in http://...)

1. User interaction dialog:

In Layar 5.0 it is possible to get a notification as a result of a getPOIs request, using the showDialog parameter. The notifications shows up as soon as the JSON response is read from the server. In the meanwhile the POIs load on the screen.

Let’s create a small sample where 2 buttons show up in the interaction dialog box. The first button will be used for Sharing information on Facebook or Twitter and the second will be used for refreshing the POIs on the screen.
The JSON response of the layer web service, should include the showDialog parameter. The showDialog parameter includes the following fields:

title(mandatory)        string               
description(mandatory)    string               
iconURL(optional)        url               
actions    (optional)        array of action objects     

The part of our JSON response which utilizes the showDialog feature, can be seen below:

   "showDialog": {
       "title": "Title",
       "description": "Description",
       "actions": [
           {
               "contentType": "application\/vnd.layar.internal",
               "uri": "layarshare:\/\/sharing1\/?type=message&title=test&description=Description&defaultText=DefaultTest",
               "label": "Share"
           },
           {
               "contentType": "application\/vnd.layar.internal",
               "uri": "layar:\/\/sharing1\/?action=refresh",
               "label": "Refresh POIs"
           }
       ]
   },

The part of the JSON string that we want to focus is the actions array. It indicates that the dialog box will contain two buttons. The actions follow the regular action rules documented already, with the addition of the layarshare uri.

The first action is the Share action. The contentType has to be application\/vnd.layar.internal and the uri has to have the form layarshare:\/\/layername\/?type=message&title=test.
For detailed descriptions of all the fields that can be included in the action uri, please refer to http://...
The user can use this Share action as long as either his Twitter or Facebook account, or both, are linked with his Layar account.

The second action is the Refresh POIs, which simply refreshes the layer’s POIs.

2. Animation API:

The animation API can either be used to animate the POIs on the whole layer, or on POIs individually. In this case we only animate individual POIs.

A separate animations parameter has to be given in the JSON response to specify the kind of animation we would like. Within the animations object, the animation events have to be defined. These specify when the animation should be triggered (eg onFocus, onCreate etc). Every animations event, defines an array of animations, which specify the animations to be shown when the corresponding event is triggered.

Let’s take a look at a part of the server’s JSON response, corresponding to an individual hotspot.

       {
           "id": 0,
           "lat": 52375944,
           "lon": 4888339,
           "distance": 20,
           "dimension": 3,
           "type": 0,
           "title": "Animation",
           "line2": "OnFocus",
           "line3": "Grow from 1 to 10",
           "actions": [                
           ],
           "object": {
               "baseURL": "http:\/\/custom.layar.nl\/3D\/",
               "full": "cheers.l3d",
               "reduced": "cheers.l3d",
               "icon": "cheers.png",
               "size": 1
           },
           "transform": {
               "rel": true,
               "angle": 0,
               "scale": 5
           },
           "animations": {
               "onFocus": [
                   {
                       "type": "scale",
                       "length": 10000,
                       "from": 1,
                       "to": 10
                   }
               ]
           }
       },

The animations parameter includes an animation event called onFocus. This specifies that the animation on this POI will start as soon as the POI is on focus. The onFocus event defines an array of animations(which includes just one animation in this case). The animation indicates that the type of the animation is scale(meaning that the POI will grow/shrink), the length of the animation will be 10000ms, and the item will scale from size 1 to size 10.

3. Complete JSON response of the demo layer

A sample JSON response of the layer mentioned here, can be seen below:

{
   "layer": "sharing1",
   "errorCode": 0,
   "errorString": "",
   "morePages": false,
  "showDialog": { // The showDialog parameter defined in the main JSON response
       "title": "Title",
       "description": "Description",
       "actions": [
           {
               "contentType": "application\/vnd.layar.internal",
               "uri": "layarshare:\/\/sharing1\/?type=message&title=test&description=Description&defaultText=DefaultTest",
               "label": "Share"
           },
           {
               "contentType": "application\/vnd.layar.internal",
               "uri": "layar:\/\/sharing1\/?action=refresh",
               "label": "Refresh POIs"
           }
       ]
   },
   "hotspots": [
       {
           "id": 0,
           "lat": 52375944,
           "lon": 4888339,
           "distance": 20,
           "dimension": 3,
           "type": 0,
           "title": "Animation",
           "line2": "OnFocus",
           "line3": "Grow from 1 to 10",
           "actions": [
               
           ],
           "object": {
               "baseURL": "http:\/\/custom.layar.nl\/3D\/",
               "full": "cheers.l3d",
               "reduced": "cheers.l3d",
               "icon": "cheers.png",
               "size": 1
           },
           "transform": {
               "rel": true,
               "angle": 0,
               "scale": 5
           },
           "animations": { // Scaling effect when POI is onFocus.
               "onFocus": [
                   {
                       "type": "scale",
                       "length": 10000,
                       "from": 1,
                       "to": 10
                   }
               ]
           }
       },
       {
           "id": 1,
           "lat": 52376344,
           "lon": 4888839,
           "distance": 20,
           "dimension": 3,
           "type": 0,
           "title": "Animation",
           "line2": "OnFocus",
           "line3": "Rotate from 0 to 360",
           "actions": [
               
           ],
           "object": {
               "baseURL": "http:\/\/custom.layar.nl\/3D\/",
               "full": "bamboo.l3d",
               "reduced": "bamboo.l3d",
               "icon": "bamboo.png",
               "size": 1
           },
           "transform": {
               "rel": true,
               "angle": 0,
               "scale": 5
           },
           "animations": { // Rotation effect when POI is in focus.
               "onFocus": [
                   {
                       "type": "rotate",
                       "length": 10000,
                       "from": 0,
                       "to": 360
                   }
               ]
           }
       },
       {
           "id": 2,
           "lat": 52376744,
           "lon": 4889339,
           "distance": 20,
           "dimension": 3,
           "type": 0,
           "title": "Animation",
           "line2": "OnFocus",
           "line3": "Translate from 0 to 50",
           "actions": [
               
           ],
           "object": {
               "baseURL": "http:\/\/custom.layar.nl\/3D\/",
               "full": "grr.l3d",
               "reduced": "grr.l3d",
               "icon": "grr.png",
               "size": 1
           },
           "transform": {
               "rel": true,
               "angle": 0,
               "scale": 5
           },
           "animations": { // Translation effect on X-axis from 0 to 500 when the POI is in focus.
               "onFocus": [
                   {
                       "type": "translate",
                       "length": 10000,
                       "from": 0,
                       "to": 50,
                       "axis": {
                           "x": 10,
                           "y": 0,
                           "z": 0
                       }
                   }
               ]
           }
       },
       {
           "id": 3,
           "lat": 52377144,
           "lon": 4889839,
           "distance": 20,
           "dimension": 3,
           "type": 0,
           "title": "Animation",
           "line2": "OnClick",
           "line3": "Scale from 0 to 3 and rotate from 0 to 360",
           "actions": [
               
           ],
           "object": {
               "baseURL": "http:\/\/custom.layar.nl\/3D\/",
               "full": "jean.l3d",
               "reduced": "jean.l3d",
               "icon": "jean.png",
               "size": 1
           },
           "transform": {
               "rel": true,
               "angle": 0,
               "scale": 5
           },
           "animations": { //Scale from 0 to 3 and rotate from 0 to 360
               "onClick": [
                   {
                       "type": "scale",
                       "length": 10000,
                       "from": 1,
                       "to": 3
                   },
                   {
                       "type": "rotate",
                       "length": 10000,
                       "from": 0,
                       "to": 360
                   }
               ]
           }
       },
       {
           "id": 4,
           "lat": 52377544,
           "lon": 4890339,
           "distance": 20,
           "dimension": 3,
           "type": 0,
           "title": "Animation",
           "line2": "OnCreate",
           "line3": "Rotate from 0 to 360",
           "actions": [
               
           ],
           "object": {
               "baseURL": "http:\/\/custom.layar.nl\/3D\/",
               "full": "xt.l3d",
               "reduced": "xt.l3d",
               "icon": "xt.png",
               "size": 1
           },
           "transform": {
               "rel": true,
               "angle": 0,
               "scale": 5
           },
           "animations": { // Repeated rotation around Z-axis when the Object is initially created.
               "onCreate": [
                   {
                       "type": "rotate",
                       "length": 10000,
                       "from": 0,
                       "to": 360,
                       "repeat": true
                   }
               ]
           }
       }
   ]
}