ESP8266 - Button Count - OLED

This tutorial instructs you how to use ESP8266 and button to count the press events and then display the value on OLED. In detail:

In this tutorial, we will be debouncing a button without using the delay() function. For more information on why debouncing is necessary, please see Why do we need debouncing?

You can adapt this to work with different sensors instead of the button.

Hardware Preparation

1×ESP8266 NodeMCU
1×Micro USB Cable
1×Push Button
1×(Optional) Panel-mount Push Button
1×SSD1306 I2C OLED Display 128x64
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 OLED and Button

If you are unfamiliar with OLED and button (pinout, functionality, programming ...), the following tutorials can help:

Wiring Diagram

The wiring diagram between ESP8266 NodeMCU and Button OLED

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 OLED

/* * 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-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <ezButton.h> #define OLED_WIDTH 128 // OLED display width, in pixels #define OLED_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C ezButton button(7); // create ezButton object for pin 7; unsigned long prev_count = 0; void setup() { Serial.begin(9600); // initialize OLED display with address 0x3C for 128x64 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true); } delay(2000); // wait for initializing oled.clearDisplay(); // clear display oled.setTextSize(2); // text size oled.setTextColor(WHITE); // text color oled.setCursor(0, 10); // position to display 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 oled.clearDisplay(); // clear display oled.println(count); // display count oled.display(); // show on OLED 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.
  • Search for “ezButton”, then locate the button library provided by ArduinoGetStarted.
  • Press the Install button to install ezButton library.
ESP8266 NodeMCU button library
  • Search for “SSD1306” and locate the SSD1306 library created by Adafruit.
  • Click the Install button to add the library.
ESP8266 NodeMCU OLED library
  • You will be prompted to install additional library dependencies.
  • To install all of them, click the Install All button.
ESP8266 NodeMCU Adafruit GFX sensor library
  • Copy the code and open it with the Arduino IDE.
  • Hit the Upload button on the Arduino IDE to compile and upload the code to the ESP8266.
  • Press the button multiple times.
  • Check out the changing count number on the OLED.

The code above shows the number of button presses in the top left corner. Let's make a change to center it!

ESP8266 Code - Vertical and Horizontal Center Align on OLED

/* * 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-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <ezButton.h> #define OLED_WIDTH 128 // OLED display width, in pixels #define OLED_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C ezButton button(7); // create ezButton object for pin 7; unsigned long prev_count = 0; void setup() { Serial.begin(9600); // initialize OLED display with address 0x3C for 128x64 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true); } delay(2000); // wait for initializing oled.clearDisplay(); // clear display oled.setTextSize(2); // text size oled.setTextColor(WHITE); // text color oled.setCursor(0, 10); // position to display 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 String text = String(count); oled_display_center(text); prev_count != count; } } void oled_display_center(String text) { int16_t x1; int16_t y1; uint16_t width; uint16_t height; oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height); // center the display both horizontally and vertically oled.clearDisplay(); // clear display oled.setCursor((OLED_WIDTH - width) / 2, (OLED_HEIGHT - height) / 2); oled.println(text); // text to display oled.display(); }

※ NOTE THAT:

This code will horizontally and vertically center the text on an OLED display. For more information, please refer to How to vertical/horizontal center on OLED.

Video Tutorial