ESP8266 - Pantalla LCD

Este tutorial te enseña cómo usar una pantalla LCD con ESP8266, cómo programar para ESP8266 para mostrar texto y caracteres especiales en la pantalla LCD.

Hardware Requerido

1×ESP8266 NodeMCU
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
1×Cables Puente
1×(Recomendado) Placa de Expansión de Terminales de Tornillo para ESP8266
1×(Recomendado) Divisor de Alimentación para ESP8266 Tipo-C

Or you can buy the following kits:

1×DIYables Sensor Kit (30 sensors/displays)
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.

Acerca de LCD I2C 16x2

La pantalla LCD I2C es una mejor alternativa a la pantalla LCD estándar. Con solo 4 pines, facilita la conexión al ESP8266. Un potenciómetro integrado facilita ajustar el contraste de la pantalla LCD.

Pinout I2C de la pantalla LCD

El LCD I2C utiliza una interfaz I2C para conectarse al ESP8266. Tiene 4 pines:

  • Pin GND: Este debe conectarse a GND (0V).
  • Pin VCC: Este es el suministro de energía para la pantalla LCD y debe conectarse a VCC (5V).
  • Pin SDA: Esta es la señal de datos I2C.
  • Pin SCL: Esta es la señal de reloj I2C.
Disposición de pines del LCD I2C

Coordenada LCD

El LCD I2C 16x2 tiene un total de 16 columnas y 2 filas. Las columnas y las filas se numeran a partir de 0.

Coordenada LCD I2C ESP8266 NodeMCU

Diagrama de Cableado

Diagrama de cableado ESP8266 NodeMCU LCD I2C

This image is created using Fritzing. Click to enlarge image

Para obtener m\u00e1s informaci\u00f3n, consulte Pines del ESP8266 y c\u00f3mo alimentar ESP8266 y otros componentes.

LCD I2C ESP8266
Vin Vin
GND GND
SDA D2 (GPIO4)
SCL D1 (GPIO5)

Cómo programar para LCD I2C

La biblioteca LiquidCrystal_I2C debe estar incluida para poder usar el LCD.

  • Configurar la pantalla LCD:

La pantalla LCD debe configurarse antes de poder utilizarla.

  • Escribir en la pantalla LCD:

Escribir en la pantalla LCD es sencillo gracias a la biblioteca LiquidCrystal_I2C.

#include <LiquidCrystal_I2C.h> // Library for LCD
  • Declara un objeto de la clase LiquidCrystal_I2C, especificando su dirección I2C, el número de columnas y el número de filas.
LiquidCrystal_I2C lcd(0x27, 16, 2); // I2C address 0x27, 16 column and 2 rows
  • Inicia la pantalla LCD.
lcd.init(); //initialize the lcd lcd.backlight(); //open the backlight
  • Coloque el cursor en la ubicación deseada (column_index, row_index)
lcd.setCursor(column_index, row_index);
  • Mostrar un mensaje en la pantalla LCD.
lcd.print("Hello World!");

Explora las posibilidades de lo que se puede lograr con LCD al mirar la sección "Haz más con LCD".

※ Nota:

La dirección del LCD puede variar según el fabricante. En nuestro código, hemos utilizado 0x27, que está especificado por el fabricante DIYables (https://diyables.io/products/lcd-i2c-16x2).

Código ESP8266

#include <LiquidCrystal_I2C.h> LiquidCrystal_I2C lcd(0x27, 16, 2); // I2C address 0x27, 16 column and 2 rows void setup() { lcd.init(); // Initialize the LCD I2C display lcd.backlight(); } void loop() { lcd.clear(); // clear display lcd.setCursor(0, 0); // move cursor to (0, 0) lcd.print("Arduino"); // print message at (0, 0) lcd.setCursor(2, 1); // move cursor to (2, 1) lcd.print("GetStarted.com"); // print message at (2, 1) delay(2000); // display the above for two seconds lcd.clear(); // clear display lcd.setCursor(3, 0); // move cursor to (3, 0) lcd.print("DIYables"); // print message at (3, 0) lcd.setCursor(0, 1); // move cursor to (0, 1) lcd.print("www.diyables.io"); // print message at (0, 1) delay(2000); // display the above for two seconds }

Pasos R\u00e1pidos

Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:

  • Consulta el cómo configurar el entorno para ESP8266 en Arduino IDE si es tu primera vez usando ESP8266.
  • Conecta los componentes tal como se muestran en el diagrama.
  • Conecta la placa ESP8266 a tu computadora usando un cable USB.
  • Abre Arduino IDE en tu computadora.
  • Elige la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (Módulo ESP-12E)), y su puerto COM correspondiente.
  • Haz clic en el icono Bibliotecas en la barra izquierda del Arduino IDE.
  • Busca "LiquidCrystal I2C" y localiza la biblioteca LiquidCrystal_I2C creada por Frank de Brabander.
  • Luego, haz clic en el botón Instalar para agregar la biblioteca.
Biblioteca LiquidCrystal I2C para ESP8266 NodeMCU
  • Copia el código y ábrelo en el IDE de Arduino.
  • Haz clic en el botón Subir en el IDE de Arduino para compilar y subir el código al ESP8266.
  • Comprueba el resultado en la pantalla LCD.
Mostrar texto en LCD con ESP8266 NodeMCU
  • De imágenes
  • Experimenta cambiando las palabras y la ubicación de las imágenes.

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.

Haz más con LCD

Personaje personalizado

lcd.print() solo permite caracteres ASCII. Para mostrar un carácter o símbolo especial (p. ej., corazón, pájaro enojado), use el generador de caracteres.

Un LCD 16x2 tiene la capacidad de mostrar 32 caracteres. Cada carácter está formado por 40 píxeles, con 8 filas y 5 columnas.

ESP8266 NodeMCU LCD 16x2 píxel

El generador de caracteres genera un carácter de 40 píxeles de tamaño. Para usarlo, simplemente siga estos pasos:

Click on each pixel to select/deselect


Copy below custom character code
Replace the customChar[8] in the below code
#include <LiquidCrystal_I2C.h> LiquidCrystal_I2C lcd(0x27, 16, 2); // I2C address 0x27, 16 column and 2 rows byte customChar[8] = { 0b00000, 0b01010, 0b11111, 0b11111, 0b01110, 0b00100, 0b00000, 0b00000 }; void setup() { lcd.init(); // Initialize the LCD I2C display lcd.backlight(); lcd.createChar(0, customChar); // create a new custom character lcd.setCursor(2, 0); // move cursor to (2, 0) lcd.write((byte)0); // print the custom char at (2, 0) } void loop() { }

El resultado mostrado en la pantalla LCD es: . El resultado mostrado en la pantalla LCD es:

carácter personalizado de LCD

Múltiples caracteres personalizados

Podemos crear un máximo de 8 caracteres personalizados, numerados del 0 al 7. El siguiente ejemplo crea y muestra tres de ellos.

#include <LiquidCrystal_I2C.h> LiquidCrystal_I2C lcd(0x27, 16, 2); // I2C address 0x27, 16 column and 2 rows byte customChar0[8] = { 0b00000, 0b01010, 0b11111, 0b11111, 0b01110, 0b00100, 0b00000, 0b00000 }; byte customChar1[8] = { 0b00100, 0b01110, 0b11111, 0b00100, 0b00100, 0b00100, 0b00100, 0b00100 }; byte customChar2[8] = { 0b00100, 0b00100, 0b00100, 0b00100, 0b00100, 0b11111, 0b01110, 0b00100 }; void setup() { lcd.init(); // Initialize the LCD I2C display lcd.backlight(); lcd.createChar(0, customChar0); // create a new custom character (index 0) lcd.createChar(1, customChar1); // create a new custom character (index 1) lcd.createChar(2, customChar2); // create a new custom character (index 2) lcd.setCursor(2, 0); // move cursor to (2, 0) lcd.write((byte)0); // print the custom char 0 at (2, 0) lcd.setCursor(4, 0); // move cursor to (4, 0) lcd.write((byte)1); // print the custom char 1 at (4, 0) lcd.setCursor(6, 0); // move cursor to (6, 0) lcd.write((byte)2); // print the custom char 2 at (6, 0) } void loop() { }

El resultado mostrado en la pantalla LCD es: . El resultado mostrado en la pantalla LCD es:

LCD con múltiples caracteres personalizados

Resumen: cómo usar un carácter personalizado en la pantalla LCD

  • Utilice el generador de caracteres para generar código binario para su personaje personalizado.
  • Copie el código binario generado en el paso anterior y declárelo.
byte customChar[8] = { 0b00000, 0b01010, 0b11111, 0b11111, 0b01110, 0b00100, 0b00000, 0b00000 };
  • Define un carácter de tu propio diseño en la rutina setup() y asígnale un valor numérico entre 0 y 7.
lcd.createChar(index, customChar);
  • Muestra el carácter personalizado en la pantalla LCD en cualquier momento, ya sea en la función setup() o en la función loop().
lcd.setCursor(column, row); // move cursor to a desired position lcd.write((byte)index); // print the custom char at the desired position

Otras funciones

  • Imprimir "Hola Mundo"

Inserte las siguientes funciones en la función loop() de forma sucesiva:

  • Limpiar la pantalla LCD
  • Esperar 5000 milisegundos
  • Imprimir "Hola Mundo"
lcd.clear();
  • Coloque el cursor en la esquina superior izquierda de la pantalla LCD.
lcd.home();
  • Coloca el cursor en una columna y una fila en particular.
lcd.setCursor(column, row);
  • Mostrar el cursor en la pantalla LCD.
lcd.cursor();
  • Hace que el cursor de la pantalla LCD sea invisible.
lcd.noCursor();
  • Mostrar el cursor de la pantalla LCD parpadeando.
lcd.blink()
  • Deshabilitar el parpadeo del cursor LCD.
lcd.noBlink()

Desafíate a ti mismo

Utilice una pantalla LCD para realizar alguno de los siguientes proyectos:

Solución de problemas en LCD I2C

i. Ajusta el contraste de la pantalla LCD girando el potenciómetro ubicado en la parte trasera de la pantalla LCD.

i. Dependiendo del fabricante, la dirección I2C de la pantalla LCD puede variar. En general, la dirección I2C predeterminada de la pantalla LCD es 0x27 o 0x3F. Prueba estos valores uno a la vez. Si no funciona, ejecuta el código a continuación para determinar la dirección I2C.

// I2C address scanner program #include <Wire.h> void setup() { Wire.begin(); Serial.begin(9600); Serial.println("I2C 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.print(address, HEX); Serial.println(" !"); nDevices++; } else if (error == 4) { Serial.print("Unknown error at address 0x"); if (address < 16) Serial.print("0"); Serial.println(address, HEX); } } if (nDevices == 0) Serial.println("No I2C devices found"); else Serial.println("done"); delay(5000); // wait 5 seconds for next scan }

La salida mostrada en el Monitor Serial es: . El efecto que se puede ver en el Monitor Serial es: . Lo que aparece en el Monitor Serial es:

COM6
Send
Scanning... I2C device found at address 0x3F ! done Scanning... I2C device found at address 0x3F ! done
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  

※ 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!