Successfully reported this slideshow.
How to develop layers
     Marc René Gardeya, CEO HOPPALA




                                      www.hoppala.eu

      ...
Geocoded POIs
Markerless Tracking




GPS              Compass
Architecture




                          layer service

Layar App   Layar Cloud      Webspace
Architecture




                        HTML pages

Browser   DNS / Proxy      Webspace
Architecture

          HTTP Request




                          HTML pages

Browser   DNS / Proxy       Webspace

     ...
Architecture

               HTTP Request




                                   layer service

Layar App       Layar Clou...
Become a Layar Developer


Create a layer


       Develop a layer service
Become a Layar Developer




                           © 2010, Layar B.V.
Create a Developer Account


http://dev.layar.com




                        Sign in with your
                       Goo...
Create a Publisher Account


http://www.layar.com
Link Accounts


http://www.layar.com
Create a layer




                 © 2010, Layar B.V.
Create a layer
http://dev.layar.com




                        mylayer

                        http://mydomain.com/poi.p...
Develop a layer service




                          © 2010, Layar B.V.
Basic layer service

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

     $response = array(
        '...
HTTP response (JSON)



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

<?php
   $hotspots = array();

     $hotspot = array(
        'title'        => 'Restaurant Eberhard Ludw...
World Geodetic System 1984


                                  +Latitude
Latitude/Longitude: 37.78 / -122.42




         ...
Playing with coordinates

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

     $hotspot = array(
        'title'   ...
Adding actions




Go to website
Adding actions

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

          ...

          'actions'    ...
Adding audio
Adding audio

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

          ...

          'actions'    ...
Adding video




               ...WINVOLVE...
Adding video

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

          ...

          'actions'     ...
Auto trigger




               Muzar.org
Auto trigger

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

          ...

          'actions'     ...
Berlin Wall 3D
Adding 3D models

<?php
   $hotspot     = array(
      ...

          'dimension'    =>   3,
          'object'       =>  ...
3D Model Converter
Berlin Wall 3D
More immersive experiences




                             © 2010, Layar B.V.
Background actions




            POI interaction
Flexible refresh rate




Moving POIs
Action on entire layer




                  Place POIs
HOPPALA Goes Easter




                      Happy easter!
                                        again!
             Lo...
UI Customization




    Focus on user experience
Animations


                               Oscillate

Texture animation



                      Rotate
Quiznos 3D animation




                       ...WINVOLVE...
Don‘t feel like coding?




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

                     © 2010, Layar B.V.
www.hoppala.eu
Thank you!
          Marc René Gardeya, CEO HOPPALA




www.layar.com/create

                                           w...
Nächste SlideShare
Wird geladen in …5
×

Layar Events in New York and San Francisco

2.636 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Layar Events in New York and San Francisco

  1. 1. How to develop layers Marc René Gardeya, CEO HOPPALA www.hoppala.eu © 2010, Layar B.V.
  2. 2. Geocoded POIs
  3. 3. Markerless Tracking GPS Compass
  4. 4. Architecture layer service Layar App Layar Cloud Webspace
  5. 5. Architecture HTML pages Browser DNS / Proxy Webspace
  6. 6. Architecture HTTP Request HTML pages Browser DNS / Proxy Webspace HTTP Response
  7. 7. Architecture HTTP Request layer service Layar App Layar Cloud Webspace HTTP Response (JSON)
  8. 8. Become a Layar Developer Create a layer Develop a layer service
  9. 9. Become a Layar Developer © 2010, Layar B.V.
  10. 10. Create a Developer Account http://dev.layar.com Sign in with your Google Account ID
  11. 11. Create a Publisher Account http://www.layar.com
  12. 12. Link Accounts http://www.layar.com
  13. 13. Create a layer © 2010, Layar B.V.
  14. 14. Create a layer http://dev.layar.com mylayer http://mydomain.com/poi.php
  15. 15. Develop a layer service © 2010, Layar B.V.
  16. 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. 17. HTTP response (JSON) { "hotspots":[], "layer":"mylayer", "errorCode":0 }
  18. 18. Adding hotspots
  19. 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. 20. World Geodetic System 1984 +Latitude Latitude/Longitude: 37.78 / -122.42 -Latitude -Longitude +Longitude
  21. 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. 22. Adding actions Go to website
  23. 23. Adding actions <?php $hotspot = array( 'title' => 'Bäckerei Blank', ... 'actions' => array( array( 'label' => 'Go to website', 'uri' => 'http://www.hoppala.eu' ) ) ); ?>
  24. 24. Adding audio
  25. 25. Adding audio <?php $hotspot = array( 'title' => 'Bäckerei Blank', ... 'actions' => array( array( 'label' => 'Play song', 'uri' => 'audio://mydomain.com/song.mp3' ) ) ); ?>
  26. 26. Adding video ...WINVOLVE...
  27. 27. Adding video <?php $hotspot = array( 'title' => 'Quiznos store', ... 'actions' => array( array( 'label' => 'Play video', 'uri' => 'video://mydomain.com/video.3gp' ) ) ); ?>
  28. 28. Auto trigger Muzar.org
  29. 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. 30. Berlin Wall 3D
  31. 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. 32. 3D Model Converter
  33. 33. Berlin Wall 3D
  34. 34. More immersive experiences © 2010, Layar B.V.
  35. 35. Background actions POI interaction
  36. 36. Flexible refresh rate Moving POIs
  37. 37. Action on entire layer Place POIs
  38. 38. HOPPALA Goes Easter Happy easter! again! Looking forward to see you
  39. 39. UI Customization Focus on user experience
  40. 40. Animations Oscillate Texture animation Rotate
  41. 41. Quiznos 3D animation ...WINVOLVE...
  42. 42. Don‘t feel like coding? © 2010, Layar B.V.
  43. 43. Layar CMS in the cloud © 2010, Layar B.V.
  44. 44. www.hoppala.eu
  45. 45. Thank you! Marc René Gardeya, CEO HOPPALA www.layar.com/create www.hoppala.eu © 2010, Layar B.V.

×