ESP32 - Multiple Button

This tutorial guides you on programming an ESP32 to utilize multiple buttons simultaneously without relying on the delay() function. The tutorial offers code in two methods:

We will demonstrate with four buttons. However, you can readily adjust the code for two buttons, three buttons, five buttons, or even more.

Hardware Used In This Tutorial

1×ESP-WROOM-32 Dev Module
1×USB Cable Type-C
1×Breadboard-mount Button with Cap
1×Breadboard-mount Button Kit
1×Panel-mount Button
1×Breadboard
1×Jumper Wires
1×(Recommended) Screw Terminal Expansion Board for ESP32
1×(Recommended) Power Splitter For ESP32

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 in this section are Amazon affiliate links, meaning we may earn a commission at no additional cost to you if you make a purchase through them. Additionally, some links direct you to products from our own brand, DIYables.

Introduction to Button

We have specific tutorials about button. Each tutorial contains detailed information and step-by-step instructions about hardware pinout, working principle, wiring connection to ESP32, ESP32 code... Learn more about them at the following links:

Wiring Diagram

ESP32 multiple buttons Wiring Diagram

This image is created using Fritzing. Click to enlarge image

If you're unfamiliar with how to supply power to the ESP32 and other components, you can find guidance in the following tutorial: How to Power ESP32.

ESP32 Code - Multiple Buttons with debounce

When dealing with multiple buttons, complexity can arise in specific situations:

Fortunately, the ezButton library simplifies this process by handling debounce and button events internally. This spares users from managing timestamps and variables when using the library. Moreover, employing an array of buttons can improve code clarity and brevity.

/* * This ESP32 code is created by esp32io.com * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-multiple-button */ #include <ezButton.h> #define BUTTON_PIN_1 25 // The ESP32 pin GPIO25 connected to the button 1 #define BUTTON_PIN_2 26 // The ESP32 pin GPIO26 connected to the button 2 #define BUTTON_PIN_3 27 // The ESP32 pin GPIO27 connected to the button 3 #define BUTTON_PIN_4 14 // The ESP32 pin GPIO14 connected to the button 4 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 ezButton button4(BUTTON_PIN_4); // create ezButton object for button 4 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 button4.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 button4.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 int button4_state = button4.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); Serial.print("The button 4 state: "); Serial.println(button4_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"); if (button4.isPressed()) Serial.println("The button 4 is pressed"); if (button4.isReleased()) Serial.println("The button 4 is released"); }

Quick Instructions

  • If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE.
  • Do the wiring as above image.
  • Connect the ESP32 board to your PC via a micro USB cable
  • Open Arduino IDE on your PC.
  • Select the right ESP32 board (e.g. ESP32 Dev Module) and COM port.
  • Do the wiring as above image.
  • Connect the ESP32 board to your PC via a USB cable
  • Open Arduino IDE on your PC.
  • Select the right ESP32 board (e.g. ESP32) and COM port.
  • Click to the Libraries icon on the left bar of the Arduino IDE.
  • Search “ezButton”, then find the button library by ESP32GetStarted
  • Click Install button to install ezButton library.
ESP32 button library
  • Copy the above code and paste it to Arduino IDE.
  • Compile and upload code to ESP32 board by clicking Upload button on Arduino IDE
How to upload ESP32 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 The button 4 is pressed The button 4 is released
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  

ESP32 Code - Multiple Buttons using array

We can enhance the provided code by utilizing an array of buttons. The following code demonstrates how this array manages button objects.

/* * This ESP32 code is created by esp32io.com * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-multiple-button */ #include <ezButton.h> #define BUTTON_NUM 4 // the number of buttons #define BUTTON_PIN_1 25 // The ESP32 pin GPIO25 connected to the button 1 #define BUTTON_PIN_2 26 // The ESP32 pin GPIO26 connected to the button 2 #define BUTTON_PIN_3 27 // The ESP32 pin GPIO27 connected to the button 3 #define BUTTON_PIN_4 14 // The ESP32 pin GPIO14 connected to the button 4 ezButton buttonArray[] = { ezButton(BUTTON_PIN_1), ezButton(BUTTON_PIN_2), ezButton(BUTTON_PIN_3), ezButton(BUTTON_PIN_4) }; 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

Making video is a time-consuming work. If the video tutorial is necessary for your learning, please let us know by subscribing to our YouTube channel , If the demand for video is high, we will make the video tutorial.

※ OUR MESSAGES