ESP32 - Button Count - LCD

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

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×ESP-WROOM-32 Dev Module
1×USB Cable Type-C
1×Push Button
1×(Optional) Panel-mount Push Button
1×LCD I2C
1×Breadboard
1×Jumper Wires
1×(Recommended) ESP32 Screw Terminal Adapter

Or you can buy the following sensor kit:

1×DIYables Sensor Kit 30 types, 69 units
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 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

ESP32 Button LCD I2C 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: How to Power ESP32.

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 <LiquidCrystal_I2C.h> #include <ezButton.h> LiquidCrystal_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.
ESP32 button library
  • Search “LiquidCrystal I2C”, then find the LiquidCrystal_I2C library by Frank de Brabander
  • Click Install button to install LiquidCrystal_I2C library.
ESP32 LiquidCrystal 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.

※ OUR MESSAGES