johnny-five : robotique et iot en javascript
TRANSCRIPT
Johnny-FiveRobotique et IoT en JavaScript
Sébastien Combéfis
Mercredi 4 mai 2016
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative CommonsAttribution – Pas d’Utilisation Commerciale – Pas de Modification 4.0 International.
Contexte
Programmation de cartes embarquées
Arduino, BeagleBone Black, RaspberryPi...
Utilisation d’une librairie commune à toutes les cartes
JavaScript/Node.js à l’aide de la librairie Johnny-Five
Développement de robots ou d’objets connectés
Connaissances de la Robotics et de l’Internet of Things (IoT)
3
Différentes cartes
Processeur simple, performant ou spécialisé
Micro-contrôleur, processeur ARM, GPU, RTU...
Quantité de mémoire disponible
Mémoire centrale (RAM) et disque de stockage (SD-Card...)
Connectivité avec le monde extérieur
Port USB, connexion Ethernet, WiFi, Bluetooth...
4
Javascript
HTML
Description d’un document à l’aide de l’HTML
HyperText Markup Language, dernière version 5.0 en 2014
Langage de description à balisage permettant des liens
Délimitation de portions de documents à l’aide de balises
Plusieurs autres roles
Information sémantique par rapport au contenu
Information de mise en forme du contenu
Inclusion de ressources multimédia (image, formulaire...)
6
Document HTML
L’élément racine d’un document HTML est html
Méta-informations sur le document dans l’élément head
Contenu du document dans l’élément body
1 <! DOCTYPE html >23 <html >4 <head >5 <title > Programmer un robot </ title >6 </head >78 <body >9 <p>Un seul tuyau : Johnny -Five !</p>
10 </body >11 </html >
7
JavaScript (JS)
Langage de script de haut niveau, non typé et interprété
Le JavaScript est exécuté côté client, par le browser
Langage orientée objet à prototype
Bref historique des différentes versions
Créé en 1995 par Brendan Eich (pour le compte de Netscape)
Adoption d’un standard ECMAScript en juin 1997
Troisième version d’ECMAScript en 1999 (JavaScript 1.5)
8
Lien avec HTML
Deux manières d’attacher du code JavaScript
Avec l’élément script
Dans un fichier séparé, avec l’extension .js
Code depuis des fichiers externes avec l’élément script
<script src="myscript.js" type="text/javascript"></script>
Exécution du code au moment du chargement
Peut agit sur le contenu HTML déjà chargé
9
Affichage
Programme qui affiche un message de bienvenue
Code exécuté au moment où celui-ci est chargé par le navigateur
Inclusion du script à l’endroit où on souhaite l’exécuter
1 window . alert (’Hello Marcin !’);
1 <p> Bienvenue sur ce site !</p>23 <script src=" helloworld .js" type ="text/ javascript " ></script >
10
Affichage
Programme qui affiche un message de bienvenue
Code exécuté au moment où celui-ci est chargé par le navigateur
Inclusion du script à l’endroit où on souhaite l’exécuter
1 window . alert (’Hello Marcin !’);
1 <p> Bienvenue sur ce site !</p>23 <script src=" helloworld .js" type ="text/ javascript " ></script >
10
Variable et opérations
Déclaration d’une variable avec le mot réservé var
Les variables possèdent un type dynamique
Données de type nombre entier, flottant, booléen...
Une variable peut changer de type en cours d’exécution
1 var max = 20;2 var score = 7.5;3 var succeeded = score >= 10;4 var mean = score / max * 100;56 window . alert ( succeeded ); // Affiche false7 window . alert (’Moyenne de ’ + mean); // Affiche Moyenne de 37.5
11
Instruction if-else
Exécution conditionnelle de blocs avec if-else
Un bloc de code est délimité avec des accolades
Bloc else optionnel si pas de cas alternatif
1 var max = 20;2 var score = 7.5;3 var succeeded = score >= 10;4 var mean = score / max * 100;56 if ( succeeded ) {7 window . alert (’Réussi avec une moyenne de ’ + mean + ’%’);8 } else {9 window . alert (’Dommage , raté :-(’);
10 }
12
Instruction if-else/else if
Représentation de plusieurs alternatives avec if-else/else if
Plusieurs cas d’exécution possibles et exclusifs
1 var max = 20;2 var score = 7.5;3 var mean = score / max * 100;45 if ( score >= 10) {6 window . alert (’Réussi avec une moyenne de ’ + mean + ’%’);7 } else if ( score >= 8) {8 window . alert (’Oh zut , pas loin !’);9 } else {
10 window . alert (’Dommage , raté :-(’);11 }
13
Instruction switch
Exécution conditionnelle de blocs avec switch
Saut du flux d’exécution en fonction d’une valeur
Sortie de l’instruction switch avec l’instruction break
Cas par défaut représenté avec default
1 var trafficlight = ’red ’;23 switch ( trafficlight ) {4 case ’red ’:5 window . alert (’Passez pas !’);6 break ;78 case ’orange ’:9 window . alert (’Prudence !’)
10 break ;1112 case ’green ’:13 window . alert (’On y va !’)14 break ;1516 default :17 window . alert (’Euh ... erreur !’)18 }
14
Valeur undefined
Une variable uniquement déclarée possède la valeur undefined
Possible de faire un test pour savoir si elle a une valeur
Opérations avec undefined provoque une erreur
Notamment pour les opérations arithmétiques
1 var total ;23 if ( total == undefined ) {4 window . alert (’Variable total non définie !’);5 } else {6 window . alert (’Le total est de ’ + total );7 }
15
Égalités de valeur
JavaScript est un langage non typé statiquement
Chaque variable possède un type dynamique
Comparaison des valeurs et/ou des types des données
Utilisation des opérateurs == et ===
Affichage du type d’une variable avec typeof
1 var a = 42;2 var b = "42";34 window . alert ( typeof (a)); // Affiche number5 window . alert ( typeof (b)); // Affiche string67 window . alert (a == b); // Affiche true8 window . alert (a === b); // Affiche false
16
Modification de la page (1)
On peut accéder aux éléments de la page pour les modifier
Avec la fonction document.getElementById
On modifie ensuite le contenu avec la propriété innerHTML
1 <p> Bienvenue sur ce site !</p><p id=" result " ></p>
1 var max = 20;2 var score = 7.5;3 var succeeded = score >= 10;4 var mean = score / max * 100;56 var p = document . getElementById (’result ’);7 if ( succeeded ) {8 p. innerHTML = ’Réussi avec une moyenne de ’ + mean + ’%’;9 } else {
10 p. innerHTML = ’Dommage , raté :-(’;11 }
17
Modification de la page (1)
On peut accéder aux éléments de la page pour les modifier
Avec la fonction document.getElementById
On modifie ensuite le contenu avec la propriété innerHTML
1 <p> Bienvenue sur ce site !</p><p id=" result " ></p>
1 var max = 20;2 var score = 7.5;3 var succeeded = score >= 10;4 var mean = score / max * 100;56 var p = document . getElementById (’result ’);7 if ( succeeded ) {8 p. innerHTML = ’Réussi avec une moyenne de ’ + mean + ’%’;9 } else {
10 p. innerHTML = ’Dommage , raté :-(’;11 }
17
Modification de la page (2)
On peut modifier les éléments de la page
Propriétés et fonctions d’accès aux éléments du document
1 <p id=" intro ">Bienvenue sur ce site !</p>
1 var p = document . getElementById (’intro ’);2 p. style . fontSize = ’35 ’;3 p. style . fontFamily = ’Arial ’;4 p. style . color = ’# ff00ff ’;
18
Modification de la page (2)
On peut modifier les éléments de la page
Propriétés et fonctions d’accès aux éléments du document
1 <p id=" intro ">Bienvenue sur ce site !</p>
1 var p = document . getElementById (’intro ’);2 p. style . fontSize = ’35 ’;3 p. style . fontFamily = ’Arial ’;4 p. style . color = ’# ff00ff ’;
18
Instruction while
Répéter un bloc tant qu’une condition est vraie avec while
Attention aux boucles infinies si la condition est toujours vraie
Construction du résultat avec une chaine de caractères
Génération de contenu HTML depuis le JavaScript
1 var result = ’’;2 var i = 1;34 while (i <= 10) {5 result += i + ’ x 2 = <b>’ + (i * 2) + ’ </b><br />’;6 i += 1;7 }8 document . getElementById (’result ’). innerHTML = result ;
19
Instruction while
Répéter un bloc tant qu’une condition est vraie avec while
Attention aux boucles infinies si la condition est toujours vraie
Construction du résultat avec une chaine de caractères
Génération de contenu HTML depuis le JavaScript
1 var result = ’’;2 var i = 1;34 while (i <= 10) {5 result += i + ’ x 2 = <b>’ + (i * 2) + ’ </b><br />’;6 i += 1;7 }8 document . getElementById (’result ’). innerHTML = result ;
19
Instruction for
Répéter un bloc un certain nombre de fois avec for
Attention aux boucles infinies si la condition est toujours vraie
Équivalence entre boucle while et for
1 var result = ’’;23 for (var i = 1; i <= 10; i++) {4 result += i + ’ x 2 = <b>’ + (i * 2) + ’ </b><br />’;5 }6 document . getElementById (’result ’). innerHTML = result ;
20
Fonction
Une fonction rassemble une séquence d’instructions
Reçoit un nom, une liste de paramètres et renvoie une valeur
Une fonction est stockée dans une variable
Deux façons différentes de déclarer une fonction
1 function add(a, b) {2 return a + b;3 }45 var sub = function (a, b) {6 return a + b;7 }89 window . alert (add (40 , 2));
10 window . alert (sub (2, 40));
21
Programmation fonctionnelle (1)
Une fonction peut recevoir une fonction en paramètre
Cette fonction peut ensuite être appelée (callback)
Déclaration préalable de la fonction ou fonction anonyme
Fonction déclarée sans l’avoir nommée
1 function compute (a, b, f) {2 f(a + b);3 }45 var show = function ( value ) {6 window . alert (’Valeur : ’ + value );7 }89 compute (40 , 2, show);
22
Programmation fonctionnelle (2)
Une fonction peut recevoir une fonction en paramètre
Cette fonction peut ensuite être appelée (callback)
Déclaration préalable de la fonction ou fonction anonyme
Fonction déclarée sans l’avoir nommée
1 function compute (a, b, f) {2 f(a + b);3 }45 compute (40 , 2, function ( value ) {6 window . alert (’Valeur : ’ + value );7 });
23
Portée des variables
Portée d’une variable en fonction de son endroit de déclaration
Une variable déclarée dans une fonction est locale
Variable globale déclarée en dehors de toute fonction
Variable sans déclaration automatiquement globale
1 function init () {2 var x = 12;3 s = ’Hello ’;4 }56 init ();7 window . alert (s); // Hello8 window . alert (x); // Uncaught ReferenceError : x is not defined
24
Réaction à un évènement
Association d’une action à un élément (une fonction)
Par exemple, l’évènement onclick
1 <a id=" dontclick ">Ne me cliquez pas !</p>
1 var cnt = 0;2 link = document . getElementById (’dontclick ’);3 link. onclick = function () {4 cnt += 1;5 window . alert ("Pas cliquer que c’était mis ... (déjà " + cnt + "
clics )");6 }
25
Réaction à un évènement
Association d’une action à un élément (une fonction)
Par exemple, l’évènement onclick
1 <a id=" dontclick ">Ne me cliquez pas !</p>
1 var cnt = 0;2 link = document . getElementById (’dontclick ’);3 link. onclick = function () {4 cnt += 1;5 window . alert ("Pas cliquer que c’était mis ... (déjà " + cnt + "
clics )");6 }
25
Types d’évènement
Évènements liés aux éléments de la page ou au browser
Les évènements sont traités séquentiellement
Évènement Description
onchange Changement d’un élément HTMLonclick Clic sur un élément HTMLoncontextmenu Un clic droit a été fait sur un élément HTMLonmouseover La souris rentre sur un élément HTMLonmouseout La souris sort d’un élément HTMLonkeydown Une touche du clavier a été enfoncéeonsubmit Un formulaire est en train d’être soumisoncopy Le contenu d’un élément a été copié dans le presse-papier
26
JavaScript Object Notation (JSON) (1)
Permet de représenter des objets
Notation issue de la notation des objets Javascript
Ensemble de paires (étiquette, valeur)
Étiquette entre guillemets, deux-points et valeur
Valeurs sont soit une simple valeur, soit une liste de valeurs
Liste de valeurs délimitée par des crochets []
27
JavaScript Object Notation (JSON) (2)
1 {2 "name": " Contacts téléphoniques de Sébastien Combéfis ",3 " contacts ": [4 {5 " firstname ": "Tom",6 " lastname ": " Selfteslague ",7 " phone ": 10318 },9 {
10 " firstname ": " Damien ",11 " lastname ": "Van Eauve ",12 " phone ": 203913 },14 {15 " firstname ": " Sébastien ",16 " lastname ": "du Gradeau de l’Entremanche ",17 " phone ": 102318 }19 ]20 }
28
Objet
Un objet est caractérisé par deux éléments
Un objet possède des propriétés
On peut appeler des méthodes d’un objet
Définition d’un nouvel objet comme un document JSON
1 var person = {2 firstname : ’Sébastien ’,3 lastname : ’Combéfis ’,4 getname : function () {5 return this . firstname + ’ ’ + this . lastname ;6 }7 };89 window . alert ( person . firstname );
10 window . alert ( person [’firstname ’]);11 window . alert ( person . getname ());
29
Types de donnée
Plusieurs types de données existants en JavaScript
Types dynamiques pouvant changer pour une même variable
1 var size = 12; // number2 var price = 28.5; // number3 var flag = false ; // boolean4 var sentence = ’Coucou ’; // string56 var data = [12 , 9, 4.5 , 0]; // object78 var person = { // object9 firstname : ’Sébastien ’,
10 lastname : ’Combéfis ’11 };1213 var sayhello = function () { // function14 window . alert (’Hello World !’);15 }
30
Mode strict
Exécution du code en mode strict avec ’use strict’;
Par exemple, pas d’utilisation de variables non déclarée
Directive peut être utilisée uniquement au sein d’une fonction
Limitation de la portée de la vérification
1 ’use strict ’;23 x = 11;4 window . alert (x);
Uncaught ReferenceError : result is not defined ( anonymous function) @ test.htm :8
31
Node.js
Framework Node.js
Environnement d’exécution du JavaScript
Basé sur le moteur JavaScript V8 de Chrome
Orienté évènement et avec entrées-sorties non bloquantes
Moteur léger et efficace
Accompagné du gestionnaire de librairies npm
Plus gros écosystème de librairies open-source au monde
33
Fonctionnalités
Asynchrone (non bloquant) et dirigé par les évènements
L’appel d’une API n’attend jamais son résultat
Exécution très rapide des programmes
Grâce à l’utilisation du moteur V8 de Chrome
Unique thread d’exécution pour gérer tous les évènements
Contrairement à un serveur classique multi-threadé
Aucune utilisation de buffers pour les données
Les données sont générées par blocs
34
Hello World ! (1)
Affichage à l’écran à l’aide de l’objet console
Utilisation de la fonction log
Exécution d’un fichier JS à l’aide de la commande node
1 console .log(’Hello World !’)
$ node helloworld .jsHello World !
35
Structure
Application Node.js constituée de trois parties principales
Importation de modules avec require
Création du serveur qui écoute les requêtes des clients
Lecture des requêtes et envoi des réponses
Gestionnaire de requêtes représenté par une fonction
Reçoit une request et génère une response
36
Hello World ! (2)
Création d’un serveur HTTP à l’aide du module http
Appel de la fonction createServer
Génération de la réponse en plusieurs parties
Entête avec writeHead et corps avec end
1 var http = require (’http ’);23 var server = http. createServer ( function (request , response ) {4 response . writeHead (’200 ’, {5 ’Content -Type ’: ’text/ plain ’6 });7 response .end(’Hello World !\n’);8 });9 server . listen (8080) ;
1011 console .log(’Server running at http ://127.0.0.1:8080 ’)
37
Environnement REPL
Node.js offre un environnement Read Eval Print Loop (REPL)
Mode interactif comme dans une console
Plusieurs étapes dans un cycle
Read lit et parse ce que l’utilisateur a tapéEval prend et évalue la structure de donnéesPrint affiche le résultatLoop boucle et recommence
$ node> x = 1010> console .log(x)10undefined
38
Johnny-Five
Hello LED (1)
LED rouge reliée à l’entrée digitale numéro 13
Clignotement avec une période de 100ms
40
Hello LED (2)
Création de la board avec l’objet five.Board
Possibilité de fournir des paramètres pour configurer la carte
Ajout d’un gestionnaire évènement avec la fonction on
Nom de l’évènement et fonction de gestion en paramètres
1 var five = require ("johnny -five"),2 board = new five . Board ();34 board .on(" ready ", function () {5 var led = new five .Led (13);67 led. strobe ();8 });
41
BeagleBone Hello LED
Configuration de la carte pour mode BeagleBone
Via une option en construisant l’objet Board
Attention à la façon de nommer les pins qui dépend des cartes
Différentes méthodes disponibles pour les LEDs
1 var five = require ("johnny -five");2 var BeagleBone = require (" beaglebone -io");3 var board = new five . Board ({4 io: new BeagleBone ()5 });67 board .on(" ready ", function () {8 var led = new five .Led(’P9_14 ’);9
10 led. blink (500) ;11 });
42
Entrée/Sortie numérique
Pin GPIO de type numérique prend deux valeurs possibles
En alternant la tension entre 0V et 3.3V
Représentation d’une pin avec un objet Pin
Il faut spécifier le numéro de la pin à utiliser
Utilisation de fonctions pour agir sur les pins
Fonction write permet d’écrire dans la pin
1 board .on(" ready ", function () {2 var pin = new five .Pin (13);3 pin. write (1);4 });
43
Exécution asynchrone
Un appel d’une fonction retourne directement
Callback pour exécuter du code après l’exécution d’une fonction
Interrogation de la valeur d’une pin avec query
Callback appelé lorsque la valeur est disponible
1 board .on(" ready ", function () {2 var pin = new five .Pin (13);34 pin.high ();56 this .wait (1000 , function () {7 pin. query ( function ( state ) {8 if ( state . state == 1) {9 pin.low ();
10 }11 });12 })13 });
44
Sortie analogique
Pin PWM de type analogique prend une valeur entière
Une valeur comprise entre 0V et 3.3V
Représentation d’une pin avec un objet Pin
Il faut spécifier le numéro de la pin à utiliser
1 board .on(" ready ", function () {2 var led = new five .Led (11);34 led.on ();5 led.fade (0, 2000) ;6 });
45
Fonction de haut niveau
Fonction au niveau de la carte (objet Board)
Configuration et utilisation directe des pins
1 board .on(" ready ", function () {2 this . pinMode (13 , five .Pin. OUTPUT );34 this . digitalWrite (13 , 1);56 this .wait (10000 , function () {7 this . digitalWrite (13 , 0);8 });9 });
46
Exemple avancé (1)
47
Exemple avancé (2)
Utilisation de l’objet Sensor
Évènement de type data lorsque la valeur change
1 var five = require ("johnny -five"),2 board = new five . Board ();34 board .on(" ready ", function () {5 var slider = new five . Sensor ("A0");6 var led = new five .Led (11);78 slider . scale ([0 , 255]) .on("data", function () {9 led. brightness ( this . value );
10 });11 });
48
Créditshttps://www.flickr.com/photos/vfsdigitaldesign/5396691102https://www.flickr.com/photos/nathansmith/4704268314https://www.flickr.com/photos/12184548@N02/1428798524https://www.flickr.com/photos/muchadoaboutnothing/2961334285
49