Uso de pantalla LCD I2C con ESP32 de forma sencilla

¿Estás cansado de depender del Monitor Serial para ver lo que ocurre en tus proyectos con ESP32? Un pantalla LCD I2C puede ser justo lo que necesitas. Este tipo de pantalla no solo simplifica el proceso de visualización de datos, sino que también optimiza la conexión al requerir solo dos líneas de comunicación. Esto permite que puedas compartir esos mismos pines con otros dispositivos I2C, haciendo que tu cableado sea mucho más limpio y eficiente.

En este tutorial, aprenderás cómo conectar una pantalla LCD I2C a tu ESP32, cómo determinar la dirección I2C de la pantalla, y cómo escribir código para mostrar texto, números e incluso caracteres personalizados. ¿Listo para iluminar tu próximo proyecto con ESP32? ¡Vamos a sumergirnos en el tema!

Descripción general del hardware

Una pantalla LCD I2C típica consiste en dos partes principales: un display de caracteres basado en HD44780 y un adaptador I2C. A continuación exploraremos ambos componentes en detalle.

Display de caracteres

Los LCD de caracteres están diseñados específicamente para mostrar letras, números y símbolos. Por ejemplo, un LCD de 16x2 puede mostrar 16 caracteres en cada línea, con un total de dos líneas. Al observar detenidamente la pantalla, notarás pequeños recuadros que representan cada posición de carácter. Dentro de cada uno de estos cuadros hay una cuadrícula de 5x8 diminutos puntos o píxeles que se iluminan en diferentes patrones para formar letras, números o símbolos.

Adaptador I2C

El componente clave de este adaptador es un chip expander de I/O de 8 bits llamado PCF8574. Este chip inteligente convierte los datos I2C de tu ESP32 en los datos paralelos que el display LCD necesita para funcionar. Además, la placa del adaptador incluye un pequeño trimpot que permite hacer ajustes finos al contraste de la pantalla.

También notarás un jumper en la placa que suministra energía a la luz de fondo. Si deseas controlar la intensidad de la luz de fondo, puedes simplemente quitar este jumper y conectar una fuente de voltaje externo al pin marcado como ‘LED’.

Dirección I2C del LCD

Si tienes múltiples dispositivos en el mismo bus I2C, es posible que necesites establecer una dirección I2C diferente para el adaptador LCD para evitar conflictos con otros dispositivos. Para ello, el adaptador cuenta con tres jumpers/pads de soldadura (etiquetados A0, A1 y A2). Si solo tienes un LCD, puedes dejarlos sin tocar; sin embargo, si conectas varios dispositivos I2C o LCDs, deberás asegurarte de que cada uno tenga una dirección única modificando estos jumpers.

Es importante destacar que diferentes empresas, como Texas Instruments y NXP Semiconductors, fabrican el mismo chip PCF8574. La dirección I2C de tu LCD dependerá de cuál compañía fabricó el chip. Aquí te mostramos cómo determinar la dirección:

Si tu LCD tiene el chip PCF8574 de Texas Instruments:

De acuerdo con la hoja de datos de Texas Instruments, los tres bits de selección de dirección (A0, A1 y A2) se encuentran al final del registro de dirección I2C de 7 bits. Hay ocho combinaciones posibles (2^3 = 8) de direcciones. Por defecto, todos los bits de dirección están en HIGH, lo que da como resultado una dirección I2C por defecto de 0x27.

Si cortas un jumper de soldadura, ese bit de dirección se pone en LOW. Si cortas todos los jumpers, la dirección cambia a 0x20. Así que el rango de direcciones posibles va de 0x20 a 0x27.

Si tu LCD tiene el chip PCF8574 de NXP:

Según la hoja de datos de NXP Semiconductors, los tres bits de selección de dirección (A0, A1 y A2) también están al final del registro de dirección I2C de 7 bits. Sin embargo, los bits restantes en el registro de dirección son diferentes del chip de Texas Instruments. Al igual que con el chip de Texas Instruments, hay ocho combinaciones posibles de direcciones.

Todos los bits de dirección están en HIGH por defecto, lo que da como resultado una dirección I2C por defecto de 0x3F. Si cortas un jumper, ese bit se pone en LOW. Si cortas todos los jumpers, la dirección cambia a 0x38. Así que el rango de direcciones posibles va de 0x38 a 0x3F.

Por lo tanto, la dirección I2C de tu LCD es probablemente 0x27 o 0x3F. Si no estás seguro de cuál es la dirección I2C de tu LCD, ¡no te preocupes! Hay una manera fácil de averiguarlo, que aprenderás más adelante en este tutorial.

Pinout del display LCD I2C

El display LCD I2C tiene solo cuatro pines, que son:

• GND: es el pin de tierra.
• VCC: es el pin de alimentación. Conéctalo a la salida de 5V del Arduino o a una fuente de alimentación externa de 5V.
• SDA: es el pin de datos I2C.
• SCL: es el pin de reloj I2C.

Conectar un LCD I2C a un ESP32 es muy fácil porque solo necesitas conectar estos cuatro pines. Comienza conectando el pin VCC del LCD al pin VIN en el ESP32, y el pin GND a uno de los pines GND del ESP32. Luego, conecta los dos pines utilizados para la comunicación I2C: conecta el pin SCL del LCD al pin D22 del ESP32 y el pin SDA al pin D21 del ESP32.

A continuación, la tabla muestra todas las conexiones de pines que necesitas realizar:

Ajustando el contraste del LCD

Una vez que termines de conectar el LCD a tu ESP32, necesitarás ajustar el contraste de la pantalla. Busca un pequeño trimpot azul en la placa del adaptador I2C; este controla el contraste del LCD.

Ahora, enciende tu ESP32. Deberías ver que la luz de fondo se ilumina de inmediato. Toma un pequeño destornillador y gira suavemente el botón del potenciómetro. A medida que lo ajustes, comenzarás a ver la primera fila de rectángulos aparecer en la pantalla. Si puedes ver esos rectángulos claramente, ¡felicitaciones! Tu LCD está funcionando perfectamente y está listo para que muestres texto.

Determinando la dirección I2C

Antes de sumergirnos en el código de ejemplo, necesitarás conocer la dirección I2C de tu LCD para poder comunicarte con él correctamente. Como mencionamos anteriormente, la dirección I2C de tu LCD probablemente sea 0x27 o 0x3F. Es posible que encuentres esta dirección impresa en una etiqueta que vino con tu LCD o listada en la información del producto. Pero no te preocupes si no puedes encontrar esta información en ninguna parte: hay una solución sencilla: puedes ejecutar un sketch de escáner I2C que te ayudará a descubrir la dirección correcta automáticamente.

Carga el siguiente sketch en tu Arduino IDE:

#include <Wire.h>

void setup() {
  Serial.begin(115200);
  while (!Serial) {}

  Serial.println();
  Serial.println("I2C scanner. Scanning ...");
  byte count = 0;

  Wire.begin();
  for (byte i = 8; i < 120; i++) {
    Wire.beginTransmission(i);
    if (Wire.endTransmission() == 0) {
      Serial.print("Found address: ");
      Serial.print(i, DEC);
      Serial.print(" (0x");
      Serial.print(i, HEX);
      Serial.println(")");
      count++;
      delay(1);  // tal vez no sea necesario.
    }
  }
  Serial.println("Done.");
  Serial.print("Found ");
  Serial.print(count, DEC);
  Serial.println(" device(s).");
}

void loop() {
}

Después de cargar este código en tu ESP32, abre el monitor serial a una velocidad de 115200 y presiona el botón EN en el ESP32. En unos momentos, deberías ver la dirección I2C de tu pantalla LCD aparecer en la pantalla.

Asegúrate de anotar esta dirección en un lugar seguro. La necesitarás cuando trabajemos con el LCD en ejemplos posteriores.

Instalación de la biblioteca

Para controlar el LCD I2C, usaremos la biblioteca LiquidCrystal_I2C. Esta biblioteca facilita la escritura en el LCD porque maneja toda la complicada comunicación I2C en segundo plano. Existen varias versiones de esta biblioteca disponibles, pero una de las más confiables es la versión creada por Frank de Brabander.

Para instalar la biblioteca:

1. Primero abre tu programa Arduino IDE. Luego haz clic en el icono del Gestor de Bibliotecas en la barra lateral izquierda.
2. Escribe “liquidcrystal” en el cuadro de búsqueda para filtrar tus resultados.
3. Busca la biblioteca “LiquidCrystal I2C library” creada por Frank de Brabander.
4. Haz clic en el botón Instalar para agregarla a tu Arduino IDE.

Código de ejemplo básico – ¡Hola Mundo!

Con el hardware conectado y la biblioteca instalada, podemos escribir un sencillo sketch de Arduino para mostrar texto en el LCD. En este ejemplo, imprimiremos ‘¡Hola Mundo!’ en la primera línea del LCD y ‘Tutorial LCD’ en la segunda línea.

Antes de cargar el sketch, necesitas hacer dos cambios importantes para que funcione con tu LCD específico. Debes ingresar la dirección I2C correcta de tu LCD (que encontramos anteriormente) y especificar las dimensiones del display en el constructor de LiquidCrystal_I2C(). Si estás usando un LCD de 16x2, ingresa 16 y 2; si usas un LCD de 20x4, ingresa 20 y 4.

// ingresa la dirección I2C y las dimensiones de tu LCD aquí
LiquidCrystal_I2C lcd(0x3F, 16, 2);

Una vez que hayas hecho estos cambios, estás listo para probar el sketch completo:

#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x3F, 16, 2);  // establece la dirección LCD a 0x3F para una pantalla de 16 caracteres y 2 líneas

void setup() {
  lcd.init();
  lcd.clear();
  lcd.backlight();  // Asegúrate de que la luz de fondo esté encendida

  // Imprime un mensaje en ambas líneas del LCD.
  lcd.setCursor(2, 0);  // Establece el cursor en el carácter 2 de la línea 0
  lcd.print("¡Hola mundo!");

  lcd.setCursor(2, 1);  // Mueve el cursor al carácter 2 de la línea 1
  lcd.print("Tutorial LCD");
}

void loop() {
}

Después de cargar este código en tu ESP32, esto es lo que deberías ver en la pantalla:

Explicación del código:

El sketch comienza incluyendo la biblioteca LiquidCrystal_I2C, que nos proporciona todas las funciones necesarias para controlar el LCD.

#include <LiquidCrystal_I2C.h>

A continuación, creamos un objeto de la clase LiquidCrystal_I2C. El constructor de LiquidCrystal_I2C necesita tres piezas de información: la dirección I2C, la cantidad de columnas y la cantidad de filas de tu display.

LiquidCrystal_I2C lcd(0x3F, 16, 2);

En la función setup, llamamos a tres funciones importantes. Primero, la init() inicializa la interfaz con el LCD. Segundo, la clear() borra cualquier cosa en la pantalla del LCD y mueve el cursor a la esquina superior izquierda. Finalmente, la backlight() enciende la luz de fondo del LCD para que podamos ver el texto.

lcd.init();
lcd.clear();         
lcd.backlight();

La función setCursor(2, 0) mueve el cursor a la tercera columna de la primera fila (recuerda que el conteo comienza en 0, por lo que la columna 2 es, de hecho, la tercera columna). La posición del cursor le dice al LCD dónde colocar el nuevo texto en la pantalla. La esquina superior izquierda se considera la posición (0,0).

A continuación, utilizamos la función print() para mostrar el texto “¡Hola mundo!” en el LCD.

lcd.print("¡Hola mundo!");

De manera similar, las siguientes dos líneas de código mueven el cursor a la tercera columna de la segunda fila y imprimen ‘Tutorial LCD’ en el LCD.

lcd.setCursor(2, 1);
lcd.print("Tutorial LCD");

Ejemplo de texto en desplazamiento

Si tienes un mensaje que es más largo de 16 caracteres, o si deseas crear un efecto de marquesina en desplazamiento, puedes usar las funciones scrollDisplayLeft() o scrollDisplayRight() en un bucle para mover el texto a través de la pantalla.

El siguiente sketch muestra cómo desplazar un mensaje continuamente hacia la izquierda:

#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x3F, 16, 2);  // establece la dirección LCD a 0x3F para una pantalla de 16 caracteres y 2 líneas

void setup() {
  lcd.init();
  lcd.clear();         
  lcd.backlight();      // Asegúrate de que la luz de fondo esté encendida
  
  // Imprime un mensaje
  lcd.print("Demostración de texto en desplazamiento");
  delay(1000);  // pausa para leer el mensaje inicialmente
}

void loop() {
  lcd.scrollDisplayLeft();   // desplaza todo hacia la izquierda por una posición
  delay(300);                // pequeña pausa para la velocidad visible de desplazamiento
}

Cuando subas este código a tu ESP32, tu LCD mostrará algo como esto:

Explicación del código de desplazamiento:

En este ejemplo, imprimimos un mensaje que tiene 36 caracteres de longitud (“Demostración de texto en desplazamiento”) en el LCD. Dado que el display solo puede mostrar 16 caracteres a la vez, solo los primeros 16 caracteres serán visibles inicialmente.

lcd.print("Demostración de texto en desplazamiento");

En la función loop(), llamamos a lcd.scrollDisplayLeft(), que mueve todo el contenido del display un espacio a la izquierda. Al repetir esto con una breve pausa entre cada desplazamiento, el mensaje aparece como si se moviera suavemente a través de la pantalla.

void loop() {
  lcd.scrollDisplayLeft();   // desplaza todo hacia la izquierda por una posición
  delay(300);                // pequeña pausa para la velocidad visible de desplazamiento
}

A medida que el texto se desplaza, los caracteres que se mueven fuera del borde izquierdo desaparecen, y los espacios en blanco aparecen en el lado derecho de la pantalla. Si deseas que el mensaje se repita continuamente, necesitarías agregar un código que vuelva a imprimir el mensaje periódicamente.

Para desplazar en la dirección opuesta (de derecha a izquierda), puedes usar lcd.scrollDisplayRight() en su lugar.

Otras funciones útiles de la biblioteca LiquidCrystal_I2C

El objeto LiquidCrystal_I2C te ofrece muchas funciones útiles para controlar tu LCD. Aquí hay algunas de las más útiles:

• lcd.home() mueve el cursor de vuelta a la esquina superior izquierda del LCD (la primera posición en la primera fila). A diferencia de clear(), no borra lo que ya está en la pantalla; simplemente mueve el cursor a la posición inicial.
• lcd.blink() y lcd.noBlink() encienden o apagan un cursor de bloque intermitente. Cuando se activa con blink(), verás un bloque sólido que parpadea en la posición actual del cursor. Esto es excelente para captar la atención del usuario o mostrar dónde aparecerá el texto a continuación. Si no deseas este parpadeo, usa noBlink() para apagarlo.
• lcd.cursor() y lcd.noCursor() controlan si aparece una línea de subrayado (_) en la posición donde se escribirá el siguiente carácter. La función cursor() muestra esta línea, mientras que noCursor() la oculta. Esto es diferente del bloque parpadeante; es solo una simple línea que muestra dónde irá el siguiente carácter.
• lcd.display() y lcd.noDisplay() permiten encender o apagar todo el display sin borrar nada. Cuando usas noDisplay(), la pantalla se queda en blanco, pero todo el texto permanece almacenado en la memoria del LCD. Cuando llamas nuevamente a display(), todo vuelve a aparecer. Esto es perfecto para crear efectos de parpadeo o ahorrar energía cuando no se necesita el display.

Intenta experimentar con estas funciones en tu propio código para ver cómo funcionan. ¡Te ayudarán a crear displays más interactivos y dinámicos para tus proyectos!

Crear y mostrar caracteres personalizados

En ocasiones, querrás mostrar caracteres especiales que no forman parte del alfabeto estándar o números, como símbolos como una cara sonriente, un símbolo de grado (°) para lecturas de temperatura, o íconos divertidos como corazones, notas musicales o flechas.

La buena noticia es que los LCD HD44780 te permiten crear hasta 8 caracteres personalizados que tú diseñes. Como aprendimos anteriormente en este tutorial, cada carácter en el LCD se muestra usando una pequeña cuadrícula de píxeles dispuestos en un patrón de 5x8 (5 píxeles de ancho por 8 píxeles de alto). Para crear tu propio carácter, necesitarás decidir qué de estos diminutos puntos deben estar encendidos y cuáles deben estar apagados.

Para crear tu carácter personalizado, primero necesitas hacer un arreglo de 8 bytes en tu código. Cada byte en este arreglo representa una fila horizontal en tu carácter, comenzando desde la fila superior y bajando hasta la fila inferior. Por cada byte, usarás los bits (los 1s y 0s en binario) para indicar qué píxeles deben estar ENCENDIDOS (1) y cuáles APAGADOS (0). Solo los primeros 5 bits de cada byte se utilizan, ya que el carácter es de 5 píxeles de ancho.

Una vez que hayas diseñado tu carácter configurando este arreglo, puedes usar la función createChar() para almacenar tu carácter personalizado en la CGRAM (Memoria de Generación de Caracteres) del LCD, que es un área de memoria especial diseñada solo para albergar caracteres personalizados.

¡Ahora, vamos a crear algunos caracteres personalizados interesantes para tus proyectos!

CGROM vs. CGRAM

Todos los LCDs basados en el controlador Hitachi HD44780 tienen dos tipos de memoria: CGROM (Memoria de Generación de Caracteres de Solo Lectura) y CGRAM (Memoria de Generación de Caracteres de Acceso Aleatorio).

CGROM es memoria no volátil, lo que significa que mantiene sus datos incluso cuando se apaga la energía. Almacena patrones de puntos predefinidos para caracteres ASCII estándar, como letras, números y símbolos comunes. Cuando quieres mostrar una “A” en la pantalla, envías el código para “A” (que es 0x41 en hexadecimal), y el controlador del LCD busca el patrón de puntos para “A” en su CGROM y lo muestra. Esto hace que mostrar caracteres regulares sea súper rápido y fácil.

Por otro lado, CGRAM es memoria volátil, por lo que pierde sus datos cuando se corta la energía. Esta memoria es flexible y te permite almacenar patrones de puntos personalizados que no forman parte del conjunto incorporado. Por ejemplo, puedes diseñar tus propios símbolos, íconos o caracteres únicos para tu proyecto. Sin embargo, CGRAM tiene un espacio limitado: solo 64 bytes en total. En un LCD de píxeles 5x8 estándar, esto significa que solo puedes almacenar 8 caracteres personalizados (ya que cada carácter necesita 8 bytes). Si usas un LCD de 5x10 píxeles, solo puedes almacenar 4 caracteres personalizados porque cada uno requiere más memoria.

En resumen, CGROM es de solo lectura con patrones de caracteres fijos que no se pueden cambiar, mientras que CGRAM es grabable, lo que te permite crear y almacenar caracteres personalizados siempre que los necesites.

Generador de caracteres personalizados

¡Crear caracteres personalizados nunca ha sido tan fácil! Hemos desarrollado una herramienta útil llamada el Generador de Caracteres Personalizados. ¿Ves la cuadrícula azul a continuación? Puedes hacer clic en cualquier píxel para encenderlo o apagarlo, y a medida que lo haces, el código para tu carácter se genera automáticamente justo al lado de la cuadrícula. Puedes copiar este código directamente en tu sketch de Arduino.

Las posibilidades de lo que puedes crear son casi infinitas. Podrías hacer flechas, animales simples, personajes de juegos, símbolos del clima o cualquier ícono pequeño que puedas encajar en la cuadrícula de 5x8. La única limitación es que la biblioteca LiquidCrystal_I2C solo te permite usar ocho caracteres personalizados al mismo tiempo. Pero no te preocupes, ¡ocho caracteres diferentes son suficientes para hacer que tu proyecto sea único e interesante!

Código de ejemplo para ESP32

El siguiente sketch muestra cómo mostrar tus caracteres personalizados en el LCD:

#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x3F, 16, 2);  // establece la dirección LCD a 0x3F para una pantalla de 16 caracteres y 2 líneas

// crea algunos caracteres personalizados:
byte Corazón[8] = {
  0b00000,
  0b01010,
  0b11111,
  0b11111,
  0b01110,
  0b00100,
  0b00000,
  0b00000
};

byte Campana[8] = {
  0b00100,
  0b01110,
  0b01110,
  0b01110,
  0b11111,
  0b00000,
  0b00100,
  0b00000
};

byte Extraterrestre[8] = {
  0b11111,
  0b10101,
  0b11111,
  0b11111,
  0b01110,
  0b01010,
  0b11011,
  0b00000
};

byte Checkmark[8] = {
  0b00000,
  0b00001,
  0b00011,
  0b10110,
  0b11100,
  0b01000,
  0b00000,
  0b00000
};

byte Altavoz[8] = {
  0b00001,
  0b00011,
  0b01111,
  0b01111,
  0b01111,
  0b00011,
  0b00001,
  0b00000
};

byte Sonido[8] = {
  0b00001,
  0b00011,
  0b00101,
  0b01001,
  0b01001,
  0b01011,
  0b11011,
  0b11000
};

byte Calavera[8] = {
  0b00000,
  0b01110,
  0b10101,
  0b11011,
  0b01110,
  0b01110,
  0b00000,
  0b00000
};

byte Candado[8] = {
  0b01110,
  0b10001,
  0b10001,
  0b11111,
  0b11011,
  0b11011,
  0b11111,
  0b00000
};

void setup() {
  lcd.init();
  // Asegúrate de que la luz de fondo esté encendida
  lcd.backlight();

  // crea los nuevos caracteres
  lcd.createChar(0, Corazón);
  lcd.createChar(1, Campana);
  lcd.createChar(2, Extraterrestre);
  lcd.createChar(3, Checkmark);
  lcd.createChar(4, Altavoz);
  lcd.createChar(5, Sonido);
  lcd.createChar(6, Calavera);
  lcd.createChar(7, Candado);

  // Limpia la pantalla del LCD
  lcd.clear();

  // Imprime un mensaje en el lcd.
  lcd.print("Carácter personalizado");
}

// Imprime todos los caracteres personalizados
void loop() {
  lcd.setCursor(0, 1);
  lcd.write(0);

  lcd.setCursor(2, 1);
  lcd.write(1);

  lcd.setCursor(4, 1);
  lcd.write(2);

  lcd.setCursor(6, 1);
  lcd.write(3);

  lcd.setCursor(8, 1);
  lcd.write(4);

  lcd.setCursor(10, 1);
  lcd.write(5);

  lcd.setCursor(12, 1);
  lcd.write(6);

  lcd.setCursor(14, 1);
  lcd.write(7);
}

Cuando subas este código a tu ESP32, tu LCD mostrará algo como esto:

¡Prueba esto y experimenta creando tus propios caracteres únicos!

Explicación del código de caracteres personalizados:

Después de incluir la biblioteca LiquidCrystal_I2C y configurar el objeto LCD, el código define arreglos especiales para nuestros caracteres personalizados. Cada arreglo tiene exactamente 8 bytes, y cada byte controla una fila de puntos en nuestra cuadrícula de caracteres de 5x8.

El ejemplo incluye ocho caracteres personalizados diferentes. Veamos el arreglo Corazón[8] como ejemplo:

byte Corazón[8] = {
  0b00000,
  0b01010,
  0b11111,
  0b11111,
  0b01110,
  0b00100,
  0b00000,
  0b00000
};

Cada línea representa una fila de píxeles, comenzando desde la parte superior del carácter. El “0b” al principio simplemente indica que se trata de un número binario (compuesto de 0s y 1s). Cada 0 significa “píxel apagado” y cada 1 significa “píxel encendido”. Si miras detenidamente el patrón, puedes ver cómo los 1s forman la forma de un corazón.

En la sección de setup del código, usamos la función createChar() para almacenar nuestro carácter personalizado en la memoria del LCD. Esta función necesita dos piezas de información: un número entre 0 y 7 (que le dice al LCD cuál de los ocho espacios de memoria disponibles utilizar) y el nombre del arreglo que contiene nuestro diseño de carácter.

lcd.createChar(0, Corazón);

Finalmente, en la sección de loop, mostramos nuestro carácter personalizado usando la función write(). Le indicamos qué carácter mostrar pasando el número de espacio de memoria:

lcd.write(byte(0));