ESP32 - Keypad - LCD

This tutorial instructs you how to use ESP32 with the keypad and LCD display. In detail, We will learn how to display the pressed key on LCD.

Hardware Used In This Tutorial

1	×	ESP-WROOM-32 Dev Module
1	×	USB Cable Type-C
1	×	LCD I2C
1	×	Keypad 3x4 and 4x4 Kit
1	×	(Alternative) Keypad 3x4
1	×	(Alternative) Keypad 4x4
1	×	Breadboard
1	×	Jumper Wires
1	×	(Optional) DC Power Jack
1	×	(Recommended) Screw Terminal Expansion Board for ESP32

Or you can buy the following sensor kits:

1	×	DIYables Sensor Kit (30 sensors/displays)
1	×	DIYables Sensor Kit (18 sensors/displays)

Disclosure: some of these links are affiliate links. We may earn a commission on your purchase at no extra cost to you. We appreciate it.

Introduction to Keypad and LCD

We have specific tutorials about keypad and LCD. Each tutorial contains detailed information and step-by-step instructions about hardware pinout, working principle, wiring connection to ESP32, ESP32 code... Learn more about them at the following links:

Wiring Diagram

Wiring diagram between ESP32 and Keypad 3x4

This image is created using Fritzing. Click to enlarge image

Wiring diagram between ESP32 and Keypad 4x4

This image is created using Fritzing. Click to enlarge image

If you're unfamiliar with how to supply power to the ESP32 and other components, you can find guidance in the following tutorial: How to Power ESP32.

ESP32 Code - Keyoad 3x4 - LCD I2C

/* * This ESP32 code is created by esp32io.com * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-keypad-lcd */ #include <Keypad.h> #include <LiquidCrystal_I2C.h> #define ROW_NUM 4 // four rows #define COLUMN_NUM 3 // three columns char keys[ROW_NUM][COLUMN_NUM] = { {'1', '2', '3'}, {'4', '5', '6'}, {'7', '8', '9'}, {'*', '0', '#'} }; byte pin_rows[ROW_NUM] = {19, 18, 5, 17}; // GPIO19, GPIO18, GPIO5, GPIO17 connect to the row pins byte pin_column[COLUMN_NUM] = {16, 4, 0}; // GPIO16, GPIO4, GPIO0 connect to the column pins Keypad keypad = Keypad(makeKeymap(keys), 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 cursorColumn = 0; void setup(){ lcd.init(); // initialize the lcd lcd.backlight(); } void loop(){ char key = keypad.getKey(); if (key) { lcd.setCursor(cursorColumn, 0); // move cursor to (cursorColumn, 0) lcd.print(key); // print key at (cursorColumn, 0) cursorColumn++; // move cursor to next position if(cursorColumn == 16) { // if reaching limit, clear LCD lcd.clear(); cursorColumn = 0; } } }

※ NOTE THAT:

The LCD I2C address can be different from each manufacturer. In the code, we used address of 0x27 that is specified by DIYables manufacturer

Quick Instructions

If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE.
Do the wiring as above image.
Connect the ESP32 board to your PC via a micro USB cable
Open Arduino IDE on your PC.
Select the right ESP32 board (e.g. ESP32 Dev Module) and COM port.
Click to the Libraries icon on the left bar of the Arduino IDE.
Type “keypad” on the search box, then look for the keypad library by Mark Stanley, Alexander Brevig
Click Install button to install keypad library.

Type “LiquidCrystal I2C” on the search box, then look for the LiquidCrystal_I2C library by Frank de Brabander
Click Install button to install LiquidCrystal_I2C library.

Copy the above code and paste it to Arduino IDE.
Compile and upload code to ESP32 board by clicking Upload button on Arduino IDE

Press some keys on keypad
See the result in LCD

If the LCD does not display anything, see Troubleshooting on LCD I2C

Line-by-line Code Explanation

The above ESP32 code contains line-by-line explanation. Please read the comments in the code!

ESP32 Code - Keyoad 4x4 - LCD I2C

/* * This ESP32 code is created by esp32io.com * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-keypad-lcd */ #include <Keypad.h> #include <LiquidCrystal_I2C.h> #define ROW_NUM 4 // four rows #define COLUMN_NUM 4 // four columns char keys[ROW_NUM][COLUMN_NUM] = { {'1','2','3', 'A'}, {'4','5','6', 'B'}, {'7','8','9', 'C'}, {'*','0','#', 'D'} }; byte pin_rows[ROW_NUM] = {19, 18, 5, 17}; // GPIO19, GPIO18, GPIO5, GPIO17 connect to the row pins byte pin_column[COLUMN_NUM] = {16, 4, 0, 2}; // GPIO16, GPIO4, GPIO0, GPIO2 connect to the column pins Keypad keypad = Keypad(makeKeymap(keys), 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 cursorColumn = 0; void setup(){ lcd.init(); // initialize the lcd lcd.backlight(); } void loop(){ char key = keypad.getKey(); if (key) { lcd.setCursor(cursorColumn, 0); // move cursor to (cursorColumn, 0) lcd.print(key); // print key at (cursorColumn, 0) cursorColumn++; // move cursor to next position if(cursorColumn == 16) { // if reaching limit, clear LCD lcd.clear(); cursorColumn = 0; } } }

Video Tutorial

Making video is a time-consuming work. If the video tutorial is necessary for your learning, please let us know by subscribing to our YouTube channel , If the demand for video is high, we will make the video tutorial.

Learn More

※ OUR MESSAGES

As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
If this tutorial is useful for you, please support us to make more tutorials.
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!