Communication MIDI avec l'ESP32 CYD

Aujourd'hui je continue mon exploration de l'ESP32-2432S028 CYD (Cheap Yellow Display) par quelques expérimentations de communication MIDI avec un clavier électronique.

Il s'agit d'une communication MIDI classique impliquant l'utilisation des bons vieux câbles MIDI munis d'un connecteur DIN à 5 broches. De nos jours, le MIDI par USB ou par Bluetooth est de plus en plus en vogue, mais ce n'est pas ce dont il sera question aujourd'hui.

MIDI: pour quoi faire?

MIDI est l'acronyme de Musical Instrument Digital Interface. Depuis le début des années 1980, c'est le protocole qui permet à des appareils électroniques musicaux d'échanger de l'information. Par exemple, grâce au protocole MIDI, un clavier ou un séquenceur peuvent acheminer des instructions à un synthétiseur, qui produira les sons qui lui ont été demandés.

Connexions

Le MIDI est une communication série (UART) à  31 250 baud. Dans ce contexte, l'ESP32 comporte un avantage intéressant: on peut désigner à peu près n'importe quelle broche GPIO comme entrée (Rx) ou sortie (Tx) UART. J'ai décidé d'utiliser à cette fin les broches GPIO 22 et 27, puisqu'elles sont facilement accessibles par le connecteur CN1 du Cheap Yellow Display. C'est le connecteur qui se trouve juste à côté du lecteur de carte microSD.

Les 4 fils issus du connecteur CN1 sont utiles pour une communication MIDI bi-directionnelle. De gauche à droite sur la photo:

• Sortie 3,3 V (fil rouge sur la photo): servira à alimenter l'optocoupleur recommandé pour la réception de messages MIDI.
• Broche GPIO 27 (fil jaune sur la photo): sera désignée comme entrée UART (Rx) qui pourra recevoir des messages (en provenance d'un clavier MIDI, par exemple).
• Broche GPIO 22 (fil bleu foncé sur la photo): sera désignée comme sortie UART (Tx) qui pourra envoyer des messages (vers un clavier MIDI, par exemple).
• Broche GND: pour que tous les appareils impliqués utilisent la même référence pour mesurer les tensions.

Pour faire mes tests, j'ai utilisé une interface MIDI que j'ai fabriquée moi-même, conçue pour fonctionner à un niveau logique de 3,3 V.  Vous pouvez vous référer à cet article publié en septembre 2023  pour les détails du circuit.

Vous pouvez acheter une interface toute faite, ou en assembler une sur une breadboard. Remarquez que pour bien des applications, on a besoin d'une communication dans une seule direction. Si vous désirez seulement envoyer des messages vers le clavier MIDI (broche Rx), le circuit nécessite simplement deux résistances. Pour recevoir des informations à partir du clavier, par contre, il faut utiliser un optocoupleur (voir l'article détaillé pour les schémas de circuit).

Installation de la bibliothèque "MIDI Library"

La programmation est plus simple si on utilise une bonne bibliothèque. J'ai utilisé la MIDI Library, qui s'installe facilement grâce au gestionnaire de bibliothèques de l'IDE Arduino.

Voyons deux exemples simples démontrant une communication MIDI dans chaque direction.

Communication MIDI du CYD vers un clavier

Lorsqu'on exécute le sketch ci-dessous, le clavier musical joue une suite de notes ascendantes en utilisant différents timbres (programmes). Pour faciliter le débogage, le numéro du programme s'affiche dans le moniteur série.

-

-

Communication MIDI d'un clavier vers le CYD

Dans ce deuxième exemple, chaque fois qu'on appuie sur une touche du clavier, son numéro MIDI s'affiche en vert sur l'écran du CYD. Ce même numéro s'affiche en rouge lorsqu'on relâche la touche­.

(Voir l'article "Exploration du Cheap Yellow Display" pour plus d'informations sur l'utilisation de la bibliothèque TFT_eSPI pour affichage à l'écran.)

-

-

Yves Pelletier

À lire également:

• Exploration du Cheap Yellow Display
• Télémètre à ultrasons et ESP32 CYD
• Afficher à l'écran du CYD des jpegs stockés dans la carte microSD
• Les autres articles du blog impliquant l'ESP32
• Les autres articles du blog concernant le MIDI et la musique

Afficher sur l'écran de l'ESP32 CYD des jpegs stockés sur la carte micro SD

Dans cet article, je vous présente de quelle façon j'ai procédé pour afficher des images en format jpeg à l'écran de l'ESP32-2432S028 "Cheap Yellow Display". Les fichiers jpeg ont préalablement été enregistrées sur une carte microSD insérée dans le lecteur de l'ESP32 CYD.

Les bibliothèques nécessaires

Comme d'habitude, je programme l'ESP32 en utilisant l'IDE Arduino. Deux bibliothèques de Bodmer doivent être installées: TFT_eSPI et JPEGDecoder.

Pour que la bibliothèque TFT_eSPI fonctionne correctement, vous devez modifier le fichier User_Setup.h pour qu'il contienne les paramètres de l'ESP32 CYD. Si ça peut vous être utile, j'ai publié le contenu de mon fichier User_Setup.h dans ce récent article.

L'exemple ESP32_SDcard_jpeg

Bonne nouvelle: la bibliothèque TFT_eSPI est accompagnée d'un exemple intitulé "ESP32_SDcard_jpeg" qui va énormément nous simplifier la tâche. 

Vous trouverez cet exemple dans les menus de l'IDE Arduino:

Fichier - Exemples - TFT_eSPI - Generic - ESP32_SDcard_jpeg

Ce sketch permet d'afficher à l'écran de l'ESP32 CYD quatre images en format jpeg qui doivent être enregistrées à la racine de la carte microSD.  Ces images se trouvent dans le dossier "Data" qui accompagne l'exemple ESP32_SDcard_jpeg. Vous pouvez également les trouver sur le gitHub de Bodmer.

Il y a un petit contretemps: si vous exécutez l'exemple  ESP32_SDcard_jpeg tel qu'il est présenté, aucune image ne s'affiche à l'écran, et le moniteur série présente un message d'erreur affirmant qu'aucune carte SD n'a été trouvée.

Le problème se situe à la ligne 39 de l'exemple.

J'ai effacé les paramètres de la fonction SD.begin. Ainsi  "SD.begin(5, tft.getSPIinstance())" est devenu "SD.begin()".

... et cette fois, ça fonctionne. Les 4 images s'affichent tour à tour à l'écran.

Il est ensuite facile de modifier le sketch pour qu'il affiche les images de votre choix, que vous aurez préalablement enregistrées sur la carte microSD.

Redimensionner les images

Le programme ne redimensionne pas les images. Ainsi, si une image est plus grande que l'écran (320 X 240 pixels), seule une portion de l'image s'affiche (le coin supérieur gauche).

Pour voir les images au complet, il faut les redimensionner afin que leur taille n'excède par 320 X 240 pixels. 

Pour ce faire, j'ai utilisé GIMP, qui est gratuit et disponible sur tous les systèmes d'exploitation. Une image de 320 X 240 pixels occupera tout l'écran, mais il peut aussi être pertinent d'utiliser des images encore plus petites, qui seront utilisées comme icônes, accompagnées de texte, etc.

Sur la photo ci-dessous, par exemple, l'écran affiche simultanément 4 photos de format 133 X 100 pixels.

.

Diaporama

Pour terminer voici un sketch qui affiche en boucle tous les fichier jpeg situés dans un répertoire intitulé "diaporama" sur la carte microSD. Le nom des fichiers jpeg n'a pas d'importance. Chaque image est affichée pendant 5 secondes.

-

-

Yves Pelletier

À lire également:

• Exploration du Cheap Yellow Display
• Télémètre à ultrasons et ESP32 CYD
• Utilisation d'un écran tactile TFT SPI 240 X 320 (ILI9341) avec un ESP32
• Les autres articles du blog impliquant l'ESP32

Télémètre à ultrasons HC-SR04 et ESP32 CYD

Suite à ma première exploration de l'ESP32 CYD (Cheap Yellow Display, ou encore ESP32-2432S028 si vous préférez son nom officiel), j'étais curieux d'essayer un mini projet impliquant le branchement d'un capteur. Le télémètre à ultrasons HC-SR04 m'a semblé un choix intéressant, pour un premier essai, puisqu'il n'utilise que deux broches GPIO.

Ce projet consiste donc à afficher, sur l'écran du CYD, la distance mesurée par un module HC-SR04.

Il faut toutefois s'assurer d'utiliser un HC-SR04 qui accepte de fonctionner sous une tension de 3,3 V. Certains modèles sont vendus avec la garantie qu'ils fonctionnent à 3,3 V, et certains modules qui, en principe, nécessitent une tension de 5 V acceptent quand même de fonctionner à 3,3 V.

Pour la connexion du HC-SR04, j'ai utilisé le connecteur identifié CN1; il se trouve sous la LED RGB (et à côté du lecteur de carte microSD) au verso du CYD.

Le connecteur CN1

Ce qui est écrit sur le circuit imprimé est parfois très difficile à lire. Il est bon de savoir que les quatre connexions de CN1, en commençant par la plus rapprochée du lecteur de carte SD , sont 3,3 V, GPIO 27, GPIO 22 et GND.

J'ai branché le module HC-SR04 de cette façon:

• Vcc du HC-SR04 : 3,3 V du CYD
• trig du HC-SR04 : GPIO 27 du CYD
• echo du HC-SR04 : GPIO 22 du CYD
• GND du HC-SR04: GND du CYD

Si vous voulez faire un test rapide pour vérifier le bon fonctionnement du capteur HC-SR04, le sketch minimaliste que je proposais pour l'Arduino Uno dans cet article (publié il y a 15 ans!) fonctionne parfaitement, à la condition de modifier le  numéro des broches. Il s'agit d'assigner la valeur 27 à la variable trigPin et la valeur 22 à la variabl echoPin. La mesure de la distance en cm s'affiche dans le moniteur série.

Sketch #1: affichage de la mesure à l'écran du CYD

Mais puisque le CYD comporte un écran, aussi bien l'utiliser pour afficher la mesure. C'est ce qu'accomplit le sketch ci-dessous. Pour l'utiliser, il est nécessaire d'installer la bibliothèque TFT_eSPI de Bodmer. Au besoin, vous pouvez vous référer à mon article précédent dans lequel j'ai publié le contenu de mon fichier User_Setup.h.

-

-

Sketch #2: l 'utilisateur choisit les unités de mesure

Dans un deuxième sketch, puisque l'écran du CYD est tactile, j'ai ajouté des boutons qui permettent à l'utilisateur de modifier les unités de mesure de la distance affichée: millimètres, centimètres, mètres, pouces ou pieds.

Plusieurs bibliothèques facilitent la gestion du contrôleur tactile XPT2046. J'ai choisi la bibliothèque NPT2046_Bitbang_Slim.

-

-

Yves Pelletier

À lire également:

• Exploration du Cheap Yellow Display
• Mesurer une distance avec le HC-SR04 et le Raspberry Pi Pico (microPython)
• Les autres articles du blog impliquant l'ESP32