ESP32 - Teclado - LCD

Este tutorial ensina você a usar o ESP32 com o teclado e o display LCD. Em detalhes, vamos aprender a mostrar no LCD a tecla pressionada.

Hardware Necessário

1×38-pin ESP32 ESP-WROOM-32 Dev Module - Narrow
1×(Alternativa) 38-pin ESP32 ESP-WROOM-32 Dev Module - Wide
1×(Alternativa) 30-pin ESP32 ESP-WROOM-32 Dev Module - Wide
1×(Alternativa) ESP32 Uno-form board
1×(Alternativa) ESP32 S3 Uno-form board
1×Cabo USB Tipo-A para Tipo-C (para PC com USB-A)
1×Cabo USB Tipo-C para Tipo-C (para PC com USB-C)
1×LCD I2C Display 3.3V
1×(Alternativa) LCD I2C 20x4
1×Teclado 3x4 and 4x4 Kit
1×(Alternativa) Teclado 3x4
1×(Alternativa) Teclado 4x4
1×Protoboard
1×Fios Jumper
1×(Opcional) Conector de Alimentação DC
1×(Recomendado) Placa de Expansão com Bornes de Parafuso para ESP32
1×(Recomendado) Breakout Expansion Board for ESP32
1×(Recomendado) Divisor de Alimentação para ESP32

Or you can buy the following kits:

1×DIYables ESP32 Starter Kit (ESP32 included)
1×DIYables ESP32 S3 Starter Kit (ESP32 S3 included)
1×DIYables Sensor Kit (18 sensors/displays)
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.

Nota de compra: A maioria dos displays LCD I2C no mercado é de 5V. Eles podem funcionar com esta placa, mas não é seguro e pode danificar a placa. Recomendamos fortemente usar o display LCD I2C de 3.3V recomendado acima.

Sobre o Teclado e o LCD

Temos tutoriais específicos sobre o teclado e o LCD. Cada tutorial contém informações detalhadas e instruções passo a passo sobre a pinagem do hardware, o princípio de funcionamento, a ligação ao ESP32, o código ESP32... Saiba mais sobre eles nos links a seguir:

Diagrama de Ligação

  • Diagrama de ligação entre o ESP32 e o Teclado 3x4
Diagrama de Ligação do ESP32 com Teclado 3x4 e LCD

This image is created using Fritzing. Click to enlarge image

Se você não sabe como alimentar o ESP32 e outros componentes, veja as instruções no tutorial a seguir: Como alimentar o ESP32.

  • Diagrama de ligação entre o ESP32 e o Teclado 4x4
Diagrama de Ligação do ESP32 com Teclado e LCD

This image is created using Fritzing. Click to enlarge image

Código ESP32 - Teclado 3x4 - LCD I2C

/* * Este código de ESP32 foi desenvolvido por pt.newbiely.com * Este código de ESP32 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/esp32/esp32-keypad-lcd */ #include <Keypad.h> #include <DIYables_LCD_I2C.h> #define ROW_NUM 4 // four rows #define COLUMN_NUM 3 // three columns char keys[ROW_NUM][COLUMN_NUM] = { {'1', '2', '3'}, {'4', '5', '6'}, {'7', '8', '9'}, {'*', '0', '#'} }; byte pin_rows[ROW_NUM] = {19, 18, 5, 17}; // GPIO19, GPIO18, GPIO5, GPIO17 connect to the row pins byte pin_column[COLUMN_NUM] = {16, 4, 0}; // GPIO16, GPIO4, GPIO0 connect to the column pins Keypad keypad = Keypad(makeKeymap(keys), pin_rows, pin_column, ROW_NUM, COLUMN_NUM ); DIYables_LCD_I2C lcd(0x27, 16, 2); // I2C address 0x27 (from DIYables LCD), 16 column and 2 rows int cursorColumn = 0; void setup(){ lcd.init(); // initialize the lcd lcd.backlight(); } void loop(){ char key = keypad.getKey(); if (key) { lcd.setCursor(cursorColumn, 0); // move cursor to (cursorColumn, 0) lcd.print(key); // print key at (cursorColumn, 0) cursorColumn++; // move cursor to next position if(cursorColumn == 16) { // if reaching limit, clear LCD lcd.clear(); cursorColumn = 0; } } }

※ Nota:

O endereço I2C do LCD pode ser diferente em cada fabricante. No código, usamos o endereço 0x27, especificado pelo fabricante DIYables

Passos Rápidos

  • Se esta é a primeira vez que você usa o ESP32, veja como configurar o ambiente para o ESP32 na Arduino IDE.
  • Faça a ligação como na imagem acima.
  • Conecte a placa ESP32 ao seu PC por meio de um cabo USB Type-C
  • Abra a Arduino IDE no seu PC.
  • Selecione a placa ESP32 correta (ex.: ESP32 Dev Module) e a porta COM.
  • Clique no ícone Libraries na barra esquerda da Arduino IDE.
  • Digite “keypad” na caixa de pesquisa e procure a biblioteca keypad de Mark Stanley, Alexander Brevig
  • Clique no botão Install para instalar a biblioteca keypad.
Biblioteca keypad para ESP32
  • Digite “DIYables LCD I2C” na caixa de pesquisa e procure a biblioteca DIYables_LCD_I2C da DIYables
  • Clique no botão Install para instalar a biblioteca DIYables_LCD_I2C.
Biblioteca DIYables LCD I2C para ESP32
  • Copie o código acima e cole-o na Arduino IDE.
  • Compile e carregue o código na placa ESP32 clicando no botão Upload na Arduino IDE
Carregar código na Arduino IDE
  • Pressione algumas teclas do teclado
  • Veja o resultado no LCD

Se o LCD não mostrar nada, veja Solução de Problemas com o LCD I2C

Explicação do Código Linha por Linha

O código ESP32 acima contém a explicação linha por linha. Leia os comentários no código!

Código ESP32 - Teclado 4x4 - LCD I2C

/* * Este código de ESP32 foi desenvolvido por pt.newbiely.com * Este código de ESP32 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/esp32/esp32-keypad-lcd */ #include <Keypad.h> #include <DIYables_LCD_I2C.h> #define ROW_NUM 4 // four rows #define COLUMN_NUM 4 // four columns char keys[ROW_NUM][COLUMN_NUM] = { {'1','2','3', 'A'}, {'4','5','6', 'B'}, {'7','8','9', 'C'}, {'*','0','#', 'D'} }; byte pin_rows[ROW_NUM] = {19, 18, 5, 17}; // GPIO19, GPIO18, GPIO5, GPIO17 connect to the row pins byte pin_column[COLUMN_NUM] = {16, 4, 0, 2}; // GPIO16, GPIO4, GPIO0, GPIO2 connect to the column pins Keypad keypad = Keypad(makeKeymap(keys), pin_rows, pin_column, ROW_NUM, COLUMN_NUM ); DIYables_LCD_I2C lcd(0x27, 16, 2); // I2C address 0x27 (from DIYables LCD), 16 column and 2 rows int cursorColumn = 0; void setup(){ lcd.init(); // initialize the lcd lcd.backlight(); } void loop(){ char key = keypad.getKey(); if (key) { lcd.setCursor(cursorColumn, 0); // move cursor to (cursorColumn, 0) lcd.print(key); // print key at (cursorColumn, 0) cursorColumn++; // move cursor to next position if(cursorColumn == 16) { // if reaching limit, clear LCD lcd.clear(); cursorColumn = 0; } } }

Vídeo

※ 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!