Dans ce tutoriel, vous allez apprendre à débuter avec le CrowPanel Pico 4.3″ Display d’ELECROW. Les écrans CrowPanel sont super pratiques, car ils intègrent quasiment tout ce dont vous avez besoin : écran tactile, RP2040, lecteur de carte TF, connecteur batterie avec chargeur, interface I2C et même un buzzer.
Cependant, les premiers pas avec le CrowPanel Pico peuvent être un peu compliqués. Ce tutoriel, avec quelques exemples de code simples, devrait vous aider à démarrer.
Notez que nous parlons ici spécifiquement de la version écran 4,3″. Les autres écrans plus petits de la série CrowPanel Pico utilisent des pilotes d’affichage et des écrans tactiles différents, donc les exemples de code ne fonctionneront pas pour ceux-là.
Commençons par la liste du matériel nécessaire.
Matériel nécessaire
Évidemment, il vous faudra l’écran CrowPanel Pico 4,3″. Et si vous souhaitez connecter du matériel externe pour tester le port GPIO, quelques câbles, résistances, LEDs et une breadboard seront utiles.
Écran CrowPanel Pico 4,3″
Câble USB C
Jeu de fils Dupont
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 de l’écran CrowPanel Pico 4,3″
ELECROW propose différents écrans CrowPanel avec microcontrôleurs intégrés comme l’ESP32 ou le RP2040. Pour les écrans à base d’ESP32, consultez nos tutoriels CrowPanel 2.8″ ESP32 Display : Easy Setup Guide et Digital Clock with CrowPanel 3.5″ ESP32 Display.
Dans ce tutoriel, nous allons écrire du code pour le CrowPanel Pico 4,3″, qui utilise un RP2040. Comparé à l’ESP32, la puce RP2040 est moins puissante mais aussi moins chère, ce qui se reflète dans le prix des écrans CrowPanel Pico.
Spécifications
Les principales caractéristiques du CrowPanel Pico 4,3″ sont les suivantes :
- Écran 4,3″ Pico : résolution 320*240, dalle IPS, tactile capacitif et support du multitouch
- Microcontrôleur Raspberry Pi RP2040 (ARM Cortex-M0+) : puce double cœur 32 bits avec une fréquence maximale de 133 MHz.
- Connexion sans fil BW16 : supporte IEEE 802.11b/g/n 4GHz et la bande 5GHz, Bluetooth 5.0 et BLE
- Efficacité énergétique : prend en charge les modes veille et hibernation à faible consommation, pour économiser l’énergie et respecter l’environnement.
- Interfaces : I2C, UART, ports IO, USB, interface batterie lithium et buzzer d’alarme
Autres écrans CrowPanel Pico
Comme mentionné, il existe plusieurs autres CrowPanel Pico Displays with different display sizes mais tous utilisent le RP2040 comme microcontrôleur.
Le CrowPanel Pico 4,3″ (en jaune sur l’image) utilisé dans ce tutoriel se distingue par sa dalle IPS, son écran tactile capacitif et un plus grand nombre de connecteurs.
Connecteurs du CrowPanel Pico 4,3″
Dans cette section, nous allons détailler le brochage des différents connecteurs de l’écran. À l’arrière du CrowPanel Pico 4,3″, vous verrez 5 connecteurs blancs, un port GPIO, des ports USB et UART, un lecteur de carte TF et deux boutons (boot, reset).
Attention, les étiquettes des boutons boot et reset à l’arrière sont inversées ! Si vous ouvrez le boîtier et regardez la carte à l’intérieur, vous verrez que le bouton du haut est en fait « reset » et celui du bas « boot », comme indiqué sur la sérigraphie.
Le marquage des broches du port GPIO en haut est aussi incorrect. Il n’y a que 15 étiquettes alors qu’il y a 16 broches (l’étiquette pour GPIO2 manque), qui selon le schematics et le silk screen sont les suivants :
Donc, vu de face, le brochage du port GPIO est le suivant :
À côté du port GPIO, il y a trois connecteurs I2C, ADC et GPIO_2 qui exposent les broches GPIO suivantes :
Comme vous pouvez le voir, certaines broches ne sont pas utilisées sur les connecteurs GPIO_D et I2C. GPIO26, GPIO27 et GPIO28 sont des broches ADC qui peuvent lire des signaux analogiques. Enfin, il y a un autre port GPIO_D sur le côté de la carte, avec le brochage suivant :
Sinon, il y a un connecteur pour batterie LiPo, ainsi que les connecteurs USB et UART.
Installation du core RP2040
Avant de pouvoir programmer le RP2040 du CrowPanel Pico, il faut d’abord installer le core RP2040. Allez dans File -> Preferences et ouvrez la fenêtre de préférences
Dans la fenêtre de préférences, allez dans l’onglet Settings. En bas, vous verrez « Additional boards manager URLs: ». Cliquez sur le bouton à droite (en jaune) pour ouvrir l’éditeur d’URL
Dans l’éditeur d’URL, ajoutez l’URL suivante à la liste (en jaune ci-dessous) :
« https://github.com/earlephilhower/arduino-pico/releases/download/global/package_rp2040_index.json »
Comme vous pouvez le voir ci-dessus, j’ai aussi installé les cores ESP8266 et ESP32, mais vous n’avez besoin que du core RP2040 pour ce projet.
Installation des cartes RP2040
Ensuite, il faut installer les cartes RP2040. Allez dans Tools -> Board -> Board Manager et cherchez pico dans la barre de recherche. Installez les Raspberry Pi Pico/RP2040 boards par Earle F. Philhower. Après installation, cela devrait ressembler à ceci.
Sélectionner la carte Adafruit Feather RP2040 DVI
Une fois le core RP2040 installé, allez dans le Board Manager et sélectionnez la carte « Adafruit Feather RP2040 DVI » comme ci-dessous :
Nous sommes maintenant prêts à programmer le CrowPanel Pico.
Test du port GPIO_D du CrowPanel Pico 4,3″
Commençons par un simple programme Blink pour vérifier que nous pouvons bien programmer l’écran. Connectez une LED avec une résistance (100…220Ω) au port GPIO_D sur le côté de l’écran comme ci-dessous
La cathode de la LED doit être reliée à la broche GND du port GPIO_D et la broche la plus à droite est GPIO22, à connecter à la résistance et à la patte positive de la LED.
Ensuite, téléversez le programme blink suivant sur la carte (Adafruit Feather RP2040 DVI) et la LED devrait clignoter.
const int ledPin = 22;
void setup() {
pinMode(ledPin, OUTPUT);
}
void loop() {
digitalWrite(ledPin, HIGH);
delay(500);
digitalWrite(ledPin, LOW);
delay(500);
}
Il n’est pas nécessaire de maintenir les boutons boot ou reset pour passer la carte en mode programmation.
Notez que la broche GPIO22 est une broche PWM, donc vous pouvez aussi faire varier l’intensité de la LED. Voici la fonction correspondante loop() pour tester cela.
void loop() {
for (int b=0; b<=255; b++) {
analogWrite(ledPin, b);
delay(10);
}
}
Si tout fonctionne, on peut maintenant essayer quelque chose d’un peu plus intéressant. Dans les prochaines sections, on va d’abord écrire sur l’écran, puis tester le tactile, et enfin créer une petite application Scribble.
Écrire sur le CrowPanel Pico 4,3″
Avant de pouvoir dessiner ou écrire sur l’écran Pico, il faut installer la bibliothèque PicoDVI library. Ouvrez le Library Manager, cherchez PicoDVI et installez PicoDVI – Adafruit Fork par Luke Wren comme ci-dessous :
Une fois la bibliothèque installée, on peut écrire et dessiner sur l’écran. Voici un petit programme de test qui affiche le texte « Makerguides » sur l’écran :
// Display code example for CrowPanel Pico 4.3" Display
// by Makerguides
#include <PicoDVI.h>
DVIGFX16 disp(DVI_RES_320x240p60, picodvi_dvi_cfg);
void setup() {
if (!disp.begin())
;
disp.setRotation(0);
disp.fillScreen(0x0000);
disp.setTextSize(3);
disp.setCursor(10, 10);
disp.print("Makerguides");
}
void loop() {
}
Le code commence par inclure la bibliothèque PicoDVI library et créer l’objet écran.
#include <PicoDVI.h> DVIGFX16 disp(DVI_RES_320x240p60, picodvi_dvi_cfg);
L’élément le plus important ici est de définir la bonne résolution (DVI_RES_320x240p60) qui correspond à la résolution matérielle de l’écran. Dans notre cas, c’est 320×240 pixels. Notez que la PicoDVI library propose constructors for framebuffers with different depths. Ici, on définit un framebuffer 16 bits (DVIGFX16), mais il existe aussi DVIGFX8 et DVIGFX1.
Dans la fonction setup, on attend l’écran, on règle l’orientation, on remplit le fond en noir, on définit la taille du texte, puis on écrit le texte à la position (10,10).
void setup() {
if (!disp.begin())
;
disp.setRotation(0);
disp.fillScreen(0x0000);
disp.setTextSize(3);
disp.setCursor(10, 10);
disp.print("Makerguides");
}
Si vous téléversez le code, vous devriez voir le texte « Makerguides » sur votre écran comme ci-dessous.
Notez que la bibliothèque PicoDVI est dérivée de Adafruit-GFX-Library et propose beaucoup plus de fonctions. Par exemple, vous pouvez choisir différentes polices et dessiner des graphiques. On utilisera certaines de ces fonctions pour notre application Scribble.
Dans la prochaine section, on va d’abord faire fonctionner l’écran tactile.
Utiliser l’écran tactile du CrowPanel Pico 4,3″
D’après le code examples du CrowPanel Pico 4,3″, l’écran tactile peut être contrôlé avec la bibliothèque gt911-arduino library de TANCtec. Cependant, ni l’exemple de code (TouchPrint.ino) n’a fonctionné, ni mon code avec la bibliothèque originale gt911-arduino library. Il y a un souci avec la configuration des broches SDA et SCL dans la Wire library que je n’ai pas cherché à résoudre.
Ce qui a fonctionné, c’est de copier les fichiers TAMC_GT911.h et TAMC_GT911.c de l’exemple de code TouchPrint dans un nouveau dossier de projet (MyTouchPrint) et d’utiliser le code ci-dessous. Votre dossier de projet devrait ressembler à ceci et vous pouvez télécharger mon exemple MyTouchPrint.
MyTouchPrintLe code suivant affiche simplement les coordonnées (et la taille du contact) sur l’écran tactile lorsqu’un nouveau contact est détecté.
// Touchscreen code example for CrowPanel Pico 4.3" Display
// by Makerguides
#include "TAMC_GT911.h"
#define TS_SCL 21
#define TS_SDA 20
#define TS_INT 25
#define TS_RST 29
#define TS_WIDTH 800
#define TS_HEIGHT 480
TAMC_GT911 ts = TAMC_GT911(TS_SDA, TS_SCL, TS_INT, TS_RST, TS_WIDTH, TS_HEIGHT);
void ts_init() {
ts.begin();
ts.setRotation(ROTATION_INVERTED);
delay(100);
}
void ts_process() {
static uint16_t ox = 0, oy = 0;
uint16_t x = ts.points[0].x;
uint16_t y = ts.points[0].y;
uint8_t s = ts.points[0].size;
if (x != ox || y != oy) {
ox = x; oy = y;
Serial.printf("P: %4d %4d (%d)\n", x, y, s);
}
}
void setup() {
Serial.begin(9600);
ts_init();
}
void loop() {
ts.read();
if (ts.isTouched) {
ts_process();
}
}
Le code commence par inclure la bibliothèque TAMC_GT911, dont on a copié les fichiers dans le dossier de projet MyTouchPrint. On définit ensuite les broches de contrôle de l’écran tactile et la taille de l’écran tactile (800×400). Enfin, on utilise ces constantes pour créer l’objet tactile TAMC_GT911 ts.
#include "TAMC_GT911.h" #define TS_SCL 21 #define TS_SDA 20 #define TS_INT 25 #define TS_RST 29 #define TS_WIDTH 800 #define TS_HEIGHT 480 TAMC_GT911 ts = TAMC_GT911(TS_SDA, TS_SCL, TS_INT, TS_RST, TS_WIDTH, TS_HEIGHT);
Fonction ts_init
La fonction ts_init() initialise l’écran tactile en appelant ts.begin() et en réglant l’orientation (mode portrait). J’ai ajouté un court délai, car l’écran tactile détectait parfois des contacts aléatoires au démarrage.
void ts_init() {
ts.begin();
ts.setRotation(ROTATION_INVERTED);
delay(100);
}
Fonction ts_process
La fonction ts_process() traite les événements tactiles. Elle mémorise les coordonnées précédentes (ox, oy) et ne réagit qu’aux nouveaux contacts. Si les nouvelles coordonnées (x, y) sont différentes des précédentes (ox, oy), elle affiche les coordonnées et la taille du contact.
void ts_process() {
static uint16_t ox = 0, oy = 0;
uint16_t x = ts.points[0].x;
uint16_t y = ts.points[0].y;
uint8_t s = ts.points[0].size;
if (x != ox || y != oy) {
ox = x; oy = y;
Serial.printf("P: %4d %4d (%d)\n", x, y, s);
}
}
Le contrôleur tactile GT911 est vraiment sympa. Il peut détecter la taille du contact (pouce ou bout du doigt), il est multitouch et peut détecter jusqu’à 5 contacts simultanés. Cependant, le code ci-dessus ne rapporte que le premier (points[0]).
Fonction setup
Dans la fonction setup(), on initialise juste la communication série et l’écran tactile. Pensez à régler le baud rate du Serial Monitor à 9600 bauds.
void setup() {
Serial.begin(9600);
ts_init();
}
Fonction loop
Enfin, on a la fonction loop(). Elle lit l’écran tactile, vérifie si un contact est détecté et le traite si besoin.
void loop() {
ts.read();
if (ts.isTouched) {
ts_process();
}
}
Affichage sur le Serial Monitor
Si vous téléversez le code et touchez les quatre coins de l’écran, vous devriez voir des coordonnées similaires à celles-ci s’afficher dans le Serial Monitor.
Problèmes rencontrés
J’ai parfois rencontré des soucis étranges, où l’écran tactile ne détectait pas les contacts ou affichait « auto-switch to second address », ce qui n’aidait pas non plus. Le GT911 supporte deux adresses I2C : 0xBA/0xBB et 0x28/0x29, et la TAMC_GT911 bibliothèque essaie la seconde adresse si elle ne trouve pas l’écran tactile à la première.
Redémarrer ou débrancher l’écran a aidé et le problème était rare. Mais il semble y avoir un souci de fiabilité dont je n’ai pas trouvé la cause. L’écran était alimenté en USB, donc ce n’est pas l’alimentation.
Dessiner sur le CrowPanel Pico 4,3″
Vous savez maintenant écrire sur l’écran et détecter les contacts. On va combiner tout ça et créer une petite application Scribble qui permet de dessiner avec le doigt sur l’écran.
Ce sera un exemple minimal, avec une seule couleur de dessin, mais vous pouvez facilement l’étendre à plusieurs couleurs et au multitouch. Voici le code complet.
// Scribble code example for CrowPanel Pico 4.3" Display
// by Makerguides
#include "PicoDVI.h"
#include "TAMC_GT911.h"
#define TS_SCL 21
#define TS_SDA 20
#define TS_INT 25
#define TS_RST 29
#define TS_WIDTH 800
#define TS_HEIGHT 480
DVIGFX16 disp(DVI_RES_320x240p60, picodvi_dvi_cfg);
TAMC_GT911 ts = TAMC_GT911(TS_SDA, TS_SCL, TS_INT, TS_RST, TS_WIDTH, TS_HEIGHT);
uint16_t rgb(byte r, byte g, byte b) {
return ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
}
void ts_init() {
ts.begin();
ts.setRotation(ROTATION_INVERTED);
delay(100);
}
void ts_process() {
static uint16_t ox = 0, oy = 0;
uint16_t x = ts.points[0].x;
uint16_t y = ts.points[0].y;
uint8_t s = ts.points[0].size;
if (x != ox || y != oy) {
ox = x; oy = y;
int16_t sx = map(x, 0, TS_WIDTH, 0, disp.width());
int16_t sy = map(y, 0, TS_HEIGHT, 0, disp.height());
tone(19, 100, 10);
disp.fillCircle(sx, sy, s / 3, rgb(255, 255, 100));
}
}
void disp_init() {
if (!disp.begin())
;
disp.setRotation(0);
disp.fillScreen(rgb(0, 0, 0));
disp.setTextSize(1);
disp.setCursor(10, 10);
disp.print("Scribble");
}
void setup() {
disp_init();
ts_init();
}
void loop() {
ts.read();
if (ts.isTouched) {
ts_process();
}
}
Comme avant, il faut avoir installé PicoDVI. Et les fichiers TAMC_GT911.h et TAMC_GT911.c doivent être copiés dans votre dossier de projet.
Bibliothèques et objets
La création de l’objet écran DVIGFX16 disp et de l’objet tactile TAMC_GT911 ts, est la même que dans les exemples précédents.
Fonction rgb
La fonction rgb() convertit une couleur RGB color en RGB565 (or 16 bit) color, qui sont les codes couleur utilisés par la bibliothèque PicoDVI. Vous pouvez utiliser un RGB55 color picker pour trouver le code d’une couleur précise, mais les couleurs RGB sont plus courantes et faciles à utiliser. J’ai donc ajouté cette fonction simple qui convertit une couleur RGB en RGB565.
uint16_t rgb(byte r, byte g, byte b) {
return ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
}
Fonction ts_init
La fonction ts_init() reste inchangée. Elle initialise l’écran tactile et règle l’orientation. Pour d’autres orientations, consultez la TAMC_GT911.h file.
Fonction ts_process
La fonction ts_process() est légèrement étendue par rapport à l’exemple tactile précédent. Elle convertit notamment les coordonnées tactiles haute résolution (800, 480) en coordonnées écran basse résolution (320, 240) grâce à la fonction map function.
void ts_process() {
static uint16_t ox = 0, oy = 0;
uint16_t x = ts.points[0].x;
uint16_t y = ts.points[0].y;
uint8_t s = ts.points[0].size;
if (x != ox || y != oy) {
ox = x; oy = y;
int16_t sx = map(x, 0, TS_WIDTH, 0, disp.width());
int16_t sy = map(y, 0, TS_HEIGHT, 0, disp.height());
tone(19, 100, 10);
disp.fillCircle(sx, sy, s / 3, rgb(255, 255, 100));
}
}
Dès qu’un contact est détecté, un petit son est joué via la fonction tone(), puis un cercle jaune est dessiné aux coordonnées converties (sx, sy) avec un rayon proportionnel à la taille du contact (s/3).
Le code utilise le buzzer interne connecté à GPIO19. Je n’ai pas eu besoin de mettre la broche en mode OUTPUT, mais il vaut peut-être mieux le faire.
Fonction disp_init
La fonction disp_init() initialise l’écran et la seule différence est qu’on écrit « Scribble » au lieu de « Makerguides ». Cela indique simplement que l’application est prête. Mais vous pouvez aussi jouer un son à la place.
Fonctions setup et loop
Dans la fonction setup(), on appelle les fonctions d’initialisation de l’écran et la fonction loop() reste inchangée.
Exemple d’affichage
Si vous téléversez le code et touchez l’écran, vous devriez pouvoir dessiner des « cercles » de différents diamètres avec votre doigt ou votre pouce, comme ci-dessous :
Comme la résolution de l’écran est de 320×240 et ne correspond pas aux dimensions physiques, les « cercles » apparaissent comme des ellipses.
Et voilà, ce tutoriel est terminé. Vous avez maintenant une petite application Scribble que vous pouvez améliorer à votre guise.
Conclusions
Dans ce tutoriel, vous avez appris à contrôler le CrowPanel Pico 4,3″. On a vu des exemples de code pour détecter les contacts et dessiner à l’écran.
Le CrowPanel Pico 4,3″ possède un écran IPS avec de bons angles de vue et de belles couleurs. La bibliothèque PicoDVI library, qui est un fork de la Adafruit-GFX-Library était simple à installer et bien plus facile à prendre en main que l’exemple fourni pour SquareLine Studio. Par contre, SquareLine Studio permet de créer des interfaces utilisateur bien plus avancées et attrayantes.
L’écran tactile capacitif du CrowPanel Pico 4,3″ est sensible et peut détecter la taille et le multitouch – ce qui permet la reconnaissance de gestes comme le pincement ou la rotation. Cependant, l’exemple de code fourni n’a pas fonctionné pour moi et il m’a fallu pas mal de temps pour réussir à détecter les contacts. J’espère que l’exemple de ce tutoriel vous aidera.
De même, j’espère que la documentation sur les ports GPIO_D, ADC et I2C vous sera utile et facilitera l’utilisation de l’écran dans vos projets. Si vous avez des questions, n’hésitez pas à les poser en commentaire.
Bon bricolage ; )
