Arduino UNO R4 - Button

The button is a simple but important component used in many Arduino UNO R4 projects. It might seem complicated because of its mechanical and physical properties, which can be challenging for beginners. This tutorial is designed to help beginners understand it easily. Let's begin!

Arduino UNO R4 button

※ NOTE THAT:

Before we learn about how to use the button with Arduino Uno R4, we want to highlight two common errors often encountered by beginners:

  1. The floating input problem:
    • Symptom: When a button is connected to an Arduino UNO R4 input pin, the input pin's state is unpredictable and does not reflect to the button state.
    • Cause: The button pin is not connected to a pull-down or pull-up resistor.
    • Solution: Connect a pull-down or a pull-up resistor to the input pin. More details will be provided later in this tutorial.
  • The chattering phenomenon:
    • Symptom: The Arduino UNO R4's code reads the button's state and tries to identify press events by detecting changes in state (from HIGH to LOW, or LOW to HIGH). However, when the button is pressed just once, the Arduino Uno R4 may detect multiple presses.
    • Cause: Mechanical properties cause the input pin's state to rapidly toggle between LOW and HIGH several times with only one press.
    • Solution: Implement debounce. More details will be in the Arduino UNO R4 - Button - Debounce tutorial.

    Chattering only affects applications that require a precise count of button presses. In other applications, it may not be a problem.

    Hardware Preparation

    1×Arduino UNO R4 WiFi
    1×Arduino UNO R4 Minima (Alternatively)
    1×USB Cable Type-C
    1×PCB-mount Button
    1×Panel-mount Button
    1×Breadboard
    1×Jumper Wires
    1×(Optional) 9V Power Adapter for Arduino UNO R4
    1×(Recommended) Screw Terminal Block Shield for Arduino Uno
    1×(Optional) Transparent Acrylic Enclosure For Arduino Uno

    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. We appreciate your support.

    Overview of Button

    The push button, also known as a tactile button or momentary switch, is a switch that is closed when you press and hold it down, and opens when you release it. Push buttons come in different types, mainly divided into two groups:

    • Push buttons for PCB mounting (can be used on a breadboard)
    • Push buttons for mounting on a panel
    Arduino UNO R4 Push button

    Pinout

    The PCB-mount buttons usually have four pins.

    Button Pinout

    These pins are connected together inside in pairs, so we only need to use two out of the four pins that are not connected together inside.

    There are four ways, but really two because they are similar, to connect the button (refer to the image).

    How To Use Button

    A button has four pins, but why do we only use two? ⇒ This is to keep it stable on the PCB (board) and withstand the pressure.

    The panel-mount buttons usually have two pins.

    two-pin push button Pinout
    image source: diyables.io

    How It Works

    • When the button is not pressed, pin A and pin B are not connected.
    • When the button is pressed, pin A and pin B are connected.
    How Button Works

    Arduino UNO R4 - Button

    One button pin connects to VCC or GND, and the other pin connects to a pin on the Arduino UNO R4.

    We can determine if the button is pressed or not by checking the state of a pin on the Arduino UNO R4 set as an input pin.

    Button State and Pressing State

    The relationship between the button state and the pressing state depends on how we connect the button to the Arduino UNO R4 and the settings of the Arduino UNO R4's pin.

    There are two ways to use a button with Arduino UNO R4:

    1. Connect one button pin to VCC and the other to an Arduino UNO R4 pin with a pull-down resistor.
      • When the button is pressed, the Arduino UNO R4 pin state is HIGH. Otherwise, the Arduino UNO R4 pin state is LOW.
      • You MUST use an external resistor.
  • Connect one button pin to GND and the other to an Arduino UNO R4 pin with a pull-up resistor.
    • When the button is pressed, the Arduino UNO R4 pin state is LOW. Otherwise, the Arduino UNO R4 pin state is HIGH.
    • You can use either an internal or external resistor. The internal resistor is built into the Arduino UNO R4 and can be activated via Arduino code.

    ※ NOTE THAT:

    If we do not use a pull-down or pull-up resistor, the input pin is "floating" when the button is not pressed. This means the state of the pin might change unpredictably to HIGH or LOW, causing incorrect readings.

    • The worst practice: Set up the Arduino UNO R4 pin as an input using pinMode(BUTTON_PIN, INPUT) without any pull-down or pull-up resistor.
    • The best practice: Set up the Arduino UNO R4 pin with an internal pull-up resistor using pinMode(BUTTON_PIN, INPUT_PULLUP). This does not require an external resistor.

    To make it easy for beginners, this tutorial uses the simplest method: setting up the Arduino UNO R4 pin as an internal pull-up input without needing an external resistor. Beginners do not need to worry about connecting the pull-up or pull-down resistor. They just need to use the provided Arduino code.

    Wiring Diagram

    • Wiring diagram for Arduino UNO R4 and PCB-mount button
    The wiring diagram between Arduino UNO R4 Button

    This image is created using Fritzing. Click to enlarge image

    • Wiring diagram for Arduino UNO R4 and panel-mount button
    The wiring diagram between Arduino UNO R4 two-pin push button

    This image is created using Fritzing. Click to enlarge image

    How To Program For Button

    • Sets up pin 7 on the Arduino UNO R4 as an internal pull-up input using the pinMode() function.
    pinMode(7, INPUT_PULLUP);
    • Uses the digitalRead() function to check the state of the Arduino UNO R4 pin.
    int button_state = digitalRead(BUTTON_PIN);

    ※ NOTE THAT:

    There are two common use-cases:

    • The first: When the input is HIGH, perform an action. When the input is LOW, perform the opposite action.
    • The second: When the input changes from LOW to HIGH (or HIGH to LOW), perform an action.

    Based on the purpose, we select one of these options. For instance, when using a button to control an LED:

    • If we need the LED to turn ON when the button is pressed and turn OFF when it is not pressed, we should choose the first scenario.
    • If we want the LED to switch between ON and OFF each time the button is pressed, we should opt for the second scenario.

    Arduino UNO R4 Code - Reading the state of button

    #define BUTTON_PIN 7 // The Arduino UNO R4 pin connected to the button void setup() { // initialize serial communication at 9600 bits per second: Serial.begin(9600); // initialize the pushbutton pin as a pull-up input pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // read the state of the switch/button: int button_state = digitalRead(BUTTON_PIN); // print out the button's state Serial.println(button_state); delay(500); }

    Detailed Instructions

    Follow these instructions step by step:

    • If this is your first time using the Arduino UNO R4 WiFi/Minima, refer to the tutorial on setting up the environment for Arduino UNO R4 WiFi/Minima in the Arduino IDE.
    • Connect the button to Arduino UNO R4 according to the provided diagram.
    • Connect the Arduino Uno R4 board to your computer using a USB cable.
    • Launch the Arduino IDE on your computer.
    • Select the appropriate Arduino Uno R4 board (e.g., Arduino Uno R4 WiFi) and COM port.
    • Copy the above code and open it in the Arduino IDE
    • Click the Upload button in Arduino IDE to send the code to your Arduino UNO R4.
    Arduino IDE - How to Upload Code
    • Open the Serial Monitor.
    • Press and release the button several times.
    • Check the result on the Serial Monitor.
    COM6
    Send
    1 1 1 0 0 0 0 0 0 1 1 1
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  

    1 means ON, 0 means OFF.

    Code Explanation

    The explanation is in the comments section of the Arduino code above.

    Arduino UNO R4 Code - Detecting the button's press and release event

    Let's change the code to recognize when buttons are pressed and released.

    /* * This Arduino UNO R4 code was developed by newbiely.com * * This Arduino UNO R4 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-button */ #define BUTTON_PIN 7 // The Arduino UNO R4 pin connected to the button int button_state; // the current state of button int prev_button_state = LOW; // the previous state of button void setup() { // initialize serial communication at 9600 bits per second: Serial.begin(9600); // initialize the pushbutton pin as a pull-up input pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // read the state of the switch/button: button_state = digitalRead(BUTTON_PIN); if (prev_button_state == HIGH && button_state == LOW) Serial.println("The button is pressed"); else if (prev_button_state == LOW && button_state == HIGH) Serial.println("The button is released"); // save the last state prev_button_state = button_state; }

    Detailed Instructions

    • Copy the above code and paste it to Arduino IDE
    • Click the Upload button in Arduino IDE to send code to Arduino UNO R4.
    • Open the Serial Monitor.
    • Press and release the button.
    • Check out the result on the Serial Monitor.
    COM6
    Send
    The button is pressed The button is released
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  

    ※ NOTE THAT:

    • Even if you press and release the button just once, the Serial Monitor might display multiple press and release events. This usual behavior is known as "chattering phenomenon". You can find more details in the Arduino UNO R4 - Button Debounce tutorial.
    • To simplify the process for beginners using multiple buttons, we developed a library named ezButton. You can learn about the ezButton library here.

    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!