SENSORS/ACTUATORS

ESP8266 - LCD

This tutorial instructs you how to use LCD display with ESP8266, how to program for ESP8266 to display text, special characters on LCD.

Hardware Preparation

1	×	ESP8266 NodeMCU
1	×	Micro USB Cable
1	×	LCD I2C
1	×	Jumper Wires
1	×	(Optional) 5V Power Adapter for ESP8266
1	×	(Optional) ESP8266 Screw Terminal Adapter

Or you can buy the following sensor kit:

DIYables Sensor Kit 30 types, 69 units

Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you. We appreciate your support.

Overview of LCD I2C 16x2

The LCD I2C is a better alternative for the standard LCD. With only 4 pins, It makes it easy to connnect to ESP8266. A built-in potentiometer makes it easy to adjust the contrast of LCD.

The LCD I2C Pinout

The LCD I2C uses an I2C interface to connect to ESP8266. It has 4 pins:

GND pin: This should be connected to GND (0V).
VCC pin: This is the power supply for the LCD and should be connected to VCC (5V).
SDA pin: This is the I2C data signal.
SCL pin: This is the I2C clock signal.

LCD Coordinate

The LCD I2C 16x2 has a total of 16 columns and 2 rows. The columns and rows are numbered starting from 0.

Wiring Diagram

This image is created using Fritzing. Click to enlarge image

See more in ESP8266's pinout and how to supply power to the ESP8266 and other components.

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

How To Program For LCD I2C

The LiquidCrystal_I2C library needs to be included in order to use the LCD.

Setup the LCD:

The LCD must be set up before it can be used.

Write to the LCD:

Writing to the LCD is made simple due to the LiquidCrystal_I2C library.

#include <LiquidCrystal_I2C.h> // Library for LCD

Declare an object of the LiquidCrystal_I2C class, specifying its I2C address, number of columns, and number of rows.

LiquidCrystal_I2C lcd(0x27, 16, 2); // I2C address 0x27, 16 column and 2 rows

Begin the LCD.

lcd.init(); //initialize the lcd lcd.backlight(); //open the backlight

Place the cursor at the desired location (column_index, row_index)

lcd.setCursor(column_index, row_index);

Display a message on the LCD screen.

lcd.print("Hello World!");

Explore the possibilities of what can be accomplished with LCD by looking at the "Do More with LCD" section.

※ NOTE THAT:

The address of the LCD may differ depending on the manufacturer. In our code, we have used 0x27, which is specified by the DIYables manufacturer.

ESP8266 Code

#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 }

Detailed Instructions

To get started with ESP8266 on Arduino IDE, follow these steps:

Check out the how to setup environment for ESP8266 on Arduino IDE tutorial if this is your first time using ESP8266.
Wire the components as shown in the diagram.
Connect the ESP8266 board to your computer using a USB cable.
Open Arduino IDE on your computer.
Choose the correct ESP8266 board, such as (e.g. NodeMCU 1.0 (ESP-12E Module)), and its respective COM port.
Click to the Libraries icon on the left bar of the Arduino IDE.
Search for "LiquidCrystal I2C" and locate the LiquidCrystal_I2C library created by Frank de Brabander.
Then, click the Install button to add the library.

ESP8266 NodeMCU LiquidCrystal I2C library

Copy the code and open it in the Arduino IDE.
Click the Upload button in the Arduino IDE to compile and upload the code to the ESP8266.
Check out the outcome on the LCD.

Of images
Experiment with changing the words and the placement of pictures.

Video Tutorial

Do More with LCD

Custom Character

lcd.print() only allows ASCII characters. To show a special character or symbol (e.g. heart, angry bird), use the character generator.

An LCD 16x2 has the capacity to show 32 characters. Each character is made up of 40 pixels, with 8 rows and 5 columns.

The character generator produces a character that is 40 pixels in size. To use it, simply follow these steps:

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() { }

The outcome displayed on the LCD screen is: . The result shown on the LCD is:

Multiple custom characters

We can make a maximum of 8 custom characters, numbered from 0 to 7. The following example creates and shows three of them.

#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() { }

The outcome displayed on the LCD is: . The result shown on the LCD is:

Summary: how to use custom character on LCD

Utilize the character generator to generate binary code for your custom character.
Copy the binary code generated from the previous step and declare it.

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

Define a character of your own design in the setup() routine and assign it a numerical value between 0 and 7.

lcd.createChar(index, customChar);

Display the custom character on the LCD at any time, either in the setup() or loop() function.

lcd.setCursor(column, row); // move cursor to a desired position lcd.write((byte)index); // print the custom char at the desired position

Other functions

Print "Hello World"

Insert the following functions into the loop() function in succession:

Clear the LCD screen
Delay for 5000 milliseconds
Print "Hello World"

lcd.clear();

Position the cursor at the top left corner of the LCD.

lcd.home();

Position the cursor at a particular column and row.

lcd.setCursor(column, row);

Show the cursor on the LCD screen.

lcd.cursor();

Makes the LCD cursor invisible.

lcd.noCursor();

Show the LCD cursor blinking.

lcd.blink()

Disable the blinking of the LCD cursor.

lcd.noBlink()

Additionally, you can find information at LiquidCrystal Library Reference

Challenge Yourself

Utilize LCD to accomplish one of the following projects:

Transmit text from PC (through Serial Monitor) and show it on LCD. Tip: Look at How to send data from PC to Aduino
Demonstrate the pressed key of the keypad on LCD. Tip: Look at ESP8266 - Keypad

Troubleshooting on LCD I2C

Adjust the contrast of LCD by turning the potentiometer located on the back of the LCD.
Depending on the manufacturer, the I2C address of the LCD may vary. Generally, the default I2C address of the LCD is either 0x27 or 0x3F. Try these values one at a time. If unsuccessful, run the code below to determine the I2C address.

// 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 }

The output displayed on the Serial Monitor is: . The effect that can be seen on the Serial Monitor is: . What appears on the Serial Monitor is:

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

Learn More

※ OUR MESSAGES

As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!