layar march 20th webinar - intro to the layar development platform
DESCRIPTION
Layar March 20th Webinar - Intro to the Layar Development PlatformTRANSCRIPT
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Intro to the Layar Developer Platform Olga Beza
Support Engineer
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
INTRODUCTION TO LAYAR
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Customers
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
MOBILE AUGMENTED REALITY
Geo-location AR Image Recognition technology
© 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
© 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.
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
Layar Products
Layar SDK (iOS,Android)
Layar Creator/ Publishing site
Layar Browser
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
AUGMENTED REALITY IN ACTION
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Interactive Print
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Live Camera
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Globe And Mail
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
360 Images§
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Contests
Actual Print What you see with Layar
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Lonely Planet
Actual Print What you see with Layar
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Geo Location
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Find Useful Info
Deals around you
Bars and cafes
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Outdoor Advertising
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Real Estate Agents
Show your inventory on location Show how it will look
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Revival of History
Student demonstrations in Beijing
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Layar API Overview
© 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
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
Architecture Overview
Most important elements: Publishing site
API Endpoint
© 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)
© 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
© 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 pluginwavefront format
(obj/mtl)
© 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
© 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
© 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
© 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.
© 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
© 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
© 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)
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
360 Dome
© 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
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
User Generated Content
Sky Petition City Will Pappenheimer
© 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
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
Vote
© 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
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Multiplayer Games
CONQUAR: Conquer cities and defend your team!
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Getting Started
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
PUBLISHING SITE
© 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!
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
Layer Creation
© 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)
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
CREATE YOUR WEBSERVICE
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
Gather Poi Information
• Exact location of your POIs (geo)!
• Images,links and other assets
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
Create your Database
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
!
LAYAR VISION
© 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
© 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
© 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 images plain text
the same in any orientation pattern
© 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!
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
GEO LOCATION
© 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!
© 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
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Filter Settings
© 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
© 2014, Layar B.V. STRICTLY Confidential and Proprietary
User Authentication
© 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!
!
!
!
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
TEST AND PUBLISH LAYER
© 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
© 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!
!
!
!
!
!
!
!
!
© 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!
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Pricing
• Geo-location layers: Free of use!
• Vision-enabled layers: €45 per reference image
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
Developer Support
@LayarStatus for scheduled maintenance, system and operations updates.
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
QUESTIONS
& ANSWERS
© 2013, Layar B.V. STRICTLY Confidential and Proprietary
THANK YOU!