ESP8266 - 버튼 - 길게 누르기 짧게 누르기 | ESP8266 - Button - Long Press Short Press
이 튜토리얼은 ESP8266을 사용하여 버튼의 길게 누르기와 짧게 누르기를 감지하는 방법을 안내합니다. 구체적으로, 다음 예시들을 통해 자세히 설명하겠습니다:
- ESP8266은 버튼의 단문을 감지합니다.
- ESP8266은 버튼의 장문을 감지합니다.
- 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 |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
선연결
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
ESP8266의 핀 배치 및 ESP8266 및 다른 구성 요소에 전원을 공급하는 방법에 대해 더 많이 보십시오.
이 튜토리얼에서는 내부 풀업 저항을 사용할 것입니다. 이는 버튼이 눌리지 않았을 때 HIGH 상태에 있고, 눌렸을 때 LOW 상태에 있다는 것을 의미합니다.
짧은 누름 감지하는 방법
우리는 눌림과 해제 이벤트 사이의 시간을 계산합니다. 이 지속 시간이 사전에 정해진 시간보다 짧으면 짧은 누름 이벤트를 감지합니다.
최대 단축 누름의 지속 시간을 결정하십시오.
const int SHORT_PRESS_TIME = 500; // 500 밀리초
버튼이 눌렸는지 확인하고 눌린 시간을 기록하세요.
if(prev_button_state == HIGH && button_state == LOW)
time_pressed = millis();
버튼이 놓여질 때를 감지하고 그 해제 시간을 기록하십시오.
if(prev_button_state == LOW && button_state == HIGH)
time_released = millis();
- 힘
- 적용할 시간의 길이와 압력의 강도를 결정하십시오.
long press_duration = time_released - time_pressed;
- 프레스의 길이를 짧은 프레스를 위한 미리 정해진 시간과 비교하세요.
- 비교를 통해 짧은 프레스인지 확인하세요.
if( press_duration < SHORT_PRESS_TIME )
Serial.println("짧은 누름이 감지되었습니다");
짧은 누름 감지를 위한 ESP8266 코드
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // ESP8266 핀이 버튼에 연결됨
#define SHORT_PRESS_TIME 500 // 500 밀리초
int prev_button_state = LOW; // 입력 핀의 이전 상태
int button_state; // 입력 핀에서의 현재 읽기 값
unsigned long time_pressed = 0;
unsigned long time_released = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// 스위치/버튼의 상태를 읽습니다:
button_state = digitalRead(BUTTON_PIN);
if (prev_button_state == HIGH && button_state == LOW) // 버튼이 눌림
time_pressed = millis();
else if (prev_button_state == LOW && button_state == HIGH) { // 버튼이 릴리즈됨
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("짧은 누름이 감지됨");
}
// 마지막 상태를 저장
prev_button_state = button_state;
}
사용 방법
ESP8266을 Arduino IDE에서 시작하기 위해 다음 단계를 따르세요:
- ESP8266을 처음 사용하는 경우 Arduino IDE에서 ESP8266 환경 설정 방법 튜토리얼을 확인하세요.
- 다이어그램에 표시된 대로 구성요소들을 연결하세요.
- USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
- 컴퓨터에서 Arduino IDE를 엽니다.
- 올바른 ESP8266 보드를 선택하세요(예: NodeMCU 1.0 (ESP-12E Module)) 및 해당 COM 포트를 선택하세요.
- Arduino IDE를 사용하여 코드를 ESP8266에 업로드하세요.
- 버튼을 짧은 시간 동안 여러 번 누르세요.
- 시리얼 모니터에서 출력을 확인하세요.
COM6
A short press is detected
Autoscroll
Clear output
9600 baud
Newline
※ NOTE THAT:
시리얼 모니터는 단일 클릭에 대해 여러 번의 짧은 클릭 감지를 표시할 수 있습니다. 이는 버튼의 예상되는 동작이며 "채터링 현상"이라고 합니다. 이 문제는 이 튜토리얼의 마지막 부분에서 다룰 예정입니다.
긴 누름 감지하는 방법
길게 누르기를 감지할 수 있는 두 가지 시나리오가 있습니다:
- 버튼을 놓으면 롱 프레스 이벤트가 식별됩니다.
- 버튼을 누르고 있는 동안, 그것이 놓여지기 전에도 롱 프레스 이벤트가 인식됩니다.
- 1. 첫 번째 경우에, 우리는 눌린 상태와 놓인 상태 사이의 시간 간격을 계산합니다. 2. 만약 기간이 미리 정한 시간보다 길면, 롱 프레스 이벤트가 식별됩니다.
두 번째 사용 사례에서 버튼을 누르면 누른 시간이 계속 측정되고 버튼을 놓을 때까지 길게 누르기 이벤트가 확인됩니다. 버튼을 계속 누르고 있는 동안 지속 시간이 사전에 정해진 시간보다 길면 길게 누르기 이벤트가 감지됩니다.
ESP8266 코드로 긴 누르기가 릴리스될 때 감지하기
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // ESP8266 핀이 버튼에 연결됨
#define LONG_PRESS_TIME 1000 // 1000 밀리초
int prev_button_state = LOW; // 입력 핀에서의 이전 상태
int button_state; // 입력 핀에서의 현재 읽기
unsigned long time_pressed = 0;
unsigned long time_released = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// 스위치/버튼의 상태를 읽습니다:
button_state = digitalRead(BUTTON_PIN);
if(prev_button_state == HIGH && button_state == LOW) // 버튼이 눌림
time_pressed = millis();
else if(prev_button_state == LOW && button_state == HIGH) { // 버튼이 해제됨
time_released = millis();
long press_duration = time_released - time_pressed;
if( press_duration > LONG_PRESS_TIME )
Serial.println("A long press is detected");
}
// 마지막 상태를 저장함
prev_button_state = button_state;
}
사용 방법
Arduino IDE에서 ESP8266을 시작하려면 다음 단계를 따르세요:
- ESP8266을 처음 사용하는 경우, Arduino IDE에서 ESP8266 환경 설정하는 방법 튜토리얼을 확인하세요.
- 다이어그램에 표시된 대로 구성 요소들을 연결하세요.
- USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
- 컴퓨터에서 Arduino IDE를 엽니다.
- 올바른 ESP8266 보드를 선택하세요. 예를 들어, (NodeMCU 1.0 (ESP-12E Module))과 해당 COM 포트를 선택하세요.
- Arduino IDE를 사용하여 ESP8266에 코드를 업로드하세요.
- 1초 기다린 후 버튼을 눌렀다가 놓으세요.
- 시리얼 모니터에서 결과를 확인하세요.
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
버튼을 놓았을 때에만 롱 프레스하는 이벤트가 감지됩니다.
ESP8266 코드 - 길게 누르는 동안의 감지를 위해
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // ESP8266 핀이 버튼에 연결됩니다
#define LONG_PRESS_TIME 1000 // 1000 밀리초
int prev_button_state = LOW; // 입력 핀에서의 이전 상태
int button_state; // 입력 핀에서의 현재 읽기
unsigned long time_pressed = 0;
bool is_pressing = false;
bool is_long_detected = false;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// 스위치/버튼의 상태를 읽습니다:
button_state = digitalRead(BUTTON_PIN);
if(prev_button_state == HIGH && button_state == LOW) { // 버튼이 눌림
time_pressed = millis();
is_pressing = true;
is_long_detected = false;
} else if(prev_button_state == LOW && button_state == HIGH) { // 버튼이 놓임
is_pressing = false;
}
if(is_pressing == true && is_long_detected == false) {
long press_duration = millis() - time_pressed;
if( press_duration > LONG_PRESS_TIME ) {
Serial.println("A long press is detected");
is_long_detected = true;
}
}
// 마지막 상태를 저장합니다
prev_button_state = button_state;
}
사용 방법
Arduino IDE에서 ESP8266을 시작하려면 다음 단계를 따르세요:
- ESP8266을 처음 사용하는 경우 Arduino IDE에서 ESP8266 개발 환경 설정 방법 튜토리얼을 확인하세요.
- 다이어그램에 표시된 대로 구성 요소들을 연결하세요.
- USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
- 컴퓨터에서 Arduino IDE를 열세요.
- 올바른 ESP8266 보드를 선택하세요(예: NodeMCU 1.0 (ESP-12E Module)) 및 해당 COM 포트입니다.
- Arduino IDE를 사용하여 코드를 ESP8266에 업로드하세요.
- 몇 초 기다린 다음 버튼을 눌렀다가 놓으세요.
- 결과를 보려면 시리얼 모니터를 확인하세요.
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
버튼을 누르고 계속 유지하는 동작은 버튼이 놓이지 않았을 때만 감지될 것입니다.
길게 누르기와 짧게 누르기 모두 감지하는 방법
짧게 누르기와 길게 누른 후 놓기
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // 버튼이 연결된 ESP8266 핀
#define SHORT_PRESS_TIME 1000 // 1000 밀리초
#define LONG_PRESS_TIME 1000 // 1000 밀리초
int prev_button_state = LOW; // 입력 핀에서의 이전 상태
int button_state; // 입력 핀에서의 현재 읽기
unsigned long time_pressed = 0;
unsigned long time_released = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// 스위치/버튼의 상태를 읽습니다:
button_state = digitalRead(BUTTON_PIN);
if (prev_button_state == HIGH && button_state == LOW) // 버튼이 눌림
time_pressed = millis();
else if (prev_button_state == LOW && button_state == HIGH) { // 버튼이 놓임
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("짧은 누르기가 감지되었습니다");
if ( press_duration > LONG_PRESS_TIME )
Serial.println("긴 누르기가 감지되었습니다");
}
// 마지막 상태를 저장하세요
prev_button_state = button_state;
}
사용 방법
Arduino IDE에서 ESP8266을 시작하는 방법은 다음과 같은 단계를 따르세요:
- ESP8266을 처음 사용하는 경우 Arduino IDE에서 ESP8266 환경 설정 방법 튜토리얼을 확인하세요.
- 다이어그램에 표시된 대로 구성 요소를 연결하세요.
- USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
- 컴퓨터에서 Arduino IDE를 엽니다.
- 올바른 ESP8266 보드(예: NodeMCU 1.0 (ESP-12E Module))와 해당 COM 포트를 선택하세요.
- Arduino IDE를 사용하여 ESP8266에 코드를 업로드하세요.
- 버튼을 길고 짧게 누르세요.
- 시리얼 모니터에서 결과를 확인하세요.
※ NOTE THAT:
시리얼 모니터는 길게 누를 경우 여러 번의 짧은 누름 감지를 표시할 수 있습니다. 이것은 버튼의 예상되는 동작이며 "채터링 현상"이라고 합니다. 이 문제는 이 튜토리얼의 마지막 부분에서 다룰 예정입니다.
단축키와 장시간 누름 동안 누르기
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // ESP8266 핀에 연결된 버튼
#define SHORT_PRESS_TIME 1000 // 1000 밀리초
#define LONG_PRESS_TIME 1000 // 1000 밀리초
int prev_button_state = LOW; // 입력 핀에서의 이전 상태
int button_state; // 입력 핀에서의 현재 읽기
unsigned long time_pressed = 0;
unsigned long time_released = 0;
bool is_pressing = false;
bool is_long_detected = false;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// 스위치/버튼의 상태 읽기:
button_state = digitalRead(BUTTON_PIN);
if (prev_button_state == HIGH && button_state == LOW) { // 버튼이 눌림
time_pressed = millis();
is_pressing = true;
is_long_detected = false;
} else if (prev_button_state == LOW && button_state == HIGH) { // 버튼이 릴리스됨
is_pressing = false;
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("짧은 누름이 감지됨");
}
if (is_pressing == true && is_long_detected == false) {
long press_duration = millis() - time_pressed;
if ( press_duration > LONG_PRESS_TIME ) {
Serial.println("긴 누름이 감지됨");
is_long_detected = true;
}
}
// 마지막 상태 저장
prev_button_state = button_state;
}
사용 방법
Arduino IDE에서 ESP8266을 시작하려면 다음 단계를 따르세요:
- ESP8266을 처음 사용하는 경우, Arduino IDE에서 ESP8266 환경 설정 방법 튜토리얼을 확인하세요.
- 다이어그램에 표시된 대로 구성 요소를 연결하세요.
- USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
- 컴퓨터에서 Arduino IDE를 엽니다.
- 올바른 ESP8266 보드를 선택하세요. 예를 들어, (NodeMCU 1.0 (ESP-12E Module)) 및 해당 COM 포트입니다.
- Arduino IDE를 사용해 코드를 ESP8266에 업로드하세요.
- 버튼을 짧고 긴 시간 동안 누르세요.
- 시리얼 모니터에서 결과를 확인하세요.
※ NOTE THAT:
시리얼 모니터에는 긴 누름이 발생했을 때 여러 번의 짧은 누름이 감지되는 것처럼 표시될 수 있습니다. 이는 버튼의 예상되는 동작이며 "채터링 현상"이라고 불립니다. 이 문제에 대한 해결책은 이 튜토리얼의 마지막 부분에서 제공될 것입니다.
롱 프레스와 숏 프레스 디바운싱 처리
다양한 애플리케이션에서 버튼에 디바운싱을 구현하는 것이 필수적입니다.
디바운싱은 여러 버튼이 관련되어 있을 때 특히 까다로울 수 있습니다. 초보자들이 더 쉽게 접근할 수 있도록, 우리는 ezButton이라는 라이브러리를 만들었습니다.
아래의 코드에서 이 라이브러리를 사용할 것입니다.
짧은 누름과 긴 누름, 놓은 후 디바운싱 처리
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-button-long-press-short-press
*/
#include <ezButton.h>
#define SHORT_PRESS_TIME 1000 // 1000 밀리초
#define LONG_PRESS_TIME 1000 // 1000 밀리초
ezButton button(D7); // D7 핀에 대한 ezButton 객체 생성
unsigned long time_pressed = 0;
unsigned long time_released = 0;
void setup() {
Serial.begin(9600);
button.setDebounceTime(50); // 디바운스 시간을 50 밀리초로 설정
}
void loop() {
button.loop(); // 먼저 loop() 함수를 호출해야 함
if (button.isPressed())
time_pressed = millis();
if (button.isReleased()) {
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("짧은 누름이 감지되었습니다");
if ( press_duration > LONG_PRESS_TIME )
Serial.println("긴 누름이 감지되었습니다");
}
}
사용 방법
Arduino IDE에서 ESP8266을 시작하려면 다음 단계를 따르세요:
- ESP8266을 처음 사용하는 경우, Arduino IDE에서 ESP8266 환경 설정 방법 튜토리얼을 확인하세요.
- 다이어그램에 표시된 대로 구성 요소를 연결하세요.
- USB 케이블을 사용하여 컴퓨터에 ESP8266 보드를 연결하세요.
- 컴퓨터에서 Arduino IDE를 엽니다.
- 올바른 ESP8266 보드(예: NodeMCU 1.0 (ESP-12E Module))와 해당 COM 포트를 선택하세요.
- EzButton 라이브러리를 설치하려면 방법을 참조하세요.
- Arduino IDE를 사용하여 코드를 ESP8266에 업로드하세요.
- 버튼을 짧게 또는 길게 누르고 있으세요.
- 시리얼 모니터에서 결과를 확인하세요.
누름 동안 디바운싱이 있는 짧은 누름과 긴 누름
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-button-long-press-short-press
*/
#include <ezButton.h>
#define SHORT_PRESS_TIME 1000 // 1000 밀리초
#define LONG_PRESS_TIME 1000 // 1000 밀리초
ezButton button(D7); // D7 핀을 위한 ezButton 객체 생성
unsigned long time_pressed = 0;
unsigned long time_released = 0;
bool is_pressing = false;
bool is_long_detected = false;
void setup() {
Serial.begin(9600);
button.setDebounceTime(50); // 디바운스 시간을 50 밀리초로 설정
}
void loop() {
button.loop(); // 반드시 loop() 함수를 먼저 호출해야 함
if (button.isPressed()) {
time_pressed = millis();
is_pressing = true;
is_long_detected = false;
}
if (button.isReleased()) {
is_pressing = false;
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
}
if (is_pressing == true && is_long_detected == false) {
long press_duration = millis() - time_pressed;
if ( press_duration > LONG_PRESS_TIME ) {
Serial.println("A long press is detected");
is_long_detected = true;
}
}
}
사용 방법
다이어그램에 표시된 대로 구성 요소를 연결하십시오.
USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하십시오.
컴퓨터에서 Arduino IDE를 엽니다.
올바른 ESP8266 보드를 선택하십시오. 예를 들어, (NodeMCU 1.0 (ESP-12E Module))와 해당 COM 포트를 선택하십시오.
ezButton 라이브러리를 설치하십시오. 설치 방법에 대해서는 How To를 참조하십시오.
Arduino IDE를 사용하여 코드를 ESP8266에 업로드하십시오.
버튼을 누르고 있었다가 놓으십시오.
Serial Monitor를 확인하여 결과를 관찰하십시오.
동영상
비디오 제작은 시간이 많이 걸리는 작업입니다. 비디오 튜토리얼이 학습에 도움이 되었다면, YouTube 채널 을 구독하여 알려 주시기 바랍니다. 비디오에 대한 높은 수요가 있다면, 비디오를 만들기 위해 노력하겠습니다.
왜 긴 누름과 짧은 누름이 필요한가요?
버튼의 수를 최소화하기 위해 하나의 버튼을 여러 용도로 사용할 수 있습니다. 예를 들어, 짧게 누르는 것은 작동 모드를 전환하는 데 사용되고, 길게 누르는 것은 장치를 끄는 데 사용될 수 있습니다.
긴 누름은 실수로 누르는 것을 방지하기 위해 사용됩니다. 예를 들어, 몇몇 장치에서는 공장 초기화를 위해 버튼을 사용합니다. 만약 실수로 눌러지면 위험할 수 있습니다. 이를 방지하기 위해, 장치는 공장 초기화가 버튼을 길게 누를 때만 활성화되도록 설계되었습니다(예: 5초 이상).