Ce tutoriel vous montrera comment démarrer avec l’écran HMI CrowPanel Advance 7“ (Version 1.0) d’Elecrow. Le CrowPanel Advance 7“ est un écran tactile HMI avec une résolution IPS de 800*480. Il utilise l’ESP32-S3 comme processeur principal, avec 512KB de SRAM, 8M de PSRAM et 16M de Flash.
Outre le grand écran IPS, les principales caractéristiques sont des modules sans fil optionnels pour Thread, Zigbee, Matter, WiFi 6 ou radio 2,4 GHz, une interface microphone et haut-parleur. Cela rend l’écran adapté pour AI assistant des applications et Elecrow fournit des exemples code et des instructions videos pour cela.
Cependant, dans ce tutoriel, nous commençons par un exemple très simple qui écrit uniquement du texte à l’écran et réagit aux entrées tactiles. Cela devrait vous faciliter la prise en main de cet écran. Notez que j’utilise la Version 1.0 et que le code peut ne pas fonctionner avec d’autres versions de l’écran !
Pièces requises
Vous aurez besoin du CrowPanel Advance 7“ HMI Display d’ELECROW et de l’IDE Arduino. J’ai la Version 1.0 mais une version plus récente 1.2 est disponible.
CrowPanel Advance 7“
Notez que vous pouvez obtenir l’écran avec ou sans boîtier en acrylique. Ce dernier est pratique si vous souhaitez monter l’écran sur un mur, par exemple, et ne pas construire votre propre boîtier. Faites juste attention aux boutons reset/boot à l’arrière. Ils dépassent assez et si vous montez l’écran trop près, ils seront pressés.
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 de l’écran CrowPanel Advance 7“
L’écran CrowPanel Advance ESP32 7 pouces est un écran tactile capacitif IPS avec une résolution de 800*480 et un angle de vue large de 178°. L’image ci-dessous montre l’avant de l’écran avec ses dimensions :
L’écran utilise la puce ESP32-S3 comme processeur principal. Cette puce est équipée d’un processeur Xtensa 32 bits LX7 double cœur avec une fréquence principale allant jusqu’à 240MHz, avec 512KB de SRAM, 8M de PSRAM et 16M de Flash.
Périphériques
Concernant les périphériques, le module d’affichage dispose d’une horloge temps réel (RTC) avec batterie intégrée, un port de charge de batterie, une sortie haut-parleur, un microphone numérique, un buzzer, un emplacement pour carte micro SD, un port I2C, un port GPIO avec deux GPIO, et deux sorties UART. La photo ci-dessous montre l’arrière du PCB, où vous pouvez voir la plupart de ces composants :
Le tableau suivant donne un aperçu des différents ports, des broches GPIO associées et des caractéristiques électriques :
| Port | Broches | Caractéristiques électriques |
|---|---|---|
| UART0-OUT | RX(IO44); TX(IO43) RX; | Tension de sortie : 3.3V Courant de sortie : 1A max. Usage : sortie alimentation et communication. |
| UART1-OUT | RX(IO19); TX(IO20) RX; | Tension de sortie : 3.3V Courant de sortie : 1A max. Usage : sortie alimentation et communication. |
| UART0-IN | RX(IO44); TX(IO43) RX; | Tension d’entrée : 5V ± 5%. 5.5V max. Courant d’entrée : 2A max. Usage : entrée alimentation et communication. |
| I2C | SDA(IO15); SCL(IO16) ; | Tension de sortie : 3.3V Courant de sortie : 1A max. Usage : sortie alimentation et communication. |
| SPK | I2S_LRCLK(IO6);I2S_BCLK(IO5);I2S_SDIN(IO4); | Courant de sortie max : 20mA Type de signal : niveau logique 3.3V, signal de contrôle numérique |
| Emplacement carte SD | MOSI(IO6); MISO(IO4); CLK(IO5); CS(GND) | Courant de sortie max : 20mA Type de signal : niveau logique 3.3V, signal de contrôle numérique |
| Rétroéclairage LCD | P3.5（STC8H1K28） | Courant de sortie max : 20mA Type de signal : niveau logique 3.3V, signal de contrôle numérique |
| Réglage du rétroéclairage | P1.1（STC8H1K28） | |
| Microphone I2S | MIC_SD(IO20);MIC_WS(IO2);MIC_CLK(IO19) | Courant de sortie max : 20mA Type de signal : niveau logique 3.3V, signal de contrôle numérique |
| BUZZER | P2.7（STC8H1K28） | Courant de sortie max : 20mA Type de signal : niveau logique 3.3V, signal de contrôle numérique |
| TP_RST | P1.7（STC8H1K28） | |
| MUTE amplificateur de puissance | P3.7（STC8H1K28） | |
| SHUT amplificateur de puissance | P3.6（STC8H1K28） |
Sélection des fonctions
Certains périphériques comme le microphone (MIC), le haut-parleur (SPK), le module sans fil (WM) et la carte SD (TF Card) partagent les mêmes GPIO et ne peuvent être utilisés qu’en combinaisons spécifiques. À l’arrière de l’écran, vous trouverez un tableau et deux interrupteurs DIP qui vous permettent de sélectionner une certaine combinaison :
Communication sans fil
En plus de la fonction Wi-Fi 2.4GHz et BLE intégrée avec antenne RF intégrée, l’écran dispose d’un emplacement séparé pour un module sans fil. Quatre modules sans fil sont disponibles : Module-ESP32-H2, Module-ESP32-C6, Module-nRF2401 et Module-Meshtastic, qui permettent de communiquer via Zigbee, LoRa, nRF2401, Matter, Thread et Wi-Fi 6. L’image ci-dessous montre où ces modules de communication sont insérés :
Pour plus d’informations techniques, consultez le Description page for the CrowPanel Advance 7“ Display.
Autres variantes d’écran
Le CrowPanel Advance ESP32 7 pouces est une évolution de l’écran standard CrowPanel ESP32 7 pouces. Ces écrans existent en différentes tailles et résolutions, avec différents pilotes et capacités. Le tableau suivant donne un aperçu des différentes options d’écran :
Configuration de l’écran CrowPanel Advance 7“
Programmer le CrowPanel Advance 7“ est un peu délicat, car il faut installer des versions spécifiques des bibliothèques et du core ESP32. D’autres versions peuvent fonctionner mais je ne les ai pas testées.
Installer les bibliothèques
Commençons par installer les bibliothèques requises. Allez dans le dossier CrowPanel-Advance-HMI-lib situé sur Google Drive. Téléchargez le fichier librariesAdvance7.0.rar en cliquant sur l’icône de téléchargement comme montré ci-dessous :
librariesAdvance7.0.rar est un fichier compressé qu’il faut d’abord décompresser. Cliquez simplement sur le fichier dans votre Explorateur (sous Windows) et copiez le contenu dans un autre dossier. Pour ma part, j’ai copié le contenu dans le dossier suivant :
c:\Maet\Temp\librariesAdvance7.0\libraries
La capture d’écran ci-dessous montre une partie du contenu de ce dossier, votre dossier devrait être similaire :
librariesVous pouvez choisir un autre chemin, mais il doit se terminer par \libraries, car nous allons l’utiliser dans les paramètres de chemin de l’IDE Arduino.
L’IDE Arduino stocke les bibliothèques installées dans le dossier \libraries sous l’emplacement Sketchbook. Vous pourriez remplacer toutes les bibliothèques dans cet emplacement par celles téléchargées, mais cela ferait perdre toutes vos bibliothèques précédemment installées.
Nous allons plutôt changer (temporairement) le chemin de l’emplacement Sketchbook, ce qui est plus rapide et plus facile à annuler. Ouvrez le dialogue Fichier -> Préférences et entrez le chemin c:\Maet\Temp\librariesAdvance7.0 dans le champ pour l’emplacement Sketchbook comme montré ci-dessous :
Assurez-vous de NE PAS ajouter le dossier \libraries à la fin du chemin. L’IDE Arduino cherchera ce dossier lui-même. En d’autres termes, les bibliothèques téléchargées sont situées sous c:\Maet\Temp\librariesAdvance7.0\libraries mais vous entrez le chemin c:\Maet\Temp\librariesAdvance7.0.
Une fois que vous avez fini de programmer le CrowPanel Advance 7“, vous pouvez remettre le chemin de l’emplacement Sketchbook à son chemin d’origine et retrouver vos bibliothèques habituelles. Sous Windows, c’est généralement c:\Users\<username>\OneDrive\Documents\Arduino.
Installer la version 3.0.2 du core ESP32
Ensuite, il faut installer une version spécifique du core ESP32. Ouvrez le BOARDS MANAGER, tapez « esp32 » dans le champ de recherche et vous verrez les cartes « esp32 by Espressif Systems » comme montré ci-dessous :
Si vous n’avez pas installé les cartes ESP32, vous verrez un bouton INSTALL. Si vous les avez déjà installées mais pas la dernière version (comme ci-dessus), vous verrez un bouton UPDATE à la place.
Dans tous les cas, cliquez sur la liste déroulante et sélectionnez la version 3.0.2 comme montré ci-dessous, puis appuyez sur INSTALL.
Sur la capture d’écran, vous voyez que j’ai déjà installé la version 3.0.2, donc le bouton UPDATE est affiché. Vous devriez voir la même chose une fois que vous aurez installé le core ESP32 3.0.2. Si vous avez besoin d’aide, consultez notre How to Program ESP32 with Arduino IDE tutoriel.
Sélection de la carte
Ensuite, il faut sélectionner une carte ESP32 adaptée. Pour le CrowPanel Advance 7“, choisissez le “ESP32S3 Dev Module”. Pour cela, connectez d’abord l’écran via le câble USB à votre ordinateur. Puis cliquez sur le menu déroulant et sur “Select other board and port…” :
Cela ouvrira un dialogue où vous pouvez taper “esp32s3 dev » dans la barre de recherche. Vous verrez la carte “ESP32S3 Dev Module” sous Boards. Cliquez dessus, puis sur le port COM pour l’activer, puis cliquez sur OK :
Vous ne pourrez sélectionner le port COM que si l’écran est connecté à l’ordinateur via USB.
Paramètres de la carte
Enfin, il faut régler les paramètres corrects pour la carte. Allez dans le menu Outils comme montré ci-dessous :
Cela ouvrira un grand menu déroulant avec les options de réglage à la fin. Assurez-vous de définir les paramètres suivants :
Plus précisément, la taille de la Flash doit être réglée sur 16MB, le schéma de partition sur Huge APP et la PSRAM sur OPI PSRAM. Vous trouverez des informations supplémentaires sur la page Product Introduction pour le CrowPanel Advance 7“ Display.
Dessiner sur le CrowPanel Advance 7“ Display
Une fois la configuration terminée, nous pouvons commencer à programmer l’écran. Le CrowPanel Advance 7“ Display est livré avec code exemples et une vidéo tutorials, cependant, ils utilisent tous SquareLine Studio and LVGL pour afficher quelque chose à l’écran.
C’est parfait pour des interfaces utilisateur plus complexes mais un peu difficile si vous voulez débuter avec l’écran, car le code correspondant est assez volumineux et complexe.
L’exemple suivant est beaucoup plus simple et vous montre comment afficher du texte à l’écran et réagir aux entrées tactiles en utilisant la bibliothèque LovyanGFX. Si vous avez suivi la procédure d’installation décrite précédemment, vous aurez déjà installé la bibliothèque LovyanGFX.
Structure du projet
D’abord, créons le dossier nécessaire pour le projet. Créez un dossier nommé « advance7« , avec deux fichiers à l’intérieur, nommés « advance7.ino » et « lgfx_conf.h » :
Puis ouvrez le fichier advance7.ino dans votre IDE Arduino. Vous devriez voir des onglets pour les deux fichiers du projet :
Configuration LovyanGFX
Dans le fichier lgfx_conf.h, copiez le code suivant, qui crée la classe LGFX avec la configuration des broches pour l’écran.
// lgfx_conf.h
#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include <lgfx/v1/platforms/esp32s3/Panel_RGB.hpp>
#include <lgfx/v1/platforms/esp32s3/Bus_RGB.hpp>
#include <driver/i2c.h>
class LGFX : public lgfx::LGFX_Device {
public:
lgfx::Bus_RGB _bus_instance;
lgfx::Panel_RGB _panel_instance;
lgfx::Touch_GT911 _touch_instance;
LGFX(void) {
{
auto cfg = _panel_instance.config();
cfg.memory_width = 800;
cfg.memory_height = 480;
cfg.panel_width = 800;
cfg.panel_height = 480;
cfg.offset_x = 0;
cfg.offset_y = 0;
_panel_instance.config(cfg);
}
{
auto cfg = _panel_instance.config_detail();
cfg.use_psram = 1;
_panel_instance.config_detail(cfg);
}
{
auto cfg = _bus_instance.config();
cfg.panel = &_panel_instance;
cfg.pin_d0 = GPIO_NUM_21; // B0
cfg.pin_d1 = GPIO_NUM_47; // B1
cfg.pin_d2 = GPIO_NUM_48; // B2
cfg.pin_d3 = GPIO_NUM_45; // B3
cfg.pin_d4 = GPIO_NUM_38; // B4
cfg.pin_d5 = GPIO_NUM_9; // G0
cfg.pin_d6 = GPIO_NUM_10; // G1
cfg.pin_d7 = GPIO_NUM_11; // G2
cfg.pin_d8 = GPIO_NUM_12; // G3
cfg.pin_d9 = GPIO_NUM_13; // G4
cfg.pin_d10 = GPIO_NUM_14; // G5
cfg.pin_d11 = GPIO_NUM_7; // R0
cfg.pin_d12 = GPIO_NUM_17; // R1
cfg.pin_d13 = GPIO_NUM_18; // R2
cfg.pin_d14 = GPIO_NUM_3; // R3
cfg.pin_d15 = GPIO_NUM_46; // R4
cfg.pin_henable = GPIO_NUM_42;
cfg.pin_vsync = GPIO_NUM_41;
cfg.pin_hsync = GPIO_NUM_40;
cfg.pin_pclk = GPIO_NUM_39;
cfg.freq_write = 21000000;
cfg.hsync_polarity = 0;
cfg.hsync_front_porch = 8;
cfg.hsync_pulse_width = 4;
cfg.hsync_back_porch = 8;
cfg.vsync_polarity = 0;
cfg.vsync_front_porch = 8;
cfg.vsync_pulse_width = 4;
cfg.vsync_back_porch = 8;
cfg.pclk_idle_high = 1;
_bus_instance.config(cfg);
}
_panel_instance.setBus(&_bus_instance);
{
auto cfg = _touch_instance.config();
cfg.x_min = 0;
cfg.x_max = 800;
cfg.y_min = 0;
cfg.y_max = 480;
cfg.pin_int = -1;
cfg.bus_shared = false;
cfg.offset_rotation = 0;
cfg.i2c_port = I2C_NUM_0;
cfg.pin_sda = GPIO_NUM_15;
cfg.pin_scl = GPIO_NUM_16;
cfg.pin_rst = -1;
cfg.freq = 400000;
cfg.i2c_addr = 0x5D; // 0x5D , 0x14
_touch_instance.config(cfg);
_panel_instance.setTouch(&_touch_instance);
}
setPanel(&_panel_instance);
}
};
C’est la configuration de l’écran telle que requise par la bibliothèque LovyanGFX et c’est essentiellement une copie du fichier LovyanGFX_Driver.h de l’exemple de code lesson-03. Il indique à la bibliothèque quelles broches de l’écran et de l’interface tactile sont connectées à quelles broches GPIO de l’ESP32.
Ce fichier de configuration reste le même pour tous les projets et vous pouvez le copier-coller dans différents projets si besoin.
Code pour le dessin
Enfin, copiez le code suivant dans le fichier advance7.ino. C’est un test simple qui écrit du texte à l’écran et réagit aux entrées tactiles :
#include "lgfx_conf.h"
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <TCA9534.h>
LGFX gfx;
TCA9534 ioex;
void initIOEX() {
Wire.begin(15, 16);
delay(50);
ioex.attach(Wire);
ioex.setDeviceAddress(0x18);
ioex.config(1, TCA9534::Config::OUT);
ioex.config(2, TCA9534::Config::OUT);
ioex.config(3, TCA9534::Config::OUT);
ioex.config(4, TCA9534::Config::OUT);
ioex.output(1, TCA9534::Level::H); // backlight
}
void initGT911() {
pinMode(1, OUTPUT);
digitalWrite(1, LOW);
ioex.output(2, TCA9534::Level::L);
delay(20);
ioex.output(2, TCA9534::Level::H);
delay(100);
pinMode(1, INPUT);
}
void setup() {
initIOEX();
initGT911();
gfx.init();
gfx.fillScreen(TFT_BLUE);
gfx.setTextColor(TFT_WHITE, TFT_BLUE);
gfx.setTextSize(4);
gfx.drawString("Makerguides-4", 250, 200);
}
void loop() {
uint16_t touch_x, touch_y;
if (gfx.getTouch(&touch_x, &touch_y)) {
gfx.fillCircle(touch_x, touch_y, 10, TFT_YELLOW);
}
delay(100);
}
Plus précisément, ce code remplit l’arrière-plan de l’écran en bleu, écrit le texte « Makerguides-4 » et réagit aux touches en dessinant un cercle jaune à l’endroit touché. L’image ci-dessous montre l’écran après quelques entrées tactiles :
Dans les sections suivantes, nous examinerons le code de plus près et verrons comment il fonctionne.
Includes
Le code commence par inclure le fichier de configuration de l’écran, la bibliothèque Wire pour la communication I2C, la bibliothèque Adafruit_GFX pour le dessin et la bibliothèque TCA9534 pour l’extension IO qui fait partie de l’écran CrowPanel Advance 7“ :
#include "lgfx_conf.h" #include <Wire.h> #include <Adafruit_GFX.h> #include <TCA9534.h>
Objets
Ensuite, nous créons des objets pour l’écran et l’extension IO :
LGFX gfx; TCA9534 ioex;
Fonction initIOEX
La fonction initIOEX initialise l’extension IO TCA9534. Cela est nécessaire pour router la communication entre l’écran et l’ESP32 via le nombre limité de canaux GPIO.
void initIOEX() {
Wire.begin(15, 16);
delay(50);
ioex.attach(Wire);
ioex.setDeviceAddress(0x18);
ioex.config(1, TCA9534::Config::OUT);
ioex.config(2, TCA9534::Config::OUT);
ioex.config(3, TCA9534::Config::OUT);
ioex.config(4, TCA9534::Config::OUT);
ioex.output(1, TCA9534::Level::H); // backlight
}
Important aussi est la dernière ligne qui allume le rétroéclairage de l’écran. Sans rétroéclairage, vous ne verrez rien.
Fonction initGT911
La fonction initGT911 initialise le contrôleur tactile (GT911) de l’écran. Cela permet à l’ESP32 de réagir aux entrées tactiles.
void initGT911() {
pinMode(1, OUTPUT);
digitalWrite(1, LOW);
ioex.output(2, TCA9534::Level::L);
delay(20);
ioex.output(2, TCA9534::Level::H);
delay(100);
pinMode(1, INPUT);
}
Fonction setup
Dans la fonction setup, nous initialisons l’extension IO, le GT911 et l’écran. Nous remplissons ensuite l’écran en bleu et écrivons le texte « Makerguides-4 » approximativement au centre, à la position (250, 200) en blanc.
void setup() {
initIOEX();
initGT911();
gfx.init();
gfx.fillScreen(TFT_BLUE);
gfx.setTextColor(TFT_WHITE, TFT_BLUE);
gfx.setTextSize(4);
gfx.drawString("Makerguides-4", 250, 200);
}
Fonction loop
Dans la fonction loop, nous appelons régulièrement la fonction gfx.getTouch() pour vérifier les entrées tactiles. S’il y a une entrée tactile, nous récupérons la position de la touche dans les variables touch_x et touch_y, et dessinons un cercle rempli jaune de rayon 10 pixels à cet endroit.
void loop() {
uint16_t touch_x, touch_y;
if (gfx.getTouch(&touch_x, &touch_y)) {
gfx.fillCircle(touch_x, touch_y, 10, TFT_YELLOW);
}
delay(100);
}
Si vous compilez et téléversez le code, vous remarquerez que l’IDE Arduino vous avertit que des mises à jour pour vos cartes et bibliothèques sont disponibles.
Ne les installez pas, car elles remplaceraient les versions spécifiques des bibliothèques et cartes que nous venons d’installer lors de la configuration.
Version d’écran 1.0 vs 1.2
Il y a un problème avec la version antérieure V1.0 de l’écran CrowPanel Advance 7“ dont vous devez être conscient. Vous pouvez trouver la version de votre écran à l’arrière du PCB. Voir la photo ci-dessous. Si votre écran est livré avec le boîtier en acrylique, vous devrez retirer la plaque arrière pour voir le numéro de version.
Les modules H2 et C6 pour la communication sans fil fournis avec la série V1.0 de l’écran n’ont pas de firmware préinstallé. Malheureusement, vous ne pouvez pas connecter directement un programmateur série pour flasher le firmware nécessaire, car les broches d’en-tête manquent. Vous devrez souder des broches, flasher le firmware, puis les retirer.
Pour plus de détails, voir https://github.com/Elecrow-RD/CrowPanel-Advance-5.0-HMI-ESP32-AI-Display-800×480/tree/master/example/example_code5.0/lesson-09.
Notez qu’il y a aussi des différences dans les schémas entre Version 1.0 et la version actuelle Version 1.2, ce qui peut être important pour certaines applications.
Conclusions
J’espère que ce tutoriel vous a aidé à démarrer avec l’écran HMI CrowPanel Advance 7“. Nous avons fourni un exemple de code simple pour écrire du texte à l’écran et réagir aux entrées tactiles. Pour de nombreuses applications, cela devrait être un bon point de départ.
Si vous souhaitez créer des interfaces utilisateur plus avancées, SquareLine Studio and LVGL sont la solution, mais elles sont aussi plus difficiles à utiliser et le code est beaucoup plus complexe.
Elecrow fournit également plusieurs code exemples et vidéos tutorials qui montrent comment utiliser le haut-parleur, l’interface carte SD, les différentes options sans fil et comment créer des applications IA, comme un Chat Bot.
Si vous avez besoin d’un écran CrowPanel plus petit et plus simple, jetez un œil à notre CrowPanel 2.8″ ESP32 Display : Easy Setup Guide. Nous avons aussi des tutoriels sur des applications avec les écrans CrowPanel comme Digital Clock with CrowPanel 3.5″ ESP32 Display, Digital Timer Switch with CrowPanel ESP32 Display, ou le Parking sensor with CrowPanel ESP32 Display, qui pourraient vous intéresser.
Si vous avez des questions, n’hésitez pas à les laisser dans la section commentaires.
Bon bricolage ; )
Liens
Voici quelques liens pour le CrowPanel Advance 7“ HMI Display que j’ai trouvés utiles lors de la rédaction de ce tutoriel :
- Wiki
- Specification
- Setup Instructions
- Code Examples
- Code for Wireless Modules
- Video Tutorials
- Schematics Version 1.0
- Schematics Version 1.2
