Neste tutorial vais aprender como começar a usar o CrowPanel Pico 4.3″ Display da ELECROW. Os ecrãs CrowPanel são ótimos, pois já trazem praticamente tudo o que precisas integrado. Incluem um ecrã tátil, um RP2040, um slot para cartão TF, um conector de bateria com carregador, uma interface I2C e até um buzzer.
No entanto, os primeiros passos com o CrowPanel Pico podem ser um pouco desafiantes. Espero que este tutorial, com alguns exemplos de código simples, te ajude.
Nota que estamos a falar especificamente da versão com ecrã de 4.3″. Os outros ecrãs mais pequenos da série CrowPanel Pico usam drivers e ecrãs táteis diferentes, e os exemplos de código não vão funcionar nesses modelos.
Vamos começar com o material necessário.
Material Necessário
Obviamente, vamos precisar do CrowPanel Pico 4.3″ Display. E, se quiseres ligar algum hardware externo para testar a porta GPIO, uns cabos, resistências, LEDs e uma breadboard vão dar jeito.
CrowPanel Pico 4.3″ Display
Cabo USB C
Conjunto de Cabos Dupont
Breadboard
Kit de Resistências & LEDs
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.
Características do CrowPanel Pico 4.3″ Display
A ELECROW oferece vários ecrãs CrowPanel com microcontroladores integrados como o ESP32 ou o RP2040. Para os ecrãs baseados em ESP32, vê os nossos tutoriais CrowPanel 2.8″ ESP32 Display : Easy Setup Guide e Digital Clock with CrowPanel 3.5″ ESP32 Display.
Neste tutorial vamos escrever algum código para o CrowPanel Pico 4.3″ Display, que é baseado no RP2040. Comparado com o ESP32, o chip RP2040 é menos potente mas também mais barato, o que se reflete no preço dos ecrãs CrowPanel Pico.
Especificações
As principais especificações do CrowPanel Pico 4.3″ Display são as seguintes:
- Ecrã Pico 4.3″: resolução 320*240, painel IPS, touch capacitivo e suporte multi-touch
- Microcontrolador Raspberry Pi RP2040 (ARM Cortex-M0+): chip dual-core de 32 bits com frequência máxima de 133 MHz.
- Ligação sem fios BW16: Suporta IEEE 802.11b/g/n a 4GHz e gama de frequências de 5GHz, suporta Bluetooth 5.0 e BLE
- Eficiência Energética: Suporta modos de sono e hibernação de baixo consumo, promovendo a poupança de energia e consciência ambiental.
- Interfaces: I2C, UART, portas IO, USB, interface para bateria de lítio e alarme buzzer
Outros Ecrãs CrowPanel Pico
Como mencionado, existem vários outros CrowPanel Pico Displays with different display sizes mas todos usam o RP2040 como microcontrolador.
O CrowPanel Pico 4.3″ Display (marcado a amarelo) usado neste tutorial destaca-se pelo painel IPS, o ecrã tátil capacitivo e o maior número de conectores.
Conectores do CrowPanel Pico 4.3″ Display
Nesta secção vamos descrever em mais detalhe o pinout dos diferentes conectores do ecrã. Se olhares para a parte de trás do CrowPanel Pico 4.3″ Display, podes ver que existem 5 conectores brancos, uma porta GPIO, uma porta USB e UART, um slot para cartão TF e dois botões (boot, reset).
Atenção que as etiquetas dos botões boot e reset na parte de trás estão trocadas! Se abrires a caixa e olhares para a placa no interior, podes ver que o botão de cima é na verdade o “reset” e o botão abaixo é o “boot”, como indicado na serigrafia.
A rotulagem dos pinos da porta GPIO no topo também está incorreta. Tem apenas 15 etiquetas mas existem 16 pinos (falta a etiqueta para o GPIO2), que de acordo com o schematics e o silk screen são os seguintes:
Assim, de frente para a porta GPIO, o pinout é o seguinte:
Ao lado da porta GPIO estão três conectores I2C, ADC e GPIO_2 que expõem os seguintes pinos GPIO:
Como podes ver, há pinos não utilizados nos conectores GPIO_D e I2C. GPIO26, GPIO27 e GPIO28 são pinos ADC que podem ser usados para ler sinais analógicos. Finalmente, existe outra porta GPIO_D na lateral da placa, com o seguinte pinout:
Além disso, existe um conector para bateria LiPo, e os conectores USB e UART.
Instalação do Core RP2040
Antes de poderes programar o RP2040 num CrowPanel Pico Display, tens primeiro de instalar o core RP2040. Vai a File -> Preferences e abre a janela de Preferências
Na janela de Preferências, vai ao separador Settings. No fundo vais ver “Additional boards manager URLs:”. Clica no botão à direita (marcado a amarelo) para abrir o editor de URLs
No editor de URLs adiciona o seguinte URL à lista (marcado a amarelo em baixo):
“https://github.com/earlephilhower/arduino-pico/releases/download/global/package_rp2040_index.json”
Como podes ver acima, também tenho instalados os cores ESP8266 e ESP32, mas só precisas do core RP2040 para este projeto.
Instalação das Boards RP2040
De seguida, precisamos de instalar as Boards RP2040. Vai a Tools -> Board -> Board Manager e procura por pico na barra de pesquisa. Instala as Raspberry Pi Pico/RP2040 boards por Earle F. Philhower. Depois de instalar, deve ficar assim.
Selecionar a board Adafruit Feather RP2040 DVI
Assim que a instalação do core RP2040 estiver concluída, vai ao Board Manager e seleciona a board “Adafruit Feather RP2040 DVI” como mostrado abaixo:
Agora já devemos estar prontos para programar o CrowPanel Pico Display.
Testar a porta GPIO_D do CrowPanel Pico 4.3″ Display
Vamos começar com um programa simples de Blink para testar se conseguimos mesmo programar o ecrã. Liga um LED com uma resistência (100…220Ω) à porta GPIO_D na lateral do ecrã, como mostrado abaixo
O cátodo do LED deve ser ligado ao pino GND da porta GPIO_D e o pino mais à direita da porta é o GPIO22, que deve ser ligado à resistência e ao pino positivo do LED.
Depois faz upload do seguinte programa blink para a board (Adafruit Feather RP2040 DVI) e o LED deve começar a piscar.
const int ledPin = 22;
void setup() {
pinMode(ledPin, OUTPUT);
}
void loop() {
digitalWrite(ledPin, HIGH);
delay(500);
digitalWrite(ledPin, LOW);
delay(500);
}
Não é necessário carregar no botão boot ou reset para colocar a board em modo de programação.
Nota que o pino GPIO22 é um pino PWM, por isso também podes regular a intensidade do LED. Aqui está a função correspondente loop() para testar isso.
void loop() {
for (int b=0; b<=255; b++) {
analogWrite(ledPin, b);
delay(10);
}
}
Se tudo isto funcionar, agora podemos tentar algo um pouco mais interessante. Nas próximas secções, primeiro escrevemos no ecrã, depois testamos o touchscreen e finalmente implementamos uma aplicação simples de Scribble.
Escrever no CrowPanel Pico 4.3″ Display
Antes de podermos desenhar ou escrever qualquer coisa no Pico Display, precisamos de instalar a PicoDVI library. Abre o Library Manager, procura por PicoDVI e instala a PicoDVI – Adafruit Fork por Luke Wren, como mostrado abaixo:
Assim que a biblioteca estiver instalada, já podemos escrever e desenhar no ecrã. Em baixo está um pequeno programa de teste que escreve o texto “Makerguides” no ecrã:
// 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() {
}
O código começa por incluir a PicoDVI library e criar o objeto display.
#include <PicoDVI.h> DVIGFX16 disp(DVI_RES_320x240p60, picodvi_dvi_cfg);
A parte mais importante aqui é definir a resolução correta (DVI_RES_320x240p60) que corresponde à resolução de hardware do ecrã. No nosso caso, são 320×240 pixels. Nota que a PicoDVI library oferece constructors for framebuffers with different depths. Aqui estamos a definir um framebuffer de 16 bits (DVIGFX16), mas também existe DVIGFX8 e DVIGFX1.
Na função setup esperamos pelo ecrã, definimos a orientação, preenchemos o fundo com cor preta, definimos o tamanho do texto e finalmente escrevemos o texto na posição do cursor (10,10).
void setup() {
if (!disp.begin())
;
disp.setRotation(0);
disp.fillScreen(0x0000);
disp.setTextSize(3);
disp.setCursor(10, 10);
disp.print("Makerguides");
}
Se fizeres upload do código, deves ver o texto “Makerguides” no teu ecrã, como mostrado abaixo.
Nota que a biblioteca PicoDVI é derivada de Adafruit-GFX-Library e tem muitas mais funções. Por exemplo, podes escolher diferentes fontes e desenhar gráficos também. Vamos usar algumas destas funções para implementar a nossa aplicação Scribble.
Na próxima secção, no entanto, vamos primeiro pôr o touchscreen a funcionar.
Usar o Touchscreen do CrowPanel Pico 4.3″ Display
De acordo com o code examples do CrowPanel Pico 4.3″ Display, o touchscreen pode ser controlado com a gt911-arduino library da TANCtec. No entanto, nem o exemplo de código (TouchPrint.ino) funcionou; nem consegui pôr o meu código a funcionar com a gt911-arduino library original. Algum problema ao definir os pinos SDA e SCL na Wire library que não me dei ao trabalho de investigar.
O que funcionou foi copiar os ficheiros TAMC_GT911.h e TAMC_GT911.c do exemplo de código TouchPrint para uma nova pasta de projeto (MyTouchPrint) e usar o código que mostro abaixo. A tua pasta de projeto deve ficar assim e podes descarregar o meu exemplo MyTouchPrint.
MyTouchPrintO código seguinte simplesmente imprime as coordenadas (e o tamanho do toque) no touchscreen onde foi detetado um novo toque.
// 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();
}
}
O código começa por incluir a biblioteca TAMC_GT911, cujos ficheiros copiámos para a pasta de projeto MyTouchPrint. Depois definimos os pinos de controlo do touchscreen e o tamanho do touchscreen (800×400). Finalmente, usamos estas constantes para criar o objeto touchscreen 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);
Função ts_init
A função ts_init() inicializa o touchscreen chamando ts.begin() e define a orientação do ecrã (modo retrato). Adicionei um pequeno delay, pois o touchscreen tendia a detetar toques aleatórios no arranque.
void ts_init() {
ts.begin();
ts.setRotation(ROTATION_INVERTED);
delay(100);
}
Função ts_process
A função ts_process() processa os eventos de toque. Lembra-se das coordenadas do toque anterior (ox, oy) e só reage a novos toques. Se as novas coordenadas (x, y) forem diferentes das anteriores (ox, oy), imprime as coordenadas e o tamanho do toque.
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);
}
}
O controlador touchscreen GT911 é mesmo porreiro. Não só consegue detetar o tamanho do toque (polegar vs ponta do dedo), como também suporta multitouch e pode detetar até 5 toques em simultâneo. No entanto, o código acima só reporta o primeiro (points[0]).
Função setup
Na função setup(), apenas inicializamos a comunicação série e o touchscreen. Certifica-te de definir a baud rate do Serial Monitor para 9600 baud.
void setup() {
Serial.begin(9600);
ts_init();
}
Função loop
Finalmente, temos a função loop(). Lê o touchscreen, verifica se foi detetado um toque e, se sim, processa-o.
void loop() {
ts.read();
if (ts.isTouched) {
ts_process();
}
}
Saída no Serial Monitor
Se fizeres upload do código e tocares nos quatro cantos do ecrã, deves ver coordenadas de toque semelhantes às seguintes impressas no Serial Monitor.
Problemas
Ocasionalmente, deparei-me com problemas estranhos, em que o touchscreen não registava toques ou reportava “auto-switch to second address”, o que também não ajudava. O GT911 suporta dois endereços I2C: 0xBA/0xBB e 0x28/0x29, e a TAMC_GT911 biblioteca tenta o segundo endereço se não encontrar o touchscreen no primeiro.
Reiniciar ou desligar o ecrã ajudou e o problema era raro. Mas parece haver algum problema de fiabilidade e não sei o que o causa. O ecrã estava alimentado por USB, por isso não deve ser da alimentação.
Desenhar no CrowPanel Pico 4.3″ Display
Agora já aprendeste como escrever no ecrã e como detetar toques. Vamos juntar tudo e criar uma pequena aplicação Scribble que permite ao utilizador desenhar no ecrã com o dedo.
Será um exemplo minimalista, suportando apenas uma cor de desenho, mas podes facilmente estendê-lo para várias cores e multitouch. Aqui está o código completo.
// 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();
}
}
Como antes, precisas de ter a PicoDVI instalada. E os ficheiros TAMC_GT911.h e TAMC_GT911.c devem ser copiados para a tua pasta de projeto.
Bibliotecas e Objetos
Criar o objeto display DVIGFX16 disp e o objeto touchscreen TAMC_GT911 ts, é igual aos exemplos anteriores de display e touchscreen.
Função rgb
A função rgb() converte um RGB color para um RGB565 (or 16 bit) color, que são os códigos de cor usados pela biblioteca PicoDVI. Podes usar um RGB55 color picker para encontrar o código de cores específicas, mas as cores RGB são mais comuns e fáceis de usar. Por isso implementei esta função simples que converte uma cor RGB para RGB565.
uint16_t rgb(byte r, byte g, byte b) {
return ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
}
Função ts_init
A função ts_init() mantém-se igual. Inicia o touchscreen e define a orientação. Para outras orientações de ecrã, vê o TAMC_GT911.h file.
Função ts_process
A função ts_process() está ligeiramente expandida em relação ao exemplo anterior de touchscreen. Especificamente, converte as coordenadas do touchscreen de maior resolução (800, 480) para as coordenadas do ecrã de menor resolução (320, 240) usando a 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));
}
}
Assim que é detetado um toque, toca um som curto usando a função tone(), e depois desenha um círculo amarelo nas coordenadas convertidas do toque (sx, sy) com um raio proporcional ao tamanho do toque (s/3).
O código usa o buzzer interno que está ligado ao GPIO19. Não precisei de definir o modo do pino para OUTPUT para o buzzer, mas talvez seja melhor fazê-lo na mesma.
Função disp_init
A função disp_init() inicializa o ecrã e a única diferença é que escrevemos o texto “Scribble” em vez de “Makerguides”. Isto serve apenas para indicar que a aplicação está pronta. Mas também podias tocar um som em vez disso.
Funções setup e loop
Na função setup() chamamos as funções de inicialização para o ecrã e a função loop() mantém-se igual.
Exemplo de saída no ecrã
Se fizeres upload do código e tocares no ecrã, deves conseguir desenhar “círculos” de diferentes diâmetros usando a ponta do dedo ou o polegar, como mostrado abaixo:
Como a resolução do ecrã é 320×240 e não corresponde às dimensões físicas, os “círculos” aparecem como elipses.
E assim termina este tutorial. Agora tens uma pequena aplicação Scribble que podes expandir como quiseres.
Conclusões
Neste tutorial aprendeste como controlar o CrowPanel Pico 4.3″ Display. Em particular, vimos exemplos de código para detetar toques e desenhar no ecrã.
O CrowPanel Pico 4.3″ tem um ecrã IPS com bons ângulos de visão e cores. A PicoDVI library, que é um fork da Adafruit-GFX-Library foi fácil de configurar e é muito mais simples para começar do que o código de exemplo fornecido pelo SquareLine Studio. Por outro lado, o SquareLine Studio permite criar interfaces de utilizador muito mais avançadas e atrativas.
O touchscreen capacitivo do CrowPanel Pico 4.3″ Display é sensível e consegue detetar tamanho e multitouch – permitindo reconhecimento de gestos como pinça ou rotação. No entanto, o exemplo de código fornecido não funcionou comigo e descobrir como detetar toques foi bastante demorado. Espero que o exemplo deste tutorial ajude.
Da mesma forma, espero que a documentação dos GPIO_D, ADC e I2C seja útil e torne mais fácil usar o ecrã nos teus projetos. Se tiveres dúvidas, deixa-as na secção de comentários.
Boas experiências e bons projetos ; )
