Your SlideShare is downloading. ×
for developers
                                               Everything you need to get started creating your own layers
...
Dirk Groten
                                                       CTO
                                               t: @...
Making the world
                                               smarter, more fun and yours.

                            ...
Layar is a service on your mobile. It shows users what is around them in a natural manner.
                  Its relevant ...
In less then 6 months the Layar browser has been downloaded 500.000 times by people
                    all over the world...
220+ layers
                                               published worldwide
© 2009, Layar BV Confidential and Proprietor...
How does Layar work?



© 2009, Layar BV Confidential and Proprietory                          Browse The World, http://lay...
Step 1: Find a layer

                                                     • All layers are registered on the Layar Server...
Step 2: Fetch layer definition

                                                          • Each layer has its layer definit...
Step 3: Fetch Points of Interest

                                                           • Real-time
                 ...
Step 4: View additional info: Actions
                                               • Fetched directly from the source, n...
Architecture



© 2009, Layar BV Confidential and Proprietory                  Browse The World, http://layar.com
© 2009, Layar BV Confidential and Proprietory   Browse The World, http://layar.com
What do you need to make a
                                            layer?

© 2009, Layar BV Confidential and Proprietor...
1. Geo-coded data

                                                      • Database containing POI information
           ...
2. Layar Developer account
                                                                  • Go to http://dev.layar.com
...
3. Documentation
                                                    • Documentation can be found on http://
             ...
4. Create a webservice to serve POIs
                                               • The layer developer must host his ow...
5. Create mobile website to interact
                                                • If the end-user needs to interact w...
Design your layer



© 2009, Layar BV Confidential and Proprietory                       Browse The World, http://layar.com
Many customization options

                                                        • Title bar and color
                ...
Filtering options

                                                   • Help users find the content that is relevant to
   ...
The GetPOI request



© 2009, Layar BV Confidential and Proprietory                        Browse The World, http://layar.c...
Request parameters
                                          http://layarserver.company.com/getPOI/?
                     ...
Request parameters: New in v3
                            http://layarserver.company.com/getPOI/?countryCode=NL&lon=4.4825...
The GetPOI response



© 2009, Layar BV Confidential and Proprietory                         Browse The World, http://layar...
Top-level JSON response
                      {"hotspots": [...], "layer": "snowy4", "errorString": "OK", "morePages": fal...
hotspots
                       {"distance": 100, "attribution": "This is a test layer POI provider", "title":
           ...
actions
                     "actions": [
                     {"uri": "http://example.com", "label": "Open website" },
  ...
Layar version 3
                                                What’s new?

© 2009, Layar BV Confidential and Proprietory ...
objects
                                                                 "object": {
                                     ...
transforms
                                                              "transform": {
                                  ...
auto-triggered actions
                                                               "actions": [{
                      ...
user authentication
                                                       • authURL in layer definition: The URL
         ...
Tools to get started



© 2009, Layar BV Confidential and Proprietory                          Browse The World, http://lay...
PHP: PorPOIse

                           • by Jens de Smit
                           • A PHP-based POI server for Layar....
.NET: LayarDotNet

                           • by Dylan Phillips
                           • If you are a C# developer, ...
python: django-layar

                           • django-layar is a project of Sunlight Labs (c) 2009.
                  ...
How we make money



© 2009, Layar BV Confidential and Proprietory                       Browse The World, http://layar.com
Pay for Prominence




© 2009, Layar BV Confidential and Proprietory                        Browse The World, http://layar....
Licensed Versions
                                                       Distinctive Consumer Proposition
                ...
Premium Layers
                                                          € 1,99          am ple            € 1,99
        ...
Exclusive Layers




© 2009, Layar BV Confidential and Proprietory                      Browse The World, http://layar.com
Developers doing business




© 2009, Layar BV Confidential and Proprietory                               Browse The World,...
Brands on Layar
                                                                                                          ...
Dirk Groten
                                                       CTO
                                               t: @...
Layar For Developers
Upcoming SlideShare
Loading in...5
×

Layar For Developers

12,408

Published on

Everything you need to get started creating your own layers.

Published in: Technology, Design
2 Comments
31 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,408
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
2
Likes
31
Embeds 0
No embeds

No notes for slide
  • Transcript of "Layar For Developers"

    1. 1. for developers Everything you need to get started creating your own layers Android Hackaton, Stockholm, 28/11/2009 © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    2. 2. Dirk Groten CTO t: @dirkgroten, e: dirk@layar.com © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    3. 3. Making the world smarter, more fun and yours. One layer at a time. © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    4. 4. Layar is a service on your mobile. It shows users what is around them in a natural manner. Its relevant and useful. On Android and iPhone. © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    5. 5. In less then 6 months the Layar browser has been downloaded 500.000 times by people all over the world. They discover new things, get smarter, have fun and add to the world with Layar. © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    6. 6. 220+ layers published worldwide © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    7. 7. How does Layar work? © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    8. 8. Step 1: Find a layer • All layers are registered on the Layar Server • Featured: layers are featured per country, global layers currently on top • Popular: most used layers on top, all layers are listed here. • Search: layers can have keywords © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    9. 9. Step 2: Fetch layer definition • Each layer has its layer definition stored on the Layar server • Layer listing • Layer branding © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    10. 10. Step 3: Fetch Points of Interest • Real-time • Fetched directly from the layer service provider • Proxied by the Layar Server • Refreshed automatically every 100m or 5min © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    11. 11. Step 4: View additional info: Actions • Fetched directly from the source, no proxying • http, https actions: mobile web pages • audio, video actions: multimedia content • intents, URL schemes: switch to different apps • tel, sms, route directions © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    12. 12. Architecture © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    13. 13. © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    14. 14. What do you need to make a layer? © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    15. 15. 1. Geo-coded data • Database containing POI information that is geo-coded: lat/lon • API to a service providing information that is geo-coded • Service allowing users to create geo- coded data © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    16. 16. 2. Layar Developer account • Go to http://dev.layar.com and apply for an account • If you haven’t got one and need one today, contact me during the break • Login using Google account © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    17. 17. 3. Documentation • Documentation can be found on http:// layar.pbworks.com (wiki) • Read how to create correct API for Layar: GetPointsOfInterest • Ask for help on the Google group: http:// groups.google.com/group/layar-developers • Feature requests: http://layar.uservoice.com © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    18. 18. 4. Create a webservice to serve POIs • The layer developer must host his own webservice • Respond to GetPOIRequest (HTTP REST) • Response is text/json or application/ javascript, UTF-8 encoded • All POI metadata contained in single JSON string © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    19. 19. 5. Create mobile website to interact • If the end-user needs to interact with your POI data, make a mobile website • Current supported devices have a WebKit browser, so one site fits all • Make use of CSS to style your page, use percentage widths to fit small screens • Javascript is supported (and is very advanced on WebKit) © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    20. 20. Design your layer © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    21. 21. Many customization options • Title bar and color • POI custom icons or standard icons with custom colors • Brief Info Widget (BIW) font colors, background color © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    22. 22. Filtering options • Help users find the content that is relevant to them • Offer filters for selecting specific POIs • Text (search) box, radio buttons (categories), sliders for range and custom values © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    23. 23. The GetPOI request © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    24. 24. Request parameters http://layarserver.company.com/getPOI/? countryCode=NL&lon=4.48250770569&timestamp=1259340918357&userId=6f85d06929d160a 7c8a3cc1ab4b54b87db99f74b&developerId=122&developerHash=e2c84db50cf137927708829 262da389d2e00967b&radius=1000&lat=51.9172205294&layerName=nai&phoneId=6f85d0692 9d160a7c8a3cc1ab4b54b87db99f74b&accuracy=100 • lat/lon • userID: unique anonymous ID of the user (device ID hash actually) • filters: SEARCHBOX (text entered by user), RADIOLIST (options selected by user), CUSTOM_SLIDER (value set by user), radius (value set by user) • Security: layerName, developerId, developerHash, timestamp, OAuth signing © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    25. 25. Request parameters: New in v3 http://layarserver.company.com/getPOI/?countryCode=NL&lon=4.48250770569& timestamp=1259340918357&userId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b& developerId=122&developerHash=e2c84db50cf137927708829262da389d2e00967b& radius=1000&SEARCHBOX=museum&SEARCHBOX_2=van%20gogh&lat=51.9172205294& layerName=nai&phoneId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&accuracy=100 • lat/lon + alt (altitude) • userID, cookie (fully cookie compliant browser) • filters: SEARCHBOX (up to 3), RADIOLIST, CHECKBOXLIST (more than one option to select), CUSTOM_SLIDER (up to 3), radius (now optional: flexible) © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    26. 26. The GetPOI response © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    27. 27. Top-level JSON response {"hotspots": [...], "layer": "snowy4", "errorString": "OK", "morePages": false, "errorCode": 0, "nextPageKey": null} • Array of hotspots • Error messages to the user (displayed in the AR view) • Paging: 10 POIs per page is common. Client more responsive © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    28. 28. hotspots {"distance": 100, "attribution": "This is a test layer POI provider", "title": "My first object", "lon": 4884339, "imageURL": "http://layar.mycompany.com/ images/image1.png", "line4": "Some test on the 4th line", "line3": "Some text on the 3rd line", "line2": "Some text on the second line", "actions": [...], "lat": 52374544, "type": 0, "id": "test_1"} • type: determines which custom icon to use (up to 3 icons) • id: must be unique within a layer, used on the client for caching • distance: will be used for filtering POIs on the proxy • lat/lon: crap integer format, always check this! • title, line2, line3, line4, attribution and imageURL: POI information for user © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    29. 29. actions "actions": [ {"uri": "http://example.com", "label": "Open website" }, {"uri": "tel:+31203201617", "label": "Call now"}] • uri: resource locator • label: how to label the button • video:// and audio:// are special uris: they tell the client to start the player and fetch the content (streaming) from the corresponding http:// location • tel:, sms:, mailto:, http://, https://, custom schemes (myaction://) © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    30. 30. Layar version 3 What’s new? © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    31. 31. objects "object": { "icon": "icon1.png", "baseURL": "http://layar3d.jsource.nl/", "full": "ghost.l3d",”reduced”: “small_ghost.l3d "size": 2}, • dimension of hotspot: 1 (v2), 2d or 3d • 2d objects: pictures drawn into the real world • 3d objects: .l3d format, based on .obj. Layar provides a converter tool to convert from .obj to .l3d format • size: gives an indication of the size (in m) of the object © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    32. 32. transforms "transform": { "rel": false, “angle”: 15, "scale": 5} • angle: rotation angle around the z-axis (vertical) • rel: position object relative to user (true) or absolute in space (false) • scale: scale an object by this factor © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    33. 33. auto-triggered actions "actions": [{ "label": "Visit webpage", "uri": "http://example.com/", "autoTriggerRange": 10, "autoTriggerOnly": true}] • actions can trigger automatically when user comes in range of POI, e.g. start playing an audio stream • autoTriggerRange: distance from POI at which the action is triggered • autoTriggerOnly: action only visible if the user is within range © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    34. 34. user authentication • authURL in layer definition: The URL where authentication takes place • If authURL defined, the client will send any cookie set for the domain in the getPOI request • errorCode 30: force redirect to authURL, if for example the cookie has expired • getBackToApp URL: within a webview, will return the view to AR © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    35. 35. Tools to get started © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    36. 36. PHP: PorPOIse • by Jens de Smit • A PHP-based POI server for Layar. • http://code.google.com/p/porpoise/. • tab-delimited files, MySQL database, as well as an XML format. © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    37. 37. .NET: LayarDotNet • by Dylan Phillips • If you are a C# developer, and want to get on the Layar Bus. Invitations are also open for folks who want to contribute. • Check it out here: http://layardotnet.codeplex.com • The license is open source, so you are welcome to include it in your own commercial products. © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    38. 38. python: django-layar • django-layar is a project of Sunlight Labs (c) 2009. by James Turk • http://pypi.python.org/pypi/django-layar/0.1.0 • Provides abstract class that responds to Layar API requests in the appropriate format. By implementing two small functions it is possible to add a layer to the Layar augmented reality application for Android and iPhone. © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    39. 39. How we make money © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    40. 40. Pay for Prominence © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    41. 41. Licensed Versions Distinctive Consumer Proposition - Own Branded version - Exclusive preloaded YOUR favorites set BRAND Reality - Access to Layar Platform Browser content © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    42. 42. Premium Layers € 1,99 am ple € 1,99 ex am ple ex ple € 0,99 exam Hendriks Historical Food hotspots © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    43. 43. Exclusive Layers © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    44. 44. Developers doing business © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    45. 45. Brands on Layar Newbury Trulia St YP Voodoo OSM Fest Hotpads Idealista Tim Horton’s © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com
    46. 46. Dirk Groten CTO t: @dirkgroten, e: dirk@layar.com © 2009, Layar BV Confidential and Proprietory Browse The World, http://layar.com

    ×