layar events in new york and san francisco

45
© 2010, Layar B.V. How to develop layers Marc René Gardeya, CEO HOPPALA 33$/$ + 2 www.hoppala.eu

Upload: marc-rene-gardeya

Post on 05-Dec-2014

2.390 views

Category:

Technology


0 download

DESCRIPTION

Aug 10th and 12th, 2010, Presentation at Layar Events, New York and San Francisco

TRANSCRIPT

Page 1: Layar Events in New York and San Francisco

© 2010, Layar B.V.

How to develop layersMarc René Gardeya, CEO HOPPALA

www.hoppala.eu

Page 2: Layar Events in New York and San Francisco

Geocoded POIs

Page 3: Layar Events in New York and San Francisco

GPS Compass

Markerless Tracking

Page 4: Layar Events in New York and San Francisco

layer service

Layar App Layar Cloud Webspace

Architecture

Page 5: Layar Events in New York and San Francisco

Browser DNS / Proxy Webspace

HTML pages

Architecture

Page 6: Layar Events in New York and San Francisco

Browser DNS / Proxy

HTTP Request

HTTP Response

Webspace

HTML pages

Architecture

Page 7: Layar Events in New York and San Francisco

Layar App Layar Cloud

HTTP Request

HTTP Response (JSON)

layer service

Webspace

Architecture

Page 8: Layar Events in New York and San Francisco

Become a Layar Developer

Create a layer

Develop a layer service

Page 9: Layar Events in New York and San Francisco

© 2010, Layar B.V.

Become a Layar Developer

Page 10: Layar Events in New York and San Francisco

http://dev.layar.com

Create a Developer Account

Sign in with yourGoogle Account ID

Page 11: Layar Events in New York and San Francisco

Create a Publisher Account

http://www.layar.com

Page 12: Layar Events in New York and San Francisco

Link Accounts

http://www.layar.com

Page 13: Layar Events in New York and San Francisco

© 2010, Layar B.V.

Create a layer

Page 14: Layar Events in New York and San Francisco

http://dev.layar.com

Create a layer

http://mydomain.com/poi.php

mylayer

Page 15: Layar Events in New York and San Francisco

© 2010, Layar B.V.

Develop a layer service

Page 16: Layar Events in New York and San Francisco

<?php define( 'LAYERNAME', 'mylayer' ); $hotspots = array();

$response = array( 'hotspots' => $hotspots, 'layer' => LAYERNAME, 'errorCode' => 0, );

$json = json_encode( $response );

header( 'Content-type: application/json'); echo $json;?>

Basic layer service

http://mydomain.com/poi.php

Page 17: Layar Events in New York and San Francisco

{ "hotspots":[], "layer":"mylayer", "errorCode":0}

HTTP response (JSON)

Page 18: Layar Events in New York and San Francisco

Adding hotspots

Page 19: Layar Events in New York and San Francisco

<?php $hotspots = array();

$hotspot = array( 'title' => 'Restaurant Eberhard Ludwig', 'line2' => '', 'line3' => '', 'line4' => '', 'attribution' => 'Footnote', 'lat' => (int)(48.8 * 1000000.0), 'lon' => (int)(9.2 * 1000000.0) ); $hotspots[] = $hotspot;?>

Adding hotspots

Page 20: Layar Events in New York and San Francisco

World Geodetic System 1984

-Longitude +Longitude

+Latitude

-Latitude

Latitude/Longitude: 37.78 / -122.42

Page 21: Layar Events in New York and San Francisco

<?php $lat = $_GET['lat']; $lon = $_GET['lon'];

$hotspot = array( 'title' => 'Sticky POI', 'line2' => 'It sits right', 'line3' => 'next to you', 'line4' => '', 'attribution' => 'footnote', 'lat' => (int)($lat + 0.0005) * 1000000.0), 'lon' => (int)($lon * 1000000.0) );?>

Playing with coordinates

Page 22: Layar Events in New York and San Francisco

Adding actions

Go to website

Page 23: Layar Events in New York and San Francisco

<?php $hotspot = array( 'title' => 'Bäckerei Blank',

...

'actions' => array( array( 'label' => 'Go to website', 'uri' => 'http://www.hoppala.eu' ) ) );?>

Adding actions

Page 24: Layar Events in New York and San Francisco

Adding audio

Page 25: Layar Events in New York and San Francisco

<?php $hotspot = array( 'title' => 'Bäckerei Blank',

...

'actions' => array( array( 'label' => 'Play song', 'uri' => 'audio://mydomain.com/song.mp3' ) ) );?>

Adding audio

Page 26: Layar Events in New York and San Francisco

Adding video

...WINVOLVE...

Page 27: Layar Events in New York and San Francisco

<?php $hotspot = array( 'title' => 'Quiznos store',

...

'actions' => array( array( 'label' => 'Play video', 'uri' => 'video://mydomain.com/video.3gp' ) ) );?>

Adding video

Page 28: Layar Events in New York and San Francisco

Auto trigger

Muzar.org

Page 29: Layar Events in New York and San Francisco

<?php $hotspot = array( 'title' => 'Splinter Cell',

...

'actions' => array( array( 'label' => 'Play video', 'uri' => 'video://mydomain.com/explosion.3gp', 'autoTriggerRange' => 5, 'autoTriggerOnly' => true ) ) );?>

Auto trigger

Page 30: Layar Events in New York and San Francisco

Berlin Wall 3D

Page 31: Layar Events in New York and San Francisco

<?php $hotspot = array( ...

'dimension' => 3, 'object' => array( 'baseURL' => 'http://mydomain.com/', 'full' => 'mymodel.l3d ', 'size' => 20 // tell client before loading model ), 'transform' => array( 'angle' => 0, 'rel' => FALSE, 'scale' => 10 // upscale model ) );?>

Adding 3D models

Page 32: Layar Events in New York and San Francisco

3D Model Converter

Page 33: Layar Events in New York and San Francisco

Berlin Wall 3D

Page 34: Layar Events in New York and San Francisco

© 2010, Layar B.V.

More immersive experiences

Page 35: Layar Events in New York and San Francisco

POI interaction

Background actions

Page 36: Layar Events in New York and San Francisco

Moving POIs

Flexible refresh rate

Page 37: Layar Events in New York and San Francisco

Place POIs

Action on entire layer

Page 38: Layar Events in New York and San Francisco

Happy easter!Looking forward to see you again!

HOPPALA Goes Easter

Page 39: Layar Events in New York and San Francisco

Focus on user experience

UI Customization

Page 40: Layar Events in New York and San Francisco

Oscillate

Rotate

Texture animation

Animations

Page 41: Layar Events in New York and San Francisco

Quiznos 3D animation

...WINVOLVE...

Page 42: Layar Events in New York and San Francisco

© 2010, Layar B.V.

Don‘t feel like coding?

Page 43: Layar Events in New York and San Francisco

© 2010, Layar B.V.

Layar CMS in the cloud

Page 44: Layar Events in New York and San Francisco

www.hoppala.eu

Page 45: Layar Events in New York and San Francisco

© 2010, Layar B.V.

Thank you!Marc René Gardeya, CEO HOPPALA

www.hoppala.eu

www.layar.com/create