[Tutorial] Développer son calque dans Layar (pour débutants curieux)

[Lhal]

Bonjour à tous,

Je m'appelle Anthony, je suis étudiant et je fais mon stage de fin d'études chez Layar, à Amsterdam. Il y a un mois et demie, j'ai commencé le tutorial qui va suivre dans un autre topic.

À l'occasion de la sortie de Layar 3.1 ce soir sur l'Android Market (téléchargez-le, c'est gratuit et ça fonctionne avec Android 1.5), je recompile tous les morceaux de tutoriaux pour les assembler ici, mis à jour et corrigés.

N'hésitez pas à me contacter par twitter ou par email (c'est mon nom @layar.com), ni à répondre à la suite !

Petite présentation

Une

, passée à la télé le mois dernier en France, explique plutôt bien comment ça marche. La "réalité augmentée" (AR) est un nouveau média, qui rajoute en temps réel des informations sur ce que l'utilisateur voit à travers l'écran de son téléphone portable.

Contrairement à l'AR "avec marqueurs" qui dessine un objet par reconnaissance d'image, notre AR "sans marqueurs" se base sur une boussole et un GPS, plus un peu de 3D, pour mettre les informations au bon endroit.

Ici, les Beatles sont en tournée à Amsterdam. Ils sont placés là par GPS, on peut tourner autour pour les voir sous différents angles.

Layar (lèyeur en anglais, mais lâyâr d'après la pub) est un jeu de mots entre "layer" et "AR". "Layer" signifie "calque" et Layar est un navigateur pour afficher des "calques" de réalité augmentée.

Les calques sont développés par des développeurs indépendants. Ils contiennent des Points d'Intérêts (POI, poy'z), souvent avec un thème commun. Ces calques peuvent être des annuaires, des réseaux sociaux, des moteurs de recherche, des guides touristiques, des jeux ou simplement de l'art.

Il y a une grande diversité dans le monde des développeurs, qui va de l'étudiant qui fait un calque pour la gloire sur son temps libre à l'entreprise spécialisée dans la réalisation et l'hébergement de calques.

Heureusement, créer un calque demande de moins en moins de connaissances techniques. Ce tutorial s'adresse aux personnes n'ayant jamais programmé ou presque, mais qui sont curieuses et créatives.

Prêts ?

Ingrédients du calque

Il vous faut : une idée, une clé de développeur, un hébergement web et un gestionnaire de calque.

Premièrement, la clé est facile à obtenir. C'est gratuit et on ne refuse personne : Formulaire de demande. Faites-le en premier, ça peut mettre un jour ou deux, ce qui vous donnera le temps de préparer le reste et réfléchir à votre idée.

Le menu déroulant "I am a" peut prêter à confusion. Dans l'ordre : "Développeur", "Éditeur (propriétaire des données)", "Les deux". Vous êtes certainement les deux.

La case du dessous demande quel type de calque vous comptez développer. Ce n'est pas très important, mais ça vous évite de passer pour un bot à spam (surtout si vous avez un e-mail bizarre). ;)

Ensuite, vous avez besoin d'un hébergement web, car un calque fonctionne comme un site web. Cet hébergement fera tourner un gestionnaire de calque, qui vous permettra d'ajouter, modifier et supprimer les POIs.

Il existe des solutions payantes comme Hoppala, qui permettent d'avoir l'hébergement et le gestionnaire avec le minimum de temps passé sur la configuration, mais il existe aussi plusieurs projets open-source gratuits.

Il y a sur le site officiel une présentation des outils disponibles.

Encart pour lecteurs informaticiens

La finalité du webservice est de traiter des requêtes HTTP GET, dont les paramètres sont définis par l'API GetPointsOfInterest, et de renvoyer le résultat en JSON dans le corps de la réponse. J'ai fait quelques calques en utilisant Python et Django, c'est vraiment très facile.

Si vous lisez l'anglais, le wiki et la mailing-list des développeurs devraient être d'une bonne aide.

Parmi les outils open-source, ce tutorial couvre pour le moment PorPOIse et OpenHanced Location Starter Kit (OHLSK). Ils ne sont pas développés par Layar, mais par des informaticiens indépendants. On les aime beaucoup ;)

Prérequis PorPOIse

• Disposer d'un hébergement web avec PHP5
  
• Savoir transférer des fichiers par FTP
  

Prérequis OHLSK

• Disposer d'un hébergement web avec PHP5
  
• Savoir transférer des fichiers par FTP
  
• Disposer d'une base de données MySQL5
  

Choisir PorPOIse ou OHLSK

• PorPOIse est dédié à Layar et permet des calques plus riches, avec de la 3D
  
• PorPOIse peut s'utiliser sans MySQL
  
• PorPOIse peut réutiliser et adapter une base de données existante
  
• PorPOIse a une plus grande communauté et est plus éprouvé
  
• OHLSK est plus rapide à installer
  
• OHLSK est plus simple à utiliser
  
• OHLSK est plus joli
  
• OHLSK est conçu pour être extensible avec d'autres logiciels que Layar
  

Si vous voulez créer votre premier calque avec le moins de difficultés possible, OHLSK est le meilleur choix. Si vous voulez aller jusqu'à publier votre calque, je pense que PorPOIse est plus robuste pour le moment.

Définition d'un POI

Le fait que vous utilisez PorPOIse, OHLSK ou autre chose ne se verra pas de manière évidente pour l'utilisateur.

En effet, vos POIs seront toujours représentés de la même manière, telle que définie sur le wiki.

• lat et lon représentent latitude et longitude, en millionnième de degrés. Il existe des outils de conversion en ligne, si jamais vos coordonnées sont en degrés/minutes/secondes. Par exemple, 42°12'30" = 42.208333° = 42208333 pour Layar.
  Il est possible d'extraire les coordonnées de Google Maps en activant LatLng Tooltip ou LatLng Marker dans le menu labs (fiole verte).
  Vous pouvez aussi utiliser getlatlon.com.
  
• alt représente l'altitude absolue en mètres à partir du niveau de la mer. Pour un POI placé sur le mont Blanc, une valeur possible serait 4807. Cette valeur est encore peu utilisée : beaucoup de téléphones n'ont pas d'altimètre.
  
• relativeAlt représente l'altitude relative au téléphone. Idéalement, une valeur de 0 correspond au sol à vos pieds. Cette valeur est utile quand les POIs sont des objets 3D, par exemple dans le calque TweepsAround, où les avatars sont accrochés en l'air.
  
• dimension détermine si l'objet sera en 3D ou non. Tant que vous n'utilisez pas la 3D, cette valeur doit être à 1.
  
• type détermine le numéro du set d'icônes à utiliser (voir plus loin).
  
• object et transform définissent l'objet à afficher s'il est en 3D. Si dimension vaut 1, ces champs seront ignorés.
  
• actions définit l'ensemble des interactions possibles autour du POI : lancer une vidéo, un site web, un fichier audio, téléphoner, envoyer un e-mail, etc.
  
• title est le titre du POI, affiché en haut de la boîte en bas de l'écran, appelée BIW (Brief Info Widget).
  
• line2, line3, line4 affichent des informations complémentaires.
  
• attribution est une dernière ligne, plus petite, idéale pour les copyrights.
  
• imageURL est une ligne pour un lien vers une image de format 100×75 de préférence
  

Astuce

Pour afficher la distance dans un des champs du BIW, utilisez le code suivant.

%distance%

Votre premier calque en trente minutes avec OHLSK

Le développement d'OHSLK peut être suivi sur twitter ou sur le blog d'Openhanced.

Il semble que le lien pour télécharger la source soit toujours le suivant :

http://www.openhanced.com/en/downloads/package.zip

La documentation se trouve ici, en anglais :

http://www.ohdemo.com/ohlsk/Index.htm

Il est sans doute encore trop tôt pour une mailing-list, mais l'auteur est facilement accessible par twitter.

Attention, OHLSK est très récent et connaît de nombreuses mises à jour. Il est possible que certains menus soient différents dans la dernière version !

Téléchargez et décompressez package.zip puis transférez les fichiers vers un répertoire de votre hébergement web avec votre client FTP favori.

Pour ma part, je l'ai placé de manière à ce qu'il soit accessible par http://layar.mondomaine.fr parce que j'aime bien les sous-domaines.

Les choses sérieuses commencent en appelant install.htm dans le navigateur : http://layar.mondomaine.fr/install.htm

Astuce PHP5

OHLSK comme PorPOIse fonctionne avec PHP5. Votre hébergement, s'il n'est pas sur un serveur dédié, gère peut-être PHP4 par défaut, ce qui causera des erreurs. Un moyen facile de contourner le problème est d'uploader un petit fichier ".htaccess" (le point est important) qui ne contient qu'une ligne de texte :

SetEnv PHP_VER 5

Tout ceci est une façon de dire "bienvenue" et nous allons procéder étape par étape.

Pour appliquer les permissions 755 sur les fichiers mentionnés, avec FileZilla, faites un clic-droit sur le fichier dans le panneau de droite, menu "File Permissions" (Permissions du Fichier) puis rentrez 755 dans la case "Numeric value" (Valeur numérique).

Pour les quatre champs suivants : Host name (nom d'hôte ou serveur), Database name, Database User, Database Password, votre hébergeur devrait vous les avoir fourni.

Ensuite, vous avez besoin d'une clé Google Maps. En cliquant sur le lien, vous avez juste à cocher la case en bas et entrer l'URL de votre site. Comme je vais utiliser http://layar.mondomaine.fr, je peux entrer cette valeur ou mettre http://mondomaine.fr, qui ne limitera pas mes Google Maps à OHLSK.

Après avoir confirmé, copiez la longue chaîne de caractères qui suit : "Your key is :", fermez la sous-fenêtre et collez dans la case correspondante.

Ensuite vous avez deux e-mails à rentrer : le premier doit être le vôtre, le second peut être un noreply@mondomaine.fr

Cliquez sur Submit.

Si vous obtenez l'erreur suivante, référez vous à l'encart sur .htaccess ci-dessus.

Fatal error: Call to undefined function: str_ireplace() in /mondomaine/ohlsk/install.php  on line 16

Vous devriez arriver sur l'écran de login.

http://layar.mondomaine.fr/login.php

Connectez-vous avec admin/password. Cliquez tout de suite sur Change Password et créez un nouveau mot de passe.

Avant de commencer à placer des POIs, créez un nouveau calque dans l'interface Layar Publishing (cliquez sur Create layer).

Le nom n'a pas d'importance ; le type doit être 2D ; POI URL doit être http://layar.mondomaine.fr/webservice/layarpoints.php

Dans cet exemple, je vais développer un calque nommé "Egotrip" où je vais localiser des blogs qui parlent de la ville d'Amsterdam, où je vis.

Vos POIs auront forcément une catégorie filtrable ; c'est une caractéristique d'OHLSK.

Les catégories se créent dans Location / Location category http://layar.mondomaine.fr/poi_category_list.php

Cliquez sur Add (ajouter) ou Add Inline pour en créer quelques unes. Vous avez le droit de faire une catégorie unique en attendant, mais comme l'outil s'appuie fortement sur cette fonctionnalité, autant s'en servir !

Maintenant, vous avez besoin de faire en sorte qu'une sélection par radio-boutons s'affiche dans les filtres de Layar.

Retournez dans Layar Publishing éditer votre calque. Dans l'onglet "Filters", cliquez sur le bouton "Radiobutton list".

Vous devez maintenant reporter les informations que vous avez entrées dans OHLSK. Veillez à ce que le numéro soit bien identique et à ce qu'une des catégories soit sélectionnée par défaut.

Après l'effort, le réconfort ! Ajouter des POIs dans OHLSK est terriblement facile ! Les POIs se créent dans Location / Locations : http://layar.mondomaine.fr/poi_list.php

Cliquez sur "Add Location" et laissez la magie opérer.

Placer les POIs avec Google Maps, c'est vraiment presque de la triche :)

Notez la séparation de l'information en lignes, comme présenté ci-dessus.

À suivre...

_________________________________________________________

2 mai 2010 ~ Le tutorial s'arrête là pour le moment. Les guides pas à pas de PorPOIse et OHLSK sont disponibles dans cet autre topic, mais certaines informations sont déjà plus à jour !

À terme, tout le tutorial sera contenu dans ce post, afin de laisser les commentaires à la suite. Je bumperai juste à l'occasion des modifications avec la liste des chapitres ajoutés.

Modifié 2 mai 2010 par Lhal

[Nivek]

Bravo pour cette présentation détaillée ! :cool:

[Lhal]

2 mai 2010: première mise à jour avec la définition d'un POI et l'édition d'un calque simple avec OHLSK ! :cool:

[Louis62]

Et bien quel travail :D

[salimdz]

Bonjour,

Bravo, un bonne travaille.

svp la dernier photo qui manque, si tu peut l'ajoute

[Lhal]

Heuuu je sais pas si je l'ai encore.

Il y a celle-là, du premier tuto, qui montre l'interface et le "BIW" et ses lignes.

Depuis ce tuto (et le précédent), pas mal d'eau a coulé sous les ponts. On devrait voir une sortie quasi-simultanée de Layar 4.0 sur iPhone et Android d'ici début septembre, avec des changements assez importants dans les possibilités.

Par ailleurs le chantier du site communautaire francophone est en route, je le fais avec Hervé (hpsc.fr) et je pense qu'on va essayer d'y coller au moins un tutorial basé sur la nouvelle version de PorPOIse Et puis peut-être aussi Hoppala! et voir où en est OHSLK.

A plus :)

Anthony

[salimdz]

Heuuu je sais pas si je l'ai encore.

Il y a celle-là, du premier tuto, qui montre l'interface et le "BIW" et ses lignes.

Depuis ce tuto (et le précédent), pas mal d'eau a coulé sous les ponts. On devrait voir une sortie quasi-simultanée de Layar 4.0 sur iPhone et Android d'ici début septembre, avec des changements assez importants dans les possibilités.

Par ailleurs le chantier du site communautaire francophone est en route, je le fais avec Hervé (hpsc.fr) et je pense qu'on va essayer d'y coller au moins un tutorial basé sur la nouvelle version de PorPOIse Et puis peut-être aussi Hoppala! et voir où en est OHSLK.

A plus :)

Anthony

bonjour,

désolé pour le retard

merci pour votre réponse