ESP8266 - Multiple Button
This tutorial instructs you how to program an ESP8266 to work with several buttons at the same time, without relying on the delay() function. In detail, we will learn:
- How to program ESP8266 to handle multiple buttons with debounce.
- How to program ESP8266 to handle multiple buttons with debounce using arrays.
We will use three buttons as examples. You can easily modify it to adapt for two buttons, four buttons, or even more.
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
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.
Additionally, some of these links are for products from our own brand, DIYables .
Additionally, some of these links are for products from our own brand, DIYables .
Wiring Diagram
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 - Multiple Buttons with debounce
When using multiple buttons, things can get complicated in certain scenarios:
- Applications requiring button debouncing (see why we need to debounce for buttons)
- Applications needing to detect state changes (pressed/released)
Thankfully, the ezButton library streamlines this process by internally managing debounce and button events. This relieves users from the task of managing timestamps and variables when utilizing the library. Additionally, employing an array of buttons can enhance code clarity and brevity.
/*
* 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-multiple-button
*/
#include <ezButton.h>
#define BUTTON_PIN_1 D5 // The ESP8266 pin connected to the button 1
#define BUTTON_PIN_2 D6 // The ESP8266 pin connected to the button 2
#define BUTTON_PIN_3 D7 // The ESP8266 pin connected to the button 3
ezButton button1(BUTTON_PIN_1); // create ezButton object for button 1
ezButton button2(BUTTON_PIN_2); // create ezButton object for button 2
ezButton button3(BUTTON_PIN_3); // create ezButton object for button 3
void setup() {
Serial.begin(9600);
button1.setDebounceTime(100); // set debounce time to 100 milliseconds
button2.setDebounceTime(100); // set debounce time to 100 milliseconds
button3.setDebounceTime(100); // set debounce time to 100 milliseconds
}
void loop() {
button1.loop(); // MUST call the loop() function first
button2.loop(); // MUST call the loop() function first
button3.loop(); // MUST call the loop() function first
// get button state after debounce
int button1_state = button1.getState(); // the state after debounce
int button2_state = button2.getState(); // the state after debounce
int button3_state = button3.getState(); // the state after debounce
/*
Serial.print("The button 1 state: ");
Serial.println(button1_state);
Serial.print("The button 2 state: ");
Serial.println(button2_state);
Serial.print("The button 3 state: ");
Serial.println(button3_state);
*/
if (button1.isPressed())
Serial.println("The button 1 is pressed");
if (button1.isReleased())
Serial.println("The button 1 is released");
if (button2.isPressed())
Serial.println("The button 2 is pressed");
if (button2.isReleased())
Serial.println("The button 2 is released");
if (button3.isPressed())
Serial.println("The button 3 is pressed");
if (button3.isReleased())
Serial.println("The button 3 is released");
}
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.
- Do the wiring as above image.
- Connect the ESP8266 board to your PC via a USB cable
- Open Arduino IDE on your PC.
- Select the right ESP8266 board (e.g. ESP8266 Uno) 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.
- Copy the above code and paste it to Arduino IDE.
- Compile and upload code to ESP8266 board by clicking Upload button on Arduino IDE
- Open Serial Monitor on Arduino IDE
- Press and release the button one by one
8
Serial.println("Hello World!");
Message (Enter to send message to 'Nodemcu 1.0 (ESP-12E Module)' on 'COM15')
New Line
9600 baud
The button 1 is pressed
The button 1 is released
The button 2 is pressed
The button 2 is released
The button 3 is pressed
The button 3 is released