Layar November 5 Webinar - Discover the New Geo SDK

Layar Developer Webinar
5 November 2013

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

Agenda
Discover the possibilities of the new Layar SDK for vision and geo AR experiences.

•
•
•
•
•

Introduction to Layar (Pat Connolly, VP Sales)
The Layar Partner Network (Hsio Ling Hee, Partnerships Manager)
Layar API Overview (Olga Beza, Support Engineer)
The Layar SDK (Olga Beza, Support Engineer)
Q&A


The world is changing...
•

Media consumption

•

Mobile commerce

•

Wearable devices

•

Instant and real-time information

•

New business models emerging

•

Consumer in control


How does this wave affect you?

engage with your customers,
grow your business,
innovate?

What is Augmented Reality?

•

Connect the real and digital world

•

Integration of print with digital assets

•

Opportunity to enrich content

•

Experiential interaction

•

Innovation in communication,
publishing & advertising


App


Mobile Augmented Reality

Geo-location AR

Image Recognition technology


Mobile Augmented Reality

•

Available for iOS and Android

•

Scan print content and experience digital content

•

Scan QR codes

•

Get instant GEO information

•

Fast, reliable, easy


#1 Global Platform


And we see...


Reader engagement
Can reach as high as 45% but most impressive....


Our company


About Layar
Founded June 2009
Backed by VCs Intel, Prime, Sunstone
30 people ofﬁces in Amsterdam, New York, Toronto
Global leader in mobile augmented reality
Android, iPhone, iPad


Customers


Who we work with


Technology


Layar Platform

• Free mobile app
• Self service Layar creator
• SDK, API
• Services


Layar Advantages
•

Speed - fast loading

•

Sticky - excellent tracking

•

One tap - seamless content loading

•

Exclusive slicing - patent pending

•

Cloud based - no memory jams

•

Enterprise -account management

•

And also..

•

QR code scanning

•

3D graphics & animations

•

Version 8 ... history & save content


Layar Partner Network Program


What we do

As the leader in Augmented Reality and
Interactive print,
Layar offers a mobile platform
that creates a bigger context by connecting
the real world
with the digital world.


What we don’t do

•

Create off- or online
content (creatives)

•

Help customers with
concepts

•

Create apps for others


The Layar Partner Network

The Layar Partner Network is a business accreditation for innovative companies that
represent, support and implement interactive print solutions with Layar.
Our partners are professionals committed to building internal interactive print expertise
with Layar’s products and tools and to promoting best practices
in augmented reality campaign creation with their clients.


Layar Partners

Our innovation partners include:

•
•
•

App, web and software developers
Mobile marketing agencies
Digital content marketing, creative &
communication agencies

•
•
•

Telecommunication providers
Printers & Publishers
Interactive print project managers & consultants


Layar Partners


Layar Partners

Creative Agencies:
To help your customers (advertisers, publishers, retail) in connecting ofﬂine and online materials.
Therewith offering new business models to have them engage with their audiences.
App Developers:
To have an SDK, API and Whitelabel to use AR within your app and therewith increase the
functionalities and innovate for your users.
Print companies:
Offer a turn key solution in all print materials and innovate and grow the business for your customers.


Why become a partner?

•

Join a rapidly growing community of creative innovation professionals within the global
augmented reality ecosystem

•
•
•
•
•

You can engage with game-changing technology to boost your sales and competitive advantage
Learn from our experience and insights – we are here to support you!
Stay up to date with market intelligence, advance notice updates and workshops and training.
Receive premium technical support, feedback, updates, as well as marketing and PR assistance.
Enjoy rebates and discounts as you grow your business.


Partner capabilities

•
•
•
•
•
•
•
•

Professional, high-quality, creative solutions
Established client portfolio
Business model alignment
Capability to add value to Layar in your territory
Commitment to build interactive print expertise
A minimum of 5 published client campaigns per year
Active promotion of Layar
Participation in Layar workshops and webinars


Benefits and perks

•
•
•
•
•
•
•

Layar Partner Network accreditation
Business opportunities and client referrals
Priority technical support
Sales and marketing support
Incentive programs
Partner updates and webinars
Product development


API Overview and SDK
Olga Beza


Workshop Overview
1. API Overview
2. SDK Overview
3. Demo App and examples
4. Question & Answers Session


Architecture Overview


Developer API/GetPoi
Simple API

•

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


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,vcards, webpages,screenshots,
•Dynamic elements: intents, auto-triggers, relative POIs, async calls
•Receive user info: userId, location, countryCode, User-Agent (OS, Model)


Steps to create your layers

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
Purchase credits
View Stats and errors


Statistics
Layar platform provides basic statistics for published layers:
•
•
•

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


GEO-LOCATION


Create a Geo-location layer
•Create a layer deﬁnition 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


UI Assets


User Filter Settings
•
•

Conﬁgure through publishing site
Used to improve user experience

•

Checkbox List

•

RadioButton

•

List Range

•

Slider Slider

•

Text box


User Authentication

•
•

Layar AR view behaves like a browser view

•

Implement your layer web service like you
would do for your normal browser

Cookies belonging to the getPOI URL domain
are stored and sent


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 ﬁlters to show relevant content to user


LAYAR VISION


Layar Vision Overview

•

Layar Vision is 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 ﬁngerprints. New
sets are dynamically loaded.

•

Robust tracking algorithm tolerates rotation, off-normal viewing, spatial occlusion og
target objects


Creating Layar Vision layers

•
•
•
•
•

Process is similar to geo-location creation
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)
•Sufﬁcient 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

insufﬁcient details

plain text

similar images

orientation

•Graphics with patterns
•Look too similar to other

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 ﬁles are high-quality

•

Do not overload pages with buttons

Websites you are linking users to are mobile-optimized.
Integrate Interactive Print content seamlessly into the actual print.
( similar colors, textures and designs as printed pages)


WHAT IS LAYAR CREATOR
Self-service webtool to create your own interactive print by
dragging and dropping your print content with your digital
content.
Easy drag & drop interface
Interactive buttons
Custom buttons
Statistics & analytics
Multiple publishers
Bulk upload
$ 20 per page (discount on volume)

Creator
UPLOAD

CREATE

PUBLISH!


Testing Layers

•

Test page (available in publishing
site)

•
•

•

Layer not available
Unable to reach POI provider (no
content available)

Layar browser

•

log in on the device with developer or
viewer account


Advanced Features


3D Models

•
•
•
•
•
•
•

Materials and Textures are supported
We only support mesh based objects
For textures only diffuse color of the material is supported
Color blending (alpha) is supported
Transparency support
Textured animation support
3D converter available to convert to L3D (Layar binary format)

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.
Make sure your 3D software can export .OBJ ﬁles


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

•
•

Web storage (store data locally within the user's browser)

Embedded audio and video
Forms with text input ﬁelds. Forms that use checkboxes, radio-buttons etc. should
work.

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.

•

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.

We recommend to set background color to transparent in CSS to
avoid rendering issue on Android devices.


Layar Intents

• Three types of intent are deﬁned in Layar
•http://m.layar.com/open/<layername>
•layar://<layarname>
•layarshare://<layername>/?<parameters>
•Use cases: interactive layer, switch between experiences


Animation API

•
•
•

A collection of pre-deﬁned animations on POIs

•
•

Each event can have a combination of animations

Simple appearance animation (drop, grow, spin)
Full customizable animation: onClick, onUpdate, onFocus, onCreate,
onDelete

Layer level/POI level


Interactive Layers

•
•
•
•
•

Create relative POIS (geo-location)
User generated POIS
User provided feedback, such us vote,comments etc
Sharing screenshot to developer’s server
Treasure hunting (point to point)


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


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 ﬁlling in a web form
within layer


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


Sharing Screenshot to developers

•

User taken screenshots can be uploaded to
developer’s server

•

URL to post screenshot is deﬁned 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 ﬁle


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


SDK Overview


SDK overview

• Static library that implements the Layar Vision functionality

and

Geo location functionality

•Opens only published layers and campaigns
•Fully customizable (callbacks)
•Remove watermark option (*at a cost, keep credits)
•Full support of API features


SDK overview

Developers have control of everything

•No map view
•No ﬁlters
•No recent content
•No close button
Radar is default for geo-layers


SDK Request process

Request access to Layar SDK. Our Business Development team will evaluate your
request and provide you with the access.
Create and publish a Pro campaign in the Creator or a vision/geo layer using Layar
Developer API
Integrate the Layar SDK into your own APP and publish it on the Android and/or
iOS app stores.


Callbacks
You can now more deeply integrate the Layar SDK into your own apps by making
use of new advanced features.

•

Create a history of recently viewed content for the user

•

Implement your own custom feedback messages

•

Track user activity while in AR mode

•

Intercept actions and link them to your own app


Available Callbacks 1/1
Description
QRCodeWasRecognized

shouldPerformVisualSearch

didReceiveVisualSearchResults

shouldShowNoResultsFound

Parameters

Return values

When a QR code is recognized
QR code decoded
and shown in AR
Whenever the user scans
something and a visual search
query will be sent to the server. The
callee will get the image that will be
sent to the Layar server for image image sent to the visual search API
recognition.
Return value allows the callee to tell
the SDK whether the server call
should be made or not.
- responseCode: error or no error
Whenever a response is received
- responseMessage: server
for a visual search
message
Whenever the SDK is going to popup a message indicating to the user
that no results were found.
This alloes developers to intercept
this situation and program their own
behavior when this happens, e.g.
image sent to the visual search API
replacing the pop-up message with
their own instructions.
(Note: customization could also be
done just by replacing assets and
strings for these messages).

Available Callbacks 2/2
Description

didLaunchLayer

startedTrackingReferenceImage

didShowAugment

didClickOnAugment

videoDidStartPlaying
didFocusPOI

Parameters

Return values

When a layer is launched and a
getPOI request is being made for
that layer
When a reference image is being
tracked and content starts displaying
on top of it

- layername
- recognized ref img id if launched
from a scan
- layername
- ref image id

- layername
When an augment is displayed in a
- ref img id
vision layer
- poi id
- layername
When the user clicked on an
- ref img id (or nil for geo)
augment
- poi id or qrcode hash
When an AR video starts playing
- layername
(either directly, or when the user
- ref img id
clicks the play/replay button)
- poi id
When a POI in geo layer gets the
focus

- layername
- poi id

didTriggerAction

When an action is triggered, either
by a user click or automatically

- layername
- ref img id (for vision)
- poi id
- action dict

shouldTriggerAction

When an action will be triggered,
either by a user click or
automatically. Return value tells the
SDK whether to continue launching
the action or not

- layername
- ref img id (for vision)
- poi id
- action object

iOS SDK Requirements

•

A minimum installed iOS version of 6.0

•

Xcode 5.0 or higher

•

iPhone SDK 7.0 or higher (ARM7+)

•

iPhone 3GS or higher / iPad 2 or higher


Example callback code

Launch a geo layer from scan mode (intent):


Android SDK

•

A minimum installed Android version 2.3

•

Android development environment set-up (such as Eclipse)

•

Android Developer Tools (ADT) v22 and uses Android 4.3 (API level 18)

•

Android device that has a back-facing camera (Android version 2.3 and
above)


Example callback code
Launch a geo layer from scan mode (intent):


Enabling Map View Android
•

The Layar SDK supports a Google Maps view for the Geo layers.

•

It uses the Google Maps v2 library included in Google Play Services.

•

In order to enable this, you need to add the Google Play Services library
project to your app and add your Google Maps API key to your
AndroidManifest.xml as described in the Google documentation.

•

The Layar SDK will automatically detect this and enable the "Switch to Map
View" menu option.


Testing Your App

•

Make sure SDK key and secret are correct

•

Bundle iD and package name are the same as the ones you registered

•

Layers are published


SDK DEMO APP


Layar SDK and Connect API


City tours- Dalili to Jordan
Getting around Jordan by EasyInfo


Pricing
•

Geo-location layers: Free of use

•

Vision-enabled layers: €15 per reference image, option to purchase bundles

•

Vision SDK : €2500/year

•

Geo SDK :€7500/year
Discount Price: €5000 until Dec 31

•

No Watermark : €7500/year extra fee

Note: prices will remain as is till December 31

Developer Support


QUESTIONS
& ANSWERS


Join the network
Hsio Ling Hee

Pat Connolly

Olga Beza

Partnerships Manager

VP Sales

Support Engineer

partners@layar.com
devsupport.layar.com


Layar November 5 Webinar - Discover the New Geo SDK

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

Similaire à Layar November 5 Webinar - Discover the New Geo SDK

Similaire à Layar November 5 Webinar - Discover the New Geo SDK (20)

Plus de Layar

Plus de Layar (20)

Dernier

Dernier (20)

Layar November 5 Webinar - Discover the New Geo SDK