Comprendre les bases de Javascript et QiMessaging sur Pepper

javascript sur pepper

La documentation disponible pour le système 2.4 sur le site Softbank Aldebaran donne les bases rapides de la programmation de Pepper avec Javascript. Elle est un peu rapide pour les développeurs qui ne maîtrisent pas toutes les subtilités de Javascript. Aussi ce tutoriel vise à décomposer un peu plus les différentes étapes, point par point, pour construire votre première page web capable de dialoguer avec le système de Pepper.

Il convient de savoir que tout se fait à l’aide d’une librairie ‘sandwich’ permettant au navigateur de la tablette de dialoguer, de façon bilatérale, avec le système du robot, ces 2 systèmes étant relativement indépendants par ailleurs. La jonction de fait à l’aide d’une bibliothèque de functions javascript appelée: QiMessaging. Elle permet d’appeler les fonctions de base NAOqi de façon assez simple. Ce n’est pas le but de cet article (un autre devrait suivre) mais il est possible de positionner le code html/javascript sur un serveur externe au robot. Il faudra alors déporter les librairies QiMessaging.js sur le disque du serveur hébergeur.

Sur Pepper avec la version 2.4  de NAOQi, les librairies QiMessaning.js sont déjà installées sur le serveur web du robot dans le répertoire /libs/qimessaging/2/qimessaging.js pour la version 2. Il y a aussi une version /libs/qimessaging/1.0/qimessaging.js dans les repertoires. Nous n’en parlerons pas dans cet article qui ne traite que de 2.4.

Le principe de programmation javascript consiste à ouvrir une session de communication entre code javascript et NAOQi. Une fois la session correctement ouverte, il est possible d’appeler des services NAOQi.

Exemple d’ouverture de session avec QiMessaging

cession open

Exemple de requête vers un service NAOqi

cession open 2

Dans cet exemple nous appelons ALTextToSpeech et sa fonction tts.say()

 

Concevoir le code HTML complet

Le principe de la conception du code HTLM est le suivant

  • Développer le code HTML selon la méthode classique, mais intégrer le lien javascript QiMessaging dans le header.
    <head>
    <meta http-equiv= »Content-Type » content= »text/html; charset=utf-8″/>
    <script src= »/libs/qimessaging/2/qimessaging.js »></script>
    </script>
    </head>
  • Ecrire le code html éveentuel à afficher sur la tablette tactile du robot. On peut, bien sûr, écrire du code de débugage pour suivre les différentes étapes d’exécution du javascript. Ceci est possible avec des  console.log(« texte à ecrire »); ou des  document.write(‘<br>Texte à écrire’);
  • Il faut tout d’abord intégrer le code Javascript d’ouverture de session (voir plus hait).
  • Lorsque ce code est intégré, il convient alors d’y insérer le code utile sous forme d’appel de service. Ce code est bien sûr intégrer à l’intérieur du code exécuté quand la cession est ouverte.

cession open3

Le code HTML/Javascript étant confectionné et terminé, il est possible de le tester depuis CHOREGRAPHE.

Utilisation de Chorégraphe pour test du code javascript

Il est possible d’utiliser Choregraphe pour tester le code javascript. Il convient de créer une nouvelle application et de suivre les étapes suivantes

  1. Créer le nouveau projet et le nommer
  2. Créer un répertoire html et y importer le index.html venant d’être développé avec l’éditeur
  3. Déplacer le fichier importé dans le répertoire html
  4. Aller dans les box, déplacer tablet>showApp sur l’espace de travail
  5. Placer un lien vers la boite showapp puis de showApp vers tablet>showWebview
  6. Presser F5 pour uploader le code et démarrer le test

chore-8

La liste des étapes depuis chorégraphe dans cette vidéo

Télécharger le code source de cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*