ESP8266 - Keypad - LCD

This tutorial instructs you how to use ESP8266 to display the input from keypad on LCD display.

Hardware Preparation

1	×	ESP8266 NodeMCU
1	×	Micro USB Cable
1	×	LCD I2C
1	×	Keypad 3x4
1	×	Breadboard
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 Keypad and LCD

If you are unfamiliar with keypad and LCD (pinout, how it works, how to program ...), the following tutorials can help you understand them:

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.

ESP8266 Code

/* * This ESP8266 NodeMCU code was developed by newbiely.com * * This ESP8266 NodeMCU code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/esp8266/esp8266-keypad-lcd */ #include <Keypad.h> #include <LiquidCrystal_I2C.h> const int ROW_NUM = 4; //four rows const int COLUMN_NUM = 3; //three columns char key_layout[ROW_NUM][COLUMN_NUM] = { {'1','2','3'}, {'4','5','6'}, {'7','8','9'}, {'*','0','#'} }; byte pin_rows[ROW_NUM] = {D0, D3, D4, D5}; // The ESP8266 pins connect to the row pins byte pin_column[COLUMN_NUM] = {D6, D7, D8}; // The ESP8266 pins connect to the column pins Keypad keypad = Keypad(makeKeymap(key_layout), pin_rows, pin_column, ROW_NUM, COLUMN_NUM ); LiquidCrystal_I2C lcd(0x27, 16, 2); // I2C address 0x27 (from DIYables LCD), 16 column and 2 rows int column_cursor = 0; void setup(){ lcd.init(); // Initialize the LCD I2C display lcd.backlight(); } void loop(){ char key = keypad.getKey(); if (key) { lcd.setCursor(column_cursor, 0); // move cursor to (column_cursor, 0) lcd.print(key); // print key at (column_cursor, 0) column_cursor++; // move cursor to next position if(column_cursor == 16) { // if reaching limit, clear LCD lcd.clear(); column_cursor = 0; } } }

※ NOTE THAT:

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

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.
Connect an USB cable between the ESP8266 and the PC.
Open the Arduino IDE, select the appropriate board and port.
Click to the Libraries icon on the left bar of the Arduino IDE.
Search for “keypad” and locate the keypad library created by Mark Stanley and Alexander Brevig.
Then, press the Install button to complete the installation of the keypad library.

Search for “LiquidCrystal I2C” and locate the LiquidCrystal_I2C library by Frank de Brabander.
Then, click the Install button to install it.

ESP8266 NodeMCU LiquidCrystal I2C library

Because the ESP8266 pins are not sufficient, We need to use the pin D8 for the keypad. As mentioned in the ESP8266 - Keypad tutorial, when using the ESP8266 pin D8 for a column pin of keypad, we MUST modify the Keypad library as follows:

Find the Arduino\libraries\Keypad\src\Keypad.cpp file, go to line 98, where it looks like this: pin_mode(columnPins[c], INPUT);
Comment out this line. After modification, the code at line 98 should look like this: //pin_mode(columnPins[c], INPUT);
Copy the code and open it with the Arduino IDE.
Click the Upload button in the Arduino IDE to compile and upload the code to the ESP8266.

Press certain keys on the keypad and
Observe the result displayed on the LCD.

If the LCD display is not showing anything, please refer to Troubleshooting on LCD I2C . for assistance.

Code Explanation

Check out the line-by-line explanation contained in the comments of the source code!

Video Tutorial

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!