Découvrons dans ce tutoriel comment piloter en temps réel une matrice de LED bicolore depuis une page Web en quelque ligne.

ESP Matrix Controller

Pour cela nous allons utiliser une matrice de 8×8 LEDs pilotable en I²C que vous pouvez trouver chez Adafruit pour environ 15€. Pour piloter cette matrice nous allons utiliser un ESP8266, ici un D1 Mini Pro (environ 6€).

ESP Matrix Controller

Prérequis

Pour réaliser ce tutoriel, vous aurez besoin :

  • Un serveur Constellation
  • Un ESP8266
  • Une matrice de LED I²C

Si c’est la première fois que vous utilisez un ESP8266 connecté à Constellation, je vous recommande de suivre ce guide d’introduction avant de commencer !

Etape 1 : connecter la matrice de LED

Nous avons ici utilisé un D1 Mini Pro, un ESP8266 intégrant nativement une interface de programmation USB, très pratique pour créer des prototypes rapides.

La matrice de LED se connecte à l’ESP8266 en I²C. Nous avons utilisé les fils Noir et Blanc pour alimenter la matrice depuis les pins “5V” et “GND” du D1 Mini ainsi que les fils Bleu et Vert pour connecter les ports D1 et D2 du D1 Mini aux ports SCL et SDA de la matrice de LED :

D1 Mini avec un 8x8 LED Matrix

Et voilà le montage est déjà fini ! Vous pouvez maintenant connecter votre D1 Mini en USB à votre PC pour le programmer.

Etape 2 : programmer l’ESP8266

Pour démarrer vous devez dans Constellation déclarer une sentinelle associée à une clé d’accès et un package virtuel. Ici notre ESP8266 est représenté par la sentinelle nommée « ESP8266 » et le package virtuel se nomme « MatrixController ».

Dans l’Arduino IDE, nous créons un nouveau projet à partir du Starter Kit Constellation pour ESP8266 dans lequel nous allons définir le nom de notre réseau Wifi (SSID) ainsi que sa clé d’accès  puis nous configurerons le client Constellation en spécifiant l’identité de notre package virtuel, sa clé d’accès et l’adresse/port de notre serveur Constellation :

Encore une fois si tout cela est nouveau pour vous, je vous recommande de suivre ce guide d’introduction à l’API Constellation pour Arduino/ESP8266.

Maintenant que la coquille de notre package virtuel sur ESP8266 est prête, ajoutons les librairies d’Adafruit pour piloter la matrice de LED bicolore.

Dans le gestionnaire de bibliothèque (menu Croquis > Inclure une bibliothèque), installez les librairies suivantes :

  • Adafruit GFX
  • Adafruit LED Backpack

Puis dans votre code, ajoutez ces librairies et déclarez une variable de type « Adafruit_BicolorMatrix » que nous nommerons « matrix » :

Au démarrage, dans la méthode « setup() », initialisez la matrice de LED. Pour rappel nous avons branché la matrice I²C sur les ports D1 et D2 :

Toujours dans la méthode d’initialisation, enregistrons un premier MessageCallback que nous allons nommer « SetPixel ». Ce MessageCallback permettra d’allumer ou éteindre un pixel de la matrice.

Nous le déclarons avec 4 paramètres d’entrée :

  • x et y pour définir la position du pixel à piloter
  • state : un boolean indiquant si le pixel doit être allumé ou éteint
  • clear: un paramètre optionnel de type boolean pour indiquer si il faut effacer la matrice avant (par défaut « true »)

Comme vous le constatez ci-dessous, le code de ce MessageCallback commence par effacer la matrice si le dernière paramètre (clear) n’est pas défini (car optionnel) ou si il est à « true » en invoquant la méthode « matrix.clear()« .

Ensuite on appelle la méthode « drawPixel » en passant les arguments de notre MC, à savoir le « x », le « y » et le « state ».

Si le paramètre « state » est vrai, on allume le pixel en vert (LED_GREEN) sinon on l’éteint (LED_OFF).

Le code est donc :

Comme il s’agit d’une matrice bicolore, on peut allumer chaque pixel en vert ou en rouge, ou bien en vert ET en rouge ce qui donne du orange.

Nous allons donc ajouter un deuxième MessageCallback que nous nommerons « SetPixelColor » sensiblement identique au premier, sauf que le paramètre « state » est maintenant de type  « int » et se nomme « color ».

D’après les constantes de la librairie d’Adafruit, LED_GREEN = 2, LED_OFF = 0, le rouge (LED_RED) = 1 et le Orange/Jaune = 2. Le code est donc :

Pour finir, ajoutons un troisième et dernier MessageCallback pour effacer l’écran :

Vous pouvez téléverser le programme puis en vous connectant sur le MessageCallbacks Explorer de la Console Constellation vous constaterez que les trois MessageCallbacks sont bien référencés dans votre Constellation.

Votre ESP8266 est prêt ! Vous pouvez tester les MC directement depuis la Console pour vous assurer que tout fonctionne correctement :

MessageCallbacks Explorer

Par exemple en invoquant le MessageCallback « SetPixel » avec x=1, y=2 et state=true, le résultat est instantanément visible sur la matrice :

Test du package virtuel

Etape 3 : créer une page Web

Maintenant que notre matrice connectée est prête, créons une page Web pour pouvoir la piloter.

Pour cela nous allons créer une grille de 8×8 représentant la matrice sur laquelle nous pourrions dessiner à la sourie ou au droit (touch) avec la possibilité de choisir la couleur entre le verte, le roue et le orange. Nous allons utiliser le Canvas HTML5 pour cela.

Page de contrôle en HTML5/JS

Inutile d’utiliser le framework AngularJS pour cela, nous utiliserons la librairie Constellation pour Javascript.

Commençons donc par créer une page HTML classique dans laquelle ajoutons dans l’entête <head> les scripts nécessaires pour connecter la page à Constellation :

Nous avons également ajouté la meta « viewport » pour adapter proprement notre page sur un mobile.

Dans le corps <body> de notre page ajoutons un canvas pour la grille, la liste des couleurs possibles et un bouton pour effacer l’écran :

Vous remarquerez que nous stockons dans des attributs « data- » l’ID de la couleur de la matrice de LED (0 à 3) et le nom de la couleur HTML équivalente (ex. red = 1). La couleur sélectionnée est repérée par la classe CSS « selected ».

Pour la mise en page justement, ajoutez le code CSS dans une balise <style> dans la page :

Enfin, passons au code Javascript de notre page. Ouvrez une balise <script> pour ajouter le code ci-dessous.

On commence tout d’abord par déclarer la taille de notre matrice (8×8) ainsi que le client « consumer » de Constellation en spécifiant l’adresse/port de votre serveur Constellation ainsi qu’une clé d’accès pour pouvoir s’y connecter.

Ensuite on déclare les variables globales de notre script.

On ajoute une fonction « initBoard » pour dessiner notre grille dans le canvas HTML et initialiser le tableau « pixels » qui contiendra l’état de la matrice :

On déclare ensuite une fonction « setPixel » qui se chargera à la fois de dessiner dans le canvas la couleur sélectionnée du pixel mais également d’envoyer un message à notre ESP8266 pour invoquer le MessageCallback « SetPixelColor » en spécifiant la position du pixel et la couleur sélectionnée. Le tableau « pixel » permet de n’envoyer le message que si la couleur a changé pour éviter d’envoyer plusieurs fois le même ordre.

Pour l’interaction nous ajoutons trois méthodes :

  • moveStart : lorsque la sourie/le doigt (si touch) est posé sur la grille
  • move : lorsque la sourie/le doigt (si touch) se déplace sur la grille
  • moveEnd : lorsque la sourie/le doigt (si touch) « quitte » la grille

Dans les deux premières méthodes l’idée est de déduire la position du pixel en fonction des arguments de l’événement levé afin d’invoquer la méthode « setPixel » que nous avons déclarée ci-dessus qui se chargera à son tour de dessiner la bonne couleur dans le canvas tout envoyant le message à notre ESP8266.

Il ne reste plus qu’à écrire le code de démarrage de notre page.

On commence par initialiser nos variables globales (instance et taille du canvas, contexte de rendu 2D du canvas). On initialise ensuite la grille par notre méthode « iniBoard » et on se connecte à notre Constellation (constellation.connection.start()).

Pour chaque couleur de notre liste, on affecte la couleur du background définie par son attribut data-color et on ajoute un handler au click de façon à récupéré dans l’objet « selectedColor » la couleur sélectionnée par l’utilisateur.

On affecte également un handler au click du bouton « Clear » pour effacer le Canvas et invoquer le MessageCallback « clear » sur notre ESP8266 afin de vider la matrice.

Et pour finir on attache des handlers aux événements de la souris (mouseDown, mouseMove et mouseUp) et du tactile (touchStart, touchMove et touchEnd) sur nos tris méthodes ci-dessus pour gérer les interactions avec notre grille.

Et voilà notre page HTML est prête ! Lancez-la dans notre navigateur et profitez du résultat.

Demos

Quelques démonstrations animées ….

ESP Matrix Controller

ESPMatrix3

Pilotez une matrice de LED avec une page Web en temps réel
Editer la page sur GitHub
Étiqueté avec :                    

Démarrez la discussion sur le forum Constellation