ESP8266 - 버튼 | ESP8266 - Button

이 튜토리얼은 ESP8266을 버튼과 함께 사용하는 방법을 알려드립니다. 자세히 말해서, 우리는 다음을 배울 것입니다:

버튼은 푸시버튼, 촉감 버튼 또는 순간 전환 스위치와 같은 다른 이름으로 알려져 있습니다. 이것은 많은 ESP8266 프로젝트에서 사용되는 일반적인 부품이며 사용하기 쉽습니다. 그러나 그것의 기계적, 물리적 측면과 사용할 수 있는 방법들로 인해 초보자들에게 혼란스러울 수 있습니다. 이 튜토리얼은 이제 막 시작하는 사람들에게 더 쉽게 만들어 줍니다.

준비물

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

버튼 정보

버튼을 다룰 때 초보자들이 흔히 마주치는 두 가지 문제점:

1. 플로팅 입력 문제:

  • 증상: 입력 핀에서 읽은 값이 버튼 누름 상태와 일치하지 않습니다.
  • 원인: 입력 핀에 풀업 또는 풀다운 저항이 사용되지 않았습니다.
  • 해결책: 이 튜토리얼에 따라 풀업 또는 풀다운 저항을 사용하세요.

2. 채터링 현상:

증상: 한 번 눌렀음에도 불구하고 버튼이 ESP8266 코드에서 여러 번 눌린 것으로 감지되고 있습니다.

원인: 버튼(또는 스위치)의 상태가 기계적이고 물리적 문제로 인해 LOWHIGH 사이에서 급격히 변동하고 있습니다.

해결책: ESP8266 - 버튼 - 디바운스 튜토리얼은 이 문제를 해결하기 위해 디바운스를 어떻게 활용하는지 설명할 것입니다.

이 요소는 정밀한 압력 감지가 필요한 애플리케이션에서만 고려해야 합니다.

※ NOTE THAT:

다음과 혼동하지 마십시오:

버튼 핀배열

푸시 버튼에는 다양한 종류가 있으며, 이들은 크게 두 그룹으로 분류될 수 있습니다:

  • PCB용 푸시 버튼 (브레드보드에 장착하기 적합)
  • 패널 장착용 푸시 버튼
Push button

PCB 마운트 버튼에는 일반적으로 네 개의 핀이 있습니다.

Button pinout

그럼에도 불구하고, 이 핀들은 내부적으로 짝지어 연결되어 있습니다. 따라서 우리는 네 개의 핀 중 내부적으로 연결되어 있지 않은 두 개만 사용하면 됩니다.

버튼에 연결하는 네 가지 방법이 있으며, 그 중 두 가지는 (이미지에서 볼 수 있듯이) 대칭입니다.

How To Use Button

버튼에 4개의 핀이 있는 이유는 우리가 그 중 2개만 사용하는데 왜 그럴까요?

PCB(인쇄 회로 기판)에 단단히 고정되어 압력을 견딜 수 있도록 합니다.

패널 장착 버튼은 보통 두 개의 핀을 가지고 있습니다.

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

작동 원리

  • 버튼이 눌리지 않았을 때, 핀 A는 핀 B와 연결되지 않습니다.
  • 하지만 버튼이 눌렸을 때, 핀 A는 핀 B와 연결됩니다.
How Button Works

ESP8266 - 버튼

버튼의 한 핀은 VCCGND 중 하나에 연결되어 있습니다. 다른 핀은 ESP8266의 핀에 연결됩니다. 입력으로 구성된 ESP8266 핀의 상태를 확인함으로써 버튼이 눌렸는지 여부를 판단할 수 있습니다.

버튼 상태와 누름 상태

버튼과 ESP8266 사이의 연결 및 ESP8266 핀의 구성은 버튼 상태와 누름 상태 사이의 관계를 결정할 것입니다.

ESP8266에서 버튼을 사용하는 방법은 두 가지가 있습니다:

  1. 한 버튼의 핀은 VCC에 연결되어 있고, 다른 하나는 풀-다운 저항기가 있는 ESP8266의 핀에 연결되어 있습니다.
    • 버튼을 누르면 ESP8266의 핀 상태는 HIGH가 됩니다. 그렇지 않으면 핀 상태는 LOW가 됩니다.
    • 내부 또는 외부 저항기를 사용할 수 있습니다. 내부 저항기는 이미 ESP8266 내부에 내장되어 있으며, ESP8266 코드를 통해 설정할 수 있습니다.
  • 한 버튼의 핀은 GND에 연결되어 있고, 다른 하나는 풀-업 저항기가 있는 ESP8266의 핀에 연결되어 있습니다.
    • 버튼을 누르면 ESP8266의 핀 상태는 LOW가 됩니다. 그렇지 않으면 핀 상태는 HIGH가 됩니다.
    • 내부 또는 외부 저항기를 사용할 수 있습니다. 내부 저항기는 이미 ESP8266 내부에 내장되어 있으며, ESP8266 코드를 통해 설정할 수 있습니다.

    ※ NOTE THAT:

    만약 우리가 최선의 방법을 따르지 않는다면 버튼이 눌리지 않았을 때 입력 핀의 상태는 “플로팅(floating)”이 됩니다. 이는 상태가 고정되지 않은 HIGH 또는 LOW(불안정한, 고정되지 않은)가 될 수 있음을 의미하며, 이는 잘못된 감지로 이어질 수 있습니다.

    • 최악의 방법: ESP8266 핀을 입력으로 초기화(pinMode(BUTTON_PIN, INPUT))하고 어떠한 외부 풀다운/풀업 저항도 사용하지 않는다.
    • 최선의 방법: ESP8266 핀을 내부 풀업 입력으로 초기화(pinMode(BUTTON_PIN, INPUT_PULLUP))합니다. 이는 어떠한 외부 풀다운/풀업 저항도 사용할 필요가 없습니다.

    간단함을 위해 이 튜토리얼은 가장 기본적인 방법을 사용합니다: 외부 저항기 없이 내부 풀업 입력으로 ESP8266 핀을 초기화합니다. 새로 오신 분들은 풀업/풀다운 저항기를 연결하는 것에 대해 걱정할 필요가 없습니다. 그들이 해야 할 일은 단지 ESP8266 코드를 작성하는 것입니다.

    선연결

    ESP8266과 PCB 장착 버튼 간의 배선도

    ESP8266 NodeMCU Button Wiring Diagram

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

    ESP8266의 핀 배치ESP8266 및 다른 구성 요소에 전원을 공급하는 방법에 대해 더 많이 보십시오.

    ESP8266과 패널 장착 버튼 간의 배선도

    ESP8266 NodeMCU two-pin push button Wiring Diagram

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

    버튼용 프로그래밍 방법

    pinMode() 함수를 사용하여 ESP8266 핀을 내부 풀업 입력으로 설정하세요. 예를 들어, 핀 D7:

    pinMode(D7, INPUT_PULLUP);

    digitalRead() 함수를 사용하여 ESP8266 핀의 상태에 접근하세요.

    int button_state = digitalRead(BUTTON_PIN);

    ※ NOTE THAT:

    두 가지 일반적인 사용 사례가 있습니다:

    • 첫 번째는 입력 상태가 HIGH일 때 조치를 취하고, 입력 상태가 LOW일 때는 반대로 조치를 취하는 것입니다.
    • 두 번째는 입력 상태가 LOW에서 HIGH로 (또는 HIGH에서 LOW로) 변경될 때 조치를 취하는 것입니다.

    우리는 애플리케이션에 따라 그 중 하나를 선택합니다. 예를 들어, 버튼을 사용하여 LED를 제어하려는 경우:

    • 버튼이 눌렸을 때 LED가 켜지고 버튼이 눌리지 않았을 때 LED가 꺼지길 원한다면 첫 번째 사용 사례가 사용되어야 합니다.
    • 버튼이 눌릴 때마다 LED가 켜지고 꺼지는 것을 토글하길 원한다면 두 번째 사용 사례가 사용되어야 합니다.

    LOW에서 HIGH로 상태 변경 감지하는 방법

    const int BUTTON_PIN = D7; // ESP8266의 핀 D7이 버튼에 연결됨 int prev_button_state = HIGH; // 입력 핀에서의 이전 상태 int button_state; // 입력 핀에서의 현재 읽기 값 void setup() { // 시리얼 모니터와 통신하기 위한 시리얼 초기화. Serial.begin(9600); // 푸시버튼 핀을 풀업 입력으로 초기화 // 풀업 입력 핀은 스위치가 열려있을 때 HIGH이고, 스위치가 닫혔을 때 LOW입니다. pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태 읽기: button_state = digitalRead(BUTTON_PIN); if(prev_button_state == LOW && button_state == HIGH) Serial.println("The state changed from LOW to HIGH"); // 마지막 상태 저장 prev_button_state = button_state; }

    ESP8266 코드

    사용 방법

    아두이노 IDE에서 ESP8266을 시작하려면 다음 단계를 따르세요:

    • ESP8266을 처음 사용하는 경우, Arduino IDE에서 ESP8266 환경 설정 방법 튜토리얼을 확인하세요.
    • 다이어그램에 표시된 대로 구성요소를 연결하세요.
    • USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
    • 컴퓨터에서 Arduino IDE를 엽니다.
    • 올바른 ESP8266 보드(예: NodeMCU 1.0 (ESP-12E Module))와 해당 COM 포트를 선택하세요.
    • USB 케이블로 ESP8266을 컴퓨터에 연결하세요.
    • Arduino IDE를 시작하고 올바른 보드와 포트를 선택하세요.
    • 아래 코드를 복사하고 Arduino IDE에서 열어주세요.
    #define BUTTON_PIN D7 // ESP8266 핀 D7이 버튼에 연결됨 void setup() { // 시리얼 모니터와 통신하기 위해 시리얼을 초기화합니다. Serial.begin(9600); // ESP8266 핀을 당겨올려 입력으로 구성합니다: 버튼이 열리면 HIGH, 눌리면 LOW. pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽습니다: int button_state = digitalRead(BUTTON_PIN); // 버튼의 상태를 출력합니다 Serial.println(button_state); }

    Arduino IDE에서 Upload 버튼을 클릭하여 코드를 컴파일하고 ESP8266 보드에 업로드하십시오.

    How to upload code to ESP8266 NodeMCU using 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입니다.

    코드 설명

    소스 코드의 주석에 포함된 줄별 설명을 확인하세요!

    ESP8266 코드 수정하기

    버튼을 누르고 놓는 이벤트가 발생했을 때 이를 감지할 수 있도록 코드를 변경합시다.

    사용 방법

    • 다이어그램에 표시된 대로 구성요소를 연결하세요.
    • USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
    • 컴퓨터에서 Arduino IDE를 엽니다.
    • 올바른 ESP8266 보드(예: NodeMCU 1.0 (ESP-12E 모듈))와 해당 COM 포트를 선택하세요.
    • 다음과 같이 코드를 변경하세요:
    /* * 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp8266/esp8266-button */ #define BUTTON_PIN D7 // ESP8266의 D7 핀이 버튼에 연결됩니다. int prev_button_state = LOW; // 입력 핀으로부터의 이전 상태 int button_state; // 입력 핀으로부터의 현재 읽기 값 void setup() { // 시리얼 모니터와 통신하기 위해 시리얼을 초기화합니다. Serial.begin(9600); // ESP8266 핀을 풀업 입력으로 구성: 버튼이 열릴 때 HIGH, 눌렸을 때 LOW pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽습니다: 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"); // 마지막 상태를 저장합니다 prev_button_state = button_state; }

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

    Arduino IDE Upload Code
    • 시리얼 모니터를 엽니다.
    • 버튼을 누르고 계속 누르고 있습니다.
    • 버튼을 놓고 시리얼 모니터에서 결과를 관찰합니다.
    COM6
    Send
    The button is pressed The button is released
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  

    ※ NOTE THAT:

    버튼을 한 번만 누르고 놓아도 시리얼 모니터의 출력에서 여러 번 눌림과 릴리즈 이벤트가 표시될 수 있습니다. 이는 버튼의 예상되는 동작입니다. 이를 "채터링 현상"이라고 합니다. 자세한 정보는 ESP8266 - 버튼 디바운스 튜토리얼을 참조해 주세요.

    ※ NOTE THAT:

    우리는 특히 여러 버튼을 사용할 때, 막 시작하는 사람들을 위해 더 간단하게 만들기 위해 ezButton이라고 불리는 라이브러리를 개발했습니다. ezButton 라이브러리에 대해 더 알아보기.

    동영상

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

    도전해보세요

    • 버튼을 누르면 LED를 켜세요.
    • 버튼이 눌리지 않으면 LED를 꺼주세요.
    • 버튼을 누를 때마다 LED를 켜고 끄는 것을 전환하세요.

    추가 지식

    1. 입력 핀에 풀다운/풀업 저항을 사용하지 말아야 할 시간은 언제입니까? 2. 입력 핀에 풀다운/풀업 저항을 사용하지 말아야 할 때는 언제입니까?
    • 센서가 닫히거나 열린 상태를 가질 경우, 풀업 또는 풀다운 저항이 필요하여 이러한 상태를 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!