Tutorial de pantalla LCD para Arduino, ESP8266 y ESP32

En este tutorial aprenderás a conectar tu microcontrolador con una pantalla LCD y a hacer tu primer sketch para mostrar lo que quieras en la pantalla LCD.

Utilizamos diferentes tipos de pantallas:

• Pantalla LCD sin conexión I2C
• Pantalla LCD con conexión I2C

Como bonus te muestro cómo puedes crear caracteres personalizados como un corazón en la pantalla de forma súper rápida y sencilla.

La mayoría de las veces usamos el trazador serial del IDE de Arduino para visualizar nuestras soluciones o la salida de un boceto. Es genial y le ahorra mucho tiempo al crear prototipos. Pero hay un momento en que su sistema se activará. Si, por ejemplo, solo está enviando datos del sensor a una base de datos en una Raspberry Pi, puede ver la salida desde su PC de forma remota conectándose a la base de datos. Pero hay casos de uso como una estación meteorológica interior, en los que desea ver la salida como la temperatura actual directamente y no cuando está en su PC.

Que las pantallas son el camino a seguir. Hay diferentes tipos de pantallas, como la pantalla LED de 7 segmentos, la pantalla de 7 segmentos de 4 dígitos, la pantalla de matriz de puntos de 8 × 8, la pantalla OLED o la versión más simple y la pantalla de cristal líquido (LCD) más barata.

La mayoría de las pantallas LCD tienen 2 líneas con 16 caracteres por línea o 4 líneas con 20 caracteres por línea. Hay una pantalla LCD con y sin módulo I2C. Sugiero encarecidamente módulos con I2C porque la conexión a la placa es muy simple y solo se usan 2 pines en lugar de 6. Pero vamos a cubrir la pantalla LCD con y sin módulo I2C en este artículo.

La siguiente tabla le brinda una descripción general de todos los componentes y partes que utilicé para este tutorial. Recibo comisiones por compras realizadas a través de los enlaces de esta tabla.

Componente de enlace de Amazon Enlace de AliExpress

Arduino Nano	Amazon	AliExpress
Arduino Pro Mini	Amazon	AliExpress
Arduino Uno	Amazon	AliExpress
Arduino Mega	Amazon	AliExpress
ESP32 ESP-WROOM-32	Amazon	AliExpress
ESP8266 NodeMCU	Amazon	AliExpress
ESP8266 WeMos D1 Mini	Amazon	AliExpress
LCD Display 20×4	Amazon	AliExpress
LCD Display 16×2	Amazon	AliExpress

Especificaciones de la pantalla LCD

La pantalla LCD tiene un voltaje de funcionamiento de 4,7 V a 5,3 V con un consumo de corriente de 1 mA sin luz de fondo y 120 mA con luz de fondo completa. Hay versiones con retroiluminación verde y azul. Cada carácter en la pantalla está construido por un cuadro de 5 × 8 píxeles y, por lo tanto, es capaz de mostrar caracteres generados personalizados. Debido a que cada carácter está construido por (5 × 8 = 40) 40 píxeles, una pantalla LCD de 16 × 2 tendrá 16x2x40 = 1280 píxeles en total. El módulo LCD puede funcionar en modo de 8 y 4 bits. La diferencia entre el modo de 4 y 8 bits es la siguiente:

• En el modo de 8 bits, solo se necesita una señal de pulso para mostrar un carácter en la pantalla LCD en lugar de dos señales de pulso.
• El modo de 4 bits utiliza solo cuatro pines de datos en comparación con los 8 pines de datos en el modo de 8 bits.
• Dado que se requieren dos señales de pulso (encender) para mostrar un solo carácter, la latencia del modo de 4 bits es mayor en comparación con el modo de 8 bits.

Pantalla LCD sin conexión I2C

Si usamos la versión LCD sin conexión I2C, necesitamos agregar el potenciómetro manualmente para controlar el contraste de la pantalla. La siguiente imagen muestra la distribución de pines de la pantalla LCD.

También agregué una tabla sobre cómo conectar la pantalla LCD con el Arduino Uno y el NodeMCU con una descripción del pin LCD. Para que le resulte lo más fácil posible conectar su microcontrolador a la pantalla, encontrará la imagen de conexión fritzing correspondiente para Arduino Uno y NodeMCU en este capítulo.

Pin NR	Etiqueta del pin LCD-016M002B	Conexión de Arduino Uno	Conexión de ESP8266 NodeMCU	Descripción
1	GND	GND	GND	Pin de tierra para conectar al pin GND del Arduino.
2	VCC	3V3 / 5V	3V3 / VIN	Tensión de alimentación de 5V (4,7V – 5,3V). También para una prueba 3V hace el trabajo.
3	VEE	Potenciómetro	Potenciómetro	Ajusta el contraste de la pantalla Si este pin está conectado a tierra, se obtiene el máximo contraste. Conectaremos el pin VEE a la salida del potenciómetro para ajustar el contraste cambiando la resistencia del mismo.
4	RS	D12	D2	Registro de comando de selección a bajo cuando estamos enviando comandos a la pantalla LCD como poner el cursor en un lugar específico, borrar la pantalla o apagar la pantalla.
5	R/W	GND	GND	Y selecciona el registro de datos cuando RS se pone en alto para enviar datos o caracteres a la LCD.
6	Habilitar	D11	D3	Diferir entre leer o escribir datos. Normalmente conectado a tierra para escribir datos en la pantalla LCD
7	Pin de datos 0 (d0)			Conectado al pin del microcontrolador y conmutado entre 1 y 0 para el reconocimiento de datos. Así que si queremos enviar datos a través de los pines de datos 0 a 7, tenemos que asegurarnos de que el pin de habilitación está alto.
8	Pin de datos 1 (d1)			Los pines de datos 0 a 7 forman una línea de datos de 8 bits. Los pines de datos se conectan a los pines de E/S digitales del microcontrolador para enviar datos de 8 bits. Estos LCD también pueden funcionar en modo de 4 bits, en cuyo caso los pines de datos 4, 5, 6 y 7 quedarán libres.
9	Pin de datos 2 (d2)
10	Pin de datos 3 (d3)
11	Pin de datos 4 (d4)	D5	D6
12	Pin de datos 5 (d5)	D4	D7
13	Pin de datos 6 (d6)	D3	D8
14	Pin de datos 7 (d7)	D2	RX
15	Positivo del LED	3V3 / 5V	3V3 / VIN	Terminal positivo del pin del LED de luz de fondo
16	LED negativo	GND	GND	Terminal negativo del pin del LED de luz de fondo

Conexión de la pantalla LCD al Arduino Uno sin I2C

La siguiente imagen muestra las conexiones entre la pantalla LCD y el Arduino Uno.

Conexión de la pantalla LCD al ESP8266 NodeMCU sin I2C

La siguiente imagen muestra las conexiones entre la pantalla LCD y el ESP8266 NodeMCU.

Por supuesto, queremos probar la conexión entre el microcontrolador y la pantalla LCD. Por lo tanto, encontrará un boceto de ejemplo en el IDE de Arduino. La siguiente sección muestra el código del boceto y una imagen del ejemplo en ejecución, más o menos porque es difícil hacer una imagen de la pantalla ;-). El ejemplo muestra «¡hola, mundo!» en la primera línea de la pantalla y cuenta cada segundo en la segunda línea. Estamos usando la conexión que describimos anteriormente para este ejemplo.

// include the library code:
#include "LiquidCrystal_I2C.h"

// initialize the library by associating any needed LCD interface pin
// with the arduino pin number it is connected to
const int RS = D2, EN = D3, d4 = D5, d5 = D6, d6 = D7, d7 = D8;

// if you use the NodeMCU 12E the suggested pins are
// const int RS = 4, EN = 0, d4 = 12 , d5 = 13, d6 = 15, d7 = 3;

LiquidCrystal lcd(RS, EN, d4, d5, d6, d7);

void setup() {
// set up the LCD's number of columns and rows:
lcd.begin(16, 2);
// Print a message to the LCD.
lcd.print("hello, world!");
}

void loop() {
// set the cursor to column 0, line 1
// (note: line 1 is the second row, since counting begins with 0):
lcd.setCursor(0, 1);
// print the number of seconds since reset:
lcd.print(millis() / 1000);
}

Parece muy complicado imprimir datos en la pantalla LCD. Pero no se preocupe, porque en la mayoría de los casos, si comienza a ensuciarse, hay una biblioteca para correr la voz por nosotros. Este también es el caso de la pantalla LCD sin una conexión I2C.

Por lo tanto, el siguiente paso es instalar la biblioteca “LiquidCrystal”. Aquí encontrará un artículo sobre cómo instalar una biblioteca externa a través del IDE de Arduino. Una vez instalada la biblioteca, puede incluirla a través de: #include .

Pantalla LCD con conexión I2C

Como le dije, sugeriría módulos LCD con I2C porque solo necesita 2 pines en lugar de 6 para la conexión entre la pantalla y la placa del microcontrolador. En caso de que utilice la comunicación I2C entre la pantalla LCD y el microcontrolador, debe conocer la dirección I2C HEX de la pantalla LCD. En este artículo, lo llevo paso a paso sobre cómo encontrar la dirección I2C HEX de un dispositivo. También hay un artículo sobre el protocolo de comunicación I2C en detalle.

En la parte posterior hay un potenciómetro integrado de 10 kΩ para controlar el contraste de la pantalla. No es necesario añadir el potenciómetro manualmente como en la versión sin conexión I2C.

La siguiente imagen muestra cómo conectar una pantalla LCD I2C con un Arduino Uno. Usaremos exactamente esta conexión para todos los ejemplos de este artículo.

Para usar la pantalla LCD I2C, necesitamos instalar la biblioteca requerida “LiquidCrystal_I2C” de Frank de Brabander. Aquí encontrará un artículo sobre cómo instalar una biblioteca externa a través del IDE de Arduino. Una vez instalada la biblioteca, puede incluirla a través de: #include LiquidCrystal_I2C.h>.

Este breve ejemplo le muestra cómo utilizar la biblioteca para controlar la pantalla LCD.

#include "Wire.h"
#include "LiquidCrystal_I2C.h"

// create an LCD object (Hex address, # characters, # rows)
// my LCD display in on Hex address 27 and is a 20x4 version
LiquidCrystal_I2C lcd(0x27, 20, 4); 

void setup()
{
  lcd.init();

  lcd.backlight();
  lcd.setCursor(1, 0);
  lcd.print("This is");
  lcd.setCursor(1, 1);
  lcd.print("DIYI0T.com");
}

void loop(){}

Funciones de la biblioteca LiquidCrystal y LiquidCrystal_I2C

La biblioteca LiquidCrystal tiene 20 funciones integradas que resultan útiles cuando desea trabajar con la pantalla LCD. En la siguiente parte de este artículo, repasaremos todas las funciones con una descripción junto con un boceto de muestra y un video corto para que veas lo que hace la función.

LiquidCrystal	LiquidCrystal_I2C	Función LiquidCrystal library	Descripción
x	x	LiquidCrystal() LiquidCrystal_I2C()	Esta función crea una variable del tipo LiquidCrystal. Los parámetros de la función definen la conexión entre la pantalla LCD y el Arduino. Puedes utilizar cualquiera de los pines digitales del Arduino para controlar la pantalla. El orden de los parámetros es el siguiente LiquidCrystal(RS, R/W, Enable, d0, d1, d2, d3, d4, d5, d6, d7) Si R/W está conectado a GND no se utiliza el parámetro en la función: LiquidCrystal(RS, Enable, d0, d1, d2, d3, d4, d5, d6, d7) Si se quiere operar en el modo de 4 bits la función cambia: LiquidCrystal(RS, R/W, Enable, d4, d5, d6, d7) Si se utiliza una pantalla LCD con la conexión I2C no se definen los pines conectados porque no se conecta a pines individuales pero se define la dirección HEX y el tamaño de la pantalla: LiquidCrystal_I2C lcd(0x27, 20, 4);
x		lcd.begin()	Hay que llamar a la función lcd.begin(cols, rows) para definir el tipo de pantalla LCD con el número de columnas y filas. La función tiene que ser llamada en la parte void setup() de tu sketch. Para la pantalla de 16×2 se escribe lcd.begin(16,2) y para la de 20×4 lcd.begin(20,4). El ejemplo siguiente define la pantalla como de 20×4 y muestra un texto.
	x	lcd.init()	Inicialización de la pantalla I2C.
x	x	lcd.clear()	La función clear borra cualquier dato de la pantalla LCD y coloca el cursor en la esquina superior izquierda. Puedes colocar esta función en la función de configuración de tu sketch para asegurarte de que no aparezca nada en la pantalla cuando inicies tu programa.
x	x	lcd.home()	Esta función coloca el cursor en la esquina superior izquierda de la pantalla.
x	x	lcd.setCursor()	Si quieres escribir texto en tu pantalla LCD, tienes que definir la posición inicial del carácter que quieres imprimir en la LCD con la función lcd.setCursor(col, row). Aunque tienes que definir la fila en la que se debe mostrar el carácter.
x	x	lcd.write()	Utiliza la función write para mostrar los valores, por ejemplo un valor del sensor.
x	x	lcd.print()	Esta función muestra diferentes tipos de datos: char, byte, int, long o string. Una cadena debe ir entre comillas («»). Los números pueden imprimirse sin las comillas. Los números también se pueden imprimir en diferentes sistemas numéricos lcd.print(data, BASE) con BIN para binario (base 2), DEC para decimal (base 10), OCT para octal (base 8), HEX para hexadecimal (base 16).
	x	lcd.println()	Esta función muestra también diferentes tipos de datos: char, byte, int, long, o string como la función lcd.print() pero lcd.println() imprime siempre una nueva línea al flujo de salida.
x	x	lcd.cursor() / lcd.noCursor()	Muestra u oculta el cursor de la pantalla LCD como un guión bajo (línea) en la posición en la que se escribirá el siguiente carácter.
x	x	lcd.blink() / lcd.noBlink()	La función blink y noBlink muestra u oculta un cursor de estilo bloque que parpadea al encenderse y apagarse.
x	x	lcd.display() / lcd.noDisplay()	Esta función enciende y apaga cualquier texto o cursor de la pantalla pero no borra la información de la memoria. Por lo tanto, es posible encender y apagar la pantalla con esta función.
x	x	lcd.scrollDisplayLeft() / lcd.scrollDisplayRight()	Esta función desplaza el contenido de la pantalla (texto y cursor) una posición a la izquierda o a la derecha. Después de 40 espacios la función volverá al primer carácter. Con esta función en la parte del bucle de tu sketch puedes construir una función de desplazamiento de texto. Texto de desplazamiento si desea imprimir más de 16 o 20 caracteres en una línea, que la función de texto de desplazamiento es muy útil. Primero se imprime la subcadena con el máximo de caracteres por línea, desplazando la columna de inicio de la derecha a la izquierda en la pantalla LCD. Luego se deja el primer carácter y se imprime el siguiente a la subcadena. Este proceso se repite hasta que se muestra la cadena completa en la pantalla.
x	x	lcd.autoscroll() / lcd.noAutoscroll()	La función autoscroll activa o desactiva la funcionalidad de que cada carácter se desplace una posición. La función se puede utilizar como la función scrollDisplayLeft / scrollDisplayRight.
x	x	lcd. leftToRight() / lcd.rightToLeft()	Las funciones leftToRight y rightToLeft cambian la dirección del texto escrito en la pantalla LCD. El modo por defecto es de izquierda a derecha, que no es necesario definir al inicio del sketch.
x	x	lcd.createChar()	Existe la posibilidad de crear caracteres personalizados con la función createChar. La forma de crear los caracteres personalizados se describe en el siguiente capítulo de este artículo, así como un ejemplo.
	x	lcd.backlight()	La función backlight es útil si no quieres apagar toda la pantalla (ver lcd.display()) y por tanto sólo encender y apagar la luz de fondo. Pero antes de poder utilizar esta función tienes que definir el pin de la luz de fondo con la función setBacklightPin(pin, polaridad). El siguiente ejemplo muestra un sketch para encender y apagar la luz de fondo. lcd.setBacklightPin(7, NEGATIVO); lcd.setBacklight(1);
	x	lcd.moveCursorLeft() / lcd.moveCursorRight()	Esta función permite mover el cursor a la izquierda y a la derecha. Para que esta función sea útil hay que combinarla con lcd.setCursor() porque si no no hay cursor para mover a la izquierda o a la derecha. Para nuestro ejemplo también utilizamos la función lcd.cursor() para hacer visible el cursor.
	x	lcd.on() / lcd.off()	Esta función enciende y apaga la pantalla LCD. Encenderá/apagará el controlador del LCD y la luz de fondo. Este método tiene el mismo efecto que llamar a display/noDisplay y a backlight/noBacklight.

Ejemplo de pantalla parpadeante, de cursor y de desplazamiento

Para mostrarle algunos ejemplos básicos de las bibliotecas LiquidCrystal y LiquidCrystal_I2C, puede copiar el siguiente ejemplo que muestra tres funciones diferentes de la biblioteca:

1. Muestre u oculte un campo de carácter intermitente para mostrarle al usuario su aplicación que, por ejemplo, se necesita una entrada o se está cargando una aplicación.
2. Muestre u oculte un cursor útil («_») al crear un menú como una barra de navegación de izquierda a derecha o de arriba a abajo, dependiendo de una barra de menú horizontal o vertical. Si está interesado en crear un menú básico con el microcontrolador ESP o Arduino en combinación con la pantalla, encontrará un tutorial aquí.
3. Mueva todos los caracteres a la derecha para una visualización de desplazamiento.

El siguiente código le muestra el programa Arduino para usar las tres funciones de la pantalla LCD en la biblioteca divididas en tres funciones separadas. El video después del programa también muestra las funciones en acción.

#include "Wire.h"
#include "LiquidCrystal_I2C.h"

// set the LCD address to 0x27 for a 16 chars and 2 line display
LiquidCrystal_I2C lcd(0x27, 20, 4); 

void setup()
{
  lcd.init();
  lcd.backlight();
  lcd.clear();
}

void loop(){
  show_blink();
  show_cursor();
  scroll_display();
  }

void show_blink(){
  lcd.clear();
  lcd.setCursor(0,2);
  lcd.print("Blink is on");
  lcd.setCursor(0,0);
  lcd.blink();
  delay(5000);
  lcd.setCursor(0,2);
  lcd.print("Blink is off");
  lcd.setCursor(0,0);
  lcd.noBlink();
  delay(5000);
}

void show_cursor(){
  lcd.clear();
  lcd.setCursor(0,2);
  lcd.print("Cursor is on");
  lcd.setCursor(0,0);
  lcd.cursor();
  delay(5000);
  lcd.setCursor(0,2);
  lcd.print("Cursor is off");
  lcd.setCursor(0,0);
  lcd.noCursor();
  delay(5000);
}

void scroll_display(){
  lcd.clear();
  lcd.setCursor(0,2);
  lcd.print("Scroll display");
  lcd.scrollDisplayRight();
  delay(1000);
  lcd.scrollDisplayRight();
  delay(1000);
  lcd.scrollDisplayRight();
  delay(1000);
  lcd.scrollDisplayRight();
  delay(3000);
}

https://youtu.be/SdPCPRW-09g

¿Cómo visualizo los caracteres generados personalizados?

Crear personajes personalizados es muy fácil si usa las bibliotecas mencionadas anteriormente. Tanto LiquidCrystal como la biblioteca LiquidCrystal_I2C tienen la función “lcd.createChar ()” para crear un carácter personalizado a partir de los 5 × 8 píxeles de un personaje. Para diseñar sus propios personajes, debe crear una matriz binaria de su personaje personalizado a partir de un generador de caracteres LCD o mapearlo usted mismo. Este código crea un hombre que se retuerce.

#include "Wire.h"
#include "LiquidCrystal_I2C.h"

// Set the LCD address to 0x27 in PCF8574 by NXP and Set to 0x3F in PCF8574A by Ti
LiquidCrystal_I2C lcd(0x27, 20, 4); 

byte customChar1[] = {
  B01110,
  B01110,
  B00100,
  B11111,
  B00100,
  B01110,
  B01010,
  B01010
};

byte customChar2[] = {
  B01110,
  B01110,
  B10101,
  B01110,
  B00100,
  B00100,
  B01010,
  B10001
};

void setup() {
  lcd.init();
  lcd.backlight();
}

void loop() {
  lcd.createChar(0, customChar1);
  lcd.home();
  lcd.write(0);
  delay(1000);
  lcd.createChar(0, customChar2);
  lcd.home();
  lcd.write(0);
  delay(1000);
  }

Puede utilizar la siguiente herramienta para crear caracteres generados personalizados de forma fácil y rápida: http://omerk.github.io/lcdchargen/

https://youtu.be/BZIpvwLHkY8

Códigos de control importantes para la pantalla LCD

En la sección de asignación de pines de la pantalla LCD sin I2C, vimos que si configuramos el pin RS en cómo, podemos enviar comandos a la pantalla LCD. Estos comandos se envían a través de los pines de datos y se representan en la siguiente tabla como código HEX.

Nº de sr.	Código hexadecimal	Comando a registro de instrucción LCD
1	1	Borrar pantalla
2	2	Volver a casa
3	4	Descender el cursor (desplazar el cursor a la izquierda)
4	6	Cursor de aumento (desplazar el cursor a la derecha)
5	5	Desplazar la pantalla a la derecha
6	7	Cambiar la visualización a la izquierda
7	8	Pantalla apagada, cursor apagado
8	0A	Pantalla desactivada, cursor activado
9	0C	Pantalla activada, cursor desactivado
10	0E	Pantalla encendida, cursor parpadeando
11	0F	Pantalla encendida, cursor parpadeando
12	10	Cambiar la posición del cursor a la izquierda
13	14	Cambiar la posición del cursor a la derecha
14	18	Desplazar toda la pantalla hacia la izquierda
15	1C	Desplazar toda la pantalla hacia la derecha
16	80	Forzar el cursor al principio ( 1ª línea)
17	C0	Forzar cursor al principio ( 2ª línea)
18	38	2 líneas y matriz 5×7

Conclusión

Espero que hayas aprendido mucho de este artículo. No dude en probar los bocetos de muestra con su microcontrolador. ¿Tiene preguntas sobre este artículo? Utilice la sección de comentarios a continuación y responderé su pregunta.