ESP32 - 시리얼 플로터 | ESP32 - Serial Plotter

이 튜토리얼은 ESP32에서 Arduino IDE를 사용하여 시리얼 플로터를 사용하는 방법을 안내합니다.

준비물

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

시리얼 플로터에 대하여

시리얼 플로터는 아두이노 IDE에서 ESP32로부터 시리얼을 통해 데이터를 수신하고 그래프에 그려줄 수 있는 도구입니다. 시리얼 플로터는 여러 센서의 데이터를 같은 화면에 표시할 수 있습니다.

ESP32로부터 데이터를 받으려면, ESP32와 PC 사이에 마이크로 USB 케이블을 사용해야 합니다.

Serial Plotter는 두 가지 구성 요소로 구성되어 있습니다.

  • 선택 상자: 시리얼 보드레이트를 선택하는 데 사용됩니다.
  • 그래프: 시각화된 데이터를 보여주는 화면입니다.
    • X축: 시간을 나타냅니다. 500개의 점이 있습니다. 각 점 사이의 시간은 연속된 Serial.println() 함수 호출 사이의 시간입니다.
    • Y축: ESP32에서 받은 데이터 값을 나타냅니다. 데이터의 값이 증가하거나 감소할 때 Y축은 자동으로 스케일이 조정됩니다.

시리얼 플로터 여는 방법

아두이노 IDE에서 아래와 같이 시리얼 플로터를 클릭하세요:

how to open serial plotter

그래프에 단일 선을 그리는 방법

그래프에 단일 선을 그리려면, 데이터를 “\r\n” 문자로 종료하여 보내기만 하면 됩니다. Serial.println() 함수를 사용할 수 있습니다.

Serial.println(variable);

※ NOTE THAT:

Serial.println()은 데이터에 자동으로 “\r\n” 문자를 추가합니다.

예제 코드

아래의 ESP32 예제 코드는 아날로그 입력 핀의 값을 읽고 시리얼 플로터로 보냅니다.

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-serial-plotter */ void setup() { Serial.begin(9600); } void loop() { int variable_1 = analogRead(A0); Serial.println(variable_1); delay(100); }

사용 방법

  • ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정 방법을 참조하세요.
  • 위의 코드를 복사하여 Arduino IDE에 붙여넣으세요.
  • Arduino IDE에서 Upload 버튼을 클릭하여 ESP32 보드에 코드를 컴파일하고 업로드하세요.
  • 시리얼 플로터를 엽니다.
  • 보레이트 9600을 선택하세요.
  • 시리얼 플로터에서 그래프를 확인하세요.
serial plotter example single line

그래프에 여러 선 그리는 방법

여러 변수를 플롯하려면, 변수들을 “\t” 또는 " " 문자로 서로 분리해야 합니다. 마지막 값은 반드시 “\r\n” 문자로 종료되어야 합니다.

자세히:

첫 번째 변수

Serial.print(variable_first); // 첫 번째 변수 출력

중간 변수들

cpp Serial.print("\t"); // 또는 Serial.print(" ") Serial.print(variable_nth);

마지막 변수

Serial.print("\t"); // 또는 Serial.print(" ") Serial.println(variable_last);

예제 코드

아래의 ESP32 예제 코드는 4개의 아날로그 입력 핀에서 값들을 읽어내어 시리얼 플로터로 보냅니다.

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-serial-plotter */ void setup() { Serial.begin(9600); } void loop() { int variable_1 = analogRead(A0); int variable_2 = analogRead(A1); int variable_3 = analogRead(A2); int variable_4 = analogRead(A3); Serial.print(variable_1); Serial.print(" "); // 두 값 사이에 탭 '\t' 또는 공백 ' ' 문자가 출력됩니다. Serial.print(variable_2); Serial.print(" "); // 두 값 사이에 탭 '\t' 또는 공백 ' ' 문자가 출력됩니다. Serial.print(variable_3); Serial.print(" "); // 두 값 사이에 탭 '\t' 또는 공백 ' ' 문자가 출력됩니다. Serial.println(variable_4); // 마지막 값은 캐리지 리턴 및 개행 문자로 종료됩니다. delay(100); }

Serial Monitor의 결과:

serial plotter multiple lines

3개의 사인 파형 예시

아래 ESP32 예제 코드는 세 가지 사인 파형의 값을 직렬 플로터에 출력합니다.

/* * 이 ESP32 코드는 newbiely.kr 에서 개발되었습니다 * 이 ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/esp32/esp32-serial-plotter */ void setup() { Serial.begin(9600); } void loop() { for (int i = 0; i < 360; i += 5) { float sine_1 = 1 * sin(i * M_PI / 180); float sine_2 = 2 * sin((i + 90) * M_PI / 180); float sine_3 = 5 * sin((i + 180) * M_PI / 180); Serial.print(sine_1); Serial.print("\t"); Serial.print(sine_2); Serial.print("\t"); Serial.println(sine_3); delay(100); } }

Serial Plotter의 결과:

serial plotter sine wave

웹에서 이 플로터를 원한다면, 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!