Arduino - Button Count - OLED

In this tutorial, we are going to use Arduino:

In this tutorial, the button also is debounced without using delay() function. See Why do we need debouncing?

Hardware Required

1×Arduino UNO or Genuino UNO
1×USB 2.0 cable type A/B
1×Breadboard-mount Button with Cap
1×Breadboard-mount Button Kit
1×Panel-mount Push Button
1×SSD1306 I2C OLED Display 128x64
1×Breadboard
1×Jumper Wires
1×(Recommended) Screw Terminal Block Shield for Arduino Uno
1×(Recommended) Breadboard Shield For Arduino Uno
1×(Recommended) Enclosure For Arduino Uno

Or you can buy the following sensor kits:

1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)
Please note: These are Amazon affiliate links. If you buy the components through these links, We will get a commission at no extra cost to you. We appreciate it.

About OLED and Button

If you do not know about OLED and button (pinout, how it works, how to program ...), learn about them in the following tutorials:

Wiring Diagram

Arduino Button OLED Wiring Diagram

This image is created using Fritzing. Click to enlarge image

Arduino Code - displaying button count on OLED

/* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-button-count-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <ezButton.h> #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C ezButton button(7); // create ezButton object that attach to pin 7; unsigned long lastCount = 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 (lastCount != count) { Serial.println(count); // print count to Serial Monitor oled.clearDisplay(); // clear display oled.println(count); // display count oled.display(); // show on OLED lastCount != count; } }

Quick Steps

  • Navigate 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.
Arduino button library
  • Search “SSD1306”, then find the SSD1306 library by Adafruit
  • Click Install button to install the library.
Arduino OLED library
  • You will be asked for intalling some other library dependencies
  • Click Install All button to install all library dependencies.
Arduino Adafruit GFX sensor library
  • Copy the above code and open with Arduino IDE
  • Click Upload button on Arduino IDE to upload code to Arduino
  • Press button several times
  • See the counting number changed on OLED

The above code just displays the button press count on the top left corner. Let's modify the code to centralize it!

Arduino Code - Vertical and Horizontal Center Align on OLED

/* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-button-count-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <ezButton.h> #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C ezButton button(7); // create ezButton object that attach to pin 7; unsigned long lastCount = 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 (lastCount != count) { Serial.println(count); // print count to Serial Monitor String text = String(count); oledDisplayCenter(text); lastCount != count; } } void oledDisplayCenter(String text) { int16_t x1; int16_t y1; uint16_t width; uint16_t height; oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height); // display on horizontal and vertical center oled.clearDisplay(); // clear display oled.setCursor((SCREEN_WIDTH - width) / 2, (SCREEN_HEIGHT - height) / 2); oled.println(text); // text to display oled.display(); }

※ NOTE THAT:

The about code automatically horizontal and vertical center aligns the text on OLED display. See How to vertical/horizontal center on OLED for more detail.

Video Tutorial

We are considering to make the video tutorials. If you think the video tutorials are essential, please subscribe to our YouTube channel to give us motivation for making the videos.

The Best Arduino Starter Kit

※ OUR MESSAGES