ESP32 - 버튼 - 긴 누름 짧은 누름 | ESP32 - Button - Long Press Short Press

이 튜토리얼은 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
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.

버튼 정보

우리는 버튼에 관한 구체적인 튜토리얼을 가지고 있습니다. 각 튜토리얼은 하드웨어 핀아웃, 작동 원리, ESP32에 대한 배선 연결, ESP32 코드에 대한 자세한 정보와 단계별 지침을 포함하고 있습니다. 다음 링크에서 자세히 알아보십시오:

선연결

ESP32 Button Wiring Diagram

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

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

이 튜토리얼은 내부 풀업 저항을 사용할 것입니다. 버튼의 상태는 정상일 때 HIGH이고 눌렸을 때는 LOW입니다.

짧은 누름 감지하는 방법

  • 눌림과 뗌 사이의 시간을 측정하세요.
  • 지속 시간이 사전에 정의된 시간보다 짧으면 짧은 누름 이벤트가 감지됩니다.

한 단계씩 살펴봅시다:

짧게 누르기의 최대 지속 시간을 정의하세요.

#define SHORT_PRESS_TIME 500 // 500밀리초

버튼이 눌렸는지 감지하고 눌린 시간을 저장하세요.

if(lastState == HIGH && currentState == LOW) pressedTime = millis();

버튼이 놓여졌는지 감지하고 놓인 시간을 저장하세요.

if(lastState == LOW && currentState == HIGH) releasedTime = millis();
  • 압력 지속 시간 계산 및
long pressDuration = releasedTime - pressedTime;

누르는 시간을 정의된 짧은 누름 시간과 비교하여 짧은 누름을 판단합니다.

if( pressDuration < SHORT_PRESS_TIME ) Serial.println("짧은 누름이 감지되었습니다");

단축키 검출을 위한 ESP32 코드

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-button-long-press-short-press */ #define BUTTON_PIN 21 // GPIO21 핀이 버튼에 연결됨 #define SHORT_PRESS_TIME 500 // 500 밀리초 // 변수들은 변할 것입니다: int lastState = LOW; // 입력 핀에서의 이전 상태 int currentState; // 입력 핀에서의 현재 읽기 값 unsigned long pressedTime = 0; unsigned long releasedTime = 0; void setup() { Serial.begin(9600); pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽습니다: currentState = digitalRead(BUTTON_PIN); if (lastState == HIGH && currentState == LOW) // 버튼이 눌림 pressedTime = millis(); else if (lastState == LOW && currentState == HIGH) { // 버튼이 릴리스됨 releasedTime = millis(); long pressDuration = releasedTime - pressedTime; if ( pressDuration < SHORT_PRESS_TIME ) Serial.println("짧은 누름이 감지됨"); } // 마지막 상태를 저장합니다 lastState = currentState; }

사용 방법

  • ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정 방법을 참조하세요.
  • 위의 코드를 Arduino IDE를 통해 ESP32에 업로드합니다.
  • 버튼을 짧게 여러 번 누르세요.
  • 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 보입니다:
COM6
Send
A short press is detected
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  

※ NOTE THAT:

시리얼 모니터는 단일 클릭에 대해 여러 번의 짧은 클릭을 출력할 수 있습니다. 이는 버튼의 정상적인 동작입니다. 이러한 동작은 "차터링 현상"이라고 불립니다. 이 문제를 해결하는 방법은 이 튜토리얼에서 나중에 배우게 됩니다.

롱 프레스 감지 방법

길게 누르기를 감지하기 위한 사용 사례가 두 가지가 있습니다.

  • 버튼을 놓자마자 롱 프레스 이벤트가 감지됩니다.
  • 버튼이 눌리는 동안 롱 프레스 이벤트가 감지됩니다.

In the first case: - 첫 번째 경우:

  • 눌린 이벤트와 릴리스된 이벤트 사이의 시간 길이를 측정하세요.
  • 해당 기간이 사전 정의된 시간보다 길 경우, 롱-프레스 이벤트가 감지됩니다.

두 번째 경우: 버튼이 눌리는 동안, 아래 과정을 반복적으로 수행하십시오:

  • 누르는 시간을 측정하세요.
  • 시간이 사전에 정해진 시간보다 길면, 길게 누르기 이벤트가 감지됩니다.
  • 그렇지 않으면, 버튼이 놓일 때까지 과정을 반복하세요.

ESP32 코드를 사용하여 길게 누르기를 놓았을 때 감지하기

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-button-long-press-short-press */ #define BUTTON_PIN 21 // GPIO21 핀이 버튼에 연결됨 #define LONG_PRESS_TIME 1000 // 1000 밀리초 // 변수는 변경될 것이다: int lastState = LOW; // 입력 핀에서의 이전 상태 int currentState; // 입력 핀에서의 현재 읽기 unsigned long pressedTime = 0; unsigned long releasedTime = 0; void setup() { Serial.begin(9600); pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽습니다: currentState = digitalRead(BUTTON_PIN); if(lastState == HIGH && currentState == LOW) // 버튼이 눌림 pressedTime = millis(); else if(lastState == LOW && currentState == HIGH) { // 버튼이 릴리스됨 releasedTime = millis(); long pressDuration = releasedTime - pressedTime; if( pressDuration > LONG_PRESS_TIME ) Serial.println("A long press is detected"); } // 마지막 상태를 저장 lastState = currentState; }

사용 방법

  • ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정하는 방법을 참고하세요.
  • 위의 코드를 Arduino IDE를 통해 ESP32에 업로드하세요.
  • 버튼을 눌렀다가 1초 후에 놓으세요.
  • 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 보일 것입니다:
COM6
Send
A long press is detected
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  

ESP32 코드: 누르는 동안 긴 누르기 감지하기

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-button-long-press-short-press */ #define BUTTON_PIN 21 // GPIO21 핀이 버튼에 연결됨 #define LONG_PRESS_TIME 1000 // 1000 밀리초 // 변수는 변경될 것입니다: int lastState = LOW; // 입력 핀의 이전 상태 int currentState; // 입력 핀에서의 현재 읽기 값 unsigned long pressedTime = 0; bool isPressing = false; bool isLongDetected = false; void setup() { Serial.begin(9600); pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽습니다: currentState = digitalRead(BUTTON_PIN); if(lastState == HIGH && currentState == LOW) { // 버튼이 눌림 pressedTime = millis(); isPressing = true; isLongDetected = false; } else if(lastState == LOW && currentState == HIGH) { // 버튼이 떼어짐 isPressing = false; } if(isPressing == true && isLongDetected == false) { long pressDuration = millis() - pressedTime; if( pressDuration > LONG_PRESS_TIME ) { Serial.println("A long press is detected"); isLongDetected = true; } } // 마지막 상태를 저장합니다 lastState = currentState; }

사용 방법

  • ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정 방법을 참고하세요.
  • 위의 코드를 Arduino IDE를 통해 ESP32에 업로드하세요.
  • 몇 초 후 버튼을 눌렀다가 놓으세요.
  • 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 보일 겁니다:
COM6
Send
A long press is detected
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  

긴 누름과 짧은 누름 모두 감지하는 방법

짧게 누르기와 길게 누른 후 놓기

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-button-long-press-short-press */ #define BUTTON_PIN 21 #define SHORT_PRESS_TIME 1000 #define LONG_PRESS_TIME 1000 // 변수 값은 변할 수 있음: int lastState = LOW; // 입력 핀에서의 이전 상태 int currentState; // 입력 핀에서의 현재 읽기 unsigned long pressedTime = 0; unsigned long releasedTime = 0; void setup() { Serial.begin(9600); pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽음: currentState = digitalRead(BUTTON_PIN); if (lastState == HIGH && currentState == LOW) // 버튼이 눌렸을 때 pressedTime = millis(); else if (lastState == LOW && currentState == HIGH) { // 버튼이 놓였을 때 releasedTime = millis(); long pressDuration = releasedTime - pressedTime; if ( pressDuration < SHORT_PRESS_TIME ) Serial.println("짧은 누름이 감지되었습니다"); if ( pressDuration > LONG_PRESS_TIME ) Serial.println("긴 누름이 감지되었습니다"); } // 마지막 상태를 저장 lastState = currentState; }

사용 방법

  • ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정하는 방법을 확인하세요.
  • 위의 코드를 Arduino IDE를 통해 ESP32에 업로드하세요.
  • 버튼을 길게 누르고 짧게 누르세요.
  • 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 보입니다:

※ NOTE THAT:

시리얼 모니터는 길게 누를 때 여러 번의 짧은 누름 감지를 보여줄 수 있습니다. 이것은 버튼의 정상적인 동작입니다. 이 동작은 "채터링 현상"이라고 불립니다. 이 문제는 이 튜토리얼의 마지막 부분에서 해결될 것입니다.

짧은 누름과 긴 누름

누를 때

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-button-long-press-short-press */ #define BUTTON_PIN 21 // GPIO21에 연결된 버튼 핀 #define SHORT_PRESS_TIME 1000 // 1000 밀리초 #define LONG_PRESS_TIME 1000 // 1000 밀리초 // 변수가 변경됩니다: int lastState = LOW; // 입력 핀에서의 이전 상태 int currentState; // 입력 핀에서의 현재 읽기 값 unsigned long pressedTime = 0; unsigned long releasedTime = 0; bool isPressing = false; bool isLongDetected = false; void setup() { Serial.begin(9600); pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // 스위치/버튼의 상태를 읽습니다: currentState = digitalRead(BUTTON_PIN); if (lastState == HIGH && currentState == LOW) { // 버튼이 눌렸을 때 pressedTime = millis(); isPressing = true; isLongDetected = false; } else if (lastState == LOW && currentState == HIGH) { // 버튼이 놓였을 때 isPressing = false; releasedTime = millis(); long pressDuration = releasedTime - pressedTime; if ( pressDuration < SHORT_PRESS_TIME ) Serial.println("짧은 누름이 감지되었습니다"); } if (isPressing == true && isLongDetected == false) { long pressDuration = millis() - pressedTime; if ( pressDuration > LONG_PRESS_TIME ) { Serial.println("긴 누름이 감지되었습니다"); isLongDetected = true; } } // 마지막 상태를 저장합니다 lastState = currentState; }

사용 방법

  • ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정하는 방법을 참조하세요.
  • 위의 코드를 Arduino IDE를 통해 ESP32에 업로드하세요.
  • 버튼을 길게 누르고 짧게 눌러보세요.
  • 시리얼 모니터에서 결과를 확인하세요. 아래와 같이 보일 것입니다:

롱 프레스 및 숏 프레스 디바운싱 처리

많은 응용 프로그램에서 버튼을 디바운스하는 것이 매우 중요합니다.

디바운싱은 여러 버튼을 사용할 때 특히 조금 복잡합니다. 초보자를 위해 간단하게 만들기 위하여, 우리는 ezButton이라 불리는 라이브러리를 만들었습니다.

아래 코드에서 이 라이브러리를 사용할 것입니다.

짧은 누름과 긴 누름, 그리고 뗀 후 디바운싱 처리

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-button-long-press-short-press */ #include <ezButton.h> #define SHORT_PRESS_TIME 1000 // 1000밀리초 #define LONG_PRESS_TIME 1000 // 1000밀리초 ezButton button(21); // GPIO21 핀에 연결된 ezButton 객체 생성 unsigned long pressedTime = 0; unsigned long releasedTime = 0; void setup() { Serial.begin(9600); button.setDebounceTime(50); // 디바운스 시간을 50밀리초로 설정 } void loop() { button.loop(); // loop() 함수를 먼저 호출해야 함 if (button.isPressed()) pressedTime = millis(); if (button.isReleased()) { releasedTime = millis(); long pressDuration = releasedTime - pressedTime; if ( pressDuration < SHORT_PRESS_TIME ) Serial.println("A short press is detected"); if ( pressDuration > LONG_PRESS_TIME ) Serial.println("A long press is detected"); } }

사용 방법

  • ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정 방법을 참조하세요.
  • EzButton 라이브러리를 설치하세요. 설치 방법을 참조하세요.
  • 위의 코드를 Arduino IDE를 통해 ESP32에 업로드하세요.
  • 버튼을 길게 누르고 짧게 누르세요.
  • 결과를 시리얼 모니터에서 확인하세요. 결과는 아래와 같습니다:

짧은 누름과 긴 누름에 디바운싱이 적용되는 동안

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-button-long-press-short-press */ #include <ezButton.h> #define SHORT_PRESS_TIME 1000 // 1000 밀리초 #define LONG_PRESS_TIME 1000 // 1000 밀리초 ezButton button(21); // GPIO21 핀에 연결된 ezButton 객체 생성 unsigned long pressedTime = 0; unsigned long releasedTime = 0; bool isPressing = false; bool isLongDetected = false; void setup() { Serial.begin(9600); button.setDebounceTime(50); // 디바운스 시간을 50 밀리초로 설정 } void loop() { button.loop(); // loop() 함수를 먼저 호출해야 함 if (button.isPressed()) { pressedTime = millis(); isPressing = true; isLongDetected = false; } if (button.isReleased()) { isPressing = false; releasedTime = millis(); long pressDuration = releasedTime - pressedTime; if ( pressDuration < SHORT_PRESS_TIME ) Serial.println("A short press is detected"); } if (isPressing == true && isLongDetected == false) { long pressDuration = millis() - pressedTime; if ( pressDuration > LONG_PRESS_TIME ) { Serial.println("A long press is detected"); isLongDetected = true; } } }

사용 방법

  • ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정하는 방법을 확인하세요.
  • EzButton 라이브러리를 설치하세요. 설치 방법을 참고하세요.
  • 위의 코드를 Arduino IDE를 통해 ESP32에 업로드하세요.
  • 버튼을 길게 누르고 짧게 눌러보세요.
  • 결과를 시리얼 모니터에서 확인하세요. 아래와 같이 보일 것입니다:

동영상

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

왜 긴 누름과 짧은 누름이 필요한가요?

  • 버튼 수와 디지털 입력 핀을 절약하기 위해. 단일 버튼으로 두 가지 이상의 기능을 수행할 수 있습니다. 예를 들어, 짧게 누르면 불을 켜고, 길게 누르면 팬을 켭니다.
  • 우연히 누르는 것을 피하기 위해 짧게 누르는 대신 길게 누르기를 사용합니다. 예를 들어, 일부 기기는 공장 초기화를 위해 버튼을 사용합니다. 버튼이 우연히 눌리면 위험합니다.

코멘트

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