Le produit que nous examinons aujourd’hui est le « MaTouch ESP32-S3 Rotary IPS Display with Touch 2.1 » ST7701″ de Makerfabs qui offre une alternative au kit de démonstration d’écran 4 pouces MaTouch_ESP32-S3 que nous avons examiné il y a quelques mois.
Tout comme le modèle précédent, le nouveau kit est équipé d’un ESP32-S3-WROOM-1-N16R8, doté de 16 Mo de mémoire flash et de 8 Mo de PSRAM. Cet appareil prend en charge la communication sans fil Wi-Fi et Bluetooth 5.0 et offre des options de connectivité via les ports I2C et UART pour l’interface avec des appareils externes. L’écran est doté d’un panneau IPS rond avec une résolution de 480 × 480 pixels, d’une capacité tactile capacitive et d’une prise en charge de la bibliothèque LVGL. De plus, il comprend un encodeur rotatif mécanique et prend en charge les opérations de presse.
Spécifications de l’écran rotatif IPS MaTouch ESP32-S3
- Contrôleur : ESP32-S3-WROOM-1, antenne PCB, 16 Mo de Flash, 8 Mo de PSRAM, ESP32-S3-WROOM-1-N16R8
- Sans fil : Wi-Fi et Bluetooth 5.0
- LCD : IPS haute luminosité de 2,1 pouces, couleur 65K
- Pilote LCD : ST7701S
- FPS : > 70
- Résolution : 480×480
- Interface LCD : RVB 565
- Panneau tactile : 5 points tactiles, capacitif
- Pilote d’écran tactile : CST8266
- USB : USB Type-C natif
- Extension : 1x I2C ; 1x UART (connecteur 1,25 mm à 4 broches)
- Prise en charge Arduino : Oui
- Température de fonctionnement : -40°C à +85°C

Déballage
Le présentoir est emballé dans une boîte en carton et comprend les éléments suivants :
- 1x écran IPS rotatif MaTouch ESP32-S3 avec tactile 2,1″ ST7701
- 1x câble USB Type-C de 1 mètre
- 2x fils avec connecteur 1,25 mm à 4 broches



Vérification du firmware par défaut
Ce kit d’affichage IPS rotatif MaTouch ESP32-S3 est livré avec un micrologiciel de démonstration préinstallé. Vous pouvez alimenter le module à l’aide d’une connexion USB Type-C 5V. L’écran par défaut affiche les valeurs de l’encodeur rotatif, l’état du bouton-poussoir et les coordonnées (x, y) du point de contact. Lorsque vous faites pivoter l’encodeur rotatif, la couleur d’arrière-plan alterne entre 5 couleurs, à savoir le blanc, le bleu, le vert, le rouge et le vert.

Si vous appuyez sur le bouton, l’écran passera aux modes graphiques comme indiqué ci-dessous. Il existe 3 exemples de modes graphiques et vous pouvez basculer entre eux en touchant le centre de l’écran. Dans ce mode, une jauge s’affiche et vous pouvez faire tourner l’encodeur rotatif pour ajuster la position de l’indicateur, ou vous pouvez toucher et faire glisser votre doigt pour modifier également la valeur.

Installation du logiciel
Je vais utiliser Arduino IDE pour les démonstrations. Nous devrons donc installer le support de la carte (via le gestionnaire de cartes) et installer toutes les bibliothèques requises. Je les résume ainsi.
- Installez l’IDE Arduino. Le constructeur nous suggère d’utiliser Arduino IDE 1.8.10/1.8.19
- Installez le package de carte ESP32, la version 2.0.6 est suggérée.
- Installer la bibliothèque GFX pour Arduino 1.3.1
- Téléchargez la source depuis ce GitHub et extrayez-la. Ensuite, copiez le dossier ui de /example/squareline_demon/libraries/ui vers le dossier de la bibliothèque Arduino. Cependant, pour cette test, je vais utiliser la bibliothèque ui de /example/test_fw_v2/library/ui car elle offre plus de variables et de fonctions que celles du dossier suggéré. De plus, nous devons également extraire mf_lvgl et TouchLib de /lib/mf_Lvgl.zip et /lib/TouchLib.zip vers la bibliothèque Arduino.
- Sélectionnez la carte « ESP32S3 Dev Module » et définissez d’autres paramètres comme dans la figure suivante.

Dans les tests suivants, j’utiliserai Arduino IDE 1.8.13 pour démontrer l’appareil à travers 4 exemples. Je vais commencer par une démonstration simple, en me concentrant sur l’encodeur rotatif et le commutateur poussoir. Ensuite, nous explorerons la modification de la couleur d’arrière-plan en touchant l’écran. Ensuite, je vais vous montrer comment modifier le bitmap d’arrière-plan. Enfin, je lirai les données d’un accéléromètre via le port I2C pour ajuster la couleur de fond.
TEST-1 : Utilisation de l’encodeur rotatif et du bouton de commutation
Dans notre premier exemple, nous avons étendu la page du firmware par défaut. Ici, nous utilisons le bouton-poussoir pour changer la couleur d’arrière-plan entre les couleurs rouge, verte et bleue. La rotation de l’encodeur rotatif nous permet d’ajuster l’intensité de la couleur sélectionnée, et nous prenons également en compte le sens de rotation. Si l’encodeur est tourné dans le sens inverse des aiguilles d’une montre (CCW), l’intensité diminue, tandis qu’elle augmente s’il est tourné dans le sens opposé (CW).
Pour y parvenir, nous avons utilisé le code source de /example/fw_test et introduit plusieurs constantes et variables aux fins ci-dessus.
#define MY_COLOR_MODE_R 0 #define MY_COLOR_MODE_G 1 #define MY_COLOR_MODE_B 2 #define MY_COLOR_ADJUST_STEP 16 int color_mode = MY_COLOR_MODE_R; uint8_t couleurs_values[3] = {0, 0, 0} ; int encoder_value_prev = 0; int encoder_value_current = 0;
|
#définir MY_COLOR_MODE_R 0 #définir MY_COLOR_MODE_G 1 #définir MY_COLOR_MODE_B 2 #définir MY_COLOR_ADJUST_STEP 16 int color_mode = MY_COLOR_MODE_R; uint8_t couleurs_values[3] = {0, 0, 0} ; int encoder_value_prev = 0; int encoder_value_current = 0; |
Nous avons ensuite modifié le update_color_values() fonction pour comparer la valeur actuelle du codeur rotatif avec la précédente afin de déterminer le sens de rotation. Après cela, nous appliquons la valeur constante, définie dans MY_COLOR_ADJUST_STEPpour ajuster l’intensité de la valeur de couleur sélectionnée en fonction du sens de rotation.
void update_color_values() { int delta = 0; encoder_value_current = compteur ; delta = encoder_value_current – encoder_value_prev ; si (abs (delta) < 2) { return ; } if(delta > 0) { // Mettre à jour la valeur color_values[color_mode] += MY_COLOR_ADJUST_STEP ; } autre { color_values[color_mode] -= MON_COLOR_ADJUST_STEP ; } encoder_value_prev = encoder_value_current ; // limite le min/max if(color_values[color_mode] > 255) { valeurs_couleur[color_mode] = 255 ; } si (valeurs_couleur[color_mode] < 0) { valeurs_couleur[color_mode] = 0 ; } }
|
1 2 3 4 5 6 7 8 9 dix 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
annuler update_color_values() { int delta = 0 ; encoder_value_current = compteur ; delta = encoder_value_current – encoder_value_prev ; si (abs (delta) < 2) { retour; } si (delta > 0) { // Met à jour la valeur valeurs_couleur[color_mode] += MY_COLOR_ADJUST_STEP ; } autre { valeurs_couleur[color_mode] -= MON_COLOR_ADJUST_STEP ; } encoder_value_prev = encoder_value_current ; // limite le min/max si (valeurs_couleur[color_mode] > 255) { valeurs_couleur[color_mode] = 255 ; } si (valeurs_couleur[color_mode] <0) { valeurs_couleur[color_mode] = 0 ; } } |
Dans la boucle principale, on vérifie d’abord si la variable move_flag est réglé. Si c’est le cas, nous appelons ce qui précède update_color_values() fonction pour mettre à jour nos valeurs de couleur. Ensuite, les valeurs de couleur RVB mises à jour sont regroupées dans un seul uint16_t type de données en utilisant le color565 méthode du Arduino_ST7701_RGBPanel classe. Nous transmettons ensuite la valeur convertie au fillScreen méthode pour changer la couleur d’arrière-plan. Une fois le script compilé et téléchargé, vous verrez un écran similaire à celui illustré dans la vidéo suivante.

TEST-2 : Utilisation de l’écran tactile
Notre prochain test s’inspire du modèle de couleur HSV où la valeur de couleur pour chaque position sur l’écran est déterminée par ses coordonnées (x, y) par rapport au centre de l’écran, comme le montre la figure suivante. Pour cet exemple, nous maintenons la saturation (S) et la valeur (V) fixes à leurs valeurs maximales et ne modifierons que la teinte (H).

Pour calculer les valeurs RVB, nous déplaçons d’abord l’origine du système de coordonnées vers le centre de l’écran. On calcule ensuite l’angle t dans la figure ci-dessus en utilisant la formule : t = atan2(dy, dx). Avec cet angle, nous déterminons les valeurs de couleur RVB grâce au calcul suivant où t2 représente l’angle de séparation entre chaque valeur de couleur, qui est égal à 120 degrés ou (2*pi)/3 radians.
R = 255 * ((cos
|
R = 255 * ((cos |
De plus, nous calculons la distance entre le point tactile et le centre de l’écran. Cette distance est ensuite utilisée pour ajuster la luminosité de la couleur de fond.
void update_color_values() { … // Déplace l’origine au centre de l’écran int dx = x – 240; int dy = 240 – y ; // angle angle flottant = atan2(dy, dx); // distance float dist = sqrt((dx*dx) + (dy*dy)); flotter v = dist/240,0 ; // Teinte float t = angle ; float t_step = 120,0 * DEG_TO_RAD ; float r = 255 * ((cos
|
1 2 3 4 5 6 7 8 9 dix 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
annuler update_color_values() { … // Déplace l’origine au centre de l’écran int dx = x – 240 ; int dy = 240 – y ; // angle angle flottant = atan2(dy, dx); // distance float dist = sqrt((dx*dx) + (dy*dy)); flotter v = dist/240,0 ; // Teinte flotteur t = angle ; float t_step = 120,0 * DEG_TO_RAD ; float r = 255 * ((cos |
Après avoir téléchargé le script, vous observerez quelque chose de similaire à la vidéo ci-dessous.

TEST-3 : Utilisation de la bibliothèque graphique légère et polyvalente (LVGL)
Ensuite, nous utiliserons la bibliothèque graphique légère et polyvalente (LVGL). Dans ce test, nous utiliserons le code source de /example/fw_test_v2 et tenterons de modifier l’image d’arrière-plan avec notre bitmap personnalisé.
Ainsi, la première étape consiste à créer un bitmap 480×480 et à l’exporter au format PNG 32 bits avec le nom de fichier « 1.png ». Ensuite, nous convertissons cette image PNG en données de style C à l’aide du logiciel SquareLine Studio. Dans le logiciel, nous définissons la profondeur de bits sur 16 bits, comme le montre la figure ci-dessous. Après avoir défini le chemin de sortie et exporté le projet, nous obtiendrons un fichier source nommé « ui_img_1_png.c ». Il s’agit de notre dernier bitmap personnalisé qui peut être utilisé pour remplacer le fichier d’origine dans le dossier src/images.

Comme option supplémentaire, vous pouvez également expérimenter l’ajustement manuel des couleurs d’autres éléments de l’interface utilisateur dans le fichier source ui_Screen3.c. La figure ci-dessous fournit un exemple du fichier source ui_Screen3.c modifié dans lequel nous avons apporté des modifications à la couleur d’arrière-plan, à l’opacité et à la couleur de l’indicateur.


TEST-4 : Utilisation de la connexion I2C
Dans notre dernière démonstration, nous testerons la communication avec un autre appareil utilisant le protocole I2C. Pour ce test, nous connectons le module MPU-6050 à notre module à l’aide du connecteur 1,25 mm 4P comme indiqué ci-dessous.
- ROUGE : GND → MPU6050 GND
- VERT : +3V3 → NIV MPU6050
- BLEU : SDA → MPU6050 SDA
- JAUNE : SCL → MPU6050 SCL


Le MPU-6050 a la capacité de détecter l’accélération et la vitesse angulaire grâce à son accéléromètre et son gyroscope intégrés. Cependant, dans cette démonstration, nous utiliserons uniquement les données d’accélération pour ajuster la couleur d’arrière-plan. Après avoir lu les valeurs du MPU-6050, nous échelonnons leur plage pour qu’elle se situe dans [0, 255] en utilisant une fonction de mise à l’échelle linéaire : y = 255 * ((x – min) / range)), où x représente la valeur d’entrée, tandis que min et range sont le minimum et la plage des valeurs pour chaque axe. Pour ce test, nous avons simplement défini les valeurs minimales pour tous les axes à -9 000 et la plage de tous les axes à 18 000. Après la mise à l’échelle, les valeurs d’accélération se situeront dans la plage [0, 255], qui peut ensuite être utilisée comme intensité de la couleur RVB. Par conséquent, nous utilisons les données d’accélération des axes X, Y et Z pour contrôler l’intensité des couleurs rouge, verte et bleue, respectivement.

Conclusions
En résumé, le « MaTouch ESP32-S3 Rotary IPS Display with Touch 2.1 » ST7701 » est facile à utiliser et dispose d’un écran aux couleurs éclatantes. Le fabricant fournit des instructions d’installation claires pour l’installation des outils. Je voudrais exprimer ma sincère gratitude à MakerFabs pour avoir fourni l’appareil utilisé dans cette test. Enfin, si ce module vous intéresse, vous pouvez effectuer un achat via la boutique en ligne de MakerFabs, où il est actuellement disponible au prix de 44,80 $.
Retrouvez l’histoire de Raspberry Pi dans cette vidéo :
