Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Layar code examples for developers

This presentations shows a few code examples for developers creating a layer on the Layar platform. For more code examples please visit our wiki at

  • Be the first to comment

Layar code examples for developers

  1. 1. Layar code examplesfor developersCreating augmented reality experiences for the world’s leading platformAugust 2011
  2. 2. Note! • Please note that the code examples in this presentation are based on Layar GetPOIs API version 6.0 • Please check our wiki for more information about the changes • The Complete API version 6.0 can be found here© Layar 2011
  3. 3. Introduction • After you have gone through the steps as outlined in the presentation Layar introduction for developers, you can start creating your first layer • This presentation provides a few code examples for the layer service, which will deliver POI content to the Layar app • More code examples (and the latest updates) can be found on the Layar developer wiki© Layar 2011
  4. 4. Content • Layar Platform Architecture • Layar Features Overview • Developer API - getPOI API • Feature highlights and sample code • Interactive layers • Third party tools • Developer Support© Layar 2011
  5. 5. Layar architecture ns Layar n itio publishing fi de GPS data y er environment La Layar server Get layers Get POIs Create layer La Fixed yer De v data Ge elop tP e OIs r AP I View Layer service POI in forma tion provider Ge View tP POI i OI nform s ation Layer content Legend sources Layar environment© Layar 2011 Third-party environment
  6. 6. Layar features Overview• Support for both Geo-location POIs and Vision enabled POIs• Support for icon/images/3D models• Support for animated POIs• Sharing to facebook, Twitter and Developer’s server.• Interactive actions: call, email, share, web page, audio, video, async call etc• Gaming elements: autotriggers, relative POIs, point to point© Layar 2011
  7. 7. Creating layers • Layers are built using simple web technology • You can use programming languages like PHP, MySQL, Java etc as long as the response is in JSON format • 2 step process: 1. Create a layer definition in the Layar publishing environment 2. Create a layer service for delivering the POI content to the Layar app • Step by step Tutorial: Create a simple layer© Layar 2011
  8. 8. getPOI API • Hosted by layer developer • Simple API: • HTTP request with the following parameters • Latitude, Longitude, filter settings,... • Response: JSON data containing POI information (hotspots)© Layar 2011
  9. 9. Two types of POIs • Geo-location POI • POIs that are attached to a physical location with latitude, longitude & altitude. • Vision POI • Augments that are attached to a target object recognized by Layar Reality browser (v6.0 and above).© Layar 2011
  10. 10. Request{ "hotspots": [{ "id": "test_1",   "anchor": { "geolocation": { "lat": 52.3729, "lon": 4.93 } }, // For Geo-location POI.   "text": { "title": "The Layar Office", "description": "The Location of the Layar Office",  "footnote": "Powered by Layar" },  "imageURL": "" }], "layer": "snowy4", "errorString": "ok", "errorCode": 0} © Layar 2011
  11. 11. • Response for Vision enabled layers { "hotspots": [{ "id": "test_1",    "anchor": { "referenceImage": “my_Reference_Image” }, // For Vision enabled POI.    "text": { "title": "The Layar Office", "description": "The Location of the Layar Office",   "footnote": "Powered by Layar" },   "imageURL": ""  }],  "layer": "snowy4",  "errorString": "ok", "errorCode": 0 }© Layar 2011
  12. 12. 3D© Layar 2011 Layer developed by Hoppala
  13. 13. Response{ "hotspots": [{ "id": "test_1",   "anchor": { "geolocation": { "lat": 52.3729, "lon": 4.93 } }, // For Geo-location POI. "text": { "title": "The Layar Office", "description": "The Location of the Layar Office",  "footnote": "Powered by Layar" },  "imageURL": "","object": {   "contentType": "model/vnd.layar.l3d",   "url": "",     "reducedURL": "http://example_reduced.l3d",     "size": 2},"transform":  {   "rotate": {       "rel": true,         "axis": { "x": 0, "y": 0, "z": 1 },     "angle": 0 },     "translate": { "x": 0, "y": -0.075, "z": 0 },     "scale": 0.01} }], "layer": "snowy4", "errorString": "ok", "errorCode": 0} © Layar 2011
  14. 14. 3D notes • Base format is OBJ (WaveFront format) • Good interchange format, most 3D programs can convert to OBJ • Materials and Textures are supported • For textures only diffuse color of the material is supported • No multiple textures • Transparency support (no blending with other objects though) • Conversion to L3D (Layar binary format) required© Layar 2011
  15. 15. More info on 3D POI • Requirements and best practices on creating 3D model. • Presentation: 3D Content Creation Tips & Tricks • Manual: 3D in Layar v1.0 (pdf) • Layar 3D model Converter • Tutorial: Create texture-animated 3D models • Tutorial: Positioning 3D model within Layar3D Model Converter© Layar 2011
  16. 16. User Filter SettingsRequesthttp://examplelayer/FourthTutorial_FilterSettings.php?lang=en&countryCode=NL&lon=4.94745254517&userId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&RADIOLIST=1&CHECKBOXLIST=1%2C2&version=4.0&radius=1500&CUSTOM_SLIDER=300000&lat=52.365852048&layerName=testlayerfilters&SEARCHBOX=&accuracy=100 © Layar 2011
  17. 17. More Info on Filter Settings • Filter configuration on the Publishing site • Filter definition in getPOI request • Tutorial: Layer with filter settings© Layar 2011
  18. 18. POI & Layer Actions There’s audio...© Layar 2011
  19. 19. POI & Layer Actions There’s audio... “uri”: “”© Layar 2011
  20. 20. Response for Geo-location POI"actions": [{" " "label": "Contact Layar",                    "uri": "",                    "autoTriggerRange": 5000, // For Geo-location POI.                    "autoTriggerOnly": false,                    "contentType": "text/html",                    "method": "GET",                    "activityType": 1,                    "params": [                        "lat",                        "lon",                        "alt",                        "lang",                        "countrycode",                        "localCountryCode",                        "version"                    ],                    "closeBiw": false,                    "showActivity": true,                    "activityMessage": "contact layar"                }] © Layar 2011
  21. 21. Response for Vision POI"actions": [{" " "label": "Contact Layar",                    "uri": "",                    "autoTrigger": true, // For Vision POI.                    "autoTriggerOnly": false,                    "contentType": "text/html",                    "method": "GET",                    "activityType": 1,                    "params": [                        "lat",                        "lon",                        "alt",                        "lang",                        "countrycode",                        "localCountryCode",                        "version"                    ],                    "closeBiw": false,                    "showActivity": true,                    "activityMessage": "contact layar"                }] © Layar 2011
  22. 22. More Info on Actions • Actions API specification • Tutorial: Layer with Actions© Layar 2011
  23. 23. Layar intents© Layar 2011
  24. 24. Layar intents layar://princeofpersia/?SEARCHBOX=start© Layar 2011
  25. 25. Layar Intents • Three types of intents: • Layar://<layername>/?action=<value>&<custom_param>=<value>&<filter>=<value> •<layername> • layarshare://<layername>/?<parameters> • Use cases: interactive layer and point-to-point layer • Layar intents API documentation© Layar 2011
  26. 26. Animations© Layar 2011
  27. 27. Animations Texture animations© Layar 2011
  28. 28. Animations Texture animations Rotate© Layar 2011
  29. 29. Animations Texture animations Oscillate Rotate© Layar 2011
  30. 30. Animation API • A collection of pre-defined animations on POIs. • Simple appearance animation (drop, grow, spin) • Full customizable animation: onClick, onUpdate, onFocus, etc • Each event can have a combination of animations. • Layer level/POI level • Animation API documentation© Layar 2011
  31. 31. Response"animations": { // "animations" on a POI level. This overwrites the "animations" parameter defined on the layer level. "onClick": [ // "onClick" event triggers the following animation. .{ //The object size is scaled by a decimal factor from 1 to 2 on X, Y and Z axises          "interpolation": "linear",             "type": "scale", // animation type, mandatory field.             "axis": { // axis that the animation is applied to                  "y": 1,                  "x": 1,                  "z": 1             },   "from": 1, // initial scale factor, default is to use the currently set POI state             "to": 2, // eventual scale factor             "length": 2000, // animation duration in milliseconds, mandatory field.             "delay": 0, // delay in milliseconds before starting the animation             "repeat": false, // specifies whether the animation is repeated in a loop             "persist": true // indicates whether he end state of the animation is applied to the POI state          } ]} © Layar 2011
  32. 32. Refresh rate moving POIs © 2010, Layar B.V.
  33. 33. Response{"hotspots": [], "layer": "snowy4", "errorString": "ok", "morePages": false, "errorCode": 0, "nextPageKey": null, "refreshInterval": 2,//indicates how many seconds to wait until the next getPOI request is made. "refreshDistance": 10,//tells the client to refresh the layer if the user has moved by more than the //distance specified. "fullRefresh": false, // indicates whether it is a full refresh or update. "actions":[]}Detailed explanation can be found here. © Layar 2011
  34. 34. Auto-triggers© Layar 2011
  35. 35. Auto-triggers “actions”: [{ “label”: “ Watch”, “uri”: “ /explosion.3gp”, “autoTriggerRange”: 50, “autoTriggerOnly”: true}]© Layar 2011
  36. 36. User authenticationCookies!
  37. 37. User authentication • Layar AR view behaves like a browser view • Cookies belonging to the getPOI URL domain are stored and sent • Implement your layer webservice like for a normal browser • Alternatively: UserId is anonymous ID of user (linked to phone ID) • User Authentication Documentation© Layar 2011
  38. 38. Interactive layers • Create Relative POIs • User generated POIs • User provided feedback, such as vote, comments, etc • Sharing screenshots to developer’s server • Treasure hunting (point to point)© Layar 2011
  39. 39. Create Relative POIs • POIs that are always relative to user’s current location • Useful when POI content is not constraint to the geo- location. • Tutorial ( sample code) is available© Layar 2011
  40. 40. User Generated POIs • Dynamic layer where users can create a POI in it. • Normally POI’s location is relevant to user’s location. • More info on Layar intent and actions • The Sequence Diagram explains how to insert a POI by filling in a web form within the layer.© Layar 2011
  41. 41. User provided Feedback • Dynamic layer which enables users to provide feedback to POIs. • For instance, users can vote for a restaurant, comment on a piece of art, etc. • The scenario in SD is that the number of a POI being “liked” is updated whenever the “like” action is triggered.© Layar 2011
  42. 42. Sharing screenshots to developer • User taken screenshots can be uploaded to developer’s server. • URL to post screenshots to is defined in publishing site (under API endpoint URL tab) . • Uploaded info contains screenshot, message, lat & lon where screenshot was taken are included as EXIF data in the screenshot file. • Sharing API Documentation© Layar 2011
  43. 43. Point-to-point layer • Dynamic layer content based on the previous interaction • Async call action and user Interact Dialog provides more interaction • For instance, treasure hunting game, new content discovery, etc. • The Sequence Diagram shows the sequence of collecting a treasure and revealing others after the treasure is collected.© Layar 2011
  44. 44. Play layers in any iPhone app • Binary code to be included in your Xcode project • Simple API that opens any published layer • Seamless handover to AR experience (incl. authentication) • iPhone Player Wiki documentation© Layar 2011
  45. 45. Sample code© Layar 2011
  46. 46. Third Party Tools • Instead of creating your own layer service, you can use one of the third party tools developed by the community, e.g.: • Porpoise Open source server software, requires programming skills, more control • Hoppala Augmentation Hosted solution, easy to use, limited functionality • LMS using Layar Connect, such as BuildAR, Poistr, Poiz, VISAR, etc. • Others© Layar 2011
  47. 47. Developer support • The following support resources provide a wealth of information for developers: • Layar developer wiki • Layar developer support environment • Discussion forums • Support tickets© Layar 2011
  48. 48. Thank you