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 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.

Comparación de pantallas LCD

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 NanoAmazonAliExpress
Arduino Pro MiniAmazonAliExpress
Arduino UnoAmazonAliExpress
Arduino MegaAmazonAliExpress
ESP32 ESP-WROOM-32AmazonAliExpress
ESP8266 NodeMCUAmazonAliExpress
ESP8266 WeMos D1 MiniAmazonAliExpress
LCD Display 20×4AmazonAliExpress
LCD Display 16×2AmazonAliExpress

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.

Conexión LCD
Pin NREtiqueta del pin LCD-016M002BConexión de Arduino UnoConexión de ESP8266 NodeMCUDescripción
1GNDGNDGNDPin de tierra para conectar al pin GND del Arduino.
2VCC3V3 / 5V3V3 / VINTensión de alimentación de 5V (4,7V – 5,3V). También para una prueba 3V hace el trabajo.
3VEEPotenciómetroPotenciómetroAjusta 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.
4RSD12D2Registro 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.
5R/WGNDGNDY selecciona el registro de datos cuando RS se pone en alto para enviar datos o caracteres a la LCD.
6HabilitarD11D3Diferir entre leer o escribir datos. Normalmente conectado a tierra para escribir datos en la pantalla LCD
7Pin 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.
8Pin 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.
9Pin de datos 2 (d2)
10Pin de datos 3 (d3)
11Pin de datos 4 (d4)D5D6
12Pin de datos 5 (d5)D4D7
13Pin de datos 6 (d6)D3D8
14Pin de datos 7 (d7)D2RX
15Positivo del LED3V3 / 5V3V3 / VINTerminal positivo del pin del LED de luz de fondo
16LED negativoGNDGNDTerminal 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.

LCD Arduino sin I2C

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.

LCD NodeMCU sin I2C

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);
}
Ejemplo de pantalla LCD NodeMCU sin I2C
Ejemplo de LCD Arduino Uno sin I2C

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.

I2C Fritzing Arduino Uno

Arduino Uno

GND
5V
PIN18
PIN19

I2C LCD Display

GND
VCC
SDA
SCL

I2C Fritzing NodeMCU

NodeMCU

GND
VINO
D2
D1

Pantalla LCD I2C

GND
VCC
SDA
SLC

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(){}
Ejemplo de pantalla de cristal líquido

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.

LiquidCrystalLiquidCrystal_I2CFunción LiquidCrystal libraryDescripción
xxLiquidCrystal()

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);
xlcd.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.
xlcd.init()Inicialización de la pantalla I2C.
xxlcd.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.
xxlcd.home()Esta función coloca el cursor en la esquina superior izquierda de la pantalla.
xxlcd.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.
xxlcd.write()Utiliza la función write para mostrar los valores, por ejemplo un valor del sensor.
xxlcd.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).
xlcd.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.
xxlcd.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.
xxlcd.blink() / lcd.noBlink()La función blink y noBlink muestra u oculta un cursor de estilo bloque que parpadea al encenderse y apagarse.
xxlcd.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.
xxlcd.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.
xxlcd.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.
xxlcd. 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.
xxlcd.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.
xlcd.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);
xlcd.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.
xlcd.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);
}

¿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 hexadecimalComando a registro de instrucción LCD
11Borrar pantalla
22Volver a casa
34Descender el cursor (desplazar el cursor a la izquierda)
46Cursor de aumento (desplazar el cursor a la derecha)
55Desplazar la pantalla a la derecha
67Cambiar la visualización a la izquierda
78Pantalla apagada, cursor apagado
80APantalla desactivada, cursor activado
90CPantalla activada, cursor desactivado
100EPantalla encendida, cursor parpadeando
110FPantalla encendida, cursor parpadeando
1210Cambiar la posición del cursor a la izquierda
1314Cambiar la posición del cursor a la derecha
1418Desplazar toda la pantalla hacia la izquierda
151CDesplazar toda la pantalla hacia la derecha
1680Forzar el cursor al principio ( 1ª línea)
17C0Forzar cursor al principio ( 2ª línea)
18382 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.


Deja un comentario