ESP32 - Button Count - LCD

In this tutorial, we will explore the capabilities of ESP32 to achieve the following objectives:

Counting the number of times a button is pressed.
Displaying the count number on an LCD I2C display.
Implementing automatic vertical and horizontal center alignment for the count number on the LCD I2C display.

Furthermore, this tutorial addresses the debouncing of the button without relying on the delay() function. For a comprehensive understanding of why debouncing is crucial, you can refer to the explanation provided in Why do we need debouncing?.

This tutorial will guide you through the process of seamlessly integrating button press counting, LCD I2C display functionality, and debouncing techniques with your ESP32 project.

Hardware Used In This Tutorial

1	×	38-pin ESP32 ESP-WROOM-32 Dev Module - Narrow
1	×	Alternatively, 38-pin ESP32 ESP-WROOM-32 Dev Module - Wide
1	×	Alternatively, 30-pin ESP32 ESP-WROOM-32 Dev Module - Wide
1	×	Alternatively, ESP32 Uno-form board
1	×	Alternatively, ESP32 S3 Uno-form board
1	×	USB Cable Type-A to Type-C (for USB-A PC)
1	×	USB Cable Type-C to Type-C (for USB-C PC)
1	×	Breadboard-mount Button with Cap
1	×	Breadboard-mount Button Kit
1	×	Panel-mount Push Button
1	×	Push Button Module
1	×	LCD I2C Display 3.3V
1	×	Alternatively, LCD I2C 20x4
1	×	Breadboard
1	×	Jumper Wires
1	×	Recommended: Screw Terminal Expansion Board for ESP32
1	×	Recommended: Breakout Expansion Board for ESP32
1	×	Recommended: Power Splitter for ESP32

Or you can buy the following kits:

1	×	DIYables ESP32 Starter Kit (ESP32 included)
1	×	DIYables Sensor Kit (18 sensors/displays)

Disclosure: Some of the links in this section are Amazon affiliate links, meaning we may earn a commission at no additional cost to you if you make a purchase through them. Additionally, some links direct you to products from our own brand, DIYables .

Buy Note: Most LCD I2C displays sold on the market run at 5V. They might work with this board, but it is not safe and may damage the board. We strongly advise using the 3.3V LCD I2C display recommended above.

Introduction to LCD I2C and Button

Unfamiliar with LCD I2C and button, including their pinouts, functionality, and programming? Explore comprehensive tutorials on these topics below:

Wiring Diagram

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: The best way to Power ESP32 and sensors/displays.

ESP32 Code - displaying button count on 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-button-count-lcd */ #include <DIYables_LCD_I2C.h> #include <ezButton.h> DIYables_LCD_I2C lcd(0x27, 16, 2); // I2C address 0x27 (from DIYables LCD), 16 column and 2 rows ezButton button(27); // create ezButton object that attach to the ESP32 pin GPIO27 unsigned long lastCount = 0; void setup() { Serial.begin(9600); lcd.init(); // initialize the lcd lcd.backlight(); // open the backlight button.setDebounceTime(50); // set debounce time to 50 milliseconds button.setCountMode(COUNT_FALLING); } void loop() { button.loop(); // MUST call the loop() function first unsigned long count = button.getCount(); if (lastCount != count) { Serial.println(count); // print count to Serial Monitor lcd.clear(); lcd.setCursor(0, 0); // start to print at the first row lcd.print("Count: "); lcd.print(count); lastCount != count; } }

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.
Search “ezButton”, then find the button library by ArduinoGetStarted
Click Install button to install ezButton library.

Search “DIYables LCD I2C”, then find the DIYables_LCD_I2C library by DIYables
Click Install button to install DIYables_LCD_I2C library.

Copy the above code and open with Arduino IDE
Click Upload button on Arduino IDE to upload code to ESP32
Press button several times
See the counting number changed on LCD

※ NOTE THAT:

The I2C address of LCD can vary according to the manufacturers. In the code, we used 0x27 that is specified by DIYables manufacturer

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!