Skip to Content

CrowPanel 2.8″ ESP32 Display : Guide d’installation facile

CrowPanel 2.8″ ESP32 Display : Guide d’installation facile

Dans ce tutoriel, vous allez apprendre à débuter avec le CrowPanel 2.8″ ESP32 Display d’ELECROW. Les écrans CrowPanel sont super pratiques, car ils intègrent quasiment tout ce dont vous avez besoin. Cela inclut l’écran tactile TFT, un ESP32, un lecteur de carte TF, un connecteur batterie avec chargeur, une interface I2C et même une sortie pour haut-parleur.

Cependant, selon votre expérience, les premières étapes peuvent être un peu compliquées. Ce guide d’installation est là pour vous aider. Je me concentre ici sur la version 2,8″, mais les informations sont aussi valables pour les versions 2,4″ et 3,5″. Les autres écrans plus grands de la série CrowPanel utilisent cependant des pilotes d’affichage différents.

Alors, c’est parti !

Matériel nécessaire

Les éléments nécessaires incluent évidemment l’écran et, si vous souhaitez connecter du matériel externe, quelques câbles, résistances, LEDs et une breadboard seront utiles.

CrowPanel 2.8″ ESP32 Display

Câble USB C

Dupont wire set

Jeu de fils Dupont

Half_breadboard56a

Breadboard

Kit de résistances & LED

Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.

Caractéristiques du CrowPanel 2.8″ ESP32 Display

Le CrowPanel 2.8″ ESP32 Display d’ELECROW est un écran tactile HMI résistif avec un affichage TFT 320*240. Il utilise le module ESP32-WROOM-32 comme processeur principal, qui intègre le WiFi et le Bluetooth.

Face avant du CrowPanel 2.8″ ESP32 Display (source)

En plus, la carte dispose d’un lecteur de carte TF, d’une interface UART, d’une interface I2C, d’une sortie haut-parleur, d’un connecteur batterie avec chargeur intégré et d’un petit port GPIO avec deux broches GPIO. Voir le schéma des broches ci-dessous :

Schéma des broches du CrowPanel 2.8″ ESP32 Display (source)

Le tableau suivant résume à quelles broches GPIO sont assignées les trois interfaces IO. Pour les autres broches GPIO, consultez le schéma en annexe de ce post.

GPIO_DIO25 ; IO32
UARTRX(IO16) ; TX(IO17)
I2CSDA(IO22) ; SCL(IO21)

Vous pouvez alimenter la carte via le port USB (5V, 2A) ou en connectant une batterie LiPo 3,7V standard au connecteur BAT. Si le câble USB et la batterie sont branchés en même temps, la carte chargera la batterie. Le courant de charge maximal est de 500mA.

La carte prend en charge plusieurs environnements de développement comme Arduino IDE, Espressif IDF, Lua RTOS et Micro Python, et elle est compatible avec la bibliothèque graphique LVGL. Cependant, dans ce tutoriel, je vais me concentrer sur l’Arduino IDE et la bibliothèque graphique TFT_eSPI

Série d’écrans CrowPanel ESP32 Display

Le CrowPanel 2.8″ ESP32 Display fait partie d’une famille complète d’écrans allant de 2,4 pouces à 7 pouces. Pour un aperçu, voir le tableau ci-dessous.

CrowPanel ESP32 Displays
CrowPanel ESP32 Displays (source)

Dans ce tutoriel, je décrirai spécifiquement la configuration de la version 2,8″. Mais les exemples de code et la procédure d’installation sont essentiellement les mêmes pour les 2.4″ display et les 3.5″ display, car ils utilisent le même ou un pilote d’affichage similaire (ILI9341, ILI9488). Voir les sections surlignées en jaune dans le tableau ci-dessus.

Cependant, comme j’utilise la bibliothèque TFT_eSPI, les exemples de code ne fonctionneront probablement pas pour les écrans plus grands (4,3″, 5″, 7″), car les pilotes pour ces écrans ne sont pas pris en charge – à ma connaissance. Corrigez-moi si je me trompe, car je n’ai pas testé.

Avant de vous lancer dans des graphismes avancés, je vous conseille de tester d’abord l’envoi et l’exécution d’un simple programme blink. C’est le sujet de la section suivante.

Test des GPIO

L’écran est livré avec une démo UI qui s’exécute dès que vous branchez la carte. C’est un bon premier test. Ensuite, nous voulons vérifier si nous pouvons téléverser et exécuter notre propre code. L’exemple classique pour cela est le programme Blink.

Comme l’écran n’a pas de LED intégrée, nous allons utiliser les deux broches GPIO disponibles sur le port GPIO_D pour contrôler deux LEDs externes. Le schéma de câblage ci-dessous montre comment connecter les deux LEDs au port. Vous pouvez utiliser le câble fourni avec l’écran pour cela.

Wiring for blinking two LEDs
Câblage pour faire clignoter deux LEDs

Les broches du port GPIO_D sont : IO25 ; IO32, 3,3V, GND. Nous n’avons pas besoin de la sortie 3,3V, juste des deux broches GPIO et de la masse. Lors du montage du circuit, n’oubliez pas les résistances de 220Ω pour limiter le courant dans les LEDs et assurez-vous que la masse est bien connectée.

Ensuite, vous pouvez téléverser le code suivant qui fait clignoter les deux LEDs en alternance. Il affiche aussi des messages sur le moniteur série, donc si vous avez un souci de câblage, vous pourrez au moins vérifier que le programme tourne. Assurez-vous que le débit du moniteur série est réglé sur 115200.

const int led1 = 25;
const int led2 = 32;

void setup() {
  Serial.begin(115200);
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
}

void loop() {
  Serial.println("on");
  digitalWrite(led1, HIGH);
  digitalWrite(led2, LOW);
  delay(1000);

  Serial.println("off");
  digitalWrite(led1, LOW);
  digitalWrite(led2, HIGH);
  delay(1000);
}

Comme l’écran utilise un ESP32, vous aurez besoin du core ESP32 installé. Si vous avez des difficultés, consultez notre tutoriel A Beginner’s Guide To ESP32 Programming, où nous expliquons comment faire.

Notez qu’il existe deux versions de la carte. L’ancienne version V1 nécessite de maintenir le bouton BOOT, puis d’appuyer sur RESET pour passer en mode programmation. La nouvelle version V2 ne demande plus cette manipulation. J’ai la version V2 et j’ai pu téléverser sans problème ni besoin d’appuyer sur les boutons.

Configurer la bibliothèque TFT_eSPI via User_Setup.h

Jusqu’ici, tout devrait être simple. Voici la partie difficile. Si vous voulez afficher quelque chose à l’écran, il vous faudra utiliser une bibliothèque graphique. La plus courante est probablement la bibliothèque TFT_eSPI de Bodmer. Vous la trouverez dans le Library Manager et vous pouvez l’installer comme d’habitude :

TFT_eSPI library in Library Manager
Bibliothèque TFT_eSPI dans le Library Manager

La difficulté est de configurer les bons paramètres pour le CrowPanel 2.8″ afin que la bibliothèque TFT_eSPI fonctionne. Pour cela, il faut trouver un fichier nommé User_Setup.h, qui fait partie de la bibliothèque TFT_eSPI. Typiquement, sous Windows, il se trouve dans un chemin similaire à :

C:\Users\stefa\OneDrive\Documents\Arduino\libraries\TFT_eSPI

Le chemin exact dépend de votre nom d’utilisateur (dans mon cas « stefa« ) et de votre système d’exploitation, et si vous utilisez OneDrive ou non. Il faudra le chercher.

Si vous ouvrez le fichier User_Setup.h, vous verrez une énorme quantité de réglages à ajuster pour que l’écran affiche quelque chose. Bon courage !

User_Setup.h
User_Setup.h

Il est étonnamment difficile de trouver les bons réglages et je dois remercier Ralph S Bacon et son TFT 3.5″ Touch Screen & ESP32 built in – Elecrow review qui m’ont évité beaucoup d’essais et d’erreurs. Voici les réglages nécessaires :

#define ILI9341_DRIVER
#define TFT_WIDTH  320
#define TFT_HEIGHT 240 

#define TFT_BACKLIGHT_ON HIGH
#define TFT_BL   27 
#define TFT_MISO 12
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_CS   15
#define TFT_DC    2 
#define TFT_RST  -1
#define TOUCH_CS 33

#define SPI_FREQUENCY        27000000
#define SPI_TOUCH_FREQUENCY   2500000
#define SPI_READ_FREQUENCY   16000000

#define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
#define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts
#define SMOOTH_FONT

D’après les spécifications, l’écran 2,8″ utilise le pilote ILI9341 et a une résolution de 320×240 pixels. C’est donc la première partie des réglages. Ensuite, il faut assigner les broches GPIO qui contrôlent l’écran via SPI, et régler la fréquence SPI. Enfin, il y a les polices disponibles.

Vous devez éditer User_Setup.h, commenter tout le reste (//) et vous assurer que seuls ces réglages sont actifs. Je vous conseille de sauvegarder l’original User_Setup.h dans un nouveau fichier, par exemple « User_Setup.h.bak » et de remplacer tout le contenu de User_Setup.h par les réglages ci-dessus.

Une fois cela fait, vous devriez pouvoir lancer n’importe quel exemple fourni avec la bibliothèque TFT_eSPI. Mon préféré est le programme Cellular_Automata :

Example programs of the TFT_eSPI library
Exemples de la bibliothèque TFT_eSPI

Réglages pour les écrans CrowPanel 2,4″ et 3,5″

Les réglages pour l’écran 2,4″ sont les mêmes que pour le 2,8″ ci-dessus, car il a la même résolution (320×240) et le même pilote (ILI9341). Pour le modèle 3,5″, il suffit d’ajuster le pilote (ILI9488) et la résolution (480×320) pour correspondre à ses spécifications :

#define ILI9488_DRIVER
#define TFT_WIDTH  480
#define TFT_HEIGHT 320 

Les écrans CrowPanel 4,3″, 5″ et 7″ utilisent des pilotes qui ne sont pas directement pris en charge par la bibliothèque TFT_eSPI. Donc, à ma connaissance, vous ne pouvez pas utiliser cette bibliothèque avec ces écrans, mais je n’ai pas testé.

Configurer la bibliothèque TFT_eSPI via tft_setup.h

Modifier les réglages dans User_Setup.h est pratique pour tester les exemples de la bibliothèque TFT_eSPI. Mais ce n’est pas idéal quand vous écrivez et téléversez votre propre code. En effet, à chaque fois que vous codez pour un autre écran ou que vous réinstallez/actualisez la bibliothèque, il faut rechanger les réglages dans User_Setup à nouveau.

Heureusement, la bibliothèque TFT_eSPI propose une solution. Au lieu de modifier les réglages dans User_Setup.h, ce qui affecte tous les projets, vous pouvez ajouter un fichier nommé tft_setup.h à votre projet Arduino spécifique. Ce fichier contient les mêmes réglages que précédemment, mais ils ne s’appliqueront qu’à ce projet. Cela veut dire que vous pouvez avoir différents projets avec différents écrans, sans avoir à modifier User_Setup.h à chaque fois que vous changez d’écran.

Voici un exemple détaillé. Créez d’abord un nouveau projet Arduino et enregistrez-le sous « tft_test« , par exemple. Cela créera un dossier tft_test avec un fichier tft_test.ino dedans :

Arduino Project Folder tft_test
Dossier du projet Arduino tft_test

Dans ce dossier, créez maintenant un fichier nommé « tft_setup.h » – exactement avec ce nom. Votre dossier de projet devrait alors ressembler à ceci :

Dossier du projet Arduino avec tft_setup.h

Dans votre Arduino IDE, vous devriez maintenant voir deux onglets : tft_test.ino et tft_setup.h sur lesquels vous pouvez cliquer pour éditer les fichiers.

Arduino IDE with tft_test.ino and tft_setup.h tabs
Arduino IDE avec les onglets tft_test.ino and tft_setup.h

Dans le fichier tft_setup.h, copiez tous les réglages d’écran vus plus haut. L’extrait ci-dessous n’est qu’un exemple. Il faut copier tous les réglages.

#define ILI9341_DRIVER
#define TFT_WIDTH  320
#define TFT_HEIGHT 240 
..
#define LOAD_FONT8
#define LOAD_GFXFF  
#define SMOOTH_FONT

Dans le fichier tft_test.ino, copiez le code suivant. C’est un petit test qui utilise la bibliothèque TFT_eSPI pour afficher le texte « Makerguides » au centre de l’écran.

#include "tft_setup.h"
#include"TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

void setup(void) {
  tft.init();
  tft.fillScreen(TFT_BLACK);  
}

void loop() {
  tft.setCursor(50, 150, 2);  
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.setTextSize(2);
  tft.println("Makerguides");
  delay(5000);
}

Notez que tft_setup.h est inclus en haut du programme. Le code est simple à comprendre. On crée un objet TFT_eSPI et on l’initialise dans la fonction setup(). Dans la fonction loop, on place le curseur et la police (2), la couleur et la taille du texte, puis on affiche la chaîne « Makerguides » sur l’écran TFT.

Si vous compilez et téléversez ce programme, vous devriez voir le résultat suivant sur votre écran :

Text "Makerguides" shown on display
Texte « Makerguides » affiché à l’écran

Si vous êtes arrivé jusque-là, bravo ! Le plus dur est fait. Dans les prochaines sections, vous apprendrez à lire les données tactiles pour calibrer l’écran, puis à créer une interface utilisateur simple.

Calibrer l’écran tactile

Le CrowPanel 2.8″ est équipé d’un écran tactile résistif qu’il faut d’abord calibrer avant de l’utiliser avec la bibliothèque TFT_eSPI. Certains exemples de code de la bibliothèque intègrent le code de calibration, mais ce n’est pas pratique de l’avoir dans chaque projet.

Extraction des paramètres de calibration

J’ai donc adapté le programme suivant à partir des exemples pour extraire les paramètres de calibration nécessaires :

#include "tft_setup.h"
#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

void setup() {
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(0);
}

void loop() {
  uint16_t cal[5];

  tft.fillScreen(TFT_BLACK);
  tft.setCursor(20, 0);
  tft.setTextFont(2);
  tft.setTextSize(1);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.print("Touch corners ... ");
  tft.calibrateTouch(cal, TFT_MAGENTA, TFT_BLACK, 15);
  tft.println("done.");

  Serial.printf("cal: {%d, %d, %d, %d, %d}\n",
                cal[0], cal[1], cal[2], cal[3], cal[4]);
  delay(10000);
}

Quand vous l’exécutez, il vous demande de toucher les quatre coins de l’écran, puis affiche les 5 paramètres de calibration (coordonnées des coins et orientation de l’écran) sur le Serial.monitor. Votre écran pendant la calibration devrait ressembler à ceci :

Calibration of touch screen
Calibration de l’écran tactile

Et sur le Serial.monitor, vous devriez voir quelque chose comme ceci une fois la calibration terminée :

  cal: {286, 3478, 196, 3536, 2}

La calibration se répète toutes les 10 secondes, donc vous pouvez recommencer plusieurs fois pour obtenir les paramètres les plus précis. Copiez-les quelque part, car vous en aurez besoin pour l’étape suivante.

Lecture des coordonnées tactiles

Dans cette section, on va écrire un petit programme pour lire la position où l’écran est touché. Regardez le code suivant :

#include "tft_setup.h"
#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };

void setup() {
  tft.begin();
  tft.setRotation(0);
  tft.setTextSize(2);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.fillScreen(TFT_BLACK);
  tft.setTouch(cal);
}

void loop() {
  uint16_t x = 0, y = 0;

  if (tft.getTouch(&x, &y)) {
    tft.setCursor(50, 150);
    tft.printf("x=%d, y=%d    ", x, y);
  }

  delay(100);
}

D’abord, on inclut les bibliothèques comme d’habitude et on crée l’objet écran. La ligne suivante est importante : on définit et on stocke les paramètres de calibration extraits précédemment :

uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };

Ensuite, dans la fonction setup, on règle les paramètres classiques de l’écran comme la rotation, la taille et la couleur du texte. À la fin, la ligne la plus importante : on applique les paramètres de calibration :

  tft.setTouch(cal);

La boucle principale est simple. Toutes les 100 ms, on appelle tft.getTouch et on vérifie si un contact a été détecté. Si c’est le cas, on affiche les coordonnées du toucher à l’écran. Votre écran devrait ressembler à ceci :

Reading and displaying touch coordinates
Lecture et affichage des coordonnées tactiles

Et voilà, on a tout ce qu’il faut pour créer une interface utilisateur. Les prochaines sections donnent un exemple simple.

Créer une interface utilisateur

Dans cette section, on va créer une interface utilisateur (UI) simple avec deux boutons pour contrôler les deux LEDs connectées au port GPIO_D. L’interface ressemblera à ceci :

UI with two Buttons to control the LEDs
UI avec deux boutons pour contrôler les LEDs

Mais avant de pouvoir créer cette UI, il faut installer une bibliothèque supplémentaire. La bibliothèque TFT_eWidget est une petite extension de TFT_eSPI qui fournit des éléments d’interface comme des boutons, jauges ou graphiques. Elle s’installe comme d’habitude via le Library Manager :

TFT_eWidget library in Library Manager
Bibliothèque TFT_eWidget dans le Library Manager

Une fois installée, on a tout ce qu’il faut. Regardez d’abord le code complet de l’UI avant de détailler son fonctionnement :

#include "tft_setup.h"
#include "TFT_eSPI.h"
#include "TFT_eWidget.h"

TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };

const int led1 = 25;
const int led2 = 32;

ButtonWidget btn1 = ButtonWidget(&tft);
ButtonWidget btn2 = ButtonWidget(&tft);
ButtonWidget* btns[] = { &btn1, &btn2 };

void btn1_pressed(void) {
  if (btn1.justPressed()) {
    bool state = !btn1.getState();
    btn1.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
    digitalWrite(led1, state ? HIGH : LOW);
  }
}

void btn2_pressed(void) {
  if (btn2.justPressed()) {
    bool state = !btn2.getState();
    btn2.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
    digitalWrite(led2, state ? HIGH : LOW);
  }
}

void initButtons() {
  uint16_t w = 100;
  uint16_t h = 50;
  uint16_t x = (tft.width() - w) / 2;
  uint16_t y = tft.height() / 2 - h - 10;

  btn1.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_YELLOW, "LED1", 2);
  btn1.setPressAction(btn1_pressed);
  btn1.drawSmoothButton(false, 2, TFT_BLACK);

  y = tft.height() / 2 + 10;
  btn2.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_GREEN, "LED2", 2);
  btn2.setPressAction(btn2_pressed);
  btn2.drawSmoothButton(false, 2, TFT_BLACK);
}

void handleButtons() {
  uint8_t nBtns = sizeof(btns) / sizeof(btns[0]);
  uint16_t x = 0, y = 0;
  bool touched = tft.getTouch(&x, &y);
  for (uint8_t b = 0; b < nBtns; b++) {
    if (touched) {
      if (btns[b]->contains(x, y)) {
        btns[b]->press(true);
        btns[b]->pressAction();
      }
    } else {
      btns[b]->press(false);
      btns[b]->releaseAction();
    }
  }
}

void setup() {
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);

  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);
  tft.setTouch(cal);
  
  initButtons();2
}

void loop() {
  handleButtons();
  delay(50);
}

L’interface aura cinq états ou écrans : les deux boutons initialisés, puis chacun en état allumé ou éteint.

Different screens of the UI
Différents écrans de l’UI

Voyons de plus près comment cela fonctionne.

Bibliothèques

D’abord, on installe les trois bibliothèques nécessaires. Rappelez-vous que « tft_setup.h » contient les réglages de l’écran TFT et doit faire partie du projet Arduino contenant le code ci-dessus.

#include "tft_setup.h"
#include "TFT_eSPI.h"
#include "TFT_eWidget.h"

Cependant, si vous avez les bons réglages dans User_Setup.h, vous n’avez pas besoin d’inclure le fichier tft_setup.h.

Constantes et objets

Ensuite, on crée l’objet écran via TFT_eSPI tft et une constante cal avec les paramètres de calibration. Puis on définit les broches GPIO des deux LEDs. Après cela, on crée les deux objets boutons btn1 et btn2.

TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };

const int led1 = 25;
const int led2 = 32;

ButtonWidget btn1 = ButtonWidget(&tft);
ButtonWidget btn2 = ButtonWidget(&tft);
ButtonWidget* btns[] = { &btn1, &btn2 };

On stocke les deux boutons dans un tableau btns, ce qui simplifie la gestion des événements. On y reviendra plus loin.

Gestion des appuis sur les boutons

Les fonctions btn1_pressed() et btn2_pressed() gèrent les appuis sur chaque bouton LED. Quand un bouton est pressé, l’état de la LED correspondante est inversé et l’apparence du bouton est mise à jour à l’écran. Ci-dessous, seul le code pour btn1 est montré, mais celui pour btn2 est quasiment identique, seule la LED changée diffère.

void btn1_pressed(void) {
  if (btn1.justPressed()) {
    bool state = !btn1.getState();
    btn1.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
    digitalWrite(led1, state ? HIGH : LOW);
  }
}

Initialisation des boutons

La fonction initButtons() configure la position, l’apparence et les actions des deux boutons sur l’écran TFT. Chaque bouton est initialisé avec des propriétés spécifiques et son action d’appui. On met le bouton pour la LED jaune en jaune (TFT_YELLOW) et celui pour la LED verte en vert (TFT_GREEN).

void initButtons() {
  ...
  btn1.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_YELLOW, "LED1", 2);
  btn1.setPressAction(btn1_pressed);
  btn1.drawSmoothButton(false, 2, TFT_BLACK);

  ...
  btn2.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_GREEN, "LED2", 2);
  btn2.setPressAction(btn2_pressed);
  btn2.drawSmoothButton(false, 2, TFT_BLACK);
}

Gestion des boutons

Dans la fonction handleButtons(), on vérifie les entrées tactiles sur l’écran TFT via tft.getTouch(). On parcourt tous les boutons et on appelle la fonction pressAction() ou releaseAction() selon les coordonnées du toucher.

void handleButtons() {
  ...
  bool touched = tft.getTouch(&x, &y);
  for (uint8_t b = 0; b < nBtns; b++) {
    if (touched) {
      if (btns[b]->contains(x, y)) {
        btns[b]->press(true);
        btns[b]->pressAction();
      }
    } else {
      btns[b]->press(false);
      btns[b]->releaseAction();
    }
  }
}

Les boutons créés n’ont pas d’action de relâchement, car ce n’est pas nécessaire ici. Mais pour garder le code générique, on appelle quand même releaseAction(). L’avantage est que le code fonctionnera sans modification si vous voulez ajouter des actions de relâchement plus tard.

Fonction setup

Dans la fonction setup(), on configure les broches des LEDs en sortie, on initialise l’écran TFT, on règle sa rotation, on remplit l’écran de noir, on applique la calibration tactile et on crée les boutons.

void setup() {
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);

  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);
  tft.setTouch(cal);
  
  initButtons();
}

Fonction loop

La fonction loop() vérifie en continu les interactions avec les boutons en appelant handleButtons() et ajoute un petit délai pour éviter les appuis trop rapides.

void loop() {
  handleButtons();
  delay(50);
}

Notez que l’appel à delay() bloque toutes les autres actions. Vous pouvez aussi faire autrement pour éviter ce blocage :

void loop() {
  static uint32_t lastTime = millis();
  if (millis() - lastTime >= 50) {
    handleButtons();
    lastTime = millis();
  }
}

Et voilà, une interface simple pour contrôler deux boutons depuis un CrowPanel 2.8″ ESP32 Display.

L’exemple de code ci-dessus est dérivé de l’exemple Button_demo.ino de la bibliothèque TFT_eWidget. Pour plus d’infos et d’autres exemples, allez voir là-bas.

Conclusion

Ce tutoriel vous a proposé un guide détaillé pour la configuration du CrowPanel 2.8″ ESP32 Display. Avec peu ou pas de modifications, ce guide s’applique aussi aux écrans 2,4″ et 3,5″.

Les cartes CrowPanel ESP32 Display intègrent quasiment tout ce qu’il faut pour un projet avec écran : écran tactile TFT, ESP32, lecteur de carte TF, connecteur batterie avec chargeur, sortie haut-parleur et interface I2C.

Mais cela veut aussi dire que le nombre de broches GPIO libres est limité à deux. Heureusement, grâce à l’interface I2C, vous pouvez utiliser un expander GPIO pour en ajouter. Consultez notre tutoriel Using GPIO Expander MCP23017 With Arduino.

Travailler avec des écrans est souvent délicat, car il faut le bon pilote et les bons réglages. Dans ce guide, vous avez appris à configurer la bibliothèque TFT_eSPI.h pour piloter le CrowPanel 2.8″. On a aussi utilisé l’extension TFT_eWidget pour créer une interface simple avec deux boutons pour contrôler deux LEDs. Consultez le tutoriel Digital Clock with CrowPanel 3.5″ ESP32 Display où on étend l’exemple pour créer une horloge digitale.

Si vous voulez des interfaces plus avancées, la bibliothèque LVGL est un meilleur choix, car elle propose plus de widgets et un logiciel GUI Builder. Mais elle est aussi plus complexe à installer et à utiliser. Pour plus d’infos, consultez les tutoriels sur le site d’ELECROW. Il y a des exemples Arduino pour LVGL, mais aussi pour ESP-IDF, ESPHome, PlatformIO et MicroPython.

Si vous voulez utiliser LVGL, regardez aussi les CrowPanel ESP32 Display Video Tutorials qui expliquent comment utiliser le GUI builder Squareline Studio. Notez qu’il existe une version gratuite, mais limitée (Personal plan) de ce GUI builder.

Plein de choses à tester ! Amusez-vous bien ; )

Liens

Voici quelques liens que j’ai trouvés utiles en rédigeant ce guide.

Schémas

J’ai extrait les schémas suivants de la carte depuis le lien CrowPanel 2.8″-ESP32 Display Schematics. Il semble que certains exemples de code utilisent de mauvaises broches ou des broches obsolètes, et dans ce cas les schémas vous aideront à clarifier les choses.

Schematic USB Type-C
Schéma USB Type-C
Schematic USB
Schéma USB
Schematic Battery port and charger
Schéma du port batterie et du chargeur
Schematic Power
Schéma d’alimentation
Schematic ESP32-WROOM-32-N4
Schéma ESP32-WROOM-32-N4
Schematic LCD Connector
Schéma du connecteur LCD
Schematic Speaker
Schéma du haut-parleur
Schematic GPIO_D
Schéma du port GPIO_D
Schematic I2C
Schéma du port I2C
Schematic UART
Schéma du port UART
Schematic TF Card
Schéma du lecteur de carte TF
Schematic XPT2046
Schéma XPT2046