ESP32 - Teclado - LCD

Este tutorial le enseña cómo usar el ESP32 con el teclado y la pantalla LCD. En detalle, aprenderemos cómo mostrar la tecla pulsada en la pantalla LCD.

Hardware Requerido

1	×	38-pin ESP32 ESP-WROOM-32 Dev Module - Narrow
1	×	(Alternativo) 38-pin ESP32 ESP-WROOM-32 Dev Module - Wide
1	×	(Alternativo) 30-pin ESP32 ESP-WROOM-32 Dev Module - Wide
1	×	(Alternativo) ESP32 Uno-form board
1	×	(Alternativo) ESP32 S3 Uno-form board
1	×	Cable USB Tipo-A a Tipo-C (para PC USB-A)
1	×	Cable USB Tipo-C a Tipo-C (para PC USB-C)
1	×	LCD I2C Display 3.3V
1	×	(Alternativo) LCD I2C 20x4
1	×	Teclado 3x4 and 4x4 Kit
1	×	(Alternativo) Teclado 3x4
1	×	(Alternativo) Teclado 4x4
1	×	Protoboard
1	×	Cables Puente
1	×	(Opcional) Conector de Alimentación DC
1	×	(Recomendado) Placa de Expansión de Terminales de Tornillo para ESP32
1	×	(Recomendado) Breakout Expansion Board for ESP32
1	×	(Recomendado) Divisor de Alimentación para ESP32

Or you can buy the following kits:

1	×	DIYables ESP32 Starter Kit (ESP32 included)
1	×	DIYables Sensor Kit (18 sensors/displays)

Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.

Nota de compra: La mayoría de las pantallas LCD I2C del mercado son de 5V. Puede que funcionen con esta placa, pero no es seguro y puede dañar la placa. Recomendamos encarecidamente usar la pantalla LCD I2C de 3.3V recomendada arriba.

Acerca del teclado numérico y de la pantalla LCD

Tenemos tutoriales específicos sobre el teclado numérico y la pantalla LCD. Cada tutorial contiene información detallada e instrucciones paso a paso sobre la distribución de pines de hardware, el principio de funcionamiento, las conexiones de cableado al ESP32 y el código para ESP32. Obtén más información sobre ellos en los siguientes enlaces:

Diagrama de Cableado

Diagrama de cableado entre ESP32 y teclado numérico 3x4

This image is created using Fritzing. Click to enlarge image

Si no sabe c\u00f3mo alimentar ESP32 y otros componentes, encuentre instrucciones en el siguiente tutorial: C\u00f3mo alimentar ESP32.

Diagrama de cableado entre ESP32 y un teclado matricial 4x4

Diagrama de cableado del ESP32 para teclado y LCD

This image is created using Fritzing. Click to enlarge image

Código ESP32 - Keyoad 3x4 - LCD I2C

/* * Este código de ESP32 fue desarrollado por es.newbiely.com * Este código de ESP32 se proporciona al público sin ninguna restricción. * Para tutoriales completos y diagramas de cableado, visite: * https://es.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:

La dirección I2C de la pantalla LCD puede variar entre fabricantes. En el código, usamos la dirección 0x27 que está especificada por el fabricante DIYables.

Pasos R\u00e1pidos

Si esta es la primera vez que usas ESP32, consulta cómo configurar el entorno para ESP32 en Arduino IDE.
Realiza el cableado tal como se muestra en la imagen de arriba.
Conecta la placa ESP32 a tu PC mediante un cable micro USB.
Abre Arduino IDE en tu PC.
Selecciona la placa ESP32 correcta (p. ej., ESP32 Dev Module) y el puerto COM.
Haz clic en el icono Bibliotecas en la barra izquierda del Arduino IDE.
Escribe “keypad” en la caja de búsqueda, luego busca la biblioteca keypad de Mark Stanley y Alexander Brevig.
Haz clic en el botón Instalar para instalar la biblioteca keypad.

Escribe “DIYables LCD I2C” en la caja de búsqueda, luego busca la biblioteca DIYables_LCD_I2C de DIYables
Haz clic en el botón Instalar para instalar la biblioteca DIYables_LCD_I2C.

Copia el código anterior y pégalo en el IDE de Arduino.
Compila y sube el código a la placa ESP32 haciendo clic en el botón Subir del IDE de Arduino.

Presiona algunas teclas en el teclado numérico
Ver el resultado en la pantalla LCD

Si la pantalla LCD no muestra nada, consulte Solución de problemas de LCD I2C

Explicación del código línea por línea

El código ESP32 anterior contiene una explicación línea por línea. Por favor lea los comentarios en el código.

Código ESP32 - Keyoad 4x4 - LCD I2C

/* * Este código de ESP32 fue desarrollado por es.newbiely.com * Este código de ESP32 se proporciona al público sin ninguna restricción. * Para tutoriales completos y diagramas de cableado, visite: * https://es.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; } } }

Video Tutorial

Estamos considerando crear tutoriales en video. Si considera que los tutoriales en video son importantes, suscríbase a nuestro canal de YouTube para motivarnos a crear los videos.

Tutoriales Relacionados

※ NUESTROS MENSAJES

No dude en compartir el enlace de este tutorial. Sin embargo, por favor no use nuestro contenido en otros sitios web. Hemos invertido mucho esfuerzo y tiempo en crear el contenido, ¡por favor respete nuestro trabajo!

DIVULGACIÓN

es.newbiely.com es participante del Programa de Asociados de Amazon Services LLC, un programa de publicidad de afiliados diseñado para proporcionar un medio para que los sitios web ganen tarifas publicitarias mediante publicidad y enlaces a Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl y Amazon.se

Email: newbiely.com@gmail.com