Si estás buscando una forma sencilla de utilizar un LCD con tu ESP32 o ESP8266, estás en el lugar correcto. En este artículo, te mostraremos cómo utilizar un LCD con interfaz I2C con tu ESP32 en el entorno de Arduino IDE. Aprenderás paso a paso cómo hacerlo de manera fácil y efectiva. ¡Sigue leyendo para descubrirlo!
Este tutorial muestra cómo usar la pantalla LCD I2C (pantalla de cristal líquido) con el ESP32 usando el IDE de Arduino. Le mostraremos cómo conectar la pantalla, instalar la biblioteca y probar un código de muestra para escribir texto en la pantalla LCD: desplazamiento de texto estático y mensajes largos. También puede utilizar esta guía con el ESP8266.
Pantalla de cristal líquido 16×2 I2C
Para este tutorial utilizamos una pantalla LCD I2C de 16×2, pero también deberían funcionar pantallas LCD de otros tamaños.
La ventaja de utilizar una pantalla LCD I2C es que el cableado es realmente sencillo. Sólo necesitas cablear los pines SDA y SCL.
Además, cuenta con un potenciómetro incorporado que permite ajustar el contraste entre el fondo y los caracteres de la pantalla LCD. Con una pantalla LCD “normal” es necesario agregar un potenciómetro al circuito para ajustar el contraste.
Piezas requeridas
Para seguir este tutorial necesitarás estas piezas:
- Placa ESP32 DOIT DEVKIT V1 – leer placas de desarrollo ESP32 probadas y comparadas
- Opcional – ESP8266-12-E – leer Las mejores placas de desarrollo Wi-Fi ESP8266
- Pantalla de cristal líquido (LCD) 16×2 I2C
- Cable puente hembra a hembra
Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!
Cableado de la pantalla LCD al ESP32
Esta pantalla utiliza comunicación I2C, lo que realmente simplifica el cableado.
Conecte su LCD al ESP32 siguiendo el siguiente diagrama de cableado. Usamos los pines I2C estándar ESP32 (GPIO21 Y GPIO22).
También puede utilizar la siguiente tabla como referencia.
| LCD I2C | ESP32 |
| Dimensiones | Dimensiones |
| VCC | Número de chasis |
| ASD | GPIO21 |
| SCL | GPIO22 |
Cableado de la pantalla LCD al ESP8266
También puede conectar su LCD al ESP8266 siguiendo el siguiente diagrama de circuito. Usamos los pines I2C estándar del ESP8266 (GPIO4 Y GPIO5).
También puede utilizar la siguiente tabla como referencia.
| LCD I2C | ESP8266 |
| Dimensiones | Dimensiones |
| VCC | Número de chasis |
| ASD | GPIO4 (D2) |
| SCL | GPIO5 (D1) |
Preparando el IDE de Arduino
Antes de continuar con el proyecto, debe instalar el complemento ESP32 o ESP8266 en el IDE de Arduino.
Arduino IDE con ESP32
Siga cualquiera de las siguientes instrucciones para preparar su IDE de Arduino para que funcione con ESP32:
- ventanas Instrucciones – Placa ESP32 en Arduino IDE
- mac y linux Instrucciones – Placa ESP32 en Arduino IDE
Arduino IDE con ESP8266
Para instalar el complemento ESP8266 en su IDE Arduino, lea el siguiente tutorial: Cómo instalar la placa ESP8266 en el IDE Arduino.
Instalación de la biblioteca LiquidCrystal_I2C
Hay varias bibliotecas que funcionan con la pantalla LCD I2C. Usamos esta biblioteca de Marco SchwartzSiga los siguientes pasos para instalar la biblioteca:
- Haga clic aquí para descargar la biblioteca LiquidCrystal_I2C. Deberías tener una carpeta .zip en tus descargas.
- Descomprime eso .Cremallera carpeta y deberías recibir Maestro LiquidCrystal_I2C Carpeta
- Cambie el nombre de su carpeta de
Maestro LiquidCrystal_I2CA Cristal líquido_I2C - mueve eso Cristal líquido_I2C Carpeta a su instalación Arduino IDE Bibliotecas Carpeta
- Finalmente, vuelva a abrir su IDE de Arduino
Obtener la dirección LCD
Antes de poder mostrar texto en la pantalla LCD, debe encontrar la dirección I2C de la pantalla LCD. Cuando la pantalla LCD esté conectada correctamente al ESP32, cargue el siguiente boceto del escáner I2C.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
#include <Wire.h>
void setup() {
Wire.begin();
Serial.begin(115200);
Serial.println("nI2C Scanner");
}
void loop() {
byte error, address;
int nDevices;
Serial.println("Scanning...");
nDevices = 0;
for(address = 1; address < 127; address++ ) {
Wire.beginTransmission(address);
error = Wire.endTransmission();
if (error == 0) {
Serial.print("I2C device found at address 0x");
if (address<16) {
Serial.print("0");
}
Serial.println(address,HEX);
nDevices++;
}
else if (error==4) {
Serial.print("Unknow error at address 0x");
if (address<16) {
Serial.print("0");
}
Serial.println(address,HEX);
}
}
if (nDevices == 0) {
Serial.println("No I2C devices foundn");
}
else {
Serial.println("donen");
}
delay(5000);
}
Después de cargar el código, abra el monitor serie con una velocidad de baudios de 115200. Presione el botón ESP32 EN. La dirección I2C debe mostrarse en el monitor serie.
En este caso la dirección es 0x27Si utiliza una pantalla similar de 16×2, probablemente obtendrá la misma dirección.
Mostrar texto estático en la pantalla LCD
Mostrar texto estático en la pantalla LCD es muy sencillo. Todo lo que tienes que hacer es seleccionar en qué parte de la pantalla quieres que aparezcan los caracteres y luego enviar el mensaje a la pantalla.
Aquí hay un ejemplo de boceto muy simple que muestra:¡Hola Mundo!“.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
#include <LiquidCrystal_I2C.h>
// set the LCD number of columns and rows
int lcdColumns = 16;
int lcdRows = 2;
// set LCD address, number of columns and rows
// if you don't know your display address, run an I2C scanner sketch
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);
void setup(){
// initialize LCD
lcd.init();
// turn on LCD backlight
lcd.backlight();
}
void loop(){
// set cursor to first column, first row
lcd.setCursor(0, 0);
// print message
lcd.print("Hello, World!");
delay(1000);
// clears the display to print new message
lcd.clear();
// set cursor to first column, second row
lcd.setCursor(0,1);
lcd.print("Hello, World!");
delay(1000);
lcd.clear();
}
El mensaje se muestra en la primera línea y luego en la segunda línea.
En este sencillo boceto le mostraremos las funciones más útiles e importantes del Cristal líquido_I2C Biblioteca. Así que echemos un vistazo rápido a cómo funciona el código.
Así es como funciona el código
primero tienes queCristal líquido_I2C Biblioteca.
#include <LiquidCrystal_I2C.h>Las siguientes dos líneas determinan el número de columnas y filas de su pantalla LCD. Si está utilizando una pantalla de diferente tamaño, debe ajustar estas variables.
int lcdColumns = 16;
int lcdRows = 2;Luego deberá configurar la dirección de visualización y el número de columnas y filas. Debe utilizar la dirección para mostrar que determinó en el paso anterior.
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);En el configuración()Primero inicialice la pantalla con el adentro() Método.
lcd.init();Luego encienda la luz de fondo de la pantalla LCD para que pueda leer los caracteres en la pantalla.
lcd.backlight();Para mostrar un mensaje en la pantalla, primero debe colocar el cursor donde desea que aparezca su mensaje. La siguiente línea coloca el cursor en la primera columna, primera línea.
lcd.setCursor(0, 0);nota: 0 corresponde a la primera columna, 1 a la segunda columna y así sucesivamente…
Luego podrá imprimir su mensaje en la pantalla. prensa() Método.
lcd.print("Hello, World!");Espere un segundo y luego limpie la pantalla con el claro() Método.
lcd.clear();Luego coloque el cursor en una nueva posición: primera columna, segunda fila.
lcd.setCursor(0,1);A continuación el proceso es repetido.
Aquí hay un resumen de las funciones de edición y escritura en la pantalla:
- lcd.init(): inicializa la pantalla
- Luz trasera LCD(): enciende la retroiluminación de la pantalla LCD
- lcd.setCursor(columna int, fila int): establece el cursor en la columna y fila especificadas
- lcd.print (mensaje de cadena): muestra el mensaje en la pantalla
- lcd.claro(): elimina la pantalla
Este ejemplo es bueno para mostrar texto estático con un máximo de 16 caracteres.
Mostrar texto desplazable en la pantalla LCD
Desplazar el texto en la pantalla LCD es particularmente útil cuando desea ver mensajes de más de 16 caracteres. La biblioteca tiene funciones integradas que le permiten desplazarse por el texto. Sin embargo, muchos usuarios enfrentan problemas con estas funciones porque:
- La función desplaza el texto en ambas líneas. Por lo tanto, no puede tener una línea fija y una línea de desplazamiento.
- No funcionará correctamente si intentas ver mensajes de más de 16 caracteres.
Por lo tanto, creamos un boceto de ejemplo con una función que puedes usar en tus proyectos para desplazar mensajes más largos.
El siguiente esquema muestra un mensaje estático en la primera línea y un mensaje de texto en desplazamiento de más de 16 caracteres en la segunda línea.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
#include <LiquidCrystal_I2C.h>
// set the LCD number of columns and rows
int lcdColumns = 16;
int lcdRows = 2;
// set LCD address, number of columns and rows
// if you don't know your display address, run an I2C scanner sketch
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);
String messageStatic = "Static message";
String messageToScroll = "This is a scrolling message with more than 16 characters";
// Function to scroll text
// The function acepts the following arguments:
// row: row number where the text will be displayed
// message: message to scroll
// delayTime: delay between each character shifting
// lcdColumns: number of columns of your LCD
void scrollText(int row, String message, int delayTime, int lcdColumns) {
for (int i=0; i < lcdColumns; i++) {
message = " " + message;
}
message = message + " ";
for (int pos = 0; pos < message.length(); pos++) {
lcd.setCursor(0, row);
lcd.print(message.substring(pos, pos + lcdColumns));
delay(delayTime);
}
}
void setup(){
// initialize LCD
lcd.init();
// turn on LCD backlight
lcd.backlight();
}
void loop(){
// set cursor to first column, first row
lcd.setCursor(0, 0);
// print static message
lcd.print(messageStatic);
// print scrolling message
scrollText(1, messageToScroll, 250, lcdColumns);
}
Después de leer la sección anterior, deberías estar familiarizado con cómo funciona este boceto. Así que miremos la función recién creada: texto de desplazamiento()
void scrollText(int row, String message, int delayTime, int lcdColumns) {
for (int i=0; i < lcdColumns; i++) {
message = " " + message;
}
message = message + " ";
for (int pos = 0; pos < message.length(); pos++) {
lcd.setCursor(0, row);
lcd.print(message.substring(pos, pos + lcdColumns));
delay(delayTime);
}
}Para utilizar esta función debes pasar cuatro argumentos:
- Fila: Número de línea en la que se muestra el texto
- Noticias: Mensaje para desplazarse
- Tiempo de retardo: Retraso entre cada cambio de personaje. Los tiempos de demora más largos dan como resultado un movimiento de texto más lento, los tiempos de demora más cortos dan como resultado un movimiento de texto más rápido.
- columnas LCD: Número de columnas de su LCD
En nuestro código utilizamos el texto de desplazamiento() Función:
scrollText(1, messageToScroll, 250, lcdColumns);El Mensaje para desplazarse La variable se muestra en la segunda línea (1 corresponde a la segunda línea), con un tiempo de retraso de 250 ms (la imagen GIF se acelera 1,5 veces).
Mostrar caracteres personalizados
En una pantalla LCD de 16×2 hay 32 bloques en los que puedes mostrar caracteres. Cada bloque consta de 5×8 pequeños píxeles. Puede mostrar caracteres personalizados definiendo el estado de cada pequeño píxel. Para hacer esto, puede crear una variable de bytes que registre el estado de cada píxel.
Para crear tu personaje personalizado puedes ir Aquí para generar la variable de bytes para tu personaje. Por ejemplo un corazón:
Copie la variable de byte en su código (antes del configuración()). puedes nombrarlo Corazón:
byte heart[8] = {
0b00000,
0b01010,
0b11111,
0b11111,
0b11111,
0b01110,
0b00100,
0b00000
};Entonces, en configuración()crear un personaje personalizado con el crear personaje() Función. Esta función toma como argumentos una ubicación donde se debe asignar el carácter y la variable char de la siguiente manera:
lcd.createChar(0, heart);Entonces, en Cinta()Coloque el cursor donde desea que aparezca el personaje:
lcd.setCursor(0, 0);Utilizar el escribir() Método de visualización del personaje. Pase la ubicación donde se asignará el personaje de la siguiente manera:
lcd.write(0);Envolver
En resumen, en este tutorial le mostramos cómo usar una pantalla LCD I2C con ESP32/ESP8266 con Arduino IDE: cómo mostrar texto estático, texto en desplazamiento y caracteres personalizados. Este tutorial también funciona con la placa Arduino, solo necesitas cambiar el pinout para usar los pines Arduino I2C.
Tenemos más tutoriales sobre ESP32 que pueden resultarle útiles:
- ESP32 con múltiples sensores de temperatura DS18B20
- Temperatura de registro de datos ESP32 a la tarjeta MicroSD
- ESP32 con motor CC y controlador de motor L298N: control de velocidad y dirección
- Más tutoriales de ESP32
Esperamos que este tutorial te haya resultado útil. Si te gusta ESP32 y te gustaría saber más sobre él, te recomendamos registrarte en Aprenda ESP32 con Arduino IDE Curso.
Gracias por leer.
1 de febrero de 2019
Cómo utilizar I2C LCD con ESP32 en Arduino IDE (compatible con ESP8266)
En este tutorial, te mostraremos cómo utilizar el display LCD I2C (Liquid Crystal Display) con el ESP32 usando Arduino IDE. Te mostraremos cómo cablear el display, instalar la biblioteca y probar el código de ejemplo para escribir texto en el LCD: texto estático y hacer scroll de mensajes largos. También puedes utilizar esta guía con el ESP8266.
Display LCD 16×2 I2C
Para este tutorial, utilizaremos un display LCD 16×2 I2C, pero los LCD con otros tamaños también deberían funcionar.
La ventaja de utilizar un LCD I2C es que el cableado es realmente simple. Solo necesitas conectar los pines SDA y SCL.
Además, viene con un potenciómetro incorporado que puedes usar para ajustar el contraste entre el fondo y los caracteres en el LCD. En un LCD «regular», necesitas agregar un potenciómetro al circuito para ajustar el contraste.
Partes necesarias
Para seguir este tutorial, necesitarás las siguientes partes:
- Tablero ESP32 DOIT DEVKIT V1
- OPCIONAL – ESP8266 12-E
- Display LCD 16×2 I2C
- Cables de puente hembra a hembra
Puedes utilizar los enlaces anteriores o ir directamente a MakerAdvisor.com/tools para encontrar todas las partes para tus proyectos al mejor precio.
Cableado del LCD al ESP32
Este display utiliza comunicación I2C, lo que hace que el cableado sea realmente simple.
Conecta tu LCD al ESP32 siguiendo el siguiente diagrama esquemático. Estamos utilizando los pines I2C predeterminados del ESP32 (GPIO 21 y GPIO 22).
Cableado del LCD al ESP8266
También puedes conectar tu LCD al ESP8266 siguiendo el siguiente diagrama esquemático. Estamos utilizando los pines I2C predeterminados del ESP8266 (GPIO 4 y GPIO 5).
Preparando el Arduino IDE
Antes de continuar con el proyecto, necesitas instalar la extensión ESP32 o ESP8266 en el Arduino IDE.
Sigue una de las siguientes guías para preparar tu Arduino IDE para trabajar con el ESP32:
- Instrucciones para Windows – Board ESP32 en Arduino IDE
- Instrucciones para Mac y Linux – Board ESP32 en Arduino IDE
Para instalar la extensión ESP8266 en tu Arduino IDE, lee el siguiente tutorial: Cómo instalar la placa ESP8266 en Arduino IDE.
Instalando la biblioteca LiquidCrystal_I2C
Existen varias bibliotecas que funcionan con el LCD I2C. Estamos utilizando esta biblioteca de Marco Schwartz. Sigue los siguientes pasos para instalar la biblioteca:
- Haz clic aquí para descargar la biblioteca LiquidCrystal_I2C.
- Descomprime la carpeta .zip y deberías obtener la carpeta LiquidCrystal_I2C-master.
- Renombra tu carpeta de LiquidCrystal_I2C-master a LiquidCrystal_I2C.
- Mueve la carpeta LiquidCrystal_I2C a la carpeta libraries de tu instalación de Arduino IDE.
- Finalmente, vuelve a abrir tu Arduino IDE.
Continuará…