ESP8266 - Button Count - LCD

This tutorial instructs you how to use ESP8266 to count the button's press and display the counted number on LCD display. It is possible to modify this for use with different sensors instead of the button.

In this tutorial, we will debounce the button without using the delay() function. For more information, please take a look at Why do we need debouncing?

Hardware Preparation

1×ESP8266 NodeMCU
1×Micro USB Cable
1×Push Button
1×(Optional) Panel-mount Push Button
1×LCD I2C
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:

1×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 LCD I2C and Button

If you are unfamiliar with LCD I2C and button (pinout, how it works, how to program ...), the following tutorials can help you learn:

Wiring Diagram

The wiring diagram between ESP8266 NodeMCU and Button LCD I2C

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 - displaying button count on LCD I2C

/* * 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-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(13); // create ezButton object for pin 13; unsigned long prev_count = 0; void setup() { Serial.begin(9600); lcd.init(); // Initialize the LCD I2C display 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 (prev_count != 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); prev_count != count; } }

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.
  • Click to the Libraries icon on the left bar of the Arduino IDE.
  • Look for “ezButton” and locate the button library from ArduinoGetStarted.
  • Press the Install button to install the ezButton library.
ESP8266 NodeMCU button library
  • Search for “LiquidCrystal I2C” and locate the LiquidCrystal_I2C library created by Frank de Brabander.
  • Then, click the Install button to add the library.
ESP8266 NodeMCU LiquidCrystal I2C library
  • Copy the code and open it in the Arduino IDE.
  • Click the Upload button to send the code to the ESP8266.
  • Push the button multiple times.
  • Check out the count on the LCD changing.

※ NOTE THAT:

The address of the LCD may differ depending on the manufacturer. We used 0x27 in our code, as specified by DIYables.

Video Tutorial