Examen de l’écran IPS rotatif MaTouch ESP32-S3 avec un écran tactile rond de 2,1 pouces

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

Écran IPS rotatif MaTouch ESP32-S3 avec Touch 2.1 ST7701

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

Boîte en carton

Déballage de l'écran IPS rotatif MaTouch ESP32-S3Écran IPS rotatif MaTouch ESP32-S3 + câble USB + fils 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.

Écran rotatif Matouch ESP32-S3 - écran par défaut
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.

Afficheur rotatif Matouch ESP32-S3 - jauge à essence Afficheur rotatif Matouch ESP32-S3 - écran graphique n°2 Afficheur rotatif Matouch ESP32-S3 - écran graphique n°3

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.

Paramètres IDE Arduino à affichage rotatif Matouch ESP32-S3

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.

#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.

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.

YouTube video

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).

Modèle de couleur HSV : exemple de roue chromatique
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.