Arduino Nano ESP32 - Button LED

This tutorial guides you through utilizing the Arduino Nano ESP32 and a button to control the LED. We will explore two distinct use-cases:

Use-Case 1 - Synchronization between the LED and button states, explained as follows:

Use-Case 2 - Toggling the LED state with each button press, detailed as follows:

In Use-Case 2, it is crucial to debounce the button to ensure proper functionality. We will explore the significance of debouncing by comparing the LED behavior when using the Arduino Nano ESP32 code with and without button debouncing.

Hardware Preparation

1×Arduino Nano ESP32
1×USB Cable Type-C
1×Push Button
1×(Optional) Panel-mount Push Button
1×LED
1×220 ohm resistor
1×Breadboard
1×Jumper Wires
1×(Optional) 5V Power Adapter for Arduino Nano ESP32
1×(Recommended) Screw Terminal Adapter for Arduino Nano

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 LED and Button

If you are unfamiliar with LED and button (including pinout, operation, and programming), the following tutorials can help:

Wiring Diagram

The wiring diagram between Arduino Nano ESP32 and Button LED

This image is created using Fritzing. Click to enlarge image

Application 1 - The LED state is in sync with the button state

Arduino Nano ESP32 Code

/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-button-led */ #define BUTTON_PIN D2 // The Arduino Nano ESP32 pin connected to the button #define LED_PIN D5 // The Arduino Nano ESP32 pin connected to the LED int button_state = 0; // variable for reading the pushbutton status void setup() { // Configure the LED pin as a digital output pinMode(LED_PIN, OUTPUT); // initialize the button pin as an pull-up input (HIGH when the switch is open and LOW when the switch is closed) pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // read the state of the pushbutton value: button_state = digitalRead(BUTTON_PIN); // control LED according to the state of button if(button_state == LOW) // If button is pressing digitalWrite(LED_PIN, HIGH); // turn on LED else // otherwise, button is not pressing digitalWrite(LED_PIN, LOW); // turn off LED }

Detailed Instructions

  • If this is the first time you use Arduino Nano ESP32, see how to setup environment for Arduino Nano ESP32 on Arduino IDE.
  • Wire the components as shown in the diagram.
  • Connect the Arduino Nano ESP32 board to your computer using a USB cable.
  • Open Arduino IDE on your computer.
  • Choose the correct Arduino Nano ESP32 board, such as (e.g. NodeMCU 1.0 (ESP-12E Module)), and its respective COM port.
  • Connect an Arduino Nano ESP32 to your computer with a USB cable.
  • Launch the Arduino IDE, and select the correct board and port.
  • Copy the code and open it in the Arduino IDE.
  • Click the Upload button on the Arduino IDE to compile and upload the code to the Arduino Nano ESP32.
Arduino IDE Upload Code
  • Press the button and hold it for a few seconds.
  • Check out the alteration in the LED's condition.

You will see that the LED state is in sync with the button state.

Code Explanation

Check out the line-by-line explanation contained in the comments of the source code!

Application 2 - Button toggles LED

Arduino Nano ESP32 Code - Button Toggles LED Without Debouncing

/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-button-led */ #define BUTTON_PIN D2 // The Arduino Nano ESP32 pin connected to the button #define LED_PIN D5 // The Arduino Nano ESP32 pin connected to the LED int led_state = LOW; // The current state of LED int prev_button_state; // The previous state of button int button_state; // The current state of button void setup() { Serial.begin(9600); // Initialize the Serial to communicate with the Serial Monitor. pinMode(BUTTON_PIN, INPUT_PULLUP); // set arduino pin to input pull-up mode pinMode(LED_PIN, OUTPUT); // set arduino pin to output mode button_state = digitalRead(BUTTON_PIN); } void loop() { prev_button_state = button_state; // save the last state button_state = digitalRead(BUTTON_PIN); // read new state if(prev_button_state == HIGH && button_state == LOW) { Serial.println("The button is pressed"); // toggle state of LED led_state = !led_state; // control LED according to the toggled state digitalWrite(LED_PIN, led_state); } }

Code Explanation

You can locate the explanation in the comment lines of the Arduino Nano ESP32 code above.

In the code, the expression led_state = !led_state is equal to the following code:

if(led_state == LOW) led_state = HIGH; else led_state = LOW;

Detailed Instructions

  • Copy the code and open it in the Arduino IDE.
  • Upload the code to the Arduino Nano ESP32.
  • Press release and button several times.
  • Check out the change in the LED's state.

You may observe that the LED state is toggled every time the button is pressed. However, this behavior may not always be consistent. At times, the LED state may be rapidly toggled multiple times within a single button press, or it may not toggle at all(toggling twice in quick succession which can be difficult to see with the naked eye).

⇒ To solve this problem, we need to debounce for the button.

Arduino Nano ESP32 Code - Button Toggles LED With Debouncing

Debouncing a button can be challenging for beginners. Fortunately, the ezButton library makes it easy.

Why is debouncing necessary? See the Arduino Nano ESP32 - Button Debounce tutorial for more information.

/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-button-led */ #include <ezButton.h> #define BUTTON_PIN D2 // The Arduino Nano ESP32 pin connected to the button #define LED_PIN D5 // The Arduino Nano ESP32 pin connected to the LED ezButton button(BUTTON_PIN); // create ezButton object int led_state = LOW; // The current state of LED void setup() { Serial.begin(9600); // Initialize the Serial to communicate with the Serial Monitor. pinMode(LED_PIN, OUTPUT); // set arduino pin to output mode button.setDebounceTime(50); // set debounce time to 50 milliseconds } void loop() { button.loop(); // MUST call the loop() function first if(button.isPressed()) { Serial.println("The button is pressed"); // toggle state of LED led_state = !led_state; // control LED according to the toggleed sate digitalWrite(LED_PIN, led_state); } }

Detailed Instructions

  • Install the ezButton library. Refer to How To for instructions.
  • Copy the code and open it with Arduino IDE.
  • Click the Upload button on Arduino IDE to upload the code to the Arduino Nano ESP32.
  • Press and release the button multiple times.
  • Check out the LED's state change.

You will see that the LED state is toggled exactly once each time the button is pressed.

Video Tutorial