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×Breadboard-mount Button with Cap
1×Breadboard-mount Button Kit
1×Panel-mount Push Button
1×LCD I2C
1×Breadboard
1×Jumper Wires
1×(Recommended) Screw Terminal Expansion Board for ESP32
1×(Recommended) Power Splitter 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 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.

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