Blockly Arduino : l’esprit d’Ardublock, sans ses inconvénients !

Mise à jour du 07/09/2016

Cet article date d’il y a huit mois déjà. Il a été vu près de 6 000 fois déjà !
Depuis, Blockly Arduino a bien évolué, grâce notamment au travail remarquable de Sébastien Canet. Même cet été, il n’a pas compté ses heures pour que nous puissions commencer cette année scolaire avec un outil adapté à nos besoins. Il a mis en ligne la version 2.1 le 31/08/2016. Parmi les nouveautés, il y a la possibilité d’uploader en local le programme généré par Blockly Arduino. Le plugin Codebender n’est plus nécessaire.

Pour cette année scolaire 2016/2017 j’ai pour objectif de créer des tutoriels et des exemples utilisables en classe, que je ne manquerai pas de publier dans ce blog.
Je remercie d’avance tous ceux qui accepterons de partager leur travail sur Blockly Arduino pour aider tous ceux qui cherchent de l’aide pour utiliser cet outil. Sans le partage, Blockly Arduino n’existerait pas.
Vous pouvez me contacter à l’adresse suivante :
daniel.pers@ac-poitiers.fr

L’article qui suit n’a pas encore été mis à jour pour tenir compte des évolutions de Blockly Arduino. Merci de votre compréhension.

 

1. Une nouvelle interface graphique développée par Google

Le MIT et Google ont développé Scratch et AppInventor qui ont révolutionné l’enseignement des bases de la programmation. Ces logiciels étaient basés initialement sur une interface graphique très novatrice appelée Openblocs où on assemble des blocs pour générer du code. Openblocs est une application Java qui peut poser problème. Elle est utilisé aussi par Ardublock.

Google a ensuite développé Blockly, sorti en 2013, qui est un outil logiciel avec là encore une interface graphique pour programmer à partir de blocs et générer automatiquement du code. Blockly a été conçu pour être facilement intégrable à des logiciels pédagogiques de programmation graphique. Blockly est aussi conçu pour pouvoir être très configurable et s’adapter aux besoins pédagogiques : on peut facilement créer ses propres blocs, et définir le code qui doit être généré. Blockly est en javascript, il peut donc facilement être intégré à une application web multiplate-forme comme AppInventor 2 (en 2013).

Blockly est libre et est à l’origine aujourd’hui de nombreux logiciels de programmation graphique. Blockly est intéressant pour l’enseignement de l’algorithmie en Mathématiques conformément aux nouveaux programmes du collège comme le montre Patrick Raffinat dans son article : http://revue.sesamath.net/spip.php?article811

Pour programmer des cartes électroniques Arduino, j’utilise Ardublock depuis 2013 car c’est le logiciel qui correspondait le mieux à mes besoins en Technologie au collège mais aussi au lycée en Sciences de l’Ingénieur. Malheureusement Ardublock intègre Openblocs et non Blockly.

 

2. Intégration de Blocly avec Arduino par des enseignants

Parmi les nombreuses applications pédagogiques de Blockly, il y a Blockly Arduino développé depuis 2014 par Sébastien Canet, professeur formateur de Technologie de l’académie de Nantes. Blockly Arduino permet donc de programmer graphiquement avec des blocs et de générer du code pour Arduino, en langage C. La compilation du langage C en code exécutable par une carte Arduino est réalisée par le logiciel Arduino ou par un plugin du navigateur (CodeBender). La version actuelle de Blockly Arduino est opérationnelle et est très intéressante sur le plan pédagogique. Elle apporte de nombreux avantages par rapport à Ardublock, dont le développeur s’est inspiré.

Blockly Arduino est une application web qui ne nécessite donc aucune installation (pas besoin de droits administrateur non plus) et qui fonctionne sur toutes les plate-formes (PC, Mac, Androïd, …).

Exemple de programme simple avec Blockly Arduino utilisant un capteur de collision (logique), un capteur de vide (optique et analogique) , et un servomoteur à rotation continue. L’affichage se fait sur l’écran du PC via le câble USB.

Capteur collision ou vide + Servo rotation continue 150216.zip (version du 15/02/16)

Exemple de programme écrit avec Blockly Arduino. Il utilise un capteur de collision (logique), un capteur de vide (optique et analogique) , et un servomoteur à rotation continue (Source : Collège Jean Macé)

Exemple de programme écrit avec Blockly Arduino. Il utilise un capteur de collision (logique), un capteur de vide (optique et analogique) , et un servomoteur à rotation continue (Source : Collège Jean Macé)

5) Capteur colision ou vide + Servo rot continue 120515 (complet)

Le même programme fait avec Ardublock (Source : Collège Jean Macé)

Blockly Arduino est accessible à partir du lien suivant qu’il faut ouvrir avec Mozila Firefox (32 ou 64 bits) ou Google Chrome (32 bits uniquement) par exemple :

http://www.blockly.technologiescollege.fr/blockly@rduino/?lang=fr
Lien vers un tutoriel

Il est possible également de télécharger le site web de Blockly Arduino (moins de 10Mo) et de le lancer à partir du fichier index.html

Lien vers le logiciel pour un fonctionnement en local :

https://github.com/technologiescollege/Blockly-at-rduino

L’interface graphique de Blockly Arduino :

Menus, boîte à outils et espace de travail de Blockly Arduino (Source : Collège Jean Macé)

Menus (à gauche), boîte à outils (avec blocs « fonctions » ouverts, avec les fonctions utilisées) et l’espace de travail de Blockly Arduino avec un exemple de programme utilisant un capteur analogique et deux moteurs à courant continu. (Source : Collège Jean Macé)

Code Arduino généré par Blockly Arduino (Source : collège Jean Macé)

Code Arduino généré par Blockly Arduino (Source : collège Jean Macé)

Ne pas confondre Blockly Arduino avec Blockly Duino qui est une ancienne version.
Elle a inspiré le développement d’Ardublockly, qui est encore en version béta, mais qui devrait être intéressant également.
Voir une demo en ligne de l’interface d’Ardublockly ici : http://carlosperate.github.io/ardublockly/index.html
Pour une installation fonctionnelle (partiellement car en cours de développement) :
https://github.com/carlosperate/ardublockly
Mon premier essai d’Ardublockly m’a permis de voir notamment une fonction très intéressante, la possibilité de copier une partie d’un programme (sous forme de blocs) et de la coller dans le programme en cours. Cette fonction n’est pas visible dans la démo en ligne qui n’intègre pas les menus.

3. Principaux avantages de Blockly Arduino (suite à mes premiers essais)

– Application Web qui ne nécessite aucune installation et sans bugs (ceux liés à Java étaient pénibles avec Ardublock). Utilisable sur tablettes et smartphones (multiplate-forme).

– Interface graphique performante qui s’utilise à peu près comme Openblocs d’Ardublock, mais avec des possibilités en plus : cela peut parfois rallonger un petit peu la prise en main pour l’élève. Elle est souvent plus souple d’emploi et plus agréable : par exemple on peut utiliser des espaces dans le nom des variables ou des fonctions, des blocs sont nommés de manière automatique avec les blocs existants (variables, fonctions, …), le renommage d’une variable s’applique automatiquement à tout le programme, …

Exemple de menu déroulant avec les variables existantes (Source : Collège Jean Macé)

Exemple de menu déroulant avec les variables existantes (Source : Collège Jean Macé)

– Bien traduit en français

– Un des plus gros avantage, me semble-t-il, est la possibilité pour l’élève de compléter son programme en cours de mise au point par un autre programme fourni par le professeur (sauvegardé en xml). Cela permet de donner aux élèves des briques logicielles (et pas seulement des blocs) pour ajouter progressivement des fonctionnalités : utilisation d’un afficheur graphique, d’un module MP3, … Cela n’était pas possible avec Ardublock (il fallait ressaisir à partir d’un exemple, ou partir d’un programme complet donné par le professeur).

Possibilité de fusionner le programme en cours avec un autre programme, un exemple donné avec une nouvelle fonctionnalité, la lecture d'un fichier mp3 par exemple (Source : Collège Jean Macé)

Quand on charge un programme on a la possibilité de fusionner le programme en cours avec le programme chargé. Cela permet de charger un exemple donné avec une nouvelle fonctionnalité, la lecture d’un fichier mp3 par exemple (Source : Collège Jean Macé)

 

Possibilité d'enregistrer le programme en cours et d'en ouvrir un autre sans forcément écraser le programme en cours (Source : collège Jean Macé)

Possibilité d’enregistrer le programme en cours et d’en ouvrir un autre sans forcément écraser le programme en cours (Source : collège Jean Macé)

– Les sous-programmes s’appellent ici des fonctions car ils permettent d’ajouter facilement des paramètres (des entrées).

– Un autre avantage énorme de Blockly Arduino, c’est la possibilité de modifier facilement les blocs existants ou d’en créer de nouveaux que l’on adaptent à ses besoins. Ce type de modification ou de création est accessible à un professeur sans connaissances particulières en javascript (c’est mon cas). Pas besoin d’outils complexes : Notepad++ et un navigateur suffisent, alors que pour Ardublock la démarche est longue et très complexe (il faut un kit de développement Java). La démarche pour Blocly Arduino est assez bien documentée et Sébastien Canet (professeur de académie de Nantes) apporte un support efficace avec une grande réactivité (merci à lui). De plus, il n’hésite pas à intégrer dans la version mise en ligne les nouveaux blocs proposés. Ce travail de développement motive même certains de mes élèves.

Exemple de bloc que j’ai pu créer assez facilement en javascript dans le code source de Blockly Arduino pour commander un module LED RGB avec une liaison série, en utilisant  la librairie fournie par Adafruit (et en me basant sur les blocs existants). J’ai pu le tester en local et l’utiliser avec mes élèves avant de proposer à M Canet de l’intégrer à la version en ligne (c’est le cas aujourd’hui). Rien à voir avec Ardublock !

Définition d'un bloc en javascript dans le code source de Blockly Arduino pour commander une LED RGB : il suffit de s'inspirer des blocs existants (Source : Collège Jean Macé)

Définition d’un nouveau bloc en javascript dans le code source de Blockly Arduino pour commander une LED RGB : il suffit de s’inspirer des blocs existants. On peut alors l’utiliser en local ou proposer à M Canet de l’intégrer à la version en ligne. Rien à voir avec Ardublock ! (Source : Collège Jean Macé)

Code pour bloc Led RGB 150216

La partie parfois plus technique de la création d’un nouveau consiste à définir le code Arduino que devra générer Blockly Arduino à partir du nouveau bloc. Quelques bases de langage C suffisent. Ici c’est simple grâce à la bibliothèque fournie par Adafruit. Sinon, on trouve facilement de l’aide : vive les logiciels libres ! (Source : collège Jean Macé)

Quelques liens utiles pour aider à la création de nouveaux blocs :

http://tic.technologiescollege.fr/wiki/doku.php/fr/arduino/blockly_rduino/creerblocsmulti
https://developers.google.com/blockly/
https://developers.google.com/blockly/custom-blocks/defining-blocks
https://developers.google.com/blockly/custom-blocks/block-factory

 

4. Principaux inconvénients (suite à mes premiers essais)

– Il y a aujourd’hui 2 solutions pour transférer le code obtenu avec Blockly vers le logiciel Arduino pour compilation :
. Faire un copier-coller de Blockly vers Arduino : simple et efficace mais moins simple qu’avec Ardublock.
. Installer le plugin CodeBender au navigateur pour pouvoir lancer la compilation et le téléversement vers la carte Aduino directement à partir de Blockly Arduino. Le logiciel donne directement un lien cliquable pour télécharger CodeBender. Cela ne fonctionne pas si le programme utilise un bloc « exotique » avec une bibliothèque non-référencée par CodeBender.

– CodBender permet de téléverser le programme vers la carte Arduino connectée au PC, mais il ne fonctionne pas avec certaines versions en version 64 bits (pour moi ça fonctionne bien avec Firefox, pour d’autres avec Chrome).

– Pour téléverser le programme Il faut d’abord quitter la fenêtre avec les blocs. Ensuite il faut donner le nom de la carte Arduino. Blockly détecte le port COM utilisé, mais ne le mémorise pas (problème existant avec Ardublock aussi). Si on utilise CodeBender, aucune information (à part sonore) n’est donnée sur le bon déroulement de cette phase de compilation et de téléversement. Il faut utiliser l’IDE Arduino (comme avec Ardublock) pour avoir des informations.

– Les blocs ont tous la même forme au niveau des connecteurs : on doit parfois chercher pour comprendre les problèmes de compatibilités entre blocs (qui ne s’assemblent clairement pas quand il y a incompatibilité). Cet aspect est directement lié à Blockly développé par Google.

 

5. Conclusion

Blockly Arduino me semble être aujourd’hui l’outil le plus intéressant pour enseigner la programmation au collège ou au lycée (en Sciences de l’Ingénieur). J’ai rapidement décidé d’abandonner Ardublock pour passer à Blockly Arduino. Mes premières séances avec mes lycéens confirment clairement mon choix. Pour la plupart ce sont des grands débutants en programmation. Ils ont apprécié Blockly Arduino. Ceux qui connaissaient Ardublock ont préféré Blockly Arduino. Je commence à l’utiliser aussi avec mes élèves de 4è en Technologie : même accueil enthousiaste des élèves !

Dommage que Blockly Arduino soit aussi peu connu pour le moment. J’espère que cet article contribuera à mieux le faire connaitre au sein de l’Education Nationale notamment. N’hésitez pas à laisser un commentaire, ou même à collaborer pour participer à l’amélioration de ce logiciel. La force du logiciel libre est dans l’implication de ceux qui les utilisent et participent à son évolution pour l’adapter à leur besoin.

Autres articles en lien avec l’utilisation de blockly Arduino :

Matériel pour enseigner la Technologie

Utilisation de modules Led RGB WS2812B avec Blockly Arduino

Utilisation d’un module audio, le DFPlayer Mini mp3 de DFRobot, avec Blockly Arduino

Utilisation d’un afficheur OLED 128×64 I2C avec Blockly Arduino

16 réflexions au sujet de « Blockly Arduino : l’esprit d’Ardublock, sans ses inconvénients ! »

    • Merci pour ces encouragements. Blockly Arduino est parfaitement opérationnel aujourd’hui mais il continue d’évoluer rapidement avec notamment l’ajout de nouvelles possibilités qu’il faudrait que je présente avec une mise à jour de cet article. J’évoquerais simplement la possibilité de choisir la taille des images incluses dans les blocs, avec même la possibilité de les supprimer pour obtenir une présentation compacte encore plus proche d’un algorithme (c’est ce que je recherche personnellement) : utiliser pour cela l’icône en forme d’œil en haut à droite. Un des intérêts de ce logiciel est justement la possibilité de l’adapter rapidement et simplement à nos besoins, notamment grâce à l’aide efficace de Sébastien Canet qui y consacre beaucoup de temps. La création de nouveaux blocs est parfaitement accessible à des professeurs, voire des élèves de lycée motivés (bien que cela soit hors programme). Si vous avez des propositions d’évolution de ce logiciel, n’hésitez pas à laisser un message. J’espère que nous parviendrons à faire connaître ce logiciel à tous les professeurs qui enseignent la programmation au lycée ou au collège. Essayer Blockly Arduino c’est l’adopter.

  1. Merci pour cet article et celui du sur le blog de Jean Macé. J’ai un peu de mal à comprendre comment faire passer les notions auprès des élèves (conditions, variables, appel de sous-programme…). Est-ce que vous utilisez uniquement la démonstration ou est-ce que les élèves ont des ressources ? Utilisez-vous des stratégies différentes entre les collégiens et les secondes ?

    La logique et les blocs légèrement différents entre blockly et ardublock rendent difficile la maitrise de blockly quand on sort d’ardublock.

    • En fait je suis en train de « tester » différentes manières de faire, aussi bien avec mes lycéens qu’avec mes collégiens Le temps me manque un peu en ce moment avec les élèves. Je partagerais mon expérience prochainement quand les choses auront un peu plus avancées de mon côté. Je ne trouve pas que les différences entre les blocs d’Ardublock et de Blockly Arduino constituent une difficulté. En tout cas je ne suis pas près à revenir à Ardublock.
      Daniel Pers

      • Une des raisons qui font que je veux passer à Blockly c’est que le code produit par ardublock contient parfois des erreurs.

        J’attends votre compte rendu avec curiosité.

  2. Bonjour !
    Professeur de STI2D en Alsace, je souhaite me lancer dans l’aventure Blockly !
    Voici ma question: est-il possible de piloter angulairement un servomoteur à rotation continu grâce à Blockly ?
    Pas simplement le faire tourner dans un sens ou dans l’autre mais de limiter sa course dans un sens par exemple grâce à une boucle : tourne dans ce sens pendant x ms ?
    D’avance merci pour vos réponses !

    • Bonjour, On ne peut pas contrôler précisément un angle de rotation d’un servomoteur à rotation continue sans utiliser un capteur. Si vous voulez juste contrôler le temps de la rotation, il suffit de commander une vitesse, faire une temporisation de x ms, puis d’arrêter le moteur (une boucle ne serait utile que pour faire du multitâche).
      N’hésitez pas à me solliciter si je peux vous aider. Ce serait avec plaisir.

  3. Merci beaucoup pour cette réponse !
    Voilà le type de robot que je souhaite concevoir :
    http://www.instructables.com/id/simpleWalker-4-legged-2-servo-walking-robot/?ALLSTEPS
    Je dispose de servos à rotation continue et j’aimerais pouvoir en piloter deux comme on le voit sur la vidéo.
    Une ébauche de programme sous Blockly me serait d’une grande utilité en guise d’inspiration… Donc sans vouloir abuser, un tel envoi vers mon mail serait top !
    D’avance merci !

  4. Bonjour,
    Votre travail est très intéressant, et blockly@rduino me plait.
    En tant qu’enseignant, j’aimerais moi-même pouvoir créer des blocs, par exemple pour le robot AREXX.
    Pour gagner du temps, pouvez vous m’expliquer rapidement comment modifier un bloc existant, sur quels fichiers intervenir, car l’arborescence du site en local est assez touffue.
    Merci d’avance
    Bernard SCHWORER, du lycée Carriat à Bourg en Bresse.

  5. Enseignant en technologie dans un collège d’Alsace, je me suis penché sur arduino et c’est vrai que les interfaces graphiques étaient trop fermées, donc merci je viens de découvrir cette petite pépite qui va vraiment faciliter mon enseignement et mes projets avec arduino !!
    Bravo !

    • Merci pour votre commentaire. N’hésitez pas à partager ici vos activités avec Blockly Arduino. Je considère encore aujourd’hui que c’est l’ouils qui me convient le plus. J’espère publier prochainement des informations plus récentes.

  6. Bonjour
    Merci pour cette nouvelle interface rapide et fonctionnelle. Néanmoins, j’ai un petit problème lors de la déclaration des variables sur le Blockly master. Une fois l’entrée Analogique ou numérique renseignée, la traduction en code ne s’opère plus m’affichant le message suivant :
     » TypeError: nextBlock.inputList[0].connection is null  »
    Le problème se résolve dès la suppression des renseignements compromettant, j’opère donc un Copier/Coller dans l’IDE puis renseigne les bons ports dans la loop. Pour mon usage cela me convient mais pour celui des élèves cela reste fastidieux.
    J’attends vos commentaires avec impatience qui m’éclaireront j’en suis certain.
    PS :ce problème n’existe pas sur la version en ligne.

Laisser un commentaire

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