Layar March 20th Webinar - Intro to the Layar Development Platform

1. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Intro to the Layar Developer Platform
Olga Beza
Support Engineer

2. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Webinar Overview
!
1. INTRODUCTION TO LAYAR
!
2. API OVERVIEW
• Architecture Overview
• Capabilities and features
!
3. GETTING STARTED
•Publishing Site
•Layer Creation
•Best practices
!
4. QUESTIONS & ANSWERS SESSION

3. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
INTRODUCTION TO LAYAR

4. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
About Layar
!
Founded June 2009
Backed by VCs including Intel Capital
30 people in Amsterdam, New York, Toronto
Global leader in mobile augmented reality
!
!
!
Awards: World Economic Forum Technology Pioneer 2011

5. © 2013, Layar B.V. STRICTLY Confidential and Proprietary

6. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Customers

7. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
MOBILE AUGMENTED REALITY
Geo-location AR Image Recognition technology

8. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Interactive Print
• Real time, client side image detection,tracking
and augmentation of physical images and
objects!
• Instant detection of target objects from sets of
up to 50 images fingerprints. New sets are
dynamically loaded.!
• Robust tracking algorithm tolerates
rotation,off-normal viewing, spatial occlusion
of!
!
No special printing technology!
No special codes

9. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Geo location Experience
!
Uses GPS, compass and other sensors in a
user’s mobile phone to provide a “heads-up”
display of various geolocated points-of-
interest.

10. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Layar Products
Layar SDK
(iOS,Android)
Layar Creator/
Publishing site
Layar Browser

11. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
AUGMENTED REALITY IN ACTION

12. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Interactive Print

13. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Live Camera

14. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Globe And Mail

15. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
360 Images§

16. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Contests
Actual Print What you see with Layar

17. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Lonely Planet
Actual Print What you see with Layar

18. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Geo Location

19. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Find Useful Info
Deals around you
Bars and cafes

20. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Outdoor Advertising

21. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Museums
The Los Angeles County
Museum of Art
The Invisible artist Guides you through
in London’s Art Museum

22. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Real Estate Agents
Show your inventory on location Show how it will look

23. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Revival of History
Student demonstrations in Beijing

24. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Layar API Overview

25. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Developer API/GetPoi
!
• HTTP requests with parameters:!
!
!
• Response:Json data containing POI Information (hotspots)!
• Geo-location POI: attached to a physical location!
• Vision POI: augments that are attached to a target image

26. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Architecture Overview
Most important elements:
Publishing site
API Endpoint

27. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Key Features
•Support of rich media: images,gifs,audio,video, 3D objects, HTML widgets!
•Support animation !
•Sharing on Facebook ,Twitter and Developer’s server!
•Layer actions: call, email,share, webpage, screenshot, !
•Dynamic elements: intents, auto-triggers, relative POIs, async calls!
•Receive user info: userId,location,countryCode,User-Agent (OS,Model)

28. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
3D Models
What we support:!
• Materials and Textures!
• Mesh based objects only!
• For textures only diffuse color of the material!
• Color blending (alpha) !
• Transparency!
• Textured animation

29. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
3D Model Creation
3D modelling Software,
Blender, Google Sketchup,
3ds Max etc
.L3D file formatLayar3D Model
Converter,
Beta Blender plugin
wavefront format
(obj/mtl)

30. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Balance complexity and efficiency !
The screen is small, detail will often not be seen and only make the object
slower to load.!
• Textures do not need to be 1024x1024 on a screen that supports
320x480!
• Faces that the viewer can’t see don’t need to be there.!
• File size: max 1MB

31. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
HTML Widgets
Make everything interactive and dynamic: !
• Polls/ Quizzes/ Ratings!
• Drop-down lists for more information!
• Shopping carts!
• Dynamic pricing

32. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
HTML Widgets: What’s supported ?
Our tests so far indicate that the following are not supported:!
• Flash content!
• Embedded audio and video!
• Forms with text input fields. Forms that use checkboxes, radio-buttons etc. should
work.!
• Web storage (store data locally within the user's browser)!
• The canvas element!
In general many of the new HTML 5 elements are not supported

33. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
HTML Widgets- Best Practices
!
• Screen size on mobile devices is small and any content you
place in AR looks even smaller than when viewed full-screen. !
• Transforms and animations can be applied in the same way as for
static images. !
• HTML Widgets should not intersect with any other objects.!
• We recommend to set background color to transparent in CSS to
avoid rendering issue on Android devices. !
• Any link to another web page that the user clicks will open in a
full screen, not in AR.!
• Make sure to test on both iOS and Android devices.

34. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Layar Intents
Three types of intent are defined in Layar!
•http://m.layar.com/open/<layername>!
•layar://<layarname>!
•layarshare://<layername>/?<parameters>!
Use cases: interactive layer, switch between experiences

35. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Animation API
A collection of pre-defined animations on POIs!
• Simple appearance animation (drop, grow, spin)!
• Full customizable animation: onClick, onUpdate,onFocus,
onCreate, onDelete!
• Each event can have a combination of animations!
• Layer level/POI level

36. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Interactive Layers
• Create relative POIS (geo-location)!
• User generated POIS!
• User provided feedback, such as vote,comments etc!
• Sharing screenshot to developer’s server!
• Point to point (Treasure hunting)

37. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Create Relative POIs
• POIs that are always relative to
user’s current location!
• Useful when POI content is not
constraint to the geo-location!
• We do have available tutorials

38. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
360 Dome

39. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
User Generated POIs
• Dynamic layer where users can
create a POI in it!
• Normally POI’s location is
relevant to user’s location!
• Need to use Layar intent and
actions!
• Diagram explains how to insert a
POI by filling in a web form
within layer

40. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
User Generated Content
Sky Petition City Will Pappenheimer

41. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
User Provided Feedback
• Dynamic layer which enables
users to provide feedback to POIs!
• Users can vote a restaurant,
comment on a piece of art, etc!
• The scenario is that the number of
a POI being “liked” is updated
whenever the “like” action is
triggered

42. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Vote

43. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Sharing Screenshot to developers
• User taken screenshots can be uploaded to
developer’s server!
• URL to post screenshot is defined in publishing
site!
• Uploaded info contains screenshot, message, lat
and lon (if applicable) where screenshot was taken
are included as EXIF data in the screenshot file

44. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Point-to-point Layer
• Dynamic layer content based on the previous
interaction!
• Async call action and user interact Dialog
provides more info!
• Example: treasure hunting game, new content
discovery!
• Diagram shows the sequence of collecting a
treasure and revealing others after the
treasure is collected

45. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Multiplayer Games
CONQUAR: Conquer cities and defend your team!

46. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Getting Started

47. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Sign up to be a developer
!
Register your layer on the Publishing Site
!
Create your web services
!
Test your layer thoroughly
!
Publish your layer once it works as expected

48. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
PUBLISHING SITE

49. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Publishing Site
• Users can create and manage layers: edit layer info, test, customize
layers, delete!
• Edit roles: publishers, viewers, developers!
• View Stats and errors!

50. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Layer Creation

51. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Layer Creation
• Create a layer definition in the publishing environment!
• Add all static content and metadata of a layer:!
• Listing details!
• Look and feel!
• Service provider URL!
• Layer type (2D,3D, Layar Vision)

52. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
CREATE YOUR WEBSERVICE

53. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Gather Poi Information
• Exact location of your POIs (geo)!
• Images,links and other assets

54. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Create your Database

55. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Create Service to Deliver Content
!
• Support of various languages!
• Server that supports JSON!
• Publicly accessible web server (no localhost)!
• Json response should follow the Layar API specifications!
• API endpoint URL is the URL to the web service

56. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
!
LAYAR VISION

57. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Creating Vision layers
!
• Enable image recognition in publishing site!
• Upload reference image(s)!
• Each one has a unique ID!
• Images are analyzed and users can see
feedback on image quality

58. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Reference images
•Flat surface (magazine page)!
•High resolution, low size page (5MB)!
•Sufficient size & image detail!
•No borders or clutter !
•Avoid glossy paper

59. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Reference images
•Large portion of blank area!
•Mainly body text or only text!
•Graphics that look the same in any
orientation !
•Graphics with patterns!
•Look too similar to other
insufficient details similar imagesplain text
the same in any orientation pattern

60. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
best practices
Keep in Mind! !
Layar will provide some initial feedback on Page quality !
But this only an indication !
You should always:!
-Place some dummy buttons on each page !
- Scan each page to see if buttons are displayed correctly!
Are the buttons shaky?!
Am i getting point to content message all the time?!
!
DO THIS BEFORE PUBLISH FINAL WORK!

61. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Adding content
• Make sure the images, videos and audio files are high-quality!
• Websites you are linking users to are mobile-optimized.!
• Integrate InteractivePrint content seamlessly into the actual print.
( similar colors, textures and designs as printed pages)!
• Do not overload pages with buttons

62. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
GEO LOCATION

63. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Create a Geo-location layer
•Create a layer definition in the publishing environment!
!
•Add all static content and metadata of a layer:!
!
•Listing details!
•Look and feel!
•Service provider URL!
•Layer type (2D,3D, Layar Vision)!
!
•Create a layer service to deliver POI content!

64. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
User Filter Settings
• Configure through publishing site!
• Used to improve user experience!
• Checkbox List!
• RadioButton !
• List Range!
• Slider Slider!
• Text box

65. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Filter Settings

66. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
User Authentication
• Layar AR view behaves like a browser view!
• Cookies belonging to the getPOI URL domain
are stored and sent!
• Implement your layer web service like you
would do for your normal browser

67. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
User Authentication

68. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Best practices
GPS accuracy is affected by:!
• Satellite positions!
• Noise in the radio signal!
• Atmospheric conditions!
• Natural barriers to the signal (mountains, big buildings)!
!
Result: inaccurate positioning, “jumpy” Pois !
!
Do not show more that 50 Pois!
•Use filters to show relevant content to user!
!
!
!

69. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
TEST AND PUBLISH LAYER

70. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Testing Layers
• Test page (available in publishing site)!
• Layer not available!
• Unable to reach POI provider (no content available)!
• Stats and errors tab!
• Layar browser!
• log in on the device with developer or viewer account

71. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Statistics
Layar platform provides basic statistics for published layers:!
!
• Total requests per week!
• Requests per country per week!
• Unique visitors per week!
!
!
!
!
!
!
!
!

72. © 2014, Layar B.V. STRICTLY Confidential and Proprietary
Creator Json Hotspot VS API
• Full support of animation API (onCreate, onDelete)!
• Customise response according to User’s device, language etc!
• Interactive layers!
• Asynchronous calls!

73. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Pricing
• Geo-location layers: Free of use!
• Vision-enabled layers: €45 per reference image

74. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
Developer Support
@LayarStatus for scheduled maintenance, system and operations
updates.

75. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
QUESTIONS
& ANSWERS

76. © 2013, Layar B.V. STRICTLY Confidential and Proprietary
THANK YOU!