ESP32 - 버튼 | ESP32 - Button

버튼은 기본적인 부품이며 많은 ESP32 프로젝트에서 널리 사용됩니다. 보기와 같이 간단하지 않습니다(기계적, 물리적 특성 때문에). 초보자들은 이것으로 많은 어려움을 겪을 수 있습니다. 이 튜토리얼은 초보자들이 쉽게 할 수 있도록 도와줍니다. 시작해봅시다!

※ NOTE THAT:

버튼에 대해 발표하기 전에, 초보자들이 흔히 접하는 두 가지 일반적인 실수에 대해 알려드리고자 합니다:

  1. 부유 입력 문제:
    • 증상: 버튼을 ESP32 입력 핀에 연결할 때, 입력 핀의 상태가 랜덤이며 버튼의 누름 상태와 일치하지 않습니다.
    • 원인: 버튼 핀이 풀다운 저항기나 풀업 저항기를 사용하지 않습니다.
    • 해결책: ⇒ 입력 핀에 풀다운 저항기나 풀업 저항기를 사용합니다. 이에 대한 자세한 사항은 이 튜토리얼 뒷부분에서 설명될 예정입니다.
  • 채터링 현상
    • 증상: ESP32의 코드가 버튼의 상태를 읽고 상태 변경(고 → 저 또는 저 → 고)을 감지하여 누르는 이벤트를 식별합니다. 버튼이 실제로 한 번만 눌렸을 때, ESP32 코드는 한 번이 아닌 여러 번 눌린 것으로 감지합니다.
    • 원인: 기계적 및 물리적 특성으로 인해 버튼을 한 번 누를 때, 입력 핀의 상태가 한 번이 아니라 여러 번 빠르게 저와 고 사이를 전환합니다.
    • 해결책: ⇒ 디바운스. 이에 대한 자세한 사항은 ESP32 - 버튼 - 디바운스 튜토리얼에서 설명될 예정입니다.

    채터링 현상은 누르는 횟수를 정확히 감지해야 하는 일부 애플리케이션에서 오작동을 일으킵니다. 일부 애플리케이션에서는 해가 되지 않습니다.

    준비물

    1×ESP-WROOM-32 Dev Module 쿠팡 | Amazon
    1×USB Cable Type-C 쿠팡 | Amazon
    1×Push Button 쿠팡 | Amazon
    1×(Optional) Panel-mount Push Button Amazon
    1×Breadboard 쿠팡 | Amazon
    1×Jumper Wires Amazon
    1×(Optional) DC Power Jack 쿠팡 | Amazon
    1×(Recommended) Screw Terminal Expansion Board for ESP32 쿠팡 | Amazon
    공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.

    버튼 정보

    푸시 버튼, 촉각 버튼, 순간 스위치라고도 불리는 푸시버튼은 누르고 있을 때 닫히고 놓으면 열리는 스위치의 일종입니다. 다양한 유형의 푸시 버튼이 존재하며, 크게 두 그룹으로 분류됩니다:

    • PCB 마운트 푸시 버튼 (브레드보드 마운팅에 적합)
    • 패널 마운트 푸시 버튼
    ESP32 Push button

    버튼 핀배열

    PCB 마운트 버튼은 일반적으로 내부적으로 쌍으로 연결된 4개의 핀을 가지고 있습니다.

    Button Pinout

    우리는 4개의 핀 중 서로 연결된 쌍이 아닌 2개만 사용해야 합니다. 따라서 버튼을 이용한 배선 방법은 4가지가 있습니다(아래 이미지 참조).

    How To Use Button

    사실, 대칭 때문에 네 가지 방법이 두 가지 방법이 됩니다. 이 튜토리얼의 나머지 부분은 함께 연결되지 않은 두 개의 핀인 핀 A와 핀 B를 사용할 것입니다.

    버튼에는 왜 4개의 핀이 있는데 우리는 단지 2개의 핀만 필요한가요?

    ⇒ 버튼은 사용자로부터 힘을 받습니다. PCB(기판)에 안정적이고 단단히 서 있도록 하기 위해, 누르는 힘을 견딜 수 있도록 4개의 핀이 있습니다.

    보통 패널 장착 버튼에는 두 개의 핀이 있습니다.

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

    작동 방법

    • 버튼을 누르면 핀 A가 핀 B에 연결됩니다.
    • 버튼을 누르지 않으면 핀 A가 핀 B에 연결되지 않습니다.
    How Button Works

    ESP32 - 버튼

    한 버튼의 핀은 ESP32의 디지털 입력 핀에 연결되어 있습니다. 다른 핀은 VCC 또는 GND에 연결됩니다. ESP32 코드에서, 입력 핀의 상태를 읽음으로써, 버튼이 눌렸는지 아닌지를 판단할 수 있습니다.

    입력 상태와 누름 상태

    입력 핀의 상태와 버튼의 눌림 상태 사이의 관계는 버튼을 ESP32에 어떻게 연결하고 ESP32 핀의 설정을 어떻게 하느냐에 따라 달라집니다. ESP32와 버튼을 사용하는 방법에는 두 가지가 있습니다:

    1. 한 버튼의 핀이 ESP32의 디지털 입력 핀에 연결되고, 다른 핀은 VCC에 연결됩니다:
      • 풀다운 저항이 사용되어야 합니다.
      • 버튼이 눌리면, ESP32의 핀 상태는 HIGH입니다. 그렇지 않으면, ESP32의 핀 상태는 LOW입니다.
  • 한 버튼의 핀이 ESP32의 디지털 입력 핀에 연결되고, 다른 핀은 GND에 연결됩니다:
    • 풀업 저항이 사용되어야 합니다.
    • 버튼이 눌리면, ESP32의 핀 상태는 LOW입니다. 그렇지 않으면, ESP32의 핀 상태는 HIGH입니다.

    ※ NOTE THAT:

    풀다운 저항기나 풀업 저항기를 사용하지 않는 경우, 버튼이 눌리지 않았을 때 입력 핀의 상태는 HIGHLOW 사이에서 랜덤하게 (불안정하게, 고정되지 않게) 됩니다. 이를 "플로팅 입력 문제"라고 부릅니다. 이로 인해 오작동이 발생합니다.

    초보자들이 쉽게 따라할 수 있도록 이 튜토리얼은 ESP32 핀에 내부 풀업 저항을 사용할 것을 강력히 권장합니다. 외부 저항은 필요하지 않습니다. 이것은 하드웨어를 절약하고, 배선도를 간단하게 만듭니다.

    버튼과 ESP32 사이의 배선도

    ESP32와 PCB 마운트 버튼 간의 배선도

    ESP32 Button Wiring Diagram

    이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.

    ESP32 및 다른 구성 요소에 전원을 공급하는 방법에 대해 잘 알지 못하는 경우, 다음 튜토리얼에서 안내를 찾을 수 있습니다: ESP32 전원 공급 방법.

    ESP32와 패널 장착 버튼 간의 배선도

    ESP32 two-pin push button Wiring Diagram

    이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.

    버튼 프로그래밍 방법

    ESP32 핀을 내부 풀업 입력으로 초기화하기 위해 pinMode() 함수를 사용합니다. 예를 들어, GPIO21 핀:

    pinMode(21, INPUT_PULLUP); // GPIO21을 입력 핀으로 구성하고 내부 풀업 저항을 활성화합니다.

    digitalRead() 함수를 사용하여 입력 핀의 상태를 읽습니다.

    int buttonState = digitalRead(BUTTON_PIN);

    ※ NOTE THAT:

    널리 사용되는 두 가지 사용 사례가 있습니다:

    • 첫 번째 사용 사례: 입력 상태가 HIGH일 경우, 어떤 작업을 수행하고, 입력 상태가 LOW일 경우, 다른 작업을 수행합니다.
    • 두 번째 사용 사례: 입력 상태가 LOW에서 HIGH로 변경될 경우, 어떤 작업을 수행하고, 입력 상태가 HIGH에서 LOW로 변경될 경우, 다른 작업을 수행합니다.

    응용 프로그램에 따라 이 중 하나를 사용합니다. 예를 들어, 버튼을 사용하여 LED를 제어하는 경우:

    • 버튼이 눌렸을 때 LED를 켜고 버튼이 눌리지 않았을 때 LED를 끄고 싶다면, 첫 번째 경우를 사용해야 합니다.
    • 버튼이 눌릴 때마다 LED를 켜고 끄는 것을 토글하고 싶다면, 두 번째 경우를 사용해야 합니다.

    아래 예제 코드는 상태가 LOW에서 HIGH로 변경되는 것을 감지하는 방법을 보여줍니다.

    #define BUTTON_PIN 21 // GPIO21 핀이 버튼에 연결됨 // 변수가 변할 것입니다: int lastState = HIGH; // 입력 핀에서 이전 상태 int currentState; // 입력 핀에서 현재 읽기 void setup() { Serial.begin(9600); // 푸시버튼 핀을 풀업 입력으로 초기화합니다 pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽습니다: currentState = digitalRead(BUTTON_PIN); if(lastState == LOW && currentState == HIGH) Serial.println("The state changed from LOW to HIGH"); // 마지막 상태를 저장합니다 lastState = currentState; }

    ESP32 코드

    사용 방법

    • ESP32를 처음 사용한다면, Arduino IDE에서 ESP32 환경 설정 방법을 참고하십시오.
    • 위의 이미지대로 배선을 하십시오.
    • 마이크로 USB 케이블을 사용하여 ESP32 보드를 PC에 연결하십시오.
    • PC에서 Arduino IDE를 엽니다.
    • 올바른 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택하십시오.
    • 아래 코드를 복사하여 Arduino IDE에 붙여넣으십시오.
    #define BUTTON_PIN 21 // GIOP21 핀이 버튼에 연결됨 void setup() { // 9600 비트/초로 시리얼 통신 시작: Serial.begin(9600); // 푸시버튼 핀을 풀업 입력으로 초기화 // 스위치가 열려 있을 때 풀업 입력 핀은 HIGH이고 닫혀 있을 때는 LOW입니다. pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽음: int buttonState = digitalRead(BUTTON_PIN); // 버튼의 상태를 출력 Serial.println(buttonState); }

    Arduino IDE에서 Upload 버튼을 클릭하여 ESP32 보드에 코드를 컴파일하고 업로드하세요.

    How to upload ESP32 code on Arduino IDE

    아두이노 IDE에서 시리얼 모니터 열기

    How to open serial monitor on Arduino IDE
    • 버튼을 여러 번 눌렀다 놓으세요.
    • 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 보입니다:
    COM6
    Send
    1 1 1 0 0 0 0 0 0 1 1 1
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  

    1은 HIGH입니다, 0은 LOW입니다.

    코드 줄마다 설명

    위의 ESP32 코드는 줄마다 설명이 포함되어 있습니다. 코드의 주석을 읽어주세요!

    ESP32 코드 수정하기

    코드를 수정해서 누름 및 릴리스 이벤트를 감지하도록 합시다.

    사용 방법

    /* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-button */ #define BUTTON_PIN 21 // GIOP21 핀이 버튼에 연결됨 // 변수는 변할 것입니다: int lastState = LOW; // 입력 핀에서의 이전 상태 int currentState; // 입력 핀에서의 현재 읽기 void setup() { // 9600비트/초에서 시리얼 통신 시작: Serial.begin(9600); // 푸시버튼 핀을 풀업 입력으로 초기화합니다 // 풀업 입력 핀은 스위치가 열려 있을 때 HIGH이고 스위치가 닫혀 있을 때 LOW입니다. pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽습니다: currentState = digitalRead(BUTTON_PIN); if (lastState == HIGH && currentState == LOW) Serial.println("버튼이 눌림"); else if (lastState == LOW && currentState == HIGH) Serial.println("버튼이 릴리스됨"); // 마지막 상태를 저장 lastState = currentState; }

    아두이노 IDE에서 Upload 버튼을 클릭하여 ESP32 보드에 코드를 컴파일하고 업로드하세요.

    Arduino IDE Upload Code

    Arduino IDE에서 시리얼 모니터를 엽니다.

    How to open serial monitor on Arduino IDE
    • 버튼을 누른 다음에 놓으세요.
    • 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 보입니다:
    COM6
    Send
    The button is pressed The button is released
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  

    ※ NOTE THAT:

    • 시리얼 모니터는 단 한 번의 누름과 릴리스를 했음에도 불구하고 여러 번 눌림과 릴리스 이벤트를 출력할 수 있습니다. 이는 버튼의 정상적인 동작입니다. 이 현상을 "채터링 현상"이라고 합니다. 어떤 애플리케이션에서는 이를 제거하는 방법이 필요합니다. ESP32 - 버튼 디바운스 튜토리얼에서 더 배울 수 있습니다.
    • 특히 여러 버튼을 사용할 때 초보자를 위해 간단하게 만들기 위해, ezButton이라고 하는 라이브러리를 만들었습니다. 여기에서 ezButton 라이브러리에 대해 배울 수 있습니다.

    동영상

    비디오 제작은 시간이 많이 걸리는 작업입니다. 비디오 튜토리얼이 학습에 도움이 되었다면, YouTube 채널 을 구독하여 알려 주시기 바랍니다. 비디오에 대한 높은 수요가 있다면, 비디오를 만들기 위해 노력하겠습니다.

    부가 지식

    풀다운/풀업 저항을 언제 사용해야 하고 언제 사용하면 안 되나요?

    • 해야 함: 센서가 닫힘과 열림의 두 상태를 가진다면, 이 두 상태를 LOW HIGH의 두 상태로 만들기 위해서는 풀업 또는 풀다운 저항이 필요합니다. 예를 들어, 푸시 버튼, 스위치, 자기 접촉 스위치(문 센서) 등...
    • 하지 않아도 됨: 센서가 두 가지 전압 수준(LOW와 HIGH)을 출력한다면, 풀업 또는 풀다운 저항이 필요하지 않습니다. 예를 들어, 운동 센서, 터치 센서 등...

    ※ OUR MESSAGES

    • 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!