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

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

Intro to the Layar Developer Platform Olga Beza

Support Engineer


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


INTRODUCTION TO LAYAR


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


Customers


MOBILE AUGMENTED REALITY

Geo-location AR Image Recognition technology


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


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.


Layar Products

Layar SDK (iOS,Android)

Layar Creator/ Publishing site

Layar Browser


AUGMENTED REALITY IN ACTION


Interactive Print


Live Camera


Globe And Mail


360 Images§


Contests

Actual Print What you see with Layar


Lonely Planet

Actual Print What you see with Layar


Geo Location


Find Useful Info

Deals around you

Bars and cafes


Outdoor Advertising


Museums

The Los Angeles County Museum of Art

The Invisible artist Guides you through in London’s Art Museum


Real Estate Agents

Show your inventory on location Show how it will look


Revival of History

Student demonstrations in Beijing


Layar API Overview


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


Architecture Overview

Most important elements: Publishing site

API Endpoint


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)


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


3D Model Creation

3D modelling Software, Blender, Google Sketchup,

3ds Max etc

.L3D file formatLayar3D Model Converter,

Beta Blender pluginwavefront format

(obj/mtl)


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


HTML Widgets

Make everything interactive and dynamic: !

• Polls/ Quizzes/ Ratings!

• Drop-down lists for more information!

• Shopping carts!

• Dynamic pricing


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


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.


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

http://m.layar.com/open/


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


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)


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


360 Dome


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


User Generated Content

Sky Petition City Will Pappenheimer


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


Vote


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


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


Multiplayer Games

CONQUAR: Conquer cities and defend your team!


Getting Started


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


PUBLISHING SITE


Publishing Site

• Users can create and manage layers: edit layer info, test, customize layers, delete!

• Edit roles: publishers, viewers, developers!

• View Stats and errors!


Layer Creation


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)


CREATE YOUR WEBSERVICE


Gather Poi Information

• Exact location of your POIs (geo)!

• Images,links and other assets


Create your Database


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


!

LAYAR VISION


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


Reference images

•Flat surface (magazine page)!

•High resolution, low size page (5MB)!

•Sufficient size & image detail!

•No borders or clutter !

•Avoid glossy paper


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


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!


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


GEO LOCATION


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!


User Filter Settings

• Configure through publishing site!

• Used to improve user experience!

• Checkbox List!

• RadioButton !

• List Range!

• Slider Slider!

• Text box


Filter Settings


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


User Authentication


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!

!

!

!


TEST AND PUBLISH LAYER


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


Statistics

Layar platform provides basic statistics for published layers:!!

• Total requests per week!• Requests per country per week!• Unique visitors per week!

!

!

!

!

!

!

!

!


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!


Pricing

• Geo-location layers: Free of use!

• Vision-enabled layers: €45 per reference image


Developer Support

@LayarStatus for scheduled maintenance, system and operations updates.


QUESTIONS

& ANSWERS


THANK YOU!

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

Technology

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