Layar code examples for developers

Layar code examplesfor developersCreating augmented reality experiences for the world’s leading platformAugust 2011

Note! • Please note that the code examples in this presentation are based on Layar GetPOIs API version 6.0 • Please check our wiki for more information about the changes • The Complete API version 6.0 can be found here© Layar 2011

Introduction • After you have gone through the steps as outlined in the presentation Layar introduction for developers, you can start creating your ﬁrst layer • This presentation provides a few code examples for the layer service, which will deliver POI content to the Layar app • More code examples (and the latest updates) can be found on the Layar developer wiki© Layar 2011

Content • Layar Platform Architecture • Layar Features Overview • Developer API - getPOI API • Feature highlights and sample code • Interactive layers • Third party tools • Developer Support© Layar 2011

Layar architecture ns Layar n itio publishing ﬁ de GPS data y er environment La Layar server Get layers Get POIs Create layer La Fixed yer De v data Ge elop tP e OIs r AP I View Layer service POI in forma tion provider Ge View tP POI i OI nform s ation Layer content Legend sources Layar environment© Layar 2011 Third-party environment

Layar features Overview• Support for both Geo-location POIs and Vision enabled POIs• Support for icon/images/3D models• Support for animated POIs• Sharing to facebook, Twitter and Developer’s server.• Interactive actions: call, email, share, web page, audio, video, async call etc• Gaming elements: autotriggers, relative POIs, point to point© Layar 2011

Creating layers • Layers are built using simple web technology • You can use programming languages like PHP, MySQL, Java etc as long as the response is in JSON format • 2 step process: 1. Create a layer deﬁnition in the Layar publishing environment 2. Create a layer service for delivering the POI content to the Layar app • Step by step Tutorial: Create a simple layer© Layar 2011

getPOI API • Hosted by layer developer • Simple API: • HTTP request with the following parameters • Latitude, Longitude, ﬁlter settings,... • Response: JSON data containing POI information (hotspots)© Layar 2011

Two types of POIs • Geo-location POI • POIs that are attached to a physical location with latitude, longitude & altitude. • Vision POI • Augments that are attached to a target object recognized by Layar Reality browser (v6.0 and above).© Layar 2011

Requesthttp://devAPI.example.com/getPOIs/?countryCode=IN&lon=4.887339&timestamp=1249226148713&userId=ed48067cda8e1b985dbb8ff3653a2da4fd490a37&radius=6245&lat=52.377544&layerName=snowy4&accuracy=100Response{ "hotspots": [{ "id": "test_1", "anchor": { "geolocation": { "lat": 52.3729, "lon": 4.93 } }, // For Geo-location POI. "text": { "title": "The Layar Office", "description": "The Location of the Layar Office", "footnote": "Powered by Layar" }, "imageURL": "http://custom.layar.nl/layarimage.jpeg" }], "layer": "snowy4", "errorString": "ok", "errorCode": 0} © Layar 2011

• Response for Vision enabled layers { "hotspots": [{ "id": "test_1", "anchor": { "referenceImage": “my_Reference_Image” }, // For Vision enabled POI. "text": { "title": "The Layar Office", "description": "The Location of the Layar Office", "footnote": "Powered by Layar" }, "imageURL": "http://custom.layar.nl/layarimage.jpeg" }], "layer": "snowy4", "errorString": "ok", "errorCode": 0 }© Layar 2011

3D© Layar 2011 Layer developed by Hoppala

Response{ "hotspots": [{ "id": "test_1", "anchor": { "geolocation": { "lat": 52.3729, "lon": 4.93 } }, // For Geo-location POI. "text": { "title": "The Layar Office", "description": "The Location of the Layar Office", "footnote": "Powered by Layar" }, "imageURL": "http://custom.layar.nl/layarimage.jpeg","object": { "contentType": "model/vnd.layar.l3d", "url": "http://example.com/example_full.l3d", "reducedURL": "http://example_reduced.l3d", "size": 2},"transform": { "rotate": { "rel": true, "axis": { "x": 0, "y": 0, "z": 1 }, "angle": 0 }, "translate": { "x": 0, "y": -0.075, "z": 0 }, "scale": 0.01} }], "layer": "snowy4", "errorString": "ok", "errorCode": 0} © Layar 2011

3D notes • Base format is OBJ (WaveFront format) • Good interchange format, most 3D programs can convert to OBJ • Materials and Textures are supported • For textures only diffuse color of the material is supported • No multiple textures • Transparency support (no blending with other objects though) • Conversion to L3D (Layar binary format) required© Layar 2011

More info on 3D POI • Requirements and best practices on creating 3D model. • Presentation: 3D Content Creation Tips & Tricks • Manual: 3D in Layar v1.0 (pdf) • Layar 3D model Converter • Tutorial: Create texture-animated 3D models • Tutorial: Positioning 3D model within Layar3D Model Converter© Layar 2011

User Filter SettingsRequesthttp://examplelayer/FourthTutorial_FilterSettings.php?lang=en&countryCode=NL&lon=4.94745254517&userId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&RADIOLIST=1&CHECKBOXLIST=1%2C2&version=4.0&radius=1500&CUSTOM_SLIDER=300000&lat=52.365852048&layerName=testlayerﬁlters&SEARCHBOX=&accuracy=100 © Layar 2011

More Info on Filter Settings • Filter configuration on the Publishing site • Filter definition in getPOI request • Tutorial: Layer with filter settings© Layar 2011

POI & Layer Actions There’s audio...© Layar 2011 http://www.ﬂickr.com/photos/suzanneandsimon/886401250/

POI & Layer Actions There’s audio... “uri”: “http://mylayer.com/surroundsound.mp3”© Layar 2011 http://www.ﬂickr.com/photos/suzanneandsimon/886401250/

Response for Geo-location POI"actions": [{" " "label": "Contact Layar", "uri": "http://layar.com/company/contact/", "autoTriggerRange": 5000, // For Geo-location POI. "autoTriggerOnly": false, "contentType": "text/html", "method": "GET", "activityType": 1, "params": [ "lat", "lon", "alt", "lang", "countrycode", "localCountryCode", "version" ], "closeBiw": false, "showActivity": true, "activityMessage": "contact layar" }] © Layar 2011

Response for Vision POI"actions": [{" " "label": "Contact Layar", "uri": "http://layar.com/company/contact/", "autoTrigger": true, // For Vision POI. "autoTriggerOnly": false, "contentType": "text/html", "method": "GET", "activityType": 1, "params": [ "lat", "lon", "alt", "lang", "countrycode", "localCountryCode", "version" ], "closeBiw": false, "showActivity": true, "activityMessage": "contact layar" }] © Layar 2011

More Info on Actions • Actions API speciﬁcation • Tutorial: Layer with Actions© Layar 2011

Layar intents© Layar 2011

Layar intents layar://princeofpersia/?SEARCHBOX=start© Layar 2011

Layar Intents • Three types of intents: • Layar://<layername>/?action=<value>&<custom_param>=<value>&<ﬁlter>=<value> • http://m.layar.com/open/<layername> • layarshare://<layername>/?<parameters> • Use cases: interactive layer and point-to-point layer • Layar intents API documentation© Layar 2011

Animations© Layar 2011

Animations Texture animations© Layar 2011

Animations Texture animations Rotate© Layar 2011

Animations Texture animations Oscillate Rotate© Layar 2011

Animation API • A collection of pre-deﬁned animations on POIs. • Simple appearance animation (drop, grow, spin) • Full customizable animation: onClick, onUpdate, onFocus, etc • Each event can have a combination of animations. • Layer level/POI level • Animation API documentation© Layar 2011

Response"animations": { // "animations" on a POI level. This overwrites the "animations" parameter defined on the layer level. "onClick": [ // "onClick" event triggers the following animation. .{ //The object size is scaled by a decimal factor from 1 to 2 on X, Y and Z axises "interpolation": "linear", "type": "scale", // animation type, mandatory field. "axis": { // axis that the animation is applied to "y": 1, "x": 1, "z": 1 }, "from": 1, // initial scale factor, default is to use the currently set POI state "to": 2, // eventual scale factor "length": 2000, // animation duration in milliseconds, mandatory field. "delay": 0, // delay in milliseconds before starting the animation "repeat": false, // specifies whether the animation is repeated in a loop "persist": true // indicates whether he end state of the animation is applied to the POI state } ]} © Layar 2011

Response{"hotspots": [], "layer": "snowy4", "errorString": "ok", "morePages": false, "errorCode": 0, "nextPageKey": null, "refreshInterval": 2,//indicates how many seconds to wait until the next getPOI request is made. "refreshDistance": 10,//tells the client to refresh the layer if the user has moved by more than the //distance specified. "fullRefresh": false, // indicates whether it is a full refresh or update. "actions":[]}Detailed explanation can be found here. © Layar 2011

Auto-triggers “actions”: [{ “label”: “ Watch”, “uri”: “http://splintercell.com /explosion.3gp”, “autoTriggerRange”: 50, “autoTriggerOnly”: true}]© Layar 2011

User authenticationCookies! http://www.ﬂickr.com/photos/mache/166940673

User authentication • Layar AR view behaves like a browser view • Cookies belonging to the getPOI URL domain are stored and sent • Implement your layer webservice like for a normal browser • Alternatively: UserId is anonymous ID of user (linked to phone ID) • User Authentication Documentation© Layar 2011

Interactive layers • Create Relative POIs • User generated POIs • User provided feedback, such as vote, comments, etc • Sharing screenshots to developer’s server • Treasure hunting (point to point)© Layar 2011

Create Relative POIs • POIs that are always relative to user’s current location • Useful when POI content is not constraint to the geolocation. • Tutorial ( sample code) is available© Layar 2011

User Generated POIs • Dynamic layer where users can create a POI in it. • Normally POI’s location is relevant to user’s location. • More info on Layar intent and actions • The Sequence Diagram explains how to insert a POI by ﬁlling in a web form within the layer.© Layar 2011

User provided Feedback • Dynamic layer which enables users to provide feedback to POIs. • For instance, users can vote for a restaurant, comment on a piece of art, etc. • The scenario in SD is that the number of a POI being “liked” is updated whenever the “like” action is triggered.© Layar 2011

Sharing screenshots to developer • User taken screenshots can be uploaded to developer’s server. • URL to post screenshots to is deﬁned in publishing site (under API endpoint URL tab) . • Uploaded info contains screenshot, message, lat & lon where screenshot was taken are included as EXIF data in the screenshot ﬁle. • Sharing API Documentation© Layar 2011

Point-to-point layer • Dynamic layer content based on the previous interaction • Async call action and user Interact Dialog provides more interaction • For instance, treasure hunting game, new content discovery, etc. • The Sequence Diagram shows the sequence of collecting a treasure and revealing others after the treasure is collected.© Layar 2011

Play layers in any iPhone app • Binary code to be included in your Xcode project • Simple API that opens any published layer • Seamless handover to AR experience (incl. authentication) • iPhone Player Wiki documentation© Layar 2011

Third Party Tools • Instead of creating your own layer service, you can use one of the third party tools developed by the community, e.g.: • Porpoise Open source server software, requires programming skills, more control • Hoppala Augmentation Hosted solution, easy to use, limited functionality • LMS using Layar Connect, such as BuildAR, Poistr, Poiz, VISAR, etc. • Others© Layar 2011

Developer support • The following support resources provide a wealth of information for developers: • Layar developer wiki • Layar developer support environment • Discussion forums • Support tickets© Layar 2011

Thank you

http://layar.pbworks.com	12283
http://layar.com	9687
http://www.layar.com	8418
http://devsupport.layar.com	957
http://translate.googleusercontent.com	128
url_unknown	64
http://www.slideshare.net	11
http://kumar-sekhar.com	7
http://us-w1.rockmelt.com	6
http://207.46.192.232	5
http://m.layar.com	3
http://layar.com.	2
http://a0.twimg.com	2
http://webcache.googleusercontent.com	2
http://www.twylah.com	1
http://www.justaple.com	1
http://twitter.com	1
http://131.253.14.98	1

Layar code examples for developers

by Layar

Accessibility

Categories

Upload Details

Usage Rights

18 Embeds 31,579

Statistics

Layar code examples for developers Presentation Transcript