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:

We will use three buttons as examples. You can easily modify it to adapt for two buttons, four buttons, or even more.

Hardware Preparation

1×ESP8266 NodeMCU
1×Micro USB Cable
1×Breadboard-mount Button with Cap
1×Breadboard-mount Button Kit
1×Panel-mount Button
1×Breadboard
1×Jumper Wires
1×(Optional) Screw Terminal Expansion Board for ESP8266

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 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.

Overview of Button

If you are unfamiliar with button (pinout, how it works, how to program ...), the following tutorials can provide you with more information:

Wiring Diagram

The wiring diagram between ESP8266 NodeMCU and multiple button

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:

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.
ESP8266 NodeMCU button 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
How to upload ESP8266 NodeMCU code on Arduino IDE
  • Open Serial Monitor on Arduino IDE
  • Press and release the button one by one
COM6
Send
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
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  

ESP8266 Code - Multiple Buttons using array

We can improve the code above by employing an array of buttons. The following code utilizes this array to handle button objects.

/* * 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_NUM 3 // the number of buttons #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 buttonArray[] = { ezButton(BUTTON_PIN_1), ezButton(BUTTON_PIN_2), ezButton(BUTTON_PIN_3) }; void setup() { Serial.begin(9600); for (byte i = 0; i < BUTTON_NUM; i++) { buttonArray[i].setDebounceTime(100); // set debounce time to 100 milliseconds } } void loop() { for (byte i = 0; i < BUTTON_NUM; i++) buttonArray[i].loop(); // MUST call the loop() function first for (byte i = 0; i < BUTTON_NUM; i++) { // get button state after debounce int button_state = buttonArray[i].getState(); // the state after debounce /* Serial.print("The button "); Serial.print(i + 1); Serial.print(": "); Serial.println(button_state); */ if (buttonArray[i].isPressed()) { Serial.print("The button "); Serial.print(i + 1); Serial.println(" is pressed"); } if (buttonArray[i].isReleased()) { Serial.print("The button "); Serial.print(i + 1); Serial.println(" is released"); } } }

Video Tutorial

※ OUR MESSAGES

  • As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!