Button with ESP32 | Toggle LED

Button with ESP32 and LED Toggle
Button with ESP32 and LED Toggle

In this tutorial, you will learn how to interface button with ESP32 and how you can toggle LED by a button press in ESP32. The interfacing method of almost all kind of buttons such as push button or switches are similar. Like my previous tutorial, we will be programming ESP32 using Arduino IDE and Mircropython. The button can be interfaced with ESP32 in multiple ways and I will try to conver each of them.

Button with ESP32 Circuit

Components Required

ComponentAmazon (US)Aliexpress
ESP32Button with ESP32 | Toggle LEDButton with ESP32 | Toggle LED
Push ButtonButton with ESP32 | Toggle LEDButton with ESP32 | Toggle LED
LEDButton with ESP32 | Toggle LEDButton with ESP32 | Toggle LED
ResistorButton with ESP32 | Toggle LEDButton with ESP32 | Toggle LED
BreadboardButton with ESP32 | Toggle LEDButton with ESP32 | Toggle LED
Jumper wiresButton with ESP32 | Toggle LEDButton with ESP32 | Toggle LED
Micro USB cableButton with ESP32 | Toggle LEDButton with ESP32 | Toggle LED
Button with ESP32 Components required

Disclosure: Some of these links are affiliate links. We mayy earn commission on you purchase at no extra cost to you. Support us by buying from here .

Push Button Pin out and Working

Push button pinout and working
Push button pinout and working

As seen in the illustration, a push button contains four terminals. 1, 2, 3, and 4. Internally, connections between a and b and c and d are made. Additionally, as can be seen in the right bottom figure, which depicts the state of the button when it is not pressed, creating an open circuit, there is no connection between points a, b, and c,d respectively. However, when the button is pressed, a, b connects to c, d, creating a close circuit, as seen in the left picture at the bottom. To sum it up,

  • Regardless of whether a button is pushed, A is connected to B and C is connected to D.
  • A and B get connected to C and D when button is pushed.
  • There is no link between points a, b, and c, d, when button is not pushed.

Button interfacing techniques

There are two ways that Button can connect to the ESP32: pull-up configuration and pull-down configuration. But since the ESP32 offers internal pull-up configuration, we’ll use that instead. When the button is not pushed in the pull-up configuration, we will receive a HIGH value at the digital pin, and when the button is pushed, we will receive a LOW value.

Button in pull up configuration
Button in pull up configuration

Button with ESP32 Wiring Diagram

Button with ESP32 wiring Diagram
Button with ESP32 wiring Diagram

The ESP32 ground pin is linked to one pin of a button, as seen in the picture, while the other pin of the button is connected to D25. We’ll make use of the ESP32’s internal pull-up setup.

Adding LED

Button and LED with ESP32
Button and LED with ESP32

In order to prevent the LED from burning, as we covered in our previous tutorial, “LED blink in ESP32,” a resistor is required. LED cathode and anode connections are made via GND and D26, respectively.

Button with ESP32 Code

We can program ESP32 in different programming languages and in different platforms such as Arduino IDE, Micropython, circuit python, ESP-IDF, Rust and scratch. For this tutorial, we are going to program button with ESP32 in Arduino IDE, and button with ESP32 in Micropython.

Button with ESP32 Arduino IDE

// Define the pin connected to the pushbutton
const int buttonPin = 25;

void setup() {
  // Initialize serial communication
  Serial.begin(9600);

  // Set the button pin as an input with an internal pull-up resistor
  pinMode(buttonPin, INPUT_PULLUP);
}

void loop() {
  // Read the value of the pushbutton
  int buttonValue = digitalRead(buttonPin);

  // Print the value of the pushbutton to the serial monitor
  Serial.println(buttonValue);

  // Wait a short time before reading the button value again
  delay(50);
}

The setup() function of the code first defines the pin that is connected to the pushbutton before setting it up as an input with a built-in pull-up resistor. The code reads the pushbutton’s value using the digitalRead() method in the loop() function, and then prints it to the serial monitor using the Serial.println() function. After a brief delay, it reads the button value once more.

When the button is pushed, the serial monitor will display 0, and under typical circumstances, it will output 1.

Serial monitor ESP32
Serial monitor ESP32

ESP32 LED Toggle using Button Arduino IDE

// constants won't change
const int buttonPin = 25; // ESP32connected to button's pin
const int LEDPin    = 26; // ESP32 pin connected to LED's pin
// variables will change:
int ledState = LOW;     // the current state of LED
int lastButtonState;    // the previous state of button
int currentButtonState; // the current state of button
void setup() {
  Serial.begin(9600);                // initialize serial
  pinMode(buttonPin, INPUT_PULLUP); // set ESP32 pin to input pull-up mode
  pinMode(LEDPin, OUTPUT);          // set ESP32 pin to output mode
  currentButtonState = digitalRead(buttonPin);
}
void loop() {
  lastButtonState    = currentButtonState;      // save the last state
  currentButtonState = digitalRead(buttonPin); // read new state
  if(lastButtonState == HIGH && currentButtonState == LOW) {
    Serial.println("The button is pressed");
    // toggle state of LED
    ledState = !ledState;
    // control LED arccoding to the toggled state
    digitalWrite(LEDPin, ledState); 
  }
  delay(100);
}

Since the LED will be off when we initially boot, we set the state of the LED to LOW before defining the buttonPin to D25 and the LEDPin to D26 in the code. Then we established a variable to store the button’s most recent and current states.

The setup() function defines the serial monitor by configuring the baud rate, followed by the pull-up configuration of the button as input and the output of the LED pin.

We first save the button’s previous state in the loop() function, and then we use the digital Read function to read the button’s current state. Then, using the if else conditions, we set a condition to change the state of the LED if the button’s previous state was HIGH, indicating that it had not been pushed, and the current state is LOW, indicating that it has just been pushed. The ! sign denotes a not gate, and that state will be written to the LED, and our LED will be toggled on button pressed or pushed.

Button with ESP32 MicroPython

from machine import Pin
buttonPin = 25
push_button = Pin(buttonPin, Pin.IN, Pin.PULL_UP)  
while True:
  button_state = push_button.value()
  print(button_state)

As we did in the previous example, we started by importing the Pin function from the machine library. The button’s pin number is then defined. The push button was then set as the pull-up configuration’s input. Then the while loop, which is an endless loop, was used to implement reading the value from the push button and printing it. The outcomes will be displayed in the console.

ESP32 LED Toggle using Button MicroPython

from machine import Pin
from time import sleep

buttonPin = 25
LEDPin = 26
button_state = 0
led_state = 0

led = Pin(LEDPin, Pin.OUT)    
push_button = Pin(buttonPin, Pin.IN, Pin.PULL_UP)  

while True:
  last_State = button_state
  button_state = push_button.value()
  if button_state == 0 and last_State == 1:
    led_state = not(led_state)
    led.value(led_state)
  sleep(0.1)

We revised the previous code and included LED as an output for the push button-based LED toggling. We store the most recent state of the button and the current state of the button in a variable for the infinite loop. The LED’s state is then changed if the current state is 0 and the previous state was 1, as determined by the if else condition. Turn it off if it was on. The final debouncing of the button has a 0.1 second delay.

Leave a Comment

Your email address will not be published. Required fields are marked *