Arduino Uno R4 - Display TFT LCD Touch ILI9341 ILI9488 ST7789 com Interface SPI

O Arduino Uno R4 - disponível como Minima e WiFi - traz um processador Renesas RA4M1 de 48 MHz e mais SRAM do que o Uno clássico, mantendo o mesmo layout de conectores. Os pinos SPI de hardware ficam nos mesmos lugares físicos, então qualquer ligação de TFT que funciona no Uno R3 funciona diretamente no Uno R4, sem nenhuma mudança.

Neste guia você vai:

Este guia cobre displays TFT LCD SPI com e sem touch. Ele funciona com painéis de 1.3, 1.54, 2.2, 2.4, 2.8, 3.2 e 3.5 polegadas controlados pelos chips ILI9341, ILI9488 ou ST7789.

Display TFT SPI do Arduino Uno R4

Dica — alternativa mais simples e mais rápida: Se você está usando um Arduino Uno R4, considere usar o TFT Touch Shield. Ele encaixa direto no conector do Uno R4 — sem precisar de fios jumper. Ele usa uma interface paralela de 8 bits, que transfere os dados de pixel de forma bem mais rápida do que o SPI.

Visão Geral do Display TFT SPI

Um display TFT SPI é um painel LCD colorido controlado por um chip driver através do barramento SPI. A biblioteca DIYables_TFT_SPI suporta três chips driver comuns:

  • ILI9341 - cor RGB565 de 16 bits, SPI de até 40 MHz.
  • ILI9488 - cor RGB666 de 18 bits, SPI de até 24 MHz.
  • ST7789 - cor RGB565 de 16 bits, SPI de até 40 MHz.

Recomendação: Se você ainda não comprou um display, recomendamos o driver ST7789. Ele é fácil de encontrar, funciona na velocidade SPI máxima de 40 MHz e é a escolha mais simples para novos projetos.

A biblioteca estende a Adafruit GFX, então todas as funções padrão de desenho e de texto estão disponíveis.

Pinagem

A maioria dos displays TFT LCD SPI tem os seguintes pinos:

Pinos do display:

Pino Função
VCC Alimentação
GND Terra
CS Chip Select — colocado em nível baixo para selecionar o display no barramento SPI
DC / RS Seleção de Dados / Comando — alto para dados de pixel, baixo para comandos
RST Reset de hardware — opcional; ligue ao 3.3V se não for usado
MOSI / SDI / SDA Entrada de dados SPI (MCU → display)
SCK / CLK Clock SPI
MISO / SDO Saída de dados SPI (display → MCU) — opcional para uso somente como display
LED / BL / BLK Alimentação da luz de fundo — ligue ao 3.3V ou a um pino PWM para controlar o brilho

Pinos do cartão SD (se a sua aplicação precisa acessar o cartão SD):

Pino Função
SD_CS / TF_CS Chip Select do cartão SD
MOSI / SDI MOSI — dados do MCU para o cartão SD
SCK / CLK SCK — clock SPI
MISO / SDO MISO — dados do cartão SD para o MCU

Nos displays TFT que suportam touch, existem pinos de toque adicionais (se a sua aplicação usa a função de toque e o display a suporta):

Pino Função
T_CS Chip Select do controlador de toque
T_CLK SCK — clock SPI
T_DIN MOSI — dados do MCU para o controlador de toque
T_DO MISO — dados do controlador de toque para o MCU
T_IRQ Interrupção de toque — opcional; sinaliza quando a tela está sendo tocada

Observação: Alguns módulos de display sem touch também expõem os pinos T_CS, T_CLK, T_DIN, T_DO e T_IRQ. Esses pinos não funcionam nessas placas — o CI do controlador de toque não está soldado. Eles aparecem porque a PCB reaproveita o mesmo layout da versão com touch para reduzir as variações de fabricação.

Pinagem do display TFT SPI

Diagrama de Ligação

Observação — conversor de nível opcional: Esses módulos de display TFT SPI incluem conversão de nível na própria placa nas linhas de sinal, então a lógica de 5V do Arduino Uno R4 pode acionar diretamente MOSI, SCK, CS, DC, RST e T_CS (se usar touch) — essa ligação foi testada e funciona. Para uma montagem permanente, adicionar um Conversor de Nível de 5V para 3.3V nas linhas de sinal acionadas pelo MCU ainda é a escolha mais segura para a confiabilidade a longo prazo. A linha MISO (display → MCU) nunca precisa de um.

Observação — SDO (MISO) é opcional: A linha SDO (MISO) só leva dados do display de volta para a placa. Nenhum dos códigos de exemplo deste tutorial lê dados do display, então esse pino pode ficar desconectado. Em módulos nos quais o controlador de toque compartilha o mesmo barramento SPI, uma linha SDO conectada pode interferir na comunicação, por isso recomendamos deixá-la desconectada.

Sem Touch

Ligue MOSI ao D11, SCK ao D13 e MISO ao D12 no Uno R4. CS, DC e RST podem ser qualquer GPIO disponível — D10, D8 e D9 são usados nos exemplos.

Display:

Pino do TFT Pino do Arduino Uno R4 Descrição
VCC 3.3V ou 5V Alimentação
GND GND Terra
CS D10 Chip Select
DC / RS D8 Seleção de Dados / Comando
RST D9 Reset (opcional)
MOSI / SDI D11 MOSI do SPI de hardware
SCK D13 Clock do SPI de hardware
MISO / SDO D12 MISO do SPI de hardware (opcional)
LED / BL 3.3V Alimentação da luz de fundo

Cartão SD (se a sua aplicação precisa acessar o cartão SD):

Pino do SD Pino do Arduino Uno R4 Descrição
SD_CS / TF_CS qualquer GPIO livre Chip Select do cartão SD
MOSI / SDI D11 Compartilhado com o MOSI do display (D11)
SCK / CLK D13 Compartilhado com o SCK do display (D13)
MISO / SDO D12 Compartilhado com o MISO do display (D12)
Diagrama de ligação do display TFT SPI do Arduino Uno R4 sem touch

This image is created using Fritzing. Click to enlarge image

Com Touch

Ligue o controlador de toque XPT2046 ao barramento SPI do Arduino Uno R4, compartilhando D11, D13 e D12 com o display.

Display:

Pino do TFT Pino do Arduino Uno R4 Descrição
VCC 3.3V ou 5V Alimentação
GND GND Terra
CS D10 Chip Select
DC / RS D8 Seleção de Dados / Comando
RST D9 Reset (opcional)
MOSI / SDI D11 MOSI do SPI de hardware
SCK D13 Clock do SPI de hardware
MISO / SDO D12 MISO do SPI de hardware (opcional)
LED / BL 3.3V Alimentação da luz de fundo

Controlador de toque (se a sua aplicação usa a função de toque e o display a suporta):

Pino de Toque Pino do Arduino Uno R4 Descrição
T_CS qualquer GPIO livre Chip Select do toque
T_IRQ qualquer GPIO livre Interrupção de toque (opcional)
T_DIN D11 Compartilhado com o MOSI do display (D11)
T_CLK D13 Compartilhado com o SCK do display (D13)
T_DO D12 Compartilhado com o MISO do display (D12)
Diagrama de ligação do display TFT SPI do Arduino Uno R4 com touch

This image is created using Fritzing. Click to enlarge image

Veja A melhor forma de alimentar o Arduino Uno R4 e outros componentes.

Se o seu MCU tem duas ou mais interfaces SPI de hardware, você pode atribuir cada periférico (display, cartão SD, controlador de toque) ao seu próprio barramento SPI dedicado. Se o seu MCU tem apenas uma interface SPI de hardware, os três periféricos compartilham as mesmas três linhas de dados (MOSI, SCK, MISO) — no Uno R4 elas são D11, D13 e D12. Cada periférico tem o seu próprio pino CS, então apenas um fica ativo por vez. A biblioteca DIYables_TFT_SPI gerencia tanto o display quanto o controlador de toque XPT2046 por meio de uma única API — nenhuma biblioteca SPI separada é necessária para o lado do toque.

Como Instalar a Biblioteca

  1. Conecte o Arduino Uno R4 ao seu computador usando um cabo USB Type-C.
  2. Na Arduino IDE, verifique se a placa correta (Arduino Uno R4 Minima ou WiFi) e a porta serial estão selecionadas.
  3. Clique no ícone Libraries na barra lateral esquerda.
  4. Digite "DIYables_TFT_SPI" na caixa de busca e localize a biblioteca publicada pela DIYables.
  5. Clique em Install para adicionar a biblioteca. Quando for solicitado, instale também a dependência Adafruit GFX Library.
  • Search for DIYables TFT SPI created by DIYables.io and click the Install button.
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
Arduino Uno R4 WiFi
Library Manager
Type:
All
Topic:
All
DIYables TFT SPI by DIYables.io
Works with both touch and non-touch versions of the same SPI TFT modules. Supports ILI9341 (240x320, 16-bit RGB565), ILI9488 (320x480, 18-bit RGB666), and ST7789 (240x320, 16-bit RGB565) displays over SPI. Includes built-in driver for XPT2046 / HR2046 / ADS7843 SPI touch controllers and 4-wire resistive touch panels - no separate touch library required. Use the display-only API for non-touch panels, or add initTouchSPI() to enable touch on modules that include a touch controller. Extends Adafruit GFX for full graphics support. Works with any Arduino-compatible board that has SPI. More info
1.0.3
INSTALL
Newbiely.ino
···
1 void setup() {
Output
Serial Monitor
Ln 1, Col 1
Arduino Uno R4 WiFi on COM15
1

Estrutura Mínima do Sketch

Todos os sketches que usam a biblioteca DIYables_TFT_SPI compartilham este esqueleto:

#include <DIYables_TFT_SPI.h> #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Uncomment the line that matches your driver chip: // DIYables_ILI9341_SPI TFT_display(240, 320, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(320, 480, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(240, 320, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); void setup() { TFT_display.begin(); TFT_display.setRotation(1); } void loop() { // drawing code here }

Passe ao construtor as dimensões físicas em pixels do seu painel. Módulos com o mesmo chip driver vêm em tamanhos diferentes.

Desenhar Formas

O exemplo DrawShapes demonstra as primitivas de desenho da Adafruit GFX: círculos, triângulos, retângulos, retângulos arredondados e linhas.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> // ============================================= // Wiring (Arduino Uno / Nano) // --------------------------------------------- // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // LED -> 3.3V (or any GPIO via initBacklight) // SDO / MISO -> D12 (only needed when reading from display) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // MOSI and SCK use default hardware SPI pins // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); #define BLACK DIYables_TFT_SPI::colorRGB(0, 0, 0) #define BLUE DIYables_TFT_SPI::colorRGB(0, 0, 255) #define RED DIYables_TFT_SPI::colorRGB(255, 0, 0) #define GREEN DIYables_TFT_SPI::colorRGB(0, 255, 0) #define ORANGE DIYables_TFT_SPI::colorRGB(255, 165, 0) #define PINK DIYables_TFT_SPI::colorRGB(255, 192, 203) #define VIOLET DIYables_TFT_SPI::colorRGB(148, 0, 211) #define TURQUOISE DIYables_TFT_SPI::colorRGB(64, 224, 208) #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) // Helper to draw a filled diamond void fillDiamond(int cx, int cy, int h, int v, uint16_t color) { int x0 = cx, y0 = cy - v; int x1 = cx + h, y1 = cy; int x2 = cx, y2 = cy + v; int x3 = cx - h, y3 = cy; TFT_display.fillTriangle(x0, y0, x1, y1, x2, y2, color); TFT_display.fillTriangle(x0, y0, x2, y2, x3, y3, color); } void setup() { TFT_display.begin(); TFT_display.setRotation(1); // Landscape } void loop() { TFT_display.fillScreen(WHITE); uint16_t w = TFT_display.width(); uint16_t h = TFT_display.height(); // Scale positions relative to screen size with better spacing int col1 = w / 8; int col2 = w * 3 / 8; int col3 = w * 5 / 8; int col4 = w * 7 / 8; int row1 = h / 4; int row2 = h / 2; int row3 = h * 3 / 4; // Outlined circle TFT_display.drawCircle(col1, row1, 30, RED); // Filled circle TFT_display.fillCircle(col2, row1, 30, RED); // Outlined triangle TFT_display.drawTriangle(col3 - 30, row1 + 25, col3 + 30, row1 + 25, col3, row1 - 25, BLUE); // Filled triangle TFT_display.fillTriangle(col4 - 30, row1 + 25, col4 + 30, row1 + 25, col4, row1 - 25, GREEN); // Outlined rectangle TFT_display.drawRect(col1 - 35, row2 - 20, 70, 40, ORANGE); // Filled rectangle TFT_display.fillRect(col2 - 35, row2 - 20, 70, 40, TURQUOISE); // Outlined round rectangle TFT_display.drawRoundRect(col3 - 35, row2 - 20, 70, 40, 10, VIOLET); // Filled round rectangle TFT_display.fillRoundRect(col4 - 35, row2 - 20, 70, 40, 10, PINK); // Outlined diamond (centered between col1 and col2) int diamond1_x = (col1 + col2) / 2; TFT_display.drawLine(diamond1_x, row3 - 30, diamond1_x + 25, row3, GREEN); TFT_display.drawLine(diamond1_x + 25, row3, diamond1_x, row3 + 30, GREEN); TFT_display.drawLine(diamond1_x, row3 + 30, diamond1_x - 25, row3, GREEN); TFT_display.drawLine(diamond1_x - 25, row3, diamond1_x, row3 - 30, GREEN); // Filled diamond (centered between col3 and col4) int diamond2_x = (col3 + col4) / 2; fillDiamond(diamond2_x, row3, 25, 30, BLUE); delay(10000); }

Como Executar

  • Ligue o módulo TFT ao Arduino Uno R4 como mostrado no diagrama de ligação.
  • Conecte o cabo USB Type-C.
  • Cole o código na Arduino IDE, escolha a placa e a porta corretas e pressione Upload.
  • O display mostra uma grade de formas coloridas que é atualizada a cada poucos segundos.

Referência Rápida de Métodos

Método O Que Faz Uso
begin() Inicializa o controlador do display. Chame uma vez no setup(). TFT_display.begin();
setRotation(r) Gira o sistema de coordenadas. 0=retrato, 1=paisagem. TFT_display.setRotation(1);
fillScreen(color) Limpa a tela com uma cor sólida. TFT_display.fillScreen(WHITE);
colorRGB(r,g,b) Cria uma cor RGB565 de 16 bits a partir de componentes de 8 bits. colorRGB(0, 128, 255)
fillCircle(x,y,r,color) Desenha um círculo preenchido. TFT_display.fillCircle(80, 80, 40, RED);
fillRect(x,y,w,h,color) Desenha um retângulo preenchido. TFT_display.fillRect(10, 10, 60, 40, BLUE);
drawRoundRect(x,y,w,h,r,color) Desenha o contorno de um retângulo arredondado. TFT_display.drawRoundRect(5,5,100,50,10,GREEN);

Mostrar Texto e Número

O exemplo ShowTextAndNumber mostra como imprimir textos e números em diferentes tamanhos, cores e posições.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> // ============================================= // Wiring (Arduino Uno / Nano) // --------------------------------------------- // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // LED -> 3.3V (or any GPIO via initBacklight) // SDO / MISO -> D12 (only needed when reading from display) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); #define MAGENTA DIYables_TFT_SPI::colorRGB(255, 0, 255) #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) void setup() { Serial.begin(9600); Serial.println(F("TFT SPI Display - Show text and numbers")); TFT_display.begin(); TFT_display.setRotation(1); // Landscape TFT_display.fillScreen(WHITE); // Set text color and size TFT_display.setTextColor(MAGENTA); TFT_display.setTextSize(3); // Sample values float temperature = 23.5; float humidity = 78.6; // Display temperature TFT_display.setCursor(20, 20); TFT_display.print("Temperature: "); TFT_display.print(temperature, 1); TFT_display.print(char(247)); TFT_display.println("C"); // Display humidity TFT_display.setCursor(20, 60); TFT_display.print("Humidity: "); TFT_display.print(humidity, 1); TFT_display.print("%"); } void loop() { }

Como Executar

  • Ligue e faça o upload como acima.
  • O display imprime várias linhas de texto e valores numéricos.

Referência Rápida de Métodos

Método O Que Faz Uso
setTextColor(color) Define a cor do texto. TFT_display.setTextColor(BLACK);
setTextSize(size) Ajusta a escala do texto. O tamanho 1 tem 6x8 pixels. TFT_display.setTextSize(2);
setCursor(x, y) Posiciona o cursor do texto. TFT_display.setCursor(10, 30);
print(value) Imprime um texto ou número na posição do cursor. TFT_display.print("Temp: ");
println(value) Imprime e avança para a próxima linha. TFT_display.println(25.4);

Desenhar Imagem

O exemplo DrawImage exibe uma imagem bitmap RGB565 em cores, armazenada na memória de programa. Os dados da imagem são declarados em bitmap.h como um array const uint16_t marcado com PROGMEM. Isso mantém os dados dos pixels na flash e não na SRAM, então o display funciona corretamente mesmo em placas com pouca RAM. Copie o bitmap.h para a pasta do sketch antes de compilar.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> #include "bitmap.h" // ============================================= // Wiring (Arduino Uno / Nano) // --------------------------------------------- // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // LED -> 3.3V (or any GPIO via initBacklight) // SDO / MISO -> D12 (only needed when reading from display) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) int img_width = 120; int img_height = 53; void setup() { Serial.begin(9600); Serial.println(F("TFT SPI Display - Draw Image")); TFT_display.begin(); uint16_t SCREEN_WIDTH = TFT_display.width(); uint16_t SCREEN_HEIGHT = TFT_display.height(); int x = (SCREEN_WIDTH - img_width) / 2; int y = (SCREEN_HEIGHT - img_height) / 2; TFT_display.fillScreen(WHITE); TFT_display.drawRGBBitmap(x, y, myBitmap, img_width, img_height); } void loop() { delay(2000); TFT_display.invertDisplay(true); delay(2000); TFT_display.invertDisplay(false); }

Como Executar

  • Coloque o bitmap.h na mesma pasta do arquivo do sketch.
  • Ligue o módulo TFT ao Arduino Uno R4 como mostrado no diagrama de ligação.
  • Conecte o cabo USB Type-C.
  • Cole o código na Arduino IDE, confirme a placa e a porta e pressione Upload.
  • O display mostra a imagem bitmap carregada da memória de programa.

Referência Rápida de Métodos

Método O Que Faz Uso
drawRGBBitmap(x,y,bitmap,w,h) Desenha um bitmap RGB565 em PROGMEM a partir do pixel (x, y). TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320);
fillScreen(color) Limpa a tela antes de desenhar a imagem. TFT_display.fillScreen(BLACK);

Desenhar Imagem do Cartão SD

O exemplo DrawImageSDcard lê um arquivo de imagem binário RGB565 bruto de um cartão micro SD e envia os dados dos pixels diretamente para o display em pequenos blocos. Essa abordagem transmite a imagem sem nunca manter a imagem inteira na RAM, o que a torna prática para painéis grandes.

Conecte o módulo de cartão SD ao mesmo barramento SPI do display. Compartilhe MOSI (D11), SCK (D13) e MISO (D12). Atribua um pino CS separado ao módulo SD — defina-o como SD_CS_PIN no sketch.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> #include <SD.h> // ============================================= // Wiring (Arduino Uno / Nano) // --------------------------------------------- // TFT + SD module Arduino Uno / Nano // ----------------------- --------------------------------- // VCC -> 5V // GND -> GND // TFT CS -> D10 (TFT_CS_PIN) // TFT RESET -> D9 (TFT_RST_PIN) // TFT DC / RS -> D8 (TFT_DC_PIN) // SD CS -> D4 (SD_CS) // SDI / MOSI (shared) -> D11 (hardware SPI MOSI) // SDO / MISO (shared) -> D12 (hardware SPI MISO) // SCK (shared) -> D13 (hardware SPI SCK) // LED -> 3.3V (or any GPIO via initBacklight) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 #define SD_CS 4 // SD card chip select (must differ from TFT_CS_PIN) // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) #define BUFFPIXEL 20 File bmpFile; uint16_t SCREEN_WIDTH; uint16_t SCREEN_HEIGHT; // Helper functions to read BMP file header uint16_t read16(File &f) { uint16_t result; result = f.read(); result |= (f.read() << 8); return result; } uint32_t read32(File &f) { uint32_t result; result = f.read(); result |= ((uint32_t)f.read() << 8); result |= ((uint32_t)f.read() << 16); result |= ((uint32_t)f.read() << 24); return result; } int32_t readS32(File &f) { int32_t result; result = f.read(); result |= ((uint32_t)f.read() << 8); result |= ((uint32_t)f.read() << 16); result |= ((uint32_t)f.read() << 24); return result; } bool getBMPDimensions(const char *filename, uint32_t &w, uint32_t &h) { File f = SD.open(filename); if (!f) return false; if (read16(f) != 0x4D42) { f.close(); return false; } read32(f); // file size read32(f); // reserved read32(f); // image offset read32(f); // DIB header size w = read32(f); int32_t sh = readS32(f); h = (sh < 0) ? -sh : sh; f.close(); return true; } void drawBMP(const char *filename, int x, int y) { bmpFile = SD.open(filename); if (!bmpFile) { Serial.println("File not found"); return; } if (read16(bmpFile) != 0x4D42) { Serial.println("Not a BMP file"); bmpFile.close(); return; } uint32_t fileSize = read32(bmpFile); read32(bmpFile); // Reserved uint32_t imageOffset = read32(bmpFile); uint32_t dibHeaderSize = read32(bmpFile); uint32_t bmpWidth = read32(bmpFile); int32_t bmpHeight = readS32(bmpFile); bool topDown = false; if (bmpHeight < 0) { bmpHeight = -bmpHeight; topDown = true; } if (read16(bmpFile) != 1) { Serial.println("Invalid BMP file"); bmpFile.close(); return; } uint16_t depth = read16(bmpFile); if (depth != 24) { Serial.println("Only 24-bit BMP is supported"); bmpFile.close(); return; } if (read32(bmpFile) != 0) { Serial.println("Unsupported BMP compression"); bmpFile.close(); return; } bmpFile.seek(imageOffset); uint8_t sdbuffer[3 * BUFFPIXEL]; uint16_t color; uint32_t rowSize = (bmpWidth * 3 + 3) & ~3; if (x >= SCREEN_WIDTH || y >= SCREEN_HEIGHT) return; uint32_t maxRow = min((uint32_t)bmpHeight, (uint32_t)(SCREEN_HEIGHT - y)); uint32_t maxCol = min(bmpWidth, (uint32_t)(SCREEN_WIDTH - x)); for (uint32_t row = 0; row < maxRow; row++) { int32_t rowPos = topDown ? row : bmpHeight - 1 - row; uint32_t filePosition = imageOffset + rowPos * rowSize; bmpFile.seek(filePosition); for (uint32_t col = 0; col < maxCol; col += BUFFPIXEL) { uint32_t pixelsToRead = min((uint32_t)BUFFPIXEL, maxCol - col); bmpFile.read(sdbuffer, 3 * pixelsToRead); for (uint32_t i = 0; i < pixelsToRead; i++) { uint8_t b = sdbuffer[i * 3]; uint8_t g = sdbuffer[i * 3 + 1]; uint8_t r = sdbuffer[i * 3 + 2]; color = DIYables_TFT_SPI::colorRGB(r, g, b); if ((x + col + i) < SCREEN_WIDTH && (y + row) < SCREEN_HEIGHT) { TFT_display.drawPixel(x + col + i, y + row, color); } } } } bmpFile.close(); Serial.println("BMP drawn"); } void setup() { Serial.begin(9600); if (!SD.begin(SD_CS)) { Serial.println("SD card initialization failed!"); return; } Serial.println("SD card initialized."); TFT_display.begin(); TFT_display.setRotation(1); // Landscape SCREEN_WIDTH = TFT_display.width(); SCREEN_HEIGHT = TFT_display.height(); TFT_display.fillScreen(WHITE); uint32_t imgWidth, imgHeight; if (getBMPDimensions("diyables.bmp", imgWidth, imgHeight)) { int x = (SCREEN_WIDTH - imgWidth) / 2; int y = (SCREEN_HEIGHT - imgHeight) / 2; drawBMP("diyables.bmp", x, y); } else { Serial.println("Failed to get BMP dimensions"); } } void loop() { }

Como Executar

  • Ligue o módulo SD ao Arduino Uno R4. Compartilhe o barramento SPI (D11/D13/D12) com o display e conecte o CS do SD ao pino que você escolheu.
  • Copie um arquivo de imagem binário RGB565 bruto para a raiz do cartão SD. As dimensões da imagem devem corresponder à resolução do painel.
  • Conecte o cabo USB Type-C.
  • Cole o código na Arduino IDE, confirme a placa e a porta e pressione Upload.
  • A imagem é lida do cartão e exibida na tela.

Referência Rápida de Métodos

Método O Que Faz Uso
startWrite() Inicia uma transação SPI direta, mantendo o CS ativo. TFT_display.startWrite();
setAddrWindow(x0,y0,x1,y1) Define a região retangular de pixels a ser escrita. TFT_display.setAddrWindow(0, 0, 239, 319);
pushColors(buf, len) Envia um buffer de valores de pixel RGB565 para o display. TFT_display.pushColors(buf, 512);
endWrite() Encerra a transação SPI e libera o CS. TFT_display.endWrite();

Usar Fonte Externa

O exemplo UseExternalFont renderiza o texto na tela usando uma fonte personalizada compatível com a Adafruit GFX. Em comparação com a fonte bitmap 5×7 embutida, as fontes personalizadas oferecem melhor legibilidade e estilo. O arquivo da fonte é incluído como um header e ativado com uma única chamada a setFont().

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> #include <Fonts/FreeSansBold12pt7b.h> // ============================================= // Wiring (Arduino Uno / Nano) // --------------------------------------------- // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // LED -> 3.3V (or any GPIO via initBacklight) // SDO / MISO -> D12 (only needed when reading from display) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); #define MAGENTA DIYables_TFT_SPI::colorRGB(255, 0, 255) #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) void setup() { Serial.begin(9600); Serial.println(F("TFT SPI Display - Use external font")); TFT_display.begin(); TFT_display.setFont(&FreeSansBold12pt7b); TFT_display.setRotation(1); // Landscape TFT_display.fillScreen(WHITE); TFT_display.setTextColor(MAGENTA); TFT_display.setTextSize(1); float temperature = 23.5; float humidity = 78.6; TFT_display.setCursor(20, 30); TFT_display.print("Temperature: "); TFT_display.print(temperature, 1); TFT_display.print(char(247)); TFT_display.println("C"); TFT_display.setCursor(20, 70); TFT_display.print("Humidity: "); TFT_display.print(humidity, 1); TFT_display.print("%"); } void loop() { }

Como Executar

  • Ligue o módulo TFT ao Uno R4 como mostrado no diagrama de ligação.
  • Conecte o cabo USB Type-C.
  • Cole o código na Arduino IDE, confirme a placa e a porta e pressione Upload.
  • O display renderiza o texto na fonte personalizada. Note a melhor qualidade dos caracteres em comparação com a fonte embutida.

Referência Rápida de Métodos

Método O Que Faz Uso
setFont(&FontName) Ativa uma fonte personalizada compatível com GFX. Passe NULL para restaurar a fonte embutida 5×7. TFT_display.setFont(&FreeSans12pt7b);
setCursor(x, y) Move o cursor do texto para a posição indicada. TFT_display.setCursor(10, 40);
setTextColor(color) Define a cor do texto. TFT_display.setTextColor(WHITE);
print(text) Imprime um texto na posição atual do cursor usando a fonte ativa. TFT_display.print("Hello!");

Obter Ponto de Toque

O exemplo TouchGetPoint lê as coordenadas ADC brutas de um controlador de toque XPT2046 e as imprime no Serial Monitor. Executá-lo primeiro ajuda você a entender a faixa numérica do seu painel específico — dados que você vai usar para calibrar o toque nos exemplos seguintes.

Ligação: T_CLK→D13, T_DIN→D11, T_DO→D12 (barramento SPI compartilhado com o display). T_CS→D7, T_IRQ→D6.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Touch Get Point Example ----------------------- This example demonstrates how to read and display touch coordinates using a DIYables SPI TFT display with a 4-wire resistive touch panel. When you touch the screen, the sketch prints the mapped (screen) X and Y coordinates to the Serial Monitor and draws a red dot at the touched location. NOTE: Run the TouchCalibration example first and paste the calibration values into setTouchCalibration() below if the touch coordinates are inaccurate. Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> // ============================================= // Wiring (Arduino Uno / Nano) // ============================================= // TFT pins (always required) // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // SDO / MISO -> D12 (only needed when reading from display) // LED -> 3.3V (or any GPIO via initBacklight) // // XPT2046 / HR2046 / ADS7843 SPI touch controller // (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ) // Touch pin Arduino Uno / Nano // ------------ --------------------------------- // T_CS -> D2 (TOUCH_CS_PIN) // T_IRQ -> D2 (TOUCH_IRQ_PIN, optional - use -1 to skip) // T_CLK -> D13 (shared with display SCK) // T_DIN -> D11 (shared with display MOSI) // T_DO -> D12 (shared with display MISO) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // MOSI and SCK use default hardware SPI pins // ============================================= // Touch pin definitions (XPT2046 / HR2046 SPI touch controller) // ============================================= #define TOUCH_CS_PIN 2 // T_CS (any GPIO) #define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected) // ============================================= // ============================================= // Calibration values. // Run the TouchCalibration example and update these if touch is inaccurate. // Typical raw ranges: // - XPT2046 / HR2046 : ~200..3900 (default below) // - 4-wire resistive : ~100..900 // ============================================= #define TOUCH_LEFT_X 300 #define TOUCH_RIGHT_X 3700 #define TOUCH_TOP_Y 300 #define TOUCH_BOT_Y 3700 // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); #define RED DIYables_TFT_SPI::colorRGB(255, 0, 0) #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) void setup() { Serial.begin(9600); TFT_display.begin(); TFT_display.setRotation(0); TFT_display.fillScreen(WHITE); TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN); // If touch X is mirrored on your board, uncomment: //TFT_display.setTouchInvertX(true); // If touch Y is mirrored on your board, uncomment: //TFT_display.setTouchInvertY(false); TFT_display.setTouchCalibration(TOUCH_LEFT_X, TOUCH_RIGHT_X, TOUCH_TOP_Y, TOUCH_BOT_Y); Serial.println("Touch the screen to see coordinates."); } void loop() { int x, y; if (TFT_display.getTouch(x, y)) { Serial.print("Touch at: "); Serial.print(x); Serial.print(", "); Serial.println(y); TFT_display.fillCircle(x, y, 4, RED); delay(200); } }

Como Executar

  • Ligue o controlador XPT2046 ao Uno R4, compartilhando o barramento SPI com o display. T_CS ao D7, T_IRQ ao D6.
  • Conecte o cabo USB Type-C.
  • Cole o código, confirme a placa e a porta e pressione Upload.
  • Abra o Serial Monitor a 9600 baud. Pressione e arraste o dedo no display para ver os valores brutos de X, Y e pressão.

Referência Rápida de Métodos

Método O Que Faz Uso
initTouchSPI(cs, irq) Inicializa o XPT2046 no barramento SPI compartilhado. Use -1 para irq se o pino de interrupção não estiver conectado. TFT_display.initTouchSPI(7, 6);
readTouchRaw(x, y, z) Retorna os valores ADC brutos do toque sem aplicar nenhuma calibração. Retorna true quando há toque. TFT_display.readTouchRaw(x, y, z);

Desenho por Toque

O exemplo TouchDraw cria um aplicativo simples de desenho com o dedo. As coordenadas de toque calibradas são usadas para colocar pequenos círculos preenchidos em cada ponto tocado pelo dedo, formando um desenho contínuo enquanto ele se move.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Touch Draw Lines Example ------------------------- Draws lines on the screen following the pen. - Touch and drag on the screen to draw. - Lift the pen to stop drawing. - Touch again to start a new line from the last point. NOTE: Run the TouchCalibration example and update setTouchCalibration() below if the touch coordinates are inaccurate. Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> // ============================================= // Wiring (Arduino Uno / Nano) // ============================================= // TFT pins (always required) // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // SDO / MISO -> D12 (only needed when reading from display) // LED -> 3.3V (or any GPIO via initBacklight) // // XPT2046 / HR2046 / ADS7843 SPI touch controller // (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ) // Touch pin Arduino Uno / Nano // ------------ --------------------------------- // T_CS -> D2 (TOUCH_CS_PIN) // T_IRQ -> D2 (TOUCH_IRQ_PIN, optional - use -1 to skip) // T_CLK -> D13 (shared with display SCK) // T_DIN -> D11 (shared with display MOSI) // T_DO -> D12 (shared with display MISO) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // ============================================= // Touch pin definitions (XPT2046 / HR2046 SPI touch controller) // ============================================= #define TOUCH_CS_PIN 2 // T_CS (any GPIO) #define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected) // ============================================= // ============================================= // Calibration values. // Run the TouchCalibration example and update these if touch is inaccurate. // Typical raw ranges: // - XPT2046 / HR2046 : ~200..3900 (default below) // - 4-wire resistive : ~100..900 // ============================================= #define TOUCH_LEFT_X 300 #define TOUCH_RIGHT_X 3700 #define TOUCH_TOP_Y 300 #define TOUCH_BOT_Y 3700 // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); #define RED DIYables_TFT_SPI::colorRGB(255, 0, 0) #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) #define PEN_RADIUS 3 void setup() { TFT_display.begin(); TFT_display.setRotation(0); TFT_display.fillScreen(WHITE); TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN); // If touch X is mirrored on your board, uncomment: //TFT_display.setTouchInvertX(true); // If touch Y is mirrored on your board, uncomment: //TFT_display.setTouchInvertY(false); TFT_display.setTouchCalibration(TOUCH_LEFT_X, TOUCH_RIGHT_X, TOUCH_TOP_Y, TOUCH_BOT_Y); } void loop() { int x, y; if (TFT_display.getTouch(x, y)) { TFT_display.fillCircle(x, y, PEN_RADIUS, RED); } }

Como Executar

  • Ligue o XPT2046 ao Uno R4 como descrito na seção Obter Ponto de Toque acima.
  • Conecte o cabo USB Type-C.
  • Cole o código, confirme a placa e a porta e pressione Upload.
  • Arraste o dedo pelo display para pintar na tela.

Referência Rápida de Métodos

Método O Que Faz Uso
initTouchSPI(cs, irq) Configura o XPT2046 no barramento SPI compartilhado. TFT_display.initTouchSPI(7, 6);
setTouchCalibration(minX,maxX,minY,maxY) Mapeia os valores ADC brutos para coordenadas de pixel da tela. Obtenha esses valores no exemplo TouchCalibration. TFT_display.setTouchCalibration(200, 3800, 300, 3700);
setTouchInvertX(invert) / setTouchInvertY(invert) Inverte o eixo do toque quando X ou Y está espelhado no seu painel ou lote específico. Chame ANTES de setTouchCalibration(). TFT_display.setTouchInvertY(true);
getTouch(x, y) Obtém as coordenadas de toque calibradas em pixels da tela. Retorna true quando a tela está sendo pressionada. if (TFT_display.getTouch(x, y)) { ... }
fillCircle(x, y, r, color) Desenha um pequeno ponto no local do toque. TFT_display.fillCircle(x, y, 3, RED);

Botão de Toque

O exemplo TouchButton desenha botões retangulares na tela e compara as coordenadas de toque com os limites de cada botão. Quando um botão é tocado, ele é destacado e executa uma ação. Isso demonstra como construir uma interface de usuário mínima controlada por toque.

O pino T_IRQ é opcional neste exemplo. Passe -1 como argumento irq se você preferir não conectá-lo.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Touch Button Press/Release Example ------------------------------------ This example shows how to detect press and release events on a rectangular button using a DIYables SPI TFT display with a 4-wire resistive touch panel. When you touch inside the button, it changes colour and shows "PRESSED". When you release, it returns to its original state. NOTE: Run the TouchCalibration example and update setTouchCalibration() below if the touch coordinates are inaccurate. Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> // ============================================= // Wiring (Arduino Uno / Nano) // ============================================= // TFT pins (always required) // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // SDO / MISO -> D12 (only needed when reading from display) // LED -> 3.3V (or any GPIO via initBacklight) // // XPT2046 / HR2046 / ADS7843 SPI touch controller // (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ) // Touch pin Arduino Uno / Nano // ------------ --------------------------------- // T_CS -> D2 (TOUCH_CS_PIN) // T_IRQ -> D2 (TOUCH_IRQ_PIN, optional - use -1 to skip) // T_CLK -> D13 (shared with display SCK) // T_DIN -> D11 (shared with display MOSI) // T_DO -> D12 (shared with display MISO) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // ============================================= // Touch pin definitions (XPT2046 / HR2046 SPI touch controller) // ============================================= #define TOUCH_CS_PIN 2 // T_CS (any GPIO) #define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected) // ============================================= // ============================================= // Calibration values. // Run the TouchCalibration example and update these if touch is inaccurate. // Typical raw ranges: // - XPT2046 / HR2046 : ~200..3900 (default below) // - 4-wire resistive : ~100..900 // ============================================= #define TOUCH_LEFT_X 300 #define TOUCH_RIGHT_X 3700 #define TOUCH_TOP_Y 300 #define TOUCH_BOT_Y 3700 // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); #define BLACK DIYables_TFT_SPI::colorRGB( 0, 0, 0) #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) #define GRAY DIYables_TFT_SPI::colorRGB(128, 128, 128) #define RED DIYables_TFT_SPI::colorRGB(255, 0, 0) #define BUTTON_X 30 #define BUTTON_Y 100 #define BUTTON_W 180 #define BUTTON_H 60 #define DEBOUNCE_DELAY 50 bool lastPressed = false; bool stablePressed = false; unsigned long lastDebounceTime = 0; void drawButton(bool pressed) { uint16_t bg = pressed ? GRAY : RED; TFT_display.fillRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, bg); TFT_display.drawRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, BLACK); TFT_display.setTextColor(WHITE, bg); TFT_display.setTextSize(3); TFT_display.setCursor(BUTTON_X + 10, BUTTON_Y + 16); TFT_display.print(pressed ? "PRESSED" : " PRESS "); } void setup() { Serial.begin(9600); TFT_display.begin(); TFT_display.setRotation(0); TFT_display.fillScreen(WHITE); TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN); // If touch X is mirrored on your board, uncomment: //TFT_display.setTouchInvertX(true); // If touch Y is mirrored on your board, uncomment: //TFT_display.setTouchInvertY(false); TFT_display.setTouchCalibration(TOUCH_LEFT_X, TOUCH_RIGHT_X, TOUCH_TOP_Y, TOUCH_BOT_Y); drawButton(false); } void loop() { int x, y; bool pressed = false; if (TFT_display.getTouch(x, y)) { if (x >= BUTTON_X && x < (BUTTON_X + BUTTON_W) && y >= BUTTON_Y && y < (BUTTON_Y + BUTTON_H)) { pressed = true; } } if (pressed != lastPressed) { lastDebounceTime = millis(); } lastPressed = pressed; if ((millis() - lastDebounceTime) > DEBOUNCE_DELAY) { if (pressed != stablePressed) { stablePressed = pressed; drawButton(stablePressed); Serial.println(stablePressed ? "Button PRESSED" : "Button RELEASED"); } } }

Como Executar

  • Conecte o T_CS ao D7. O T_IRQ pode ficar desconectado — defina-o como -1 no sketch.
  • Conecte o cabo USB Type-C.
  • Cole o código, confirme a placa e a porta e pressione Upload.
  • Toque nos botões exibidos na tela. Cada botão muda de cor quando é pressionado.

Referência Rápida de Métodos

Método O Que Faz Uso
initTouchSPI(cs, irq) Inicializa o XPT2046. Passe -1 para irq para fazer polling sem o pino de interrupção. TFT_display.initTouchSPI(7, -1);
setTouchCalibration(minX,maxX,minY,maxY) Aplica a calibração para que getTouch() retorne coordenadas em pixels do display. TFT_display.setTouchCalibration(200, 3800, 300, 3700);
setTouchInvertX(invert) / setTouchInvertY(invert) Inverte o eixo do toque quando X ou Y está espelhado no seu painel ou lote específico. Chame ANTES de setTouchCalibration(). TFT_display.setTouchInvertY(true);
getTouch(x, y) Obtém a posição de toque calibrada atual. Retorna true enquanto a tela está pressionada. if (TFT_display.getTouch(x, y)) { ... }
fillRect(x, y, w, h, color) Desenha um retângulo colorido preenchido para o fundo do botão. TFT_display.fillRect(10, 10, 120, 60, BLUE);

Calibração do Toque

O exemplo TouchCalibration guia você na medição da faixa ADC bruta do seu painel de toque XPT2046. Toque em cada canto quando solicitado e observe os valores mínimo e máximo de X e Y impressos no Serial Monitor. Use esses quatro números na chamada setTouchCalibration() em todos os seus outros sketches de toque.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Touch Screen Calibration Example --------------------------------- This example measures the raw touch coordinates at all four screen corners and prints ready-to-use calibration values to the Serial Monitor. It uses readTouchRaw() directly — it does NOT rely on getTouch() or any existing calibration values, so it works even when touch is completely broken. INSTRUCTIONS: 1. Upload this sketch to your board. 2. Open the Serial Monitor (Ctrl+Shift+M) and set baud rate to 9600. 3. The screen shows a blinking red dot in each corner, numbered 1–4: 1 = Top-left 2 = Top-right 3 = Bottom-right 4 = Bottom-left 4. Press and HOLD firmly on the blinking dot. Keep holding until the Serial Monitor prints "Captured!" for that corner. 5. Release, then wait for the next dot to appear and repeat. 6. After all 4 corners, the Serial Monitor prints the calibration values and a ready-to-use setTouchCalibration() call. Copy it into your sketch. NOTE: While waiting, the Serial Monitor continuously prints the live raw Z/X/Y readings so you can confirm that touch is being detected. Created by DIYables This example code is in the public domain Product page: https://diyables.io */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> // ============================================= // Wiring (Arduino Uno / Nano) // ============================================= // TFT pins (always required) // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // SDO / MISO -> D12 (only needed when reading from display) // LED -> 3.3V (or any GPIO via initBacklight) // // XPT2046 / HR2046 / ADS7843 SPI touch controller // (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ) // Touch pin Arduino Uno / Nano // ------------ --------------------------------- // T_CS -> D2 (TOUCH_CS_PIN) // T_IRQ -> D2 (TOUCH_IRQ_PIN, optional - use -1 to skip) // T_CLK -> D13 (shared with display SCK) // T_DIN -> D11 (shared with display MOSI) // T_DO -> D12 (shared with display MISO) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // ============================================= // Touch pin definitions (XPT2046 / HR2046 SPI touch controller) // ============================================= #define TOUCH_CS_PIN 2 // T_CS (any GPIO) #define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected) // ============================================= // ============================================= // Create display object (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN); // Minimum pressure to count as a valid touch. #define TOUCH_Z_MIN 10 // How many consecutive valid samples required before a corner is accepted. #define SAMPLES_NEEDED 10 // Delay between samples (ms). #define SAMPLE_DELAY_MS 30 #define DOT_RADIUS 12 #define BLACK DIYables_TFT_SPI::colorRGB( 0, 0, 0) #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) #define RED DIYables_TFT_SPI::colorRGB(255, 0, 0) // Corner pixel positions — filled in setup() once display size is known. // Order: 0=top-left, 1=top-right, 2=bottom-right, 3=bottom-left int cx[4], cy[4]; // Captured averaged raw values per corner. int cap_x[4], cap_y[4]; // ----------------------------------------------------------------------- void drawDot(int corner, bool on) { uint16_t color = on ? RED : WHITE; TFT_display.fillCircle(cx[corner], cy[corner], DOT_RADIUS, color); TFT_display.setTextSize(2); TFT_display.setTextColor(BLACK, color); TFT_display.setCursor(cx[corner] - 6, cy[corner] - 8); TFT_display.print(corner + 1); } void captureCorner(int corner) { const char* names[] = { "Top-left", "Top-right", "Bottom-right", "Bottom-left" }; Serial.println(); Serial.print("Corner "); Serial.print(corner + 1); Serial.print(" ("); Serial.print(names[corner]); Serial.println(")"); Serial.println(" Press and HOLD firmly on the blinking dot."); Serial.println(" Keep holding until you see 'Captured!'"); unsigned long lastBlink = 0; unsigned long lastPrint = 0; bool dotOn = false; int goodSamples = 0; long sumX = 0, sumY = 0; while (true) { // Blink the dot if (millis() - lastBlink > 400) { lastBlink = millis(); dotOn = !dotOn; drawDot(corner, dotOn); } int raw_x, raw_y, z; TFT_display.readTouchRaw(raw_x, raw_y, z); // Print live readings every 500 ms if (millis() - lastPrint > 500) { lastPrint = millis(); Serial.print(" Z="); Serial.print(z); Serial.print(" X="); Serial.print(raw_x); Serial.print(" Y="); Serial.println(raw_y); } if (z >= TOUCH_Z_MIN) { sumX += raw_x; sumY += raw_y; goodSamples++; if (goodSamples >= SAMPLES_NEEDED) { cap_x[corner] = sumX / goodSamples; cap_y[corner] = sumY / goodSamples; Serial.print(" Captured! raw_x="); Serial.print(cap_x[corner]); Serial.print(" raw_y="); Serial.println(cap_y[corner]); drawDot(corner, false); delay(500); return; } } else { goodSamples = 0; sumX = 0; sumY = 0; } delay(SAMPLE_DELAY_MS); } } // ----------------------------------------------------------------------- void setup() { Serial.begin(9600); TFT_display.begin(); TFT_display.setRotation(0); // Always calibrate in rotation 0 TFT_display.fillScreen(WHITE); TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN); // If touch X is mirrored on your board, uncomment the line below // BEFORE calibrating (so the printed values match your panel): //TFT_display.setTouchInvertX(true); // If touch Y is mirrored on your board, uncomment: //TFT_display.setTouchInvertY(false); int w = TFT_display.width(); int h = TFT_display.height(); int m = DOT_RADIUS + 4; cx[0] = m; cy[0] = m; cx[1] = w - m; cy[1] = m; cx[2] = w - m; cy[2] = h - m; cx[3] = m; cy[3] = h - m; Serial.println("=== Touch Calibration ==="); for (int i = 0; i < 4; i++) { captureCorner(i); } // Derive calibration values from the four corners int min_x = (cap_x[0] + cap_x[3]) / 2; // left edge int max_x = (cap_x[1] + cap_x[2]) / 2; // right edge int min_y = (cap_y[0] + cap_y[1]) / 2; // top edge int max_y = (cap_y[2] + cap_y[3]) / 2; // bottom edge Serial.println(); Serial.println("=== Calibration Results ==="); Serial.print(" Left X (min_x): "); Serial.println(min_x); Serial.print(" Right X (max_x): "); Serial.println(max_x); Serial.print(" Top Y (min_y): "); Serial.println(min_y); Serial.print(" Bot Y (max_y): "); Serial.println(max_y); Serial.println(); Serial.println("Copy this line into your sketch:"); Serial.print(" TFT_display.setTouchCalibration("); Serial.print(min_x); Serial.print(", "); Serial.print(max_x); Serial.print(", "); Serial.print(min_y); Serial.print(", "); Serial.print(max_y); Serial.println(");"); TFT_display.fillScreen(WHITE); TFT_display.setTextColor(BLACK); TFT_display.setTextSize(2); TFT_display.setCursor(10, 10); TFT_display.println("Done! Check"); TFT_display.setCursor(10, 35); TFT_display.println("Serial Monitor"); } void loop() {}

Como Executar

  • Ligue o XPT2046 ao Uno R4 como descrito na seção Obter Ponto de Toque.
  • Conecte o cabo USB Type-C.
  • Cole o código, confirme a placa e a porta e pressione Upload.
  • Abra o Serial Monitor a 9600 baud. Siga as instruções na tela para tocar em cada canto do display.
  • Anote os quatro valores impressos e insira-os em setTouchCalibration() nos seus outros sketches de toque.

Referência Rápida de Métodos

Método O Que Faz Uso
initTouchSPI(cs, irq) Inicializa o controlador de toque XPT2046. TFT_display.initTouchSPI(7, 6);
readTouchRaw(x, y, z) Lê os valores ADC brutos para medir a faixa de calibração. TFT_display.readTouchRaw(x, y, z);
setTouchCalibration(minX,maxX,minY,maxY) Armazena os valores de calibração para que getTouch() faça o mapeamento correto para as coordenadas de pixel. TFT_display.setTouchCalibration(200, 3800, 300, 3700);
setTouchInvertX(invert) / setTouchInvertY(invert) Inverte o eixo do toque quando X ou Y está espelhado no seu painel ou lote específico. Chame ANTES de executar a calibração para que os valores armazenados correspondam ao seu painel. TFT_display.setTouchInvertY(true);

SPI Personalizado

O exemplo CustomSPI mostra como fornecer uma instância SPIClass explícita ao construtor do display. Use essa abordagem quando o barramento SPI padrão estiver ocupado com outro periférico, quando você precisar compartilhar o barramento com configuração adicional ou quando quiser definir uma frequência de clock SPI personalizada.

O Uno R4 Minima e o WiFi expõem, cada um, um único barramento SPI de hardware em D11/D13/D12. O exemplo demonstra como passar &SPI explicitamente e ajustar a velocidade máxima do clock SPI.

/* * Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com * Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-tft-lcd-touch-display-spi */ /* Created by DIYables This example code is in the public domain Product page: https://diyables.io This example demonstrates how to use a custom (non-default) SPI bus with the DIYables TFT SPI library. This is useful on boards that have multiple SPI interfaces, such as: - ESP32: HSPI / VSPI - Arduino Giga / Portenta: SPI1 - Raspberry Pi Pico: SPI1 */ // ============================================= // Single include brings in the base class plus all driver classes. // ============================================= #include <DIYables_TFT_SPI.h> // ============================================= // Wiring (Arduino Uno / Nano - default SPI bus) // --------------------------------------------- // NOTE: Uno / Nano have only ONE hardware SPI bus, so this example is // most useful on boards with multiple buses (ESP32, Giga, RP2040...). // On Uno / Nano, MY_SPI must remain &SPI and the wiring is the standard // hardware SPI mapping below. // // TFT module Arduino Uno / Nano // ------------ --------------------------------- // VCC -> 5V // GND -> GND // CS -> D10 (TFT_CS_PIN) // RESET -> D9 (TFT_RST_PIN) // DC / RS -> D8 (TFT_DC_PIN) // SDI / MOSI -> D11 (hardware SPI MOSI) // SCK -> D13 (hardware SPI SCK) // LED -> 3.3V (or any GPIO via initBacklight) // SDO / MISO -> D12 (only needed when reading from display) // ============================================= // ============================================= // SPI pin definitions (adjust for your board) // ============================================= #define TFT_CS_PIN 10 #define TFT_DC_PIN 8 #define TFT_RST_PIN 9 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // ============================================= // Select alternate SPI bus (uncomment for your board) // ============================================= // --- ESP32: use HSPI --- // SPIClass hspi(HSPI); // #define MY_SPI &hspi // --- Arduino Giga / Portenta / RP2040: use SPI1 --- // #define MY_SPI &SPI1 // --- Default SPI (fallback) --- #define MY_SPI &SPI // ============================================= // Create display object with custom SPI bus // (uncomment matching driver) // ============================================= // DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI); // DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI); DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI); #define BLACK DIYables_TFT_SPI::colorRGB(0, 0, 0) #define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255) #define RED DIYables_TFT_SPI::colorRGB(255, 0, 0) #define GREEN DIYables_TFT_SPI::colorRGB(0, 255, 0) #define BLUE DIYables_TFT_SPI::colorRGB(0, 0, 255) void setup() { Serial.begin(9600); // For ESP32 HSPI: optionally remap pins before begin() // hspi.begin(14, 12, 13, -1); // SCK, MISO, MOSI, SS TFT_display.begin(); TFT_display.setRotation(1); // Landscape TFT_display.fillScreen(BLACK); uint16_t w = TFT_display.width(); uint16_t h = TFT_display.height(); // Draw a simple test pattern TFT_display.fillRect(0, 0, w / 3, h, RED); TFT_display.fillRect(w / 3, 0, w / 3, h, GREEN); TFT_display.fillRect(w * 2 / 3, 0, w / 3, h, BLUE); TFT_display.setTextColor(WHITE); TFT_display.setTextSize(2); TFT_display.setCursor(10, h / 2 - 10); TFT_display.print("Custom SPI bus OK"); } void loop() { // Nothing to do }

Como Executar

  • Ligue o display TFT ao Uno R4 como mostrado no diagrama de ligação.
  • Conecte o cabo USB Type-C.
  • Cole o código, confirme a placa e a porta e pressione Upload.
  • O display inicia no barramento SPI explícito e renderiza um padrão de teste com barras de cores.

Referência Rápida de Métodos

Método O Que Faz Uso
DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) Variante do construtor que aceita um ponteiro para qualquer SPIClass. O padrão é &SPI quando o argumento é omitido. DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI);
begin() Inicializa o display no barramento SPI configurado. TFT_display.begin();

Solução de Problemas

  • Tela preta - Confirme que CS, DC, MOSI e SCK estão todos conectados. Uma linha CS ausente deixa o display inativo.
  • Driver errado - Apenas uma linha de construtor deve estar ativa. As outras devem estar comentadas.
  • Imagem deslocada ou cortada - A largura e a altura no construtor devem corresponder ao tamanho físico do painel.
  • Touch não funciona - Execute o exemplo TouchCalibration para obter os valores de calibração específicos do seu painel.

Suporte de Plataformas

A biblioteca depende exclusivamente das APIs padrão do Arduino (SPI, digitalWrite, millis) e funciona em todas as plataformas compatíveis com Arduino, incluindo o Uno R4 Minima e o WiFi.

※ NOSSAS MENSAGENS

  • Fique à vontade para compartilhar o link deste tutorial. Porém, por favor, não use nosso conteúdo em outros sites. Investimos muito esforço e tempo para criar este conteúdo, por favor respeite nosso trabalho!