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

1. How to develop layers
Marc René Gardeya, CEO HOPPALA
www.hoppala.eu
© 2010, Layar B.V.

2. Geocoded POIs

3. Markerless Tracking
GPS Compass

4. Architecture
layer service
Layar App Layar Cloud Webspace

5. Architecture
HTML pages
Browser DNS / Proxy Webspace

6. Architecture
HTTP Request
HTML pages
Browser DNS / Proxy Webspace
HTTP Response

7. Architecture
HTTP Request
layer service
Layar App Layar Cloud Webspace
HTTP Response (JSON)

8. Become a Layar Developer
Create a layer
Develop a layer service

9. Become a Layar Developer
© 2010, Layar B.V.

10. Create a Developer Account
http://dev.layar.com
Sign in with your
Google Account ID

11. Create a Publisher Account
http://www.layar.com

12. Link Accounts
http://www.layar.com

13. Create a layer
© 2010, Layar B.V.

14. Create a layer
http://dev.layar.com
mylayer
http://mydomain.com/poi.php

15. Develop a layer service
© 2010, Layar B.V.

16. Basic layer service
<?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;
?>
http://mydomain.com/poi.php

17. HTTP response (JSON)
{
"hotspots":[],
"layer":"mylayer",
"errorCode":0
}

18. Adding hotspots

19. Adding hotspots
<?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;
?>

20. World Geodetic System 1984
+Latitude
Latitude/Longitude: 37.78 / -122.42
-Latitude
-Longitude +Longitude

21. Playing with coordinates
<?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)
);
?>

22. Adding actions
Go to website

23. Adding actions
<?php
$hotspot = array(
'title' => 'Bäckerei Blank',
...
'actions' => array(
array(
'label' => 'Go to website',
'uri' => 'http://www.hoppala.eu'
)
)
);
?>

24. Adding audio

25. Adding audio
<?php
$hotspot = array(
'title' => 'Bäckerei Blank',
...
'actions' => array(
array(
'label' => 'Play song',
'uri' => 'audio://mydomain.com/song.mp3'
)
)
);
?>

26. Adding video
...WINVOLVE...

27. Adding video
<?php
$hotspot = array(
'title' => 'Quiznos store',
...
'actions' => array(
array(
'label' => 'Play video',
'uri' => 'video://mydomain.com/video.3gp'
)
)
);
?>

28. Auto trigger
Muzar.org

29. Auto trigger
<?php
$hotspot = array(
'title' => 'Splinter Cell',
...
'actions' => array(
array(
'label' => 'Play video',
'uri' => 'video://mydomain.com/explosion.3gp',
'autoTriggerRange' => 5,
'autoTriggerOnly' => true
)
)
);
?>

30. Berlin Wall 3D

31. Adding 3D models
<?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
)
);
?>

32. 3D Model Converter

33. Berlin Wall 3D

34. More immersive experiences
© 2010, Layar B.V.

35. Background actions
POI interaction

36. Flexible refresh rate
Moving POIs

37. Action on entire layer
Place POIs

38. HOPPALA Goes Easter
Happy easter!
again!
Looking forward to see you

39. UI Customization
Focus on user experience

40. Animations
Oscillate
Texture animation
Rotate

41. Quiznos 3D animation
...WINVOLVE...

42. Don‘t feel like coding?
© 2010, Layar B.V.

43. Layar CMS in the cloud
© 2010, Layar B.V.

44. www.hoppala.eu

45. Thank you!
Marc René Gardeya, CEO HOPPALA
www.layar.com/create
www.hoppala.eu
© 2010, Layar B.V.