Layar en France

[pierre]

Salut,

Je pense que vous connaissez tous Layar, cette application de "réalité augmentée".

Le principe est bien mais, utilisée en France, l'application perd beaucoup de son intérêt, car elle fait appel à des données américaines, wikipedia US notamment...

Est-ce que vous savez (avez trouvé) comment ajouter des "couches" françaises à Layar, par exemple Wikipedia France ?

Merci pour votre aide,

[Freewal]

Google Goggles fonctionne en France sous 1.6 et 2.0

Ça fait la même chose voir mieux.

[pierre]

Euh non.

Goggles te permet de faire une recherche visuelle mais c'est une recherche. Layar est un guide visuel.

[panda]

Il fait realite augmente goggles aussi avec wikipedia, restaurants...

[Jaktens]

Ici info de bouygues est dans le meme style de layar ca marche pas mal

[pierre]

Bon, je vais quand même attendre que quelqu'un réponde à la question... :rolleyes:

[tapzap]

Goggles et Layar c'est pas pareil. D'ailleurs j'utilise bien plus souvent Layar que Goggles car le premier est un vrai guide, c'est pas du tout pareil. C'est pas parce que c'est de la réalité augmentée que ça fait la même chose.

A première vue, je ne connais pas de "couche française", sorry :/

[philippo]

J'ai déjà cherché aussi, et je n'ai rien trouvé en français.

Au fait, quelqu'un sait-il si c'est compliqué de créer un "layers" ? Je tenterai bien une couche avec des infos touristiques sur certaines randonnées.

[fifi5987]

Bonjour tout le monde,

chez moi la boussole galère pas mal sur cette appli et je voulais savoir ce qu'il en était pour vous ?

Merci.

[Lhal]

Salut à tous,

je m'appelle Anthony, je suis étudiant et je fais mon stage de fin d'études chez Layar. Du coup je suis le seul français (mais pas le seul francophone) dans cette start-up d'Amsterdam.

Je me permets de déterrer ce topic pour faire un tutorial sur la création et l'édition d'un calque pour Layar.

Layar commence à avoir du contenu en France mais de ce que j'ai vu sur l'iPhone d'un copain ce week-end à Nantes, c'est pas encore ça. Il y a des devs qui commencent à être connus comme Hervé Pellarin, mais il y a de la place pour encore beaucoup de devs, d'autant que la

du Samsung Spica ne peut qu'encourager les français à essayer cette app !

Petite présentation

La pub de Samsung 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 (en gros) dessine quelque chose quand elle croise un code barre 2D, notre AR "sans marqueurs" se base sur une boussole et un GPS, plus un peu de 3D, pour mettre les informations au bon endroit.

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, en fait des ensemble de POIs (points d'intérêt = coordonnées GPS + informations).

Les calques sont développés par des développeurs indépendants. Il y a une grande diversité, 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.

Ingrédients du calque

Il vous faut : une idée, une base de données, un hébergement web, une clé de développeur.

Premièrement, la clé est facile à obtenir. C'est gratuit et on ne refuse personne.

Formulaire de demande

Ensuite, un hébergement web sera utile, parce qu'un calque est un peu comme une page web. Il existe des services payants spécialisés dans l'hébergement de calques, mais vous pouvez tout aussi bien vous contenter d'un hébergement PHP tout simple. Pour que le tutorial reste accessible au plus grand nombre je vais utiliser le projet libre PorPOIse (PHP).

Présentation des outils disponibles

L'installation de PorPOIse fait partie des ingrédients, on trouve les instructions originales ici, celles en français au chapitre suivant.

Pour les utilisateurs avancés : la finalité est de traiter des requêtes HTTP GET et de retourner du JSON, ceux qui sont à l'aise pour écrire leur propre webservice peuvent utiliser ce qu'ils veulent. J'utilise python et django pour ma part. Ce que le webservice doit recevoir et rendre est détaillé sur le wiki de Layar.

Enfin, vous avez besoin d'une base de données de lieux avec des coordonnées GPS. PorPOIse permet d'utiliser une base de données existante ou d'en créer une à zéro.

Je continuerai sans doute demain avec la recette, des screenshots pour égayer, les avantages et inconvénients.

Le temps de réfléchir à une idée !

/edit

Installer PorPOIse

Premièrement, télécharger et transférer les fichiers (par FTP ou autre) dans un répertoire non-accessible du web de votre hébergement PHP.

J'utilise OVH pour ma part, mais je crois me souvenir que chez free et 1&1 c'est pareil : dans la racine il y a un répertoire www/, il ne faut pas mettre le répertoire porpoise dedans ! Il y a des fichiers de configuration qui ne doivent pas être atteints, donc il faut mieux créer un répertoire porpoise/ à la racine et copier les fichiers dedans.

Ensuite, il faut rendre le contenu du répertoire web accessible quand même. Avec un serveur dédié ça se configure bien, avec un hébergement mutualisé comme le mien un peu moins, une astuce peut être de configurer un sous-domaine pour pointer dessus. Pour moi http://layar.mondomaine.fr pointera sur /porpoise/poi/

C'est le moment d'ouvrir

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

> Parse error: syntax error, unexpected '{' in /homez.65/mondomaine/porpoise/web/porpoise.php on line 36

Arf. PHP5.

Un petit fichier .htaccess contenant juste le code suivant fera l'affaire

SetEnv PHP_VER 5

Et cette fois-ci vous obtenez du JSON bien formaté pour Layar.

{"layer":"unspecified","errorCode":20,"errorString":"Missing parameter: userId","hotspots":[],"nextPageKey":null,"morePages":false}

C'est un peu cryptique pour le moment, on reviendra sur la signification des paramètres de cette ligne.

C'est le moment de configurer config.xml, qui se trouve à la racine de porpoise.

 12345
your key here

Remplissez votre id de développeur et votre clé ici. Si vous ne vous en souvenez plus, ces informations sont disponibles sur votre "profile" sur le site Layar Publishing

Dernière chose, générez un utilisateur / mot de passe en appelant http://layar.mondomaine.fr/dashboard/crypt.php?utilisateur=motdepasse

Vous obtenez une ligne du style

$_access["admin"] = '$1$L.30MlW9$5YfNEMQykamNTe83.hw0k0';

à coller à la fin du fichier /web/dashboard/users.inc.php

Bravo, vous pouvez vous connecter à http://layar.mondomaine.fr/dashboard avec votre utilisateur et mot de passe. L'installation de PorPOIse est terminée, on va pouvoir passer aux choses sérieuses.

Modifié 17 mars 2010 par Lhal

[philippo]

merci ! j'attends la suite avec impatience. :)

[philippo]

Apparent, on accepte pas tout le monde. Mon idée était de créer un calque sur les départ des randonnées dans les Vosges, avec informations touristiques sur différents sites à visiter au cour des promenades.

On m'a refusé la clef de développeur, mais probablement parce que mon anglais est plus qu'approximatif... :(

[Lhal]

Apparent, on accepte pas tout le monde. Mon idée était de créer un calque sur les départ des randonnées dans les Vosges, avec informations touristiques sur différents sites à visiter au cour des promenades.

On m'a refusé la clef de développeur, mais probablement parce que mon anglais est plus qu'approximatif... :(

Oh ? O.o

Peux-tu me donner une copie de ta demande en pm ? Pas de panique, ça va le faire !

Je continue l'écriture du tuto, à tout à l'heure.

[mimile]

Google Goggles fonctionne en France sous 1.6 et 2.0

Ça fait la même chose voir mieux.

le spica, pour lequel une pub met en avant layar, est en 1.5

[Lhal]

Les instructions d'installation de PorPOIse sont apparues à la fin de mon premier message, maintenant on attaque !

Créer un calque

Un calque, c'est pas beaucoup plus qu'une base de donnée de points d'intérêts (POIs).

PorPOIse utilise principalement deux types de stockage des POIs : une base de données MySQL ou un fichier XML.

Quoi utiliser ?

Pour quelqu'un qui a déjà entendu le mot MySQL avant ce tutorial, je dirais clairement MySQL. Pour les autres, on va y aller au XML.

Créer son premier calque avec du XML

Le XML, c'est un langage de programmation. Programmation 'light'. Un langage pour décrire un objet, avec une structure arborescente de "balises" qui commencent et terminent un élément. Ça tombe bien, nos POIs sont des objets : ils ont une latitude, une longitude, du texte... config.xml où vous avez rentré votre numéro d'utilisateur et votre clé peut servir d'exemple pour comprendre le principe.

Ouvrez config.xml et insérez les lignes suivantes sous la balise

 
example
XMLPOIConnector
example.xml

Pour renommer notre calque, il suffit de remplacer le mot entre et . Il doit être composé de chiffres et de lettres minuscules, sans espace et sans accents.

Je vais appeler le mien "paquadam" parce que je compte disséminer des oeufs de Pâques un peu partout à Amsterdam.

Mon fichier source sera paquadam.xml

Je vous recommande d'utiliser un autre fichier source, lenomdevotrecalque.xml

Maintenant, créez votre fichier source dans le répertoire de config.xml. Vous pouvez copier/coller example.xml.

Vous devez donner des droits de lecture et d'écriture à ce fichier, puisqu'il va être lu et modifié par PorPOIse.

Dans FileZilla, vous pouvez modifier les permissions avec un clic droit sur le fichier et cocher "lire" et "écrire" partout (ça devrait faire "666").

Pour la culture, vous pouvez ouvrir le fichier XML pour voir à quoi ça ressemble.

Ne vous en faites pas, on ne modifiera pas ça "à la main", mais c'est bon de savoir qu'on peut et que ça marche.

Vous pouvez passer maintenant à l'étape "Peupler son monde de POIs".

Créer son premier calque avec MySQL

Je couvrirai ça un autre jour. :cool:

Peupler son monde de POIs

Connectez-vous sur le dashboard : http://layar.mondomaine.fr/dashboard

Sous "Layers", un nom de calque est apparu. Cliquez dessus, quelques détails s'affichent : paramètres techniques issus de config.xml et une liste de POIs. Ceux qui ont copié example.xml pour créer leur calque devraient voir un "example POI" dans la liste. Allons-y.

Un formulaire s'ouvre avec beaucoup de champs, dont beaucoup sont vides.

Pour décrire à quoi servent ces champs, un screenshot s'impose :

C'est pas la version la plus récente, mais ça montre bien qu'un POI est décrit en cinq lignes (title, line2, line3, line4, attribution), qu'on peut mettre une image (imageURL), qu'on peut spécifier un type (ce sera utile pour mettre des icônes personnalisés plus tard), et bien sûr qu'il y a une latitude et une longitude.

Latitude et longitude sont ici des nombre à virgule qui correspondent aux degrés. Par exemple, la longitude de la gare centrale d'Amsterdam est 4.8994.

La dimension vaut 1,2,3 et est utilisée pour les objets en 3D. Pour l'instant on va s'en tenir à des points tout bètes donc on va garder dimension à 1 !

Vous pouvez remarquer une action. Les actions sont les boutons qu'on trouve dans Layar quand on ouvre les détails d'un POI. L'action donnée en exemple ouvre une page web : http://www.nowhere.com

Le "Label" est le texte affiché sur le bouton.

Soyez libres de modifier ce POI.

Pour trouver des coordonnées, un bon outil est Google Earth ou Google Maps avec la fonctionnalité de Labs qui permet de connaître les coordonnées d'un point précis de la carte.

On va maintenant créer un nouveau POI.

Cliquez "Back to nom du calque" puis "New POI"

Dimension : 1 Create !

Cliquez sur le nouveau

Vous retrouvez exactement le même formulaire que pour le POI d'exemple.

Je vais placer quelques oeufs, je reviens.

Modifié 19 mars 2010 par Lhal

[Lhal]

Quelque chose auquel il faut faire attention avec l'édition quand utilise XML, c'est les caractères spéciaux et les accents.

Vous remarquez peut-être qu'un antislash \ apparaît devant les accents et que quelques erreurs peuvent survenir avec les accents.

Pour les erreurs d'accents, assurez-vous que votre encodage d'affichage est UTF-8

Dans Firefox : Affichage / Encodage des caractères / Unicode (UTF-8)

Pour les antislashs, c'est pas grave. Seulement, quand vous sauvegardez plusieurs fois, ils ont tendance à se multiplier.

C'est Pâques -> C\'est Pâques -> C\\\'est Pâques -> C\\\\\\\'est Pâques

Pensez à les virer tous avant chaque sauvegarde.

Ces problèmes sont bien connus et disparaîtront sûrement dans les prochaines versions de PorPOIse.

Tester son calque

J'ai placé trois oeufs : deux à Dam Square et un face à la Gare Centrale.

C'est le moment d'aller tester tout ça sur Layar Publishing.

http://dev.layar.com/publishing/

Cliquez sur "Create Layer"

Remplissez le nom consciencieusement : il doit être identique à celui dans PorPOIse

Type Generic 2D va très bien

POI URL doit être l'adresse complète vers porpoise.php : http://layar.mondomaine.fr/porpoise.php

Choisissez votre pays. "International" ne doit être utilisé uniquement si tous les pays du monde ont des résultats. Les calques internationaux sont plutôt rares (Google Search, Twitter, etc.)

Cliquez sur Save and Customize

Vous pourrez revenir à la page de personnalisation à tout moment, mais prenez le temps de voir ce qu'il est possible de personnaliser dans les onglets.

Les "Bounding Boxes" du premier onglet avec Google Maps servent à définir que le calque est local à une zone déterminée. Il apparaîtra dans l'onglet Local des utilisateurs à l'intérieur des carrés bleus, pratique pour être facilement trouvable dans une ville (votre calque n'est pas encore publié, attention !).

Cliquez sur le lien "API Test Page" à gauche. Rentrez votre ID développeur, votre clé et le nom du calque.

Cliquez sur "Load Layer"

Un panneau de Google Maps avec une femme centrée probablement sur Amsterdam devrait apparaître. Déplacez-la ou rentrez des coordonnées sous le panneau, puis cliquez sur Load POIs.

Tah-Dah ! :cool:

Je vais me coucher, j'essayerai de continuer ce tuto bientôt pour essayer son calque dans Layar avec son portable !

Puis pour rajouter des icônes personnalisées (que les oeufs ressemblent à des oeufs !)

À bientôt !

[pierre]

Ah mon avis, ce tuto mérite une place mieux en valeur sur Frandroid.

[paingrille]

je confirme....génial ce tuto. Il faudrait en faire un post dédié plutot que celui ci noyé au milieu d'autress.

j'attends avec impatience la suite

[Lhal]

Le tutorial ne permet pas encore d'arriver là, mais je vous conseille de jeter un oeil au calque interactif de Pâques d'Hoppala

http://www.hoppala.eu/

Hoppala est un service payant créé par un développeur allemand qui offre un service tout compris d'hébergement et gestion des POIs (on clique dans Google Maps pour poser les POIs, comme pour le calque avec les oeufs sur la page d'accueil).

Marc me donne du challenge pour faire des oeufs encore plus beaux :/

Je promets pas le coup de Google Maps, par contre.

@pierre et paingrille : merci :)

Pour l'instant je vais le laisser là, quand il sera fini relu corrigé illustré je lui trouverai un meilleur endroit ;)

[philippo]

Ça me fait penser à un truc, cette recherche d'oeufs de pâque. Il existe un jeu, le geocaching (http://www.geocaching.com/), qui consiste à chercher des minis trésors sur toute la planète terre (1 million pour l'heure). Plusieurs appli pour android permettent de les trouver, entre autre l'excellent "c:geo" disponible gratuitement sur le market.

Un calque qui se grefferai sur la base de donnée serait du plus bel effet !

[Lhal]

Ça me fait penser à un truc, cette recherche d'oeufs de pâque. Il existe un jeu, le geocaching (http://www.geocaching.com/), qui consiste à chercher des minis trésors sur toute la planète terre (1 million pour l'heure). Plusieurs appli pour android permettent de les trouver, entre autre l'excellent "c:geo" disponible gratuitement sur le market.

Un calque qui se grefferai sur la base de donnée serait du plus bel effet !

Oui carrément ! Dans le même esprit, un hollandais a créé un calque interactif sur Foursquare (où on peut 'check-in' sur les POIs directement). Il n'y en a pas encore pour Gowalla mais ça va sans doute venir un jour.

[funk]

Le raleur va parler :

-j aime bien le concept de cette appli.les videos de presentation sont sympa;

Mais peut on avoir un tuto en français ? lorsque l on ouvre l appli,c est une usine a gaz russe ;)

[Lhal]

Oui, mon père m'a fait la même demande. :lol:

Il n'y a pas de manuel d'utilisation même en anglais. Ça ferait pas de mal des panneaux explicatifs au premier lancement, on y travaille :)

En attendant, faut se rappeler que le principe de Layar est celui d'un navigateur. Mais il n'y a pas de barre d'adresse ou de Google comme avec le web. En lançant l'application on retrouve quelques onglets : "Locaux", "Recommandés", "Populaires"

"Locaux" sont les calques qui ont été conçus spécialement pour la zone où vous vous trouvez. La zone est définie par les développeurs, c'est à eux qu'il faut faire confiance !

Par exemple, à Amsterdam, on trouve les permanences d'un parti politique dans un calque, un moteur de recherche dans un autre et deux calques touristiques. Il ne devrait pas y avoir grand chose dans l'onglet "Locaux" pour le moment, la fonctionnalité est récente.

Dans "Recommandés", ce sont des calques choisis à la main par quelqu'un de Layar. Les trois premiers sont internationaux, le reste est spécifique au pays. Beaucoup de choses imprononçables pour moi en Hollande ; en France il y en a quelques-uns.

"Populaires" sont les calques les plus demandés sur les sept derniers jours.

En cliquant sur n'importe quel calque de ces onglets, on passe en mode "Réalité Augmentée" (AR) et des "Points d'Intérêts" (POIs) sont affichés si trouvés. Il y a un petit bouton avec un engrenage pour augmenter la portée de la recherche si besoin.

Quand un calque est ouvert, il y a deux autres vues visibles : la carte et la liste.

La carte est là pour naviguer, la liste pour trouver rapidement un POI spécifique et le verrouiller pour le trouver dans la vue AR ou sur la carte.

Après, les utilisations sont propres à chaque calque. Un calque "oeufs de pâques" n'aura pas beaucoup d'interactivité sinon ouvrir les "oeufs" pour lire le message à l'intérieur ; un calque "twitter" peut être beaucoup plus interactif avec la possibilité de se connecter à son compte et de répondre aux tweets géolocalisés qui apparaissent autour.

> Les calques français, pas si nombreux, d'où mon tuto ;p

http://layar.com/catalog/country/fr/

Modifié 19 mars 2010 par Lhal

[philippo]

Ca y est, je me suis lancé !

J'ai galéré sur deux points en ce qui concerne l'instalation de PorPOIse, que je précise ici:

Premièrement, télécharger et transférer les fichiers (par FTP ou autre) dans un répertoire non-accessible du web de votre hébergement PHP.

J'utilise OVH pour ma part, mais je crois me souvenir que chez free et 1&1 c'est pareil : dans la racine il y a un répertoire www/, il ne faut pas mettre le répertoire porpoise dedans ! Il y a des fichiers de configuration qui ne doivent pas être atteints, donc il faut mieux créer un répertoire porpoise/ à la racine et copier les fichiers dedans.

Ensuite, il faut rendre le contenu du répertoire web accessible quand même. Avec un serveur dédié ça se configure bien, avec un hébergement mutualisé comme le mien un peu moins, une astuce peut être de configurer un sous-domaine pour pointer dessus. Pour moi http://layar.mondomaine.fr pointera sur /porpoise/poi/

Il faut faire pointer sur "/porpoise/web/"

C'est le moment d'ouvrir

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

Il faut ouvrir : http://layar.mondomaine.fr/web/porpoise.php

Pour générer le mot de passe, lancer

http://layar.mondomaine.fr/dashboard/crypt.php?utilisateur=motdepasse

Dans ce cas, c'est "utilisateur" le login et "motdepasse", le mot de passe. Ca a l'air évident, mais plusieurs personnes ont galèré sur cette ligne.

en espérant que ces infos pourront être utiles aux novices comme moi... :)

encore merci à Lhal pour son tuto.

[Lhal]

Oh oui merci pour les précisions.

J'ai écrit sur le newsgroup de porpoise ce weekend à propos de l'histoire des accents, j'ai pas encore pris le temps de tester les solutions qui résoudraient le problème, mais on peut s'attendre à ce que ce soit réparé bientôt.

Si j'ai le temps cette semaine je continuerai un peu pour expliquer comment gérer les bases de données existantes et comment utiliser MySQL.

C'est pas beaucoup plus dur que résoudre un sudoku, mais je ne sais pas encore par quel bout commencer pour expliquer la transformation de la structure d'un fichier XML avec XSL/XSLT. Je laisse ici le lien wikipédia pour ceux d'entre vous qui seraient tentés.

http://fr.wikipedia.org/wiki/XSL