ESP32 - 다중 버튼 | ESP32 - Multiple Button

이 튜토리얼은 delay() 함수에 의존하지 않고 여러 버튼을 동시에 사용하도록 ESP32를 프로그래밍하는 방법을 안내합니다. 이 튜토리얼은 두 가지 방법으로 코드를 제공합니다:

우리는 네 개의 버튼으로 시연할 것입니다. 그러나 코드를 두 개의 버튼, 세 개의 버튼, 다섯 개의 버튼 또는 그 이상의 버튼에 쉽게 조정할 수 있습니다.

준비물

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

버튼에 대하여

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

선연결

ESP32 multiple buttons Wiring Diagram

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

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

ESP32 코드 - 디바운스가 있는 여러 버튼

여러 개의 버튼을 다룰 때 특정 상홍에서 복잡성이 생길 수 있습니다:

  • 버튼 디바운싱이 필요한 애플리케이션 (버튼에 디바운스가 필요한 이유에 대해서는 여기를 참조하세요)
  • 상태 변경 (눌림/해제)을 감지해야 하는 애플리케이션

다행히도, ezButton library는 디바운스와 버튼 이벤트를 내부적으로 처리함으로써 이 과정을 단순화합니다. 이는 라이브러리를 사용할 때 타임스탬프와 변수 관리로부터 사용자를 해방시킵니다. 게다가 버튼 배열을 사용하면 코드의 명확성과 간결성이 향상될 수 있습니다.

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-multiple-button */ #include <ezButton.h> #define BUTTON_PIN_1 25 // ESP32 핀 GPIO25가 버튼 1에 연결됨 #define BUTTON_PIN_2 26 // ESP32 핀 GPIO26가 버튼 2에 연결됨 #define BUTTON_PIN_3 27 // ESP32 핀 GPIO27가 버튼 3에 연결됨 #define BUTTON_PIN_4 14 // ESP32 핀 GPIO14가 버튼 4에 연결됨 ezButton button1(BUTTON_PIN_1); // 버튼 1을 위한 ezButton 객체 생성 ezButton button2(BUTTON_PIN_2); // 버튼 2을 위한 ezButton 객체 생성 ezButton button3(BUTTON_PIN_3); // 버튼 3을 위한 ezButton 객체 생성 ezButton button4(BUTTON_PIN_4); // 버튼 4을 위한 ezButton 객체 생성 void setup() { Serial.begin(9600); button1.setDebounceTime(100); // 디바운스 시간을 100 밀리초로 설정 button2.setDebounceTime(100); // 디바운스 시간을 100 밀리초로 설정 button3.setDebounceTime(100); // 디바운스 시간을 100 밀리초로 설정 button4.setDebounceTime(100); // 디바운스 시간을 100 밀리초로 설정 } void loop() { button1.loop(); // 반드시 loop() 함수를 먼저 호출해야 함 button2.loop(); // 반드시 loop() 함수를 먼저 호출해야 함 button3.loop(); // 반드시 loop() 함수를 먼저 호출해야 함 button4.loop(); // 반드시 loop() 함수를 먼저 호출해야 함 // 디바운스 이후의 버튼 상태 가져오기 int button1_state = button1.getState(); // 디바운스 후의 상태 int button2_state = button2.getState(); // 디바운스 후의 상태 int button3_state = button3.getState(); // 디바운스 후의 상태 int button4_state = button4.getState(); // 디바운스 후의 상태 /* Serial.print("The button 1 state: "); Serial.println(button1_state); Serial.print("The button 2 state: "); Serial.println(button2_state); Serial.print("The button 3 state: "); Serial.println(button3_state); Serial.print("The button 4 state: "); Serial.println(button4_state); */ if (button1.isPressed()) Serial.println("The button 1 is pressed"); if (button1.isReleased()) Serial.println("The button 1 is released"); if (button2.isPressed()) Serial.println("The button 2 is pressed"); if (button2.isReleased()) Serial.println("The button 2 is released"); if (button3.isPressed()) Serial.println("The button 3 is pressed"); if (button3.isReleased()) Serial.println("The button 3 is released"); if (button4.isPressed()) Serial.println("The button 4 is pressed"); if (button4.isReleased()) Serial.println("The button 4 is released"); }

사용 방법

  • ESP32를 처음 사용한다면, Arduino IDE에서 ESP32 개발 환경 설정 방법을 참조하세요.
  • 위 이미지와 같이 배선하세요.
  • ESP32 보드를 PC에 마이크로 USB 케이블을 사용해 연결하세요.
  • PC에서 Arduino IDE를 열어주세요.
  • 올바른 ESP32 보드(예: ESP32 Dev 모듈)와 COM 포트를 선택하세요.
  • 위 이미지와 같이 배선하세요.
  • ESP32 보드를 PC에 USB 케이블을 사용해 연결하세요.
  • PC에서 Arduino IDE를 열어주세요.
  • 올바른 ESP32 보드(예: ESP32)와 COM 포트를 선택하세요.
  • Arduino IDE의 왼쪽 바에 있는 Libraries 아이콘을 클릭하세요.
  • “ezButton”을 검색하고, ESP32GetStarted에 의한 버튼 라이브러리를 찾으세요.
  • EzButton 라이브러리를 설치하기 위해 Install 버튼을 클릭하세요.
ESP32 button library
  • 위의 코드를 복사하여 아두이노 IDE에 붙여넣으세요.
  • 아두이노 IDE에서 Upload 버튼을 클릭하여 코드를 ESP32 보드에 컴파일하고 업로드하세요.
How to upload ESP32 code on Arduino IDE
  • Arduino IDE에서 시리얼 모니터 열기
  • 버튼을 하나씩 눌렀다 놓기
COM6
Send
The button 1 is pressed The button 1 is released The button 2 is pressed The button 2 is released The button 3 is pressed The button 3 is released The button 4 is pressed The button 4 is released
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  

ESP32 코드 - 배열을 사용한 다양한 버튼들

제공된 코드를 버튼 배열을 사용하여 개선할 수 있습니다. 다음 코드는 이 배열이 버튼 객체를 어떻게 관리하는지를 보여줍니다.

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-multiple-button */ #include <ezButton.h> #define BUTTON_NUM 4 // 버튼의 수 #define BUTTON_PIN_1 25 // 버튼 1에 연결된 ESP32 핀 GPIO25 #define BUTTON_PIN_2 26 // 버튼 2에 연결된 ESP32 핀 GPIO26 #define BUTTON_PIN_3 27 // 버튼 3에 연결된 ESP32 핀 GPIO27 #define BUTTON_PIN_4 14 // 버튼 4에 연결된 ESP32 핀 GPIO14 ezButton buttonArray[] = { ezButton(BUTTON_PIN_1), ezButton(BUTTON_PIN_2), ezButton(BUTTON_PIN_3), ezButton(BUTTON_PIN_4) }; void setup() { Serial.begin(9600); for (byte i = 0; i < BUTTON_NUM; i++) { buttonArray[i].setDebounceTime(100); // 100밀리초로 디바운스 시간 설정 } } void loop() { for (byte i = 0; i < BUTTON_NUM; i++) buttonArray[i].loop(); // loop() 함수를 먼저 호출해야 함 for (byte i = 0; i < BUTTON_NUM; i++) { // 디바운스 후 버튼 상태 가져오기 int button_state = buttonArray[i].getState(); // 디바운스 후의 상태 /* Serial.print("The button "); Serial.print(i + 1); Serial.print(": "); Serial.println(button_state); */ if (buttonArray[i].isPressed()) { Serial.print("The button "); Serial.print(i + 1); Serial.println(" is pressed"); } if (buttonArray[i].isReleased()) { Serial.print("The button "); Serial.print(i + 1); Serial.println(" is released"); } } }

동영상

비디오 제작은 시간이 많이 걸리는 작업입니다. 비디오 튜토리얼이 학습에 도움이 되었다면, 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!